build_deck.js

const pptxgen = require("pptxgenjs");
const React = require("react");
const ReactDOMServer = require("react-dom/server");
const sharp = require("sharp");
const {
  FaGithub, FaCodeBranch, FaUserPlus, FaCog, FaPlus, FaSave, FaCloudUploadAlt,
  FaProjectDiagram, FaCheckCircle, FaExclamationTriangle, FaBug, FaRobot,
  FaTerminal, FaArrowRight, FaLaptopCode, FaUsers, FaTags, FaUndo, FaSitemap,
  FaBook, FaGraduationCap, FaKey, FaFolderOpen
} = require("react-icons/fa");

// ---------- palette: "Octocat Charcoal" ----------
const INK   = "1B1F23"; // GitHub near-black
const PANEL = "24292F"; // dark panel
const SLATE = "57606A"; // muted slate
const CLOUD = "F6F8FA"; // light bg
const LINE  = "D0D7DE"; // borders
const GREEN = "2DA44E"; // GitHub green (success / commit)
const BLUE  = "0969DA"; // GitHub blue (links / local)
const PURPLE= "8250DF"; // PR purple
const AMBER = "BF8700"; // warning/highlight
const RED   = "CF222E"; // danger
const WHITE = "FFFFFF";

const HFONT = "Trebuchet MS";
const BFONT = "Calibri";

async function icon(IconComponent, color = "#FFFFFF", size = 256) {
  const svg = ReactDOMServer.renderToStaticMarkup(
    React.createElement(IconComponent, { color, size: String(size) })
  );
  const png = await sharp(Buffer.from(svg)).png().toBuffer();
  return "image/png;base64," + png.toString("base64");
}
const hex = (c) => "#" + c;

const pres = new pptxgen();
pres.layout = "LAYOUT_WIDE"; // 13.3 x 7.5
pres.author = "Tertiary Infotech";
pres.title = "GitHub: From Basic to Advanced";
const W = 13.33, H = 7.5;

// shadow factory (never reuse objects)
const sh = () => ({ type: "outer", color: "000000", blur: 8, offset: 3, angle: 135, opacity: 0.18 });

// ---------- reusable helpers ----------
function footer(slide, n) {
  slide.addText("GitHub: Basic → Advanced  •  Hands-on Lab", {
    x: 0.5, y: H - 0.45, w: 8, h: 0.3, fontSize: 9, color: SLATE, fontFace: BFONT, align: "left", margin: 0
  });
  slide.addText(`${n}`, {
    x: W - 1.0, y: H - 0.45, w: 0.5, h: 0.3, fontSize: 9, color: SLATE, fontFace: BFONT, align: "right", margin: 0
  });
}
function header(slide, kicker, title, accent = GREEN) {
  slide.background = { color: CLOUD };
  // top bar accent block on left
  slide.addShape(pres.shapes.RECTANGLE, { x: 0, y: 0, w: 0.22, h: H, fill: { color: accent } });
  slide.addText(kicker.toUpperCase(), {
    x: 0.6, y: 0.42, w: 11, h: 0.3, fontSize: 12, bold: true, color: accent, fontFace: HFONT, charSpacing: 3, margin: 0
  });
  slide.addText(title, {
    x: 0.58, y: 0.72, w: 12.2, h: 0.85, fontSize: 32, bold: true, color: INK, fontFace: HFONT, margin: 0
  });
}
// card with icon-in-circle, header, body
async function iconCard(slide, opt) {
  const { x, y, w, h, IconC, circle, title, body, bg = WHITE } = opt;
  slide.addShape(pres.shapes.ROUNDED_RECTANGLE, {
    x, y, w, h, rectRadius: 0.08, fill: { color: bg }, line: { color: LINE, width: 1 }, shadow: sh()
  });
  slide.addShape(pres.shapes.OVAL, { x: x + 0.28, y: y + 0.28, w: 0.62, h: 0.62, fill: { color: circle } });
  slide.addImage({ data: await icon(IconC, hex(WHITE), 256), x: x + 0.43, y: y + 0.43, w: 0.32, h: 0.32 });
  slide.addText(title, { x: x + 1.05, y: y + 0.26, w: w - 1.25, h: 0.6, fontSize: 16, bold: true, color: INK, fontFace: HFONT, valign: "middle", margin: 0 });
  if (body) slide.addText(body, { x: x + 0.3, y: y + 1.0, w: w - 0.6, h: h - 1.15, fontSize: 12.5, color: SLATE, fontFace: BFONT, valign: "top", margin: 0, lineSpacingMultiple: 1.05 });
}
// terminal code block
function codeBlock(slide, x, y, w, h, lines, title = "bash") {
  slide.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y, w, h, rectRadius: 0.06, fill: { color: INK }, line: { color: PANEL, width: 1 }, shadow: sh() });
  // window dots
  ["FF5F56", "FFBD2E", "27C93F"].forEach((c, i) =>
    slide.addShape(pres.shapes.OVAL, { x: x + 0.22 + i * 0.22, y: y + 0.18, w: 0.12, h: 0.12, fill: { color: c } }));
  slide.addText(title, { x: x + 0.9, y: y + 0.1, w: w - 1, h: 0.28, fontSize: 10, italic: true, color: "8B949E", fontFace: "Consolas", margin: 0 });
  slide.addText(lines.map((l, i) => ({
    text: l.t,
    options: { color: l.c || "E6EDF3", bold: !!l.b, breakLine: true, fontSize: l.s || 13 }
  })), { x: x + 0.3, y: y + 0.5, w: w - 0.5, h: h - 0.65, fontFace: "Consolas", valign: "top", margin: 0, lineSpacingMultiple: 1.12 });
}
// pill / chip
function chip(slide, x, y, w, text, color, fontSize = 12) {
  slide.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y, w, h: 0.42, rectRadius: 0.21, fill: { color }, });
  slide.addText(text, { x, y, w, h: 0.42, fontSize, bold: true, color: WHITE, align: "center", valign: "middle", fontFace: HFONT, margin: 0 });
}
// evenly spaced chip+arrow row that fits between x0 and x1
async function chipRow(slide, items, y, x0 = 0.6, x1 = 12.75, fontSize = 11) {
  const n = items.length;
  const gap = 0.5;                       // space for each arrow
  const cw = (x1 - x0 - (n - 1) * gap) / n;
  let x = x0;
  for (let i = 0; i < n; i++) {
    chip(slide, x, y, cw, items[i].t, items[i].c, fontSize);
    x += cw;
    if (i < n - 1) { await flowArrow(slide, x + (gap - 0.4) / 2, y + 0.01); x += gap; }
  }
}
// arrow between flow boxes
async function flowArrow(slide, x, y) {
  slide.addImage({ data: await icon(FaArrowRight, hex(SLATE), 256), x, y, w: 0.4, h: 0.4 });
}

const slides = [];

// ============ SLIDE 1 — TITLE ============
slides.push(async () => {
  const s = pres.addSlide();
  s.background = { color: INK };
  // subtle motif: big faint branch icon right
  s.addImage({ data: await icon(FaCodeBranch, "#2D333B", 1024), x: 8.7, y: 1.2, w: 5.2, h: 5.2 });
  s.addShape(pres.shapes.RECTANGLE, { x: 0, y: 0, w: 0.3, h: H, fill: { color: GREEN } });
  s.addImage({ data: await icon(FaGithub, hex(WHITE), 512), x: 0.85, y: 1.5, w: 1.3, h: 1.3 });
  s.addText("GitHub", { x: 0.8, y: 2.95, w: 11, h: 1.1, fontSize: 60, bold: true, color: WHITE, fontFace: HFONT, margin: 0 });
  s.addText("From Basic to Advanced", { x: 0.85, y: 4.05, w: 11, h: 0.8, fontSize: 30, color: "ADBAC7", fontFace: HFONT, margin: 0 });
  s.addText("A hands-on lab — account setup • add & commit • branches • pull requests • CI/CD", {
    x: 0.85, y: 4.95, w: 11, h: 0.5, fontSize: 15, color: GREEN, fontFace: BFONT, margin: 0 });
  // bottom meta row
  chip(s, 0.85, 6.0, 2.2, "~2.5 HOURS", PANEL);
  chip(s, 3.2, 6.0, 2.6, "BEGINNER → ADV", PANEL);
  chip(s, 6.1, 6.0, 2.9, "HANDS-ON LAB", GREEN);
});

// ============ SLIDE 2 — AGENDA / JOURNEY ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Roadmap", "Your Learning Journey", GREEN);
  const items = [
    { IconC: FaUserPlus, c: BLUE,   t: "1 · Open a GitHub Account" },
    { IconC: FaCog,      c: SLATE,  t: "2 · Install & Configure Git" },
    { IconC: FaSave,     c: GREEN,  t: "3 · git add + git commit ⭐" },
    { IconC: FaCloudUploadAlt, c: BLUE, t: "4 · git push to GitHub" },
    { IconC: FaCodeBranch, c: PURPLE, t: "5 · Branch, Merge & Tree" },
    { IconC: FaUsers,    c: PURPLE, t: "6 · Pull Requests & Forks" },
    { IconC: FaUndo,     c: AMBER,  t: "7 · Rebase, Stash, Undo" },
    { IconC: FaBug,      c: RED,    t: "8 · GitHub Issues" },
    { IconC: FaRobot,    c: GREEN,  t: "9 · GitHub Actions (CI/CD)" },
    { IconC: FaGraduationCap, c: INK, t: "🎯 Final Project" },
  ];
  const cols = 2, cw = 5.9, chh = 0.92, gx = 0.6, gy = 1.75, padx = 0.35, pady = 0.18;
  for (let i = 0; i < items.length; i++) {
    const col = i % cols, row = Math.floor(i / cols);
    const x = 0.6 + col * (cw + padx), y = gy + row * (chh + pady);
    const it = items[i];
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x, y, w: cw, h: chh, rectRadius: 0.07, fill: { color: WHITE }, line: { color: LINE, width: 1 }, shadow: sh() });
    s.addShape(pres.shapes.OVAL, { x: x + 0.2, y: y + 0.2, w: 0.52, h: 0.52, fill: { color: it.c } });
    s.addImage({ data: await icon(it.IconC, hex(WHITE), 256), x: x + 0.33, y: y + 0.33, w: 0.26, h: 0.26 });
    s.addText(it.t, { x: x + 0.95, y, w: cw - 1.1, h: chh, fontSize: 15, bold: true, color: INK, fontFace: HFONT, valign: "middle", margin: 0 });
  }
  footer(s, 2);
});

// ============ SLIDE 3 — GIT vs GITHUB ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 0", "Git vs GitHub — What's the Difference?", BLUE);
  await iconCard(s, { x: 0.6, y: 1.8, w: 5.9, h: 2.0, IconC: FaLaptopCode, circle: BLUE,
    title: "Git", body: "A version-control system on YOUR computer. Tracks file changes over time. Works offline. The engine." });
  await iconCard(s, { x: 6.85, y: 1.8, w: 5.9, h: 2.0, IconC: FaGithub, circle: PANEL,
    title: "GitHub", body: "A cloud platform that HOSTS Git repos. Adds collaboration: pull requests, issues, teams. The garage." });
  // analogy banner
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.6, y: 4.05, w: 12.15, h: 1.0, rectRadius: 0.08, fill: { color: INK }, shadow: sh() });
  s.addText([
    { text: "Analogy:  ", options: { bold: true, color: GREEN } },
    { text: "Git is the ", options: { color: "E6EDF3" } },
    { text: "engine", options: { bold: true, color: WHITE } },
    { text: ";  GitHub is the ", options: { color: "E6EDF3" } },
    { text: "garage", options: { bold: true, color: WHITE } },
    { text: " where everyone parks and shares their cars.", options: { color: "E6EDF3" } },
  ], { x: 1.0, y: 4.05, w: 11.5, h: 1.0, fontSize: 17, fontFace: BFONT, valign: "middle", margin: 0 });
  // local -> cloud mini flow
  chip(s, 0.6, 5.45, 3.4, "💻  LOCAL  (Git)", BLUE);
  await flowArrow(s, 4.2, 5.5);
  chip(s, 4.85, 5.45, 3.4, "git push  ⟶  pull", SLATE);
  await flowArrow(s, 8.45, 5.5);
  chip(s, 9.1, 5.45, 3.4, "☁️  GITHUB  (Cloud)", GREEN);
  footer(s, 3);
});

// ============ SLIDE 4 — OPEN ACCOUNT ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 1", "Open a GitHub Account", BLUE);
  const steps = [
    "Go to github.com → click Sign up",
    "Enter email, strong password, username",
    "Solve puzzle → Create account",
    "Enter the launch code from your email",
    "Choose the Free plan",
    "Enable Two-Factor Auth (2FA) 🔐",
  ];
  for (let i = 0; i < steps.length; i++) {
    const y = 1.85 + i * 0.74;
    s.addShape(pres.shapes.OVAL, { x: 0.7, y, w: 0.5, h: 0.5, fill: { color: i === 5 ? GREEN : BLUE } });
    s.addText(`${i + 1}`, { x: 0.7, y, w: 0.5, h: 0.5, fontSize: 16, bold: true, color: WHITE, align: "center", valign: "middle", fontFace: HFONT, margin: 0 });
    s.addText(steps[i], { x: 1.4, y, w: 5.7, h: 0.5, fontSize: 15, color: INK, fontFace: BFONT, valign: "middle", margin: 0 });
  }
  // right checkpoint card
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 7.6, y: 1.85, w: 5.15, h: 3.6, rectRadius: 0.08, fill: { color: WHITE }, line: { color: GREEN, width: 1.5 }, shadow: sh() });
  s.addImage({ data: await icon(FaCheckCircle, hex(GREEN), 256), x: 7.9, y: 2.1, w: 0.45, h: 0.45 });
  s.addText("Checkpoint 1", { x: 8.45, y: 2.1, w: 4, h: 0.45, fontSize: 17, bold: true, color: GREEN, fontFace: HFONT, valign: "middle", margin: 0 });
  s.addText([
    { text: "You can log in at github.com", options: { bullet: true, breakLine: true } },
    { text: "Profile visible at /YOUR-USERNAME", options: { bullet: true, breakLine: true } },
    { text: "Email verified (no warning banner)", options: { bullet: true, breakLine: true } },
    { text: "2FA enabled in Settings", options: { bullet: true } },
  ], { x: 7.95, y: 2.75, w: 4.6, h: 2.5, fontSize: 14.5, color: INK, fontFace: BFONT, valign: "top", margin: 0, paraSpaceAfter: 10 });
  footer(s, 4);
});

// ============ SLIDE 5 — INSTALL & CONFIG ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 2", "Install & Configure Git", SLATE);
  s.addText("Install per your OS, then set your identity once — every commit records who made it.", { x: 0.6, y: 1.62, w: 12, h: 0.4, fontSize: 14, color: SLATE, fontFace: BFONT, margin: 0 });
  // OS chips
  chip(s, 0.6, 2.15, 3.9, "Windows · git-scm.com", PANEL);
  chip(s, 4.7, 2.15, 3.9, "macOS · brew install git", PANEL);
  chip(s, 8.8, 2.15, 3.9, "Linux · apt install git", PANEL);
  codeBlock(s, 0.6, 2.85, 7.6, 2.95, [
    { t: "# verify the install", c: "8B949E" },
    { t: "$ git --version", b: true },
    { t: "git version 2.45.0", c: "7EE787" },
    { t: "" },
    { t: "# set your identity (once)", c: "8B949E" },
    { t: "$ git config --global user.name \"Your Name\"", b: true },
    { t: "$ git config --global user.email \"you@example.com\"", b: true },
    { t: "$ git config --global init.defaultBranch main", b: true },
  ]);
  // warning card
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 8.55, y: 2.85, w: 4.2, h: 2.95, rectRadius: 0.08, fill: { color: "FFF8E5" }, line: { color: AMBER, width: 1.5 }, shadow: sh() });
  s.addImage({ data: await icon(FaExclamationTriangle, hex(AMBER), 256), x: 8.85, y: 3.1, w: 0.45, h: 0.45 });
  s.addText("Important", { x: 9.4, y: 3.1, w: 3, h: 0.45, fontSize: 16, bold: true, color: AMBER, fontFace: HFONT, valign: "middle", margin: 0 });
  s.addText("Use the SAME email as your GitHub account — so your commits link to your profile.\n\nCheck everything with:\ngit config --list", { x: 8.85, y: 3.7, w: 3.65, h: 2.0, fontSize: 13.5, color: INK, fontFace: BFONT, valign: "top", margin: 0, lineSpacingMultiple: 1.05 });
  footer(s, 5);
});

// ============ SLIDE 6 — THREE AREAS CONCEPT ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 3 · Core Concept", "The Three Areas of Git", GREEN);
  const boxes = [
    { x: 0.7,  IconC: FaFolderOpen, c: BLUE,  t: "Working Directory", d: "The files you edit" },
    { x: 5.0,  IconC: FaPlus,       c: AMBER, t: "Staging Area", d: "Changes marked for next commit" },
    { x: 9.3,  IconC: FaSave,       c: GREEN, t: "Repository", d: "Permanent snapshots" },
  ];
  for (const b of boxes) {
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: b.x, y: 2.3, w: 3.3, h: 2.4, rectRadius: 0.1, fill: { color: WHITE }, line: { color: LINE, width: 1 }, shadow: sh() });
    s.addShape(pres.shapes.OVAL, { x: b.x + 1.25, y: 2.55, w: 0.8, h: 0.8, fill: { color: b.c } });
    s.addImage({ data: await icon(b.IconC, hex(WHITE), 256), x: b.x + 1.46, y: 2.76, w: 0.38, h: 0.38 });
    s.addText(b.t, { x: b.x, y: 3.5, w: 3.3, h: 0.5, fontSize: 17, bold: true, color: INK, align: "center", fontFace: HFONT, margin: 0 });
    s.addText(b.d, { x: b.x, y: 4.0, w: 3.3, h: 0.6, fontSize: 13, color: SLATE, align: "center", fontFace: BFONT, margin: 0 });
  }
  // arrows + labels
  await flowArrow(s, 4.15, 3.3); s.addText("git add", { x: 3.8, y: 3.78, w: 1.1, h: 0.3, fontSize: 12, bold: true, color: AMBER, align: "center", fontFace: "Consolas", margin: 0 });
  await flowArrow(s, 8.45, 3.3); s.addText("git commit", { x: 7.95, y: 3.78, w: 1.4, h: 0.3, fontSize: 12, bold: true, color: GREEN, align: "center", fontFace: "Consolas", margin: 0 });
  // push note
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.7, y: 5.15, w: 11.9, h: 0.85, rectRadius: 0.08, fill: { color: INK } });
  s.addText([
    { text: "Then  ", options: { color: "E6EDF3" } },
    { text: "git push", options: { bold: true, color: "7EE787", fontFace: "Consolas" } },
    { text: "  sends your committed snapshots up to GitHub ☁️", options: { color: "E6EDF3" } },
  ], { x: 1.0, y: 5.15, w: 11.3, h: 0.85, fontSize: 16, fontFace: BFONT, valign: "middle", margin: 0 });
  footer(s, 6);
});

// ============ SLIDE 7 — ADD & COMMIT WALKTHROUGH ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 3 · Hands-On ⭐", "git add  →  git commit", GREEN);
  codeBlock(s, 0.6, 1.75, 7.2, 4.05, [
    { t: "$ mkdir my-first-repo && cd my-first-repo", b: true },
    { t: "$ git init", b: true },
    { t: "Initialized empty Git repository", c: "8B949E" },
    { t: "" },
    { t: "$ echo \"# My First Repo\" > README.md", b: true },
    { t: "$ git status", b: true },
    { t: "Untracked files:  README.md", c: "FF7B72" },
    { t: "" },
    { t: "$ git add README.md", b: true, c: "7EE787" },
    { t: "$ git commit -m \"Add README\"", b: true, c: "7EE787" },
    { t: "[main 1a2b3c] Add README", c: "7EE787" },
    { t: "$ git log --oneline", b: true },
  ], "bash — the core loop");
  // right: state legend
  s.addText("File states", { x: 8.1, y: 1.8, w: 4.6, h: 0.4, fontSize: 16, bold: true, color: INK, fontFace: HFONT, margin: 0 });
  const states = [
    { c: RED,   t: "Untracked / Modified", d: "edited, not staged" },
    { c: AMBER, t: "Staged (git add)", d: "ready for commit" },
    { c: GREEN, t: "Committed (git commit)", d: "snapshot saved 📸" },
  ];
  for (let i = 0; i < states.length; i++) {
    const y = 2.35 + i * 1.1;
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 8.1, y, w: 4.65, h: 0.95, rectRadius: 0.07, fill: { color: WHITE }, line: { color: LINE, width: 1 }, shadow: sh() });
    s.addShape(pres.shapes.RECTANGLE, { x: 8.1, y, w: 0.16, h: 0.95, fill: { color: states[i].c } });
    s.addText(states[i].t, { x: 8.4, y: y + 0.12, w: 4.2, h: 0.4, fontSize: 14.5, bold: true, color: INK, fontFace: HFONT, margin: 0 });
    s.addText(states[i].d, { x: 8.4, y: y + 0.5, w: 4.2, h: 0.35, fontSize: 12.5, color: SLATE, fontFace: BFONT, margin: 0 });
  }
  s.addText("💡 Edit a file AFTER git add? You must add it again — staging is a snapshot of that moment.", { x: 0.6, y: 5.95, w: 12, h: 0.4, fontSize: 13, italic: true, color: AMBER, fontFace: BFONT, margin: 0 });
  footer(s, 7);
});

// ============ SLIDE 8 — PUSH TO GITHUB ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 4", "Connect Local to GitHub — git push", BLUE);
  s.addText("Create an EMPTY repo on GitHub (no README), then link your local repo and push.", { x: 0.6, y: 1.62, w: 12, h: 0.4, fontSize: 14, color: SLATE, fontFace: BFONT, margin: 0 });
  codeBlock(s, 0.6, 2.15, 7.5, 2.9, [
    { t: "$ git remote add origin \\", b: true },
    { t: "    https://github.com/USER/my-first-repo.git", b: true },
    { t: "$ git branch -M main", b: true },
    { t: "$ git push -u origin main", b: true, c: "7EE787" },
    { t: "Enumerating objects... done.", c: "8B949E" },
    { t: "To github.com/USER/my-first-repo.git", c: "7EE787" },
  ]);
  await iconCard(s, { x: 8.35, y: 2.15, w: 4.4, h: 1.5, IconC: FaKey, circle: AMBER,
    title: "Authenticate", body: "Use a Personal Access Token (PAT) as your password — or run gh auth login." });
  await iconCard(s, { x: 8.35, y: 3.8, w: 4.4, h: 1.65, IconC: FaCheckCircle, circle: GREEN,
    title: "Checkpoint 4", body: "Refresh your GitHub repo page — files & commits now appear online." });
  // mini flow
  chip(s, 0.6, 5.5, 2.8, "add → commit", GREEN);
  await flowArrow(s, 3.55, 5.55);
  chip(s, 4.15, 5.5, 2.8, "git push", BLUE);
  await flowArrow(s, 7.1, 5.55);
  chip(s, 7.7, 5.5, 4.0, "☁️ visible on GitHub", PANEL);
  footer(s, 8);
});

// ============ SLIDE 9 — BRANCH / MERGE / TREE ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 5", "Branch, Merge & the Commit Tree", PURPLE);
  codeBlock(s, 0.6, 1.8, 6.6, 3.0, [
    { t: "$ git switch -c feature-login", b: true, c: "D2A8FF" },
    { t: "# ...edit, add, commit...", c: "8B949E" },
    { t: "$ git switch main", b: true },
    { t: "$ git merge feature-login", b: true, c: "7EE787" },
    { t: "$ git branch -d feature-login", b: true },
    { t: "" },
    { t: "$ git log --oneline --graph --all", b: true },
  ], "branching");
  // tree visual on right
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 7.45, y: 1.8, w: 5.3, h: 3.0, rectRadius: 0.08, fill: { color: INK }, shadow: sh() });
  s.addText("the “git tree”", { x: 7.7, y: 1.95, w: 4, h: 0.3, fontSize: 11, italic: true, color: "8B949E", fontFace: "Consolas", margin: 0 });
  s.addText([
    { text: "*  a1b2c3 (main) Merge feature-login", options: { color: "7EE787", breakLine: true } },
    { text: "|\\", options: { color: "E6EDF3", breakLine: true } },
    { text: "| *  9f8e7d (feature-login) Add login", options: { color: "D2A8FF", breakLine: true } },
    { text: "|/", options: { color: "E6EDF3", breakLine: true } },
    { text: "*  4c5b6a  Add README", options: { color: "E6EDF3" } },
  ], { x: 7.75, y: 2.45, w: 4.9, h: 2.2, fontSize: 13.5, fontFace: "Consolas", valign: "top", margin: 0, lineSpacingMultiple: 1.2 });
  // tip
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.6, y: 5.1, w: 12.15, h: 0.9, rectRadius: 0.08, fill: { color: "F3EEFB" }, line: { color: PURPLE, width: 1 } });
  s.addText([
    { text: "Pro tip:  ", options: { bold: true, color: PURPLE } },
    { text: "make a permanent alias →  ", options: { color: INK } },
    { text: "git config --global alias.tree \"log --oneline --graph --all\"", options: { fontFace: "Consolas", bold: true, color: INK } },
  ], { x: 0.95, y: 5.1, w: 11.6, h: 0.9, fontSize: 13.5, fontFace: BFONT, valign: "middle", margin: 0 });
  footer(s, 9);
});

// ============ SLIDE 10 — PULL REQUESTS & FORKS ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 6", "Collaborate — Pull Requests & Forks", PURPLE);
  // PR flow row
  s.addText("Pull Request flow", { x: 0.6, y: 1.7, w: 6, h: 0.35, fontSize: 16, bold: true, color: INK, fontFace: HFONT, margin: 0 });
  await chipRow(s, [
    { t: "switch -c x", c: PURPLE }, { t: "add + commit", c: GREEN },
    { t: "git push", c: BLUE }, { t: "Open PR", c: PURPLE },
    { t: "Review", c: AMBER }, { t: "Merge 🎉", c: GREEN },
  ], 2.15);
  // fork diagram
  s.addText("Fork workflow (contributing to others)", { x: 0.6, y: 3.0, w: 8, h: 0.35, fontSize: 16, bold: true, color: INK, fontFace: HFONT, margin: 0 });
  const nodes = [
    { x: 0.7,  c: GREEN, t: "🌐 upstream", d: "original repo" },
    { x: 4.0,  c: BLUE,  t: "☁️ origin", d: "your fork" },
    { x: 7.3,  c: SLATE, t: "💻 local", d: "your clone" },
  ];
  for (const n of nodes) {
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: n.x, y: 3.55, w: 2.6, h: 1.25, rectRadius: 0.08, fill: { color: WHITE }, line: { color: n.c, width: 1.5 }, shadow: sh() });
    s.addText(n.t, { x: n.x, y: 3.72, w: 2.6, h: 0.5, fontSize: 16, bold: true, color: INK, align: "center", fontFace: HFONT, margin: 0 });
    s.addText(n.d, { x: n.x, y: 4.2, w: 2.6, h: 0.4, fontSize: 12.5, color: SLATE, align: "center", fontFace: BFONT, margin: 0 });
  }
  await flowArrow(s, 3.35, 4.0); s.addText("Fork", { x: 3.2, y: 3.6, w: 0.8, h: 0.3, fontSize: 10, color: SLATE, align: "center", margin: 0 });
  await flowArrow(s, 6.65, 4.0); s.addText("clone", { x: 6.45, y: 3.6, w: 0.9, h: 0.3, fontSize: 10, color: SLATE, align: "center", margin: 0 });
  // PR back to upstream
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 10.2, y: 3.55, w: 2.55, h: 1.25, rectRadius: 0.08, fill: { color: PURPLE } });
  s.addText("Pull Request\n⟶ upstream", { x: 10.2, y: 3.55, w: 2.55, h: 1.25, fontSize: 14, bold: true, color: WHITE, align: "center", valign: "middle", fontFace: HFONT, margin: 0 });
  // keep updated note
  s.addText("Stay current:  git pull origin main   •   git fetch upstream", { x: 0.6, y: 5.2, w: 12, h: 0.4, fontSize: 14, italic: true, color: SLATE, fontFace: "Consolas", margin: 0 });
  footer(s, 10);
});

// ============ SLIDE 11 — MERGE vs REBASE ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 7", "Merge vs Rebase", AMBER);
  // merge card
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.6, y: 1.85, w: 5.9, h: 3.2, rectRadius: 0.1, fill: { color: WHITE }, line: { color: BLUE, width: 1.5 }, shadow: sh() });
  s.addText("🔀  git merge", { x: 0.9, y: 2.05, w: 5, h: 0.5, fontSize: 19, bold: true, color: BLUE, fontFace: HFONT, margin: 0 });
  s.addText("Preserves full history — adds a merge commit.", { x: 0.9, y: 2.55, w: 5.3, h: 0.5, fontSize: 13.5, color: SLATE, fontFace: BFONT, margin: 0 });
  s.addText([
    { text: "A—B—C———M   (main)", options: { color: "0969DA", breakLine: true } },
    { text: "     \\D—E/", options: { color: PURPLE } },
  ], { x: 0.9, y: 3.25, w: 5.2, h: 1.5, fontSize: 16, fontFace: "Consolas", valign: "top", margin: 0, lineSpacingMultiple: 1.2 });
  // rebase card
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 6.85, y: 1.85, w: 5.9, h: 3.2, rectRadius: 0.1, fill: { color: WHITE }, line: { color: AMBER, width: 1.5 }, shadow: sh() });
  s.addText("📐  git rebase", { x: 7.15, y: 2.05, w: 5, h: 0.5, fontSize: 19, bold: true, color: AMBER, fontFace: HFONT, margin: 0 });
  s.addText("Linear history — replays commits, no merge commit.", { x: 7.15, y: 2.55, w: 5.3, h: 0.5, fontSize: 13.5, color: SLATE, fontFace: BFONT, margin: 0 });
  s.addText([
    { text: "A—B—C—D'—E'   (main)", options: { color: "BF8700" } },
  ], { x: 7.15, y: 3.25, w: 5.2, h: 1.0, fontSize: 16, fontFace: "Consolas", valign: "top", margin: 0 });
  // golden rule
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.6, y: 5.35, w: 12.15, h: 0.95, rectRadius: 0.08, fill: { color: "FFF8E5" }, line: { color: AMBER, width: 1.5 } });
  s.addImage({ data: await icon(FaExclamationTriangle, hex(AMBER), 256), x: 0.9, y: 5.6, w: 0.42, h: 0.42 });
  s.addText([
    { text: "Golden rule:  ", options: { bold: true, color: AMBER } },
    { text: "never rebase commits you've already pushed and shared with others.", options: { color: INK } },
  ], { x: 1.5, y: 5.35, w: 11, h: 0.95, fontSize: 16, fontFace: BFONT, valign: "middle", margin: 0 });
  footer(s, 11);
});

// ============ SLIDE 12 — UNDO CHEAT SHEET ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 7", "Undoing Mistakes — Decision Guide", AMBER);
  const rows = [
    ["Unstage a file (keep edits)", "git restore --staged file", SLATE],
    ["Discard local changes", "git restore file", SLATE],
    ["Fix last commit message", "git commit --amend", BLUE],
    ["Undo last commit, keep changes", "git reset --soft HEAD~1", BLUE],
    ["Undo last commit, discard ⚠️", "git reset --hard HEAD~1", RED],
    ["Reverse a PUSHED commit ✅ safe", "git revert <hash>", GREEN],
  ];
  for (let i = 0; i < rows.length; i++) {
    const y = 1.9 + i * 0.78;
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 0.6, y, w: 12.15, h: 0.66, rectRadius: 0.06, fill: { color: WHITE }, line: { color: LINE, width: 1 }, shadow: sh() });
    s.addShape(pres.shapes.RECTANGLE, { x: 0.6, y, w: 0.14, h: 0.66, fill: { color: rows[i][2] } });
    s.addText(rows[i][0], { x: 1.0, y, w: 6.0, h: 0.66, fontSize: 14.5, color: INK, fontFace: BFONT, valign: "middle", margin: 0 });
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 7.2, y: y + 0.11, w: 5.35, h: 0.44, rectRadius: 0.05, fill: { color: INK } });
    s.addText(rows[i][1], { x: 7.4, y: y + 0.11, w: 5.1, h: 0.44, fontSize: 14, color: "7EE787", fontFace: "Consolas", valign: "middle", margin: 0 });
  }
  footer(s, 12);
});

// ============ SLIDE 13 — ISSUES ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 8", "GitHub Issues — Track Bugs & Tasks", RED);
  await iconCard(s, { x: 0.6, y: 1.8, w: 5.9, h: 2.15, IconC: FaBug, circle: RED,
    title: "Create an issue", body: "Issues tab → New issue. Add a title, a Markdown description with checklists, Labels (bug, enhancement), an Assignee and a Milestone." });
  await iconCard(s, { x: 6.85, y: 1.8, w: 5.9, h: 2.15, IconC: FaProjectDiagram, circle: PURPLE,
    title: "Link & auto-close", body: "Reference #12 in a commit or PR. Keywords closes / fixes / resolves #12 auto-close the issue when merged to main." });
  // loop visual
  s.addText("Issue → Branch → PR → Close loop", { x: 0.6, y: 4.15, w: 8, h: 0.35, fontSize: 15, bold: true, color: INK, fontFace: HFONT, margin: 0 });
  await chipRow(s, [
    { t: "🐛 Issue #12", c: RED }, { t: "branch fix", c: PURPLE },
    { t: "commit", c: GREEN }, { t: "Open PR", c: BLUE },
    { t: "Merge", c: GREEN }, { t: "🔒 #12 closed", c: GREEN },
  ], 4.6);
  footer(s, 13);
});

// ============ SLIDE 14 — GITHUB ACTIONS ============
slides.push(async () => {
  const s = pres.addSlide();
  header(s, "Module 9", "GitHub Actions — CI/CD Automation", GREEN);
  codeBlock(s, 0.6, 1.8, 6.7, 3.95, [
    { t: "# .github/workflows/ci.yml", c: "8B949E" },
    { t: "name: CI", b: true },
    { t: "on:", b: true },
    { t: "  push: { branches: [main] }", c: "A5D6FF" },
    { t: "  pull_request:", c: "A5D6FF" },
    { t: "jobs:", b: true },
    { t: "  build:", c: "A5D6FF" },
    { t: "    runs-on: ubuntu-latest", c: "A5D6FF" },
    { t: "    steps:", c: "A5D6FF" },
    { t: "      - uses: actions/checkout@v4", c: "7EE787" },
    { t: "      - run: echo \"Hello Actions!\"", c: "7EE787" },
  ], "ci.yml");
  // pipeline on right
  s.addText("The pipeline", { x: 7.55, y: 1.8, w: 5, h: 0.35, fontSize: 16, bold: true, color: INK, fontFace: HFONT, margin: 0 });
  const steps = [
    { IconC: FaCloudUploadAlt, c: BLUE,  t: "push / open PR" },
    { IconC: FaRobot,          c: SLATE, t: "runner spins up" },
    { IconC: FaTerminal,       c: PURPLE,t: "checkout + setup" },
    { IconC: FaCheckCircle,    c: GREEN, t: "run tests → ✅/❌" },
  ];
  for (let i = 0; i < steps.length; i++) {
    const y = 2.3 + i * 0.85;
    s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 7.55, y, w: 5.2, h: 0.68, rectRadius: 0.07, fill: { color: WHITE }, line: { color: LINE, width: 1 }, shadow: sh() });
    s.addShape(pres.shapes.OVAL, { x: 7.7, y: y + 0.11, w: 0.46, h: 0.46, fill: { color: steps[i].c } });
    s.addImage({ data: await icon(steps[i].IconC, hex(WHITE), 256), x: 7.82, y: y + 0.23, w: 0.22, h: 0.22 });
    s.addText(steps[i].t, { x: 8.35, y, w: 4.3, h: 0.68, fontSize: 14.5, bold: true, color: INK, fontFace: HFONT, valign: "middle", margin: 0 });
  }
  s.addText("✅ green = safe to merge   •   ❌ red = read logs & fix", { x: 0.6, y: 5.95, w: 12, h: 0.4, fontSize: 13, italic: true, color: SLATE, fontFace: BFONT, margin: 0 });
  footer(s, 14);
});

// ============ SLIDE 15 — FINAL PROJECT + CHEAT SHEET ============
slides.push(async () => {
  const s = pres.addSlide();
  s.background = { color: INK };
  s.addShape(pres.shapes.RECTANGLE, { x: 0, y: 0, w: 0.3, h: H, fill: { color: GREEN } });
  s.addImage({ data: await icon(FaGraduationCap, hex(WHITE), 512), x: 0.85, y: 0.7, w: 0.9, h: 0.9 });
  s.addText("🎯 Final Lab Assignment", { x: 1.9, y: 0.75, w: 11, h: 0.8, fontSize: 34, bold: true, color: WHITE, fontFace: HFONT, valign: "middle", margin: 0 });
  // left: tasks
  const tasks = [
    "Create repo git-lab-final & clone it",
    "Add README, .gitignore, a code file — commit each separately",
    "Branch feature-x → commit → push",
    "Open a Pull Request & merge to main",
    "Tag the result as v1.0.0",
    "Submit your repository URL",
  ];
  s.addText(tasks.map((t, i) => ({
    text: `${i + 1}.  ${t}`,
    options: { breakLine: true, color: "E6EDF3" }
  })), { x: 0.9, y: 1.9, w: 6.2, h: 3.3, fontSize: 15.5, fontFace: BFONT, valign: "top", margin: 0, paraSpaceAfter: 10 });
  // right: cheat sheet block
  s.addShape(pres.shapes.ROUNDED_RECTANGLE, { x: 7.4, y: 1.9, w: 5.35, h: 4.4, rectRadius: 0.08, fill: { color: "0D1117" }, line: { color: PANEL, width: 1 } });
  s.addText("⚡ Daily Workflow Cheat Sheet", { x: 7.7, y: 2.05, w: 4.8, h: 0.4, fontSize: 14, bold: true, color: "7EE787", fontFace: HFONT, margin: 0 });
  s.addText([
    { text: "git status        # what changed?", options: { breakLine: true } },
    { text: "git add .         # stage changes", options: { breakLine: true } },
    { text: "git commit -m \"\"  # save snapshot", options: { breakLine: true } },
    { text: "git push          # upload", options: { breakLine: true } },
    { text: "git pull          # download", options: { breakLine: true } },
    { text: "", options: { breakLine: true } },
    { text: "git switch -c x   # new branch", options: { breakLine: true } },
    { text: "git merge x       # combine", options: { breakLine: true } },
    { text: "git log --graph   # the tree", options: { breakLine: true } },
    { text: "git revert <h>    # safe undo", options: {} },
  ], { x: 7.7, y: 2.55, w: 4.9, h: 3.6, fontSize: 13, color: "E6EDF3", fontFace: "Consolas", valign: "top", margin: 0, lineSpacingMultiple: 1.18 });
  // submission checklist chips
  chip(s, 0.9, 5.55, 2.9, "4+ commits", PANEL);
  chip(s, 3.95, 5.55, 3.0, "1 merged PR", PANEL);
  chip(s, 0.9, 6.1, 2.9, ".gitignore present", PANEL);
  chip(s, 3.95, 6.1, 3.0, "v1.0.0 tag", GREEN);
  s.addText("You're ready to build and collaborate on GitHub 🚀", { x: 0.9, y: 6.75, w: 11, h: 0.4, fontSize: 14, italic: true, color: "ADBAC7", fontFace: BFONT, margin: 0 });
});

(async () => {
  for (const make of slides) await make();
  await pres.writeFile({ fileName: "GitHub-Basic-to-Advanced.pptx" });
  console.log("WROTE GitHub-Basic-to-Advanced.pptx with", slides.length, "slides");
})();