/* Main app — assembles all slides into the deck-stage with one <section> per slide */
/* Deck: Bouw je eigen AI-systeem — sessie 18 juni 2026, JIM Utrecht */

const { useEffect, useState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "showLayoutLabels": false,
  "language": "NL",
  "accent": "coral"
}/*EDITMODE-END*/;

/* Build a stable slide registry. Each entry: { label, section, render() } */
function useSlides(tweaks) {
  const lang = tweaks.language || "NL";
  const t = (en, nl) => (lang === "NL" ? nl : en);

  return [
    // 1. Cover
    {
      label: "01 Cover",
      section: "Opening",
      render: () => (
        <CoverHero
          eyebrow={t("BUILD YOUR PERSONAL AI SYSTEM", "BUILD YOUR PERSONAL AI SYSTEM")}
          title={t("Build your own AI system.", "Bouw je eigen AI-systeem.")}
          titleAccent={t("No loose prompts. A system.", "Geen losse prompts. Een systeem.")}
          subtitle={t(
            "One morning, no code, no jargon. You leave with a working AI system you actually use the next day.",
            "Eén ochtend, geen code, geen jargon. Je loopt naar buiten met een werkend AI-systeem dat je morgen echt gebruikt."
          )}
          presenter="Annet Kloprogge · Mission Relearn"
          date={t("18 June 2026 · JIM, Utrecht", "18 juni 2026 · JIM, Utrecht")}
        />
      ),
    },
    // 2. Agenda
    {
      label: "02 Agenda",
      section: "Opening",
      render: (i, n) => (
        <AgendaNumbered idx={i} total={n} items={[
          { title: t("Arrival & your task", "Aankomst & jouw taak"), note: t("10:00 — coffee, and the real task you brought.", "10:00 — koffie, en de echte taak die je meenam.") },
          { title: t("Delegate & build context", "Delegeren & context bouwen"), note: t("10:20 — what to hand off, and give your AI a memory.", "10:20 — wat je weggeeft, en je AI een geheugen geven.") },
          { title: t("Ask, automate, judge", "Vragen, automatiseren, beoordelen"), note: t("11:15 — clear asks, let it run, check the output.", "11:15 — helder vragen, laten doorlopen, output checken.") },
          { title: t("Test on your real task + lunch", "Test op je echte taak + lunch"), note: t("12:00 — your system runs your task while we eat.", "12:00 — je systeem draait je taak terwijl we eten.") },
          { title: t("What you take home", "Wat je meeneemt"), note: t("12:45 — your next step, written down before you leave.", "12:45 — je volgende stap, vastgelegd voor je weggaat.") },
        ]} />
      ),
    },
    // 3. The shift (lead + body)
    {
      label: "03 De omslag",
      section: "Waarom",
      render: (i, n) => (
        <LeadAndBody idx={i} total={n}
          eyebrow={t("THE SHIFT", "DE OMSLAG")}
          title={t("Most people use AI one message at a time.", "De meeste mensen gebruiken AI per los bericht.")}
          lead={t("You open a blank window, paste context, get a generic answer, and tomorrow you start from zero again.", "Je opent een leeg venster, plakt context, krijgt een algemeen antwoord, en morgen begin je weer bij nul.")}
          body={t("Today we build the other way: a place where your AI holds your context, so it knows your work, your voice and your rules. You ask less and get more.", "Vandaag bouwen we het anders: een plek waar je AI je context vasthoudt, zodat hij je werk, je stem en je regels kent. Je vraagt minder en krijgt meer.")} />
      ),
    },
    // 4. Prompts vs system (two-column compare)
    {
      label: "04 Prompts vs systeem",
      section: "Waarom",
      render: (i, n) => (
        <TwoColumn idx={i} total={n}
          eyebrow={t("TWO WAYS OF WORKING", "TWEE MANIEREN VAN WERKEN")}
          title={t("Loose prompts vs a system", "Losse prompts vs een systeem")}
          left={{ label: t("LOOSE PROMPTS", "LOSSE PROMPTS"), title: t("Explain it every time", "Elke keer opnieuw uitleggen"),
            items: [
              t("Start from a blank window", "Begin bij een leeg venster"),
              t("Paste the same context again", "Plak steeds dezelfde context"),
              t("Get a generic answer", "Krijg een algemeen antwoord"),
              t("Tomorrow: back to zero", "Morgen: weer bij nul"),
            ] }}
          right={{ label: t("A SYSTEM", "EEN SYSTEEM"), title: t("Set up once, it remembers", "Eén keer instellen, het onthoudt"),
            items: [
              t("It knows your work and voice", "Het kent je werk en je stem"),
              t("Your data is already there", "Je gegevens staan er al"),
              t("Short ask, usable answer", "Korte vraag, bruikbaar antwoord"),
              t("It keeps working for you", "Het blijft voor je werken"),
            ] }} />
      ),
    },
    // 5. Divider — the compass
    { label: "05 Divider · Kompas", section: "Het kompas",
      render: (i, n) => <DividerCoral num="01" idx={i} total={n}
        title={t("The compass", "Het kompas")}
        subtitle={t("Four moves you keep making while you build.", "Vier bewegingen die je blijft maken terwijl je bouwt.")} /> },
    // 6. 4D compass (four quadrant)
    { label: "06 4D-kompas", section: "Het kompas",
      render: (i, n) => <FourQuadrant idx={i} total={n}
        eyebrow={t("4D AI FLUENCY", "4D AI-FLUENCY")}
        title={t("Four moves, all morning long", "Vier bewegingen, de hele ochtend door")}
        items={[
          { icon: "share-2", title: t("Delegate", "Delegeren"), body: t("What goes to AI, what you keep, what you do together.", "Wat gaat naar AI, wat hou je zelf, wat doe je samen.") },
          { icon: "message-square", title: t("Describe", "Beschrijven"), body: t("Ask with context and an example so the first answer fits.", "Vraag met context en voorbeeld, zodat het eerste antwoord klopt.") },
          { icon: "search", title: t("Discern", "Beoordelen"), body: t("Check facts, voice and gaps before you use or share it.", "Check feiten, stem en gaten voor je iets gebruikt of deelt.") },
          { icon: "shield", title: t("Diligence", "Discipline"), body: t("Your rules: which data, when to disclose, what stays yours.", "Jouw regels: welke data, wanneer melden, wat blijft van jou.") },
        ]} /> },
    // 7. Divider — building
    { label: "07 Divider · Bouwen", section: "Bouwen",
      render: (i, n) => <DividerNumber num="02" idx={i} total={n}
        title={t("Building", "Bouwen")}
        subtitle={t("Laptops open. We build your system together, block by block.", "Laptops open. We bouwen je systeem samen, blok voor blok.")} /> },
    // 8. Block 1 — Delegate (bullets)
    { label: "08 Blok 1 · Delegeren", section: "Bouwen",
      render: (i, n) => <Bullets idx={i} total={n}
        eyebrow={t("BLOCK 1 · DELEGATE", "BLOK 1 · DELEGEREN")}
        title={t("Choose what you hand off", "Kies wat je weggeeft")}
        items={[
          { head: t("List your recurring tasks", "Schrijf je terugkerende taken op"), tail: t("big and small.", "groot en klein.") },
          { head: t("Split them three ways", "Verdeel ze in drieën"), tail: t("hand off, do together, keep yourself.", "weggeven, samen doen, zelf houden.") },
          { head: t("Pick one to build with today", "Kies er één om vandaag mee te bouwen"), tail: t("a sharp task makes the morning concrete.", "een scherpe taak maakt de ochtend concreet.") },
          { head: t("This stops all-or-nothing thinking", "Dit stopt het alles-of-niets-denken") },
        ]} /> },
    // 9. Block 2 — Context (three-card grid) — the heart
    { label: "09 Blok 2 · Context", section: "Bouwen",
      render: (i, n) => <ThreeCardGrid idx={i} total={n}
        eyebrow={t("BLOCK 2 · CONTEXT — THE HEART", "BLOK 2 · CONTEXT — HET HART")}
        title={t("Give your AI a memory", "Geef je AI een geheugen")}
        items={[
          { icon: "user", title: t("Who you are", "Wie je bent"), body: t("Your role, your work, your clients and what matters to you.", "Je rol, je werk, je klanten en wat je belangrijk vindt.") },
          { icon: "mic", title: t("Your voice", "Je stem"), body: t("How you write and talk, so output sounds like you, not a chatbot.", "Hoe jij schrijft en praat, zodat output als jou klinkt, niet als een chatbot.") },
          { icon: "folder", title: t("Your data", "Je gegevens"), body: t("The documents and facts of your work, in one place your AI may read.", "De documenten en feiten van je werk, op één plek die je AI mag lezen.") },
        ]} /> },
    // 9b. Folder tree — your system as a folder
    { label: "10 Je systeem als map", section: "Bouwen",
      render: (i, n) => {
        const tree = [
          { p: "Second Brain/", c: "", k: "folder" },
          { p: "├── CLAUDE.md", c: t("the brain, read first", "het brein, leest je AI eerst"), k: "file" },
          { p: "├── README.md", c: "", k: "file" },
          { p: "├── TASKS.md", c: t("your tasks", "je taken"), k: "file" },
          { p: "└── knowledge/", c: t("your context layers", "je context-lagen"), k: "folder" },
          { p: "    ├── about.md", c: t("who you are", "wie je bent"), k: "file" },
          { p: "    ├── voice.md", c: t("how you sound", "hoe je klinkt"), k: "file" },
          { p: "    ├── brand.md", c: t("your brand", "je merk"), k: "file" },
          { p: "    ├── work.md", c: t("your work + data", "je werk + data"), k: "file" },
          { p: "    └── rules.md", c: t("your rules + safety", "je regels + veiligheid"), k: "file" },
        ];
        const points = [
          [t("CLAUDE.md is the brain", "CLAUDE.md is het brein"), t("your AI reads it first, every time.", "je AI leest het als eerste, elke keer.")],
          [t("knowledge/ holds your context", "knowledge/ zijn je context-lagen"), t("about, voice, brand and work.", "about, voice, brand en work.")],
          [t("rules.md guards the rest", "rules.md bewaakt de rest"), t("your rules and the safety habits.", "je regels en de veiligheidsgewoontes.")],
        ];
        return (
          <div className="slide bg-light" style={{ position: "relative" }}>
            <Frame>
              <Eyebrow>{t("BLOCK 2 · YOUR SYSTEM AS A FOLDER", "BLOK 2 · JE SYSTEEM ALS MAP")}</Eyebrow>
              <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.title, maxWidth: 1500 }}>{t("This is what your system looks like", "Zo ziet je systeem eruit")}</h2>
              <div style={{ display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 72, marginTop: 64, flex: 1, alignItems: "center" }}>
                <div style={{ background: COLORS.navy, borderRadius: 20, padding: "44px 48px", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" }}>
                  {tree.map((row, r) => (
                    <div key={r} style={{ display: "grid", gridTemplateColumns: "minmax(0, auto) 1fr", gap: 26, padding: "6px 0", alignItems: "baseline" }}>
                      <span style={{ whiteSpace: "pre", fontSize: 30, lineHeight: 1.3, fontWeight: row.k === "folder" ? 700 : 400, color: row.k === "folder" ? COLORS.coral : "#E6E8EF" }}>{row.p}</span>
                      <span style={{ fontSize: 23, color: COLORS.coralLight }}>{row.c}</span>
                    </div>
                  ))}
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 30 }}>
                  <div style={{ fontSize: TYPE_SCALE.eyebrow, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: COLORS.coral }}>{t("WHAT YOU INSTALL", "WAT JE INSTALLEERT")}</div>
                  {points.map((row, r) => (
                    <div key={r} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 18 }}>
                      <span style={{ width: 14, height: 14, marginTop: 14, borderRadius: 4, background: COLORS.coral, flexShrink: 0 }} />
                      <div style={{ lineHeight: 1.4 }}>
                        <span style={{ fontSize: 30, fontWeight: 700, color: COLORS.navy }}>{row[0]}. </span>
                        <span style={{ fontSize: 28, color: COLORS.muted }}>{row[1]}</span>
                      </div>
                    </div>
                  ))}
                  <div style={{ marginTop: 8, background: COLORS.coralSoft, border: "1px solid " + COLORS.coral, borderRadius: 12, padding: "16px 20px", fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 22, color: COLORS.navy }}>
                    curl -sL lab.missionrelearn.com/start | bash
                  </div>
                </div>
              </div>
            </Frame>
            {i && <SlideChrome idx={i} total={n} />}
            <LayoutLabel>Folder tree</LayoutLabel>
          </div>
        );
      } },
    // 10. Block 3 — Describe (bullets)
    { label: "10 Blok 3 · Beschrijven", section: "Bouwen",
      render: (i, n) => <Bullets idx={i} total={n}
        eyebrow={t("BLOCK 3 · DESCRIBE", "BLOK 3 · BESCHRIJVEN")}
        title={t("Ask so the first answer is usable", "Vraag zo dat het eerste antwoord bruikbaar is")}
        items={[
          { head: t("Context", "Context"), tail: t("what it's about, and for whom.", "waar gaat het over, en voor wie.") },
          { head: t("Example", "Voorbeeld"), tail: t("show what good looks like.", "laat zien hoe goed eruitziet.") },
          { head: t("Guardrails", "Kaders"), tail: t("length, tone, what not to do.", "lengte, toon, wat juist niet.") },
          { head: t("Prompting is only ~6% of the work", "Prompten is maar zo'n 6% van het werk"), tail: t("the win is in your context.", "de winst zit in je context.") },
        ]} /> },
    // 11. Block 4 — Automate (process horizontal)
    { label: "11 Blok 4 · Automatiseren", section: "Bouwen",
      render: (i, n) => <ProcessHorizontal idx={i} total={n}
        eyebrow={t("BLOCK 4 · AUTOMATE", "BLOK 4 · AUTOMATISEREN")}
        title={t("Let it run without you", "Laat het doorlopen zonder jou")}
        steps={[
          { title: t("Capture a step", "Leg een stap vast"), body: t("The task you chose, written as a fixed routine.", "De taak die je koos, als vaste routine.") },
          { title: t("Link your context", "Koppel je context"), body: t("It picks up your data and voice itself.", "Het pakt je gegevens en stem zelf erbij.") },
          { title: t("Set it going", "Zet het in gang"), body: t("It does the work, you keep the wheel.", "Het doet het werk, jij houdt de regie.") },
          { title: t("A system, not a chat", "Een systeem, geen gesprek"), body: t("It runs again next time, on its own.", "Volgende keer draait het opnieuw, vanzelf.") },
        ]} /> },
    // 12. Block 5 — Judge & safe (two-column)
    { label: "12 Blok 5 · Beoordelen & veilig", section: "Bouwen",
      render: (i, n) => <TwoColumn idx={i} total={n}
        eyebrow={t("BLOCK 5 · JUDGE & STAY SAFE", "BLOK 5 · BEOORDELEN & VEILIG")}
        title={t("Don't trust blindly, stay at the wheel", "Vertrouw niet blind, blijf aan het stuur")}
        left={{ label: t("JUDGE BEFORE YOU SHARE", "BEOORDELEN VOOR JE DEELT"), title: t("Check the output", "Check de output"),
          items: [
            t("Is it factually right?", "Klopt het feitelijk?"),
            t("Does it sound like you?", "Klinkt het als jou?"),
            t("Is anything missing or biased?", "Mist er iets of zit er bias in?"),
          ] }}
        right={{ label: t("FIVE HABITS", "VIJF GEWOONTES"), title: t("Use AI safely", "Gebruik AI veilig"),
          items: [
            t("Don't paste what you wouldn't email a stranger", "Plak niets wat je een vreemde niet zou mailen"),
            t("Verify, never trust blindly", "Controleer, vertrouw nooit blind"),
            t("Watch for bias, be open about AI use", "Let op bias, wees open over AI-gebruik"),
            t("Stay the boss, you decide", "Blijf de baas, jij beslist"),
          ] }} /> },
    // 13. Workshop prompt — test on your real task
    { label: "13 Test op je echte taak", section: "Bouwen",
      render: (i, n) => <WorkshopPrompt idx={i} total={n}
        eyebrow={t("THE MOMENT", "HET MOMENT")}
        duration={t("REAL TASK", "ECHTE TAAK")}
        title={t("Now your system runs your real task.", "Nu draait je systeem je echte taak.")}
        prompt={t("No exercise. The task you brought this morning goes through your own system, with the context and voice you set up. You judge the result, adjust, and use it for real. We watch over lunch and fine-tune together.", "Geen oefening. De taak die je vanochtend meenam gaat door je eigen systeem heen, met de context en stem die je instelde. Je beoordeelt het resultaat, stelt bij, en gebruikt het echt. We kijken mee tijdens de lunch en schaven samen bij.")}
        ingredients={[t("Your real task", "Je echte taak"), t("The context you built", "De context die je bouwde"), t("Your judgement", "Jouw oordeel"), t("Lunch", "Lunch")]} /> },
    // 14. Divider — what's next
    { label: "14 Divider · Hoe verder", section: "Hoe verder",
      render: (i, n) => <DividerHero num="03" idx={i} total={n}
        title={t("What's next", "Hoe verder")}
        subtitle={t("You take a working system home, and a way to keep building.", "Je neemt een werkend systeem mee, en een manier om door te bouwen.")} /> },
    // 15. Take home (two-column)
    { label: "15 Wat je meeneemt", section: "Hoe verder",
      render: (i, n) => <TwoColumn idx={i} total={n}
        eyebrow={t("TO TAKE HOME", "NAAR HUIS")}
        title={t("What you take home & your next step", "Wat je meeneemt & je volgende stap")}
        left={{ label: t("YOU NOW HAVE", "JE HEBT NU"), title: t("A working system", "Een werkend systeem"),
          items: [
            t("An AI system with your context in it", "Een AI-systeem met jouw context erin"),
            t("One task that really runs through it", "Eén taak die er echt doorheen draait"),
            t("The 4D compass for every next task", "Het 4D-kompas voor elke volgende taak"),
          ] }}
        right={{ label: t("YOUR NEXT STEP", "JE VOLGENDE STAP"), title: t("Keep building", "Doorbouwen"),
          items: [
            t("Add one extra task this week", "Voeg deze week één extra taak toe"),
            t("Expand your context when something's missing", "Breid je context uit als iets ontbreekt"),
            t("Questions after today? You know me.", "Vragen na vandaag? Je weet me te vinden."),
          ] }} /> },
    // 15b. De zes lagen (staircase) — uit secondbrain-guide #7
    { label: "16 De zes lagen", section: "Hoe verder",
      render: (i, n) => {
        const layers = [
          ["01", t("CLAUDE.md + Memory", "CLAUDE.md + Geheugen"), t("Master instructions. Your brain's personality.", "Hoofdinstructies. De persoonlijkheid van je brein.")],
          ["02", t("Knowledge Base + Rules", "Kennisbank + Regels"), t("Deep reference, loaded only when needed.", "Diepe referentie, alleen geladen wanneer nodig.")],
          ["03", t("Skills", "Skills"), t("Slash-commands that run a workflow.", "Slash-commando's die een workflow draaien.")],
          ["04", t("Hooks + Automation", "Hooks + Automatisering"), t("Triggers that fire on every session, prompt or tool.", "Triggers die afgaan bij elke sessie, prompt of tool.")],
          ["05", t("MCP + Agents", "MCP + Agents"), t("Connections to tools and specialised assistants.", "Verbindingen met tools en gespecialiseerde assistenten.")],
          ["06", t("Health + Maintenance", "Gezondheid + Onderhoud"), t("Keeps your brain useful over time.", "Houdt je brein bruikbaar over tijd.")],
        ];
        return (
          <div className="slide bg-light" style={{ position: "relative" }}>
            <Frame>
              <Eyebrow>{t("THE BIGGER PICTURE", "HET GROTERE PLAATJE")}</Eyebrow>
              <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{t("A Second Brain has six layers", "Een Second Brain heeft zes lagen")}</h2>
              <div style={{ marginTop: 44, display: "flex", flexDirection: "column", gap: 12 }}>
                {layers.slice().reverse().map((row, vis) => {
                  const real = layers.length - 1 - vis;
                  const isTop = real === layers.length - 1;
                  return (
                    <div key={real} style={{
                      marginLeft: real * 50, marginRight: (layers.length - 1 - real) * 50,
                      padding: "16px 30px",
                      background: isTop ? `linear-gradient(135deg, ${COLORS.coral} 0%, ${COLORS.coralLight} 100%)` : "#fff",
                      border: isTop ? "0" : `1px solid ${COLORS.border}`,
                      borderLeft: isTop ? "0" : `6px solid ${COLORS.coral}`,
                      borderRadius: 16,
                      boxShadow: isTop ? "0 16px 38px rgba(243,110,89,.28)" : "0 10px 24px rgba(23,26,38,.06)",
                      display: "grid", gridTemplateColumns: "80px 1fr 1.4fr", alignItems: "center", gap: 24,
                    }}>
                      <div style={{ fontFamily: "var(--font-heading)", fontSize: 38, fontWeight: 700, color: isTop ? "rgba(255,255,255,0.95)" : COLORS.coral }}>{row[0]}</div>
                      <div style={{ fontFamily: "var(--font-heading)", fontSize: 26, fontWeight: 600, color: isTop ? "#fff" : COLORS.navy }}>{row[1]}</div>
                      <div style={{ fontSize: 18, lineHeight: 1.4, color: isTop ? "rgba(255,255,255,0.92)" : COLORS.muted }}>{row[2]}</div>
                    </div>
                  );
                })}
              </div>
              <p style={{ marginTop: 22, fontSize: 21, color: COLORS.muted, textAlign: "center" }}>{t("Each layer rests on the one below it. Build from the bottom up.", "Elke laag rust op de laag eronder. Bouw van onderop.")}</p>
            </Frame>
            {i && <SlideChrome idx={i} total={n} />}
            <LayoutLabel>Layer stack</LayoutLabel>
          </div>
        );
      } },
    // 15c. Het drieluik (roadmap)
    { label: "17 Het drieluik", section: "Hoe verder",
      render: (i, n) => {
        const sessions = [
          { tag: t("SESSION 1", "SESSIE 1"), today: true, title: t("Foundation", "Fundament"),
            layers: [["01", t("CLAUDE.md + Memory", "CLAUDE.md + Geheugen")], ["02", t("Knowledge + Rules", "Kennisbank + Regels")]] },
          { tag: t("SESSION 2", "SESSIE 2"), today: false, title: t("Automate", "Automatiseren"),
            layers: [["03", "Skills"], ["04", t("Hooks + Automation", "Hooks + Automatisering")]] },
          { tag: t("SESSION 3", "SESSIE 3"), today: false, title: t("Extend", "Uitbreiden"),
            layers: [["05", "MCP + Agents"], ["06", t("Health + Maintenance", "Gezondheid + Onderhoud")]] },
        ];
        return (
          <div className="slide bg-light" style={{ position: "relative" }}>
            <Frame>
              <Eyebrow>{t("THE TRILOGY", "HET DRIELUIK")}</Eyebrow>
              <h2 className="slide-title" style={{ fontSize: TYPE_SCALE.titleSm, maxWidth: 1500 }}>{t("Three sessions, two layers each", "Drie sessies, twee lagen per keer")}</h2>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 26, marginTop: 56, flex: 1, alignContent: "center" }}>
                {sessions.map((s, si) => (
                  <div key={si} style={{
                    background: s.today ? COLORS.coralSoft : "#fff",
                    border: s.today ? `2px solid ${COLORS.coral}` : `1px solid ${COLORS.border}`,
                    borderRadius: 18, padding: "28px 26px", display: "flex", flexDirection: "column", gap: 16,
                  }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span style={{ fontSize: 15, fontWeight: 700, letterSpacing: ".14em", color: COLORS.coral }}>{s.tag}</span>
                      {s.today && <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "#fff", background: COLORS.coral, borderRadius: 999, padding: "4px 12px" }}>{t("today", "vandaag")}</span>}
                    </div>
                    <div style={{ fontFamily: "var(--font-heading)", fontSize: 29, fontWeight: 600, color: COLORS.navy }}>{s.title}</div>
                    <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 2 }}>
                      {s.layers.map((l, li) => (
                        <div key={li} style={{ display: "grid", gridTemplateColumns: "44px 1fr", alignItems: "center", gap: 14 }}>
                          <span style={{ width: 44, height: 44, borderRadius: "50%", background: s.today ? COLORS.coral : COLORS.coralSoft, color: s.today ? "#fff" : COLORS.coral, fontFamily: "var(--font-heading)", fontSize: 19, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{l[0]}</span>
                          <span style={{ fontSize: 18.5, fontWeight: 600, color: COLORS.navy }}>{l[1]}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
              <p style={{ marginTop: 6, fontSize: 21, color: COLORS.muted, textAlign: "center" }}>{t("Today we lay the foundation: layers 1 and 2. We build the rest together in sessions 2 and 3.", "Vandaag leggen we het fundament: laag 1 en 2. De rest bouwen we samen in sessie 2 en 3.")}</p>
            </Frame>
            {i && <SlideChrome idx={i} total={n} />}
            <LayoutLabel>Trilogy roadmap</LayoutLabel>
          </div>
        );
      } },
    // 16. Closing
    { label: "16 Closing", section: "Hoe verder",
      render: (i, n) => <Closing idx={i} total={n}
        message={t("You don't use AI per message anymore. You have a system.", "Je gebruikt AI niet meer per bericht. Je hebt een systeem.")}
        contact={[
          { icon: "mail", label: "Email", value: "annet@missionrelearn.com" },
          { icon: "globe", label: "Web", value: "missionrelearn.com" },
          { icon: "linkedin", label: "LinkedIn", value: "/in/annetkloprogge" },
        ]} /> },
    // 17. Thank you
    { label: "17 Thank you", section: "Hoe verder",
      render: (i, n) => <ThankYou idx={i} total={n}
        message={t("Thanks, and have fun building.", "Dank, en veel bouwplezier.")}
        footnote="missionrelearn.com" /> },
  ];
}

/* ---------------- TWEAKS PANEL ---------------- */
function Tweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <TweaksPanel>
      <TweakSection title="Template">
        <TweakRadio
          label="Language"
          value={tweaks.language}
          onChange={(v) => setTweak("language", v)}
          options={[{ value: "EN", label: "EN" }, { value: "NL", label: "NL" }]}
        />
        <TweakToggle
          label="Show layout labels"
          value={tweaks.showLayoutLabels}
          onChange={(v) => setTweak("showLayoutLabels", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------------- MAIN APP ---------------- */
function App() {
  const [tweaks] = useTweaks(TWEAK_DEFAULTS);
  const slides = useSlides(tweaks);

  useEffect(() => {
    const stage = document.querySelector("deck-stage");
    if (!stage) return;

    stage.innerHTML = "";

    const total = slides.length;
    slides.forEach((slide, i) => {
      const sec = document.createElement("section");
      sec.setAttribute("data-label", slide.label);
      stage.appendChild(sec);
      const root = ReactDOM.createRoot(sec);
      root.render(slide.render(i + 1, total));
    });

    setTimeout(() => { if (window.lucide) window.lucide.createIcons(); }, 50);
  }, [tweaks.language, tweaks.accent]);

  useEffect(() => {
    document.body.classList.toggle("hide-labels", !tweaks.showLayoutLabels);
  }, [tweaks.showLayoutLabels]);

  return <Tweaks />;
}

const tweaksRoot = document.createElement("div");
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<App />);