/* Deck: BZK PoC profiel-plus in vlam-chat, kick-off 10 september 2026 */

const { useEffect, useState } = React;

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

function useSlides(tweaks) {
  return [
    // 1
    { label: "01 Cover", section: "Opening",
      render: () => (
        <CoverHero
          eyebrow="MINISTERIE VAN BZK · DGDOO · PROOF OF CONCEPT"
          title="Profiel-plus"
          titleAccent="in vlam-chat."
          subtitle="Wat we bouwen, hoe we het toetsen en wat we vandaag met elkaar vastleggen."
          presenter="Mission Relearn"
          date="Kick-off, donderdag 10 september 2026, 13:15 uur · Turfmarkt, Z25.419"
        />
      ) },

    // 2
    { label: "02 Agenda", section: "Opening",
      render: (i, n) => (
        <AgendaNumbered
          idx={i} total={n}
          title="Vijfenveertig minuten,"
          titleAccent="vier onderwerpen"
          items={[
            { title: "Welkom, doel en scope", note: "13:15 · 5 min" },
            { title: "Wat een 'profiel-plus' is", note: "13:20 · 10 min" },
            { title: "Een kwartier op jullie scherm: vijf checks in vlam-chat", note: "13:30 · 15 min" },
            { title: "Planning, werksessie 1 en wat we van jullie nodig hebben", note: "13:45 · 7 min" },
            { title: "Open vragen en de afspraken van vandaag", note: "13:52 · 8 min, klaar om 14:00" },
          ]}
        />
      ) },

    // 3
    { label: "03 Scope", section: "Kader",
      render: (i, n) => (
        <ThreeListGrid
          idx={i} total={n}
          eyebrow="Waar we staan"
          title="Vier weken, een ambtenaar en echte taken"
          lead="We bewijzen een ding: maakt een eigen profiel in vlam-chat het werk van een ambtenaar merkbaar beter, en kan dat veilig."
          columns={[
            { title: "Wat we doen", icon: "check", tone: "coral", items: [
              "Een werkweek in kaart brengen",
              "Twee of drie terugkerende taken kiezen",
              "Een profiel schrijven en in gebruik nemen",
              "'Zonder' en 'met' naast elkaar zetten",
            ] },
            { title: "Wat we niet doen", icon: "minus", items: [
              "Software bouwen of installeren",
              "Koppelen aan systemen van BZK",
              "Uitrollen naar een directie",
              "Gegevens uit vlam-chat halen",
            ] },
            { title: "Wat we opleveren", icon: "package", items: [
              "Een werkend 'profiel-plus'",
              "Een instructiekaart met screenshots",
              "Bevindingen en een advies",
              "Alles in tekst die jullie beheren",
            ] },
          ]}
        />
      ) },

    // 4
    { label: "04 Aanpak", section: "Kader",
      render: (i, n) => (
        <NumberedList
          idx={i} total={n}
          eyebrow="De aanpak"
          title="Een 'profiel-plus' is tekst, geen tool"
          items={[
            { head: "Eerst de basis.", body: "Wie ik ben in mijn functie, waar ik werk, hoe ik antwoorden wil, wat je nooit doet." },
            { head: "Taakbestanden.", body: "Per terugkerende taak: wat de taak is, welke stappen erin zitten, hoe een goed resultaat eruitziet." },
            { head: "Eigen stukken.", body: "Voorbeelden van eerder werk, stuk voor stuk langs een checklist van zeven 'ja-nee-vragen' voordat ze meegaan." },
          ]}
          footnote="Alles bij elkaar onder de 2.500 woorden. De ambtenaar beheert het zelf en kan het in tien minuten aan een collega uitleggen."
        />
      ) },

    // 5
    { label: "05 Voor en na", section: "Kader",
      render: (i, n) => (
        <CodeCompare
          idx={i} total={n}
          eyebrow="Voor en na"
          title="Dezelfde vraag: bereid een Kamerbrief voor"
          filename="profiel-basis.md"
          fileNote="Gewone tekst in markdown, ongeveer 250 woorden. Zelf te lezen, zelf aan te passen."
          lines={[
            { k: "h", t: "# Profiel-basis" },
            { k: "b", t: "**Houdbaar tot:** 8 januari 2027" },
            "",
            { k: "h", t: "## Waar ik werk" },
            "Directie X bij DGDOO. Ik werk aan",
            "programma Y en zit in het maandelijkse",
            "Z-overleg.",
            "",
            { k: "h", t: "## Hoe ik antwoorden wil" },
            { k: "li", t: "- Nederlands, formeel maar niet stijf." },
            { k: "li", t: "  Begin met de kern." },
            { k: "li", t: "- Maximaal 150 woorden per onderdeel." },
            "",
            { k: "h", t: "## Wat je nooit doet" },
            { k: "li", t: "- Verzin geen feiten, cijfers of citaten." },
            { k: "li", t: "  Weet je iets niet, zeg dat dan." },
          ]}
          panels={[
            { label: "Zonder dit bestand",
              quote: "“In het licht van de maatschappelijke opgave streeft het programma Toekomstbestendig Werken ernaar ...”",
              body: "Het programma bestaat niet, het citaat ook niet." },
            { label: "Met dit bestand erbij", tone: "coral",
              quote: "“Kern: wij stellen voor om ... Onderbouwing in drie bullets. Vervolgstap: ...”",
              body: "Jouw opbouw, binnen 150 woorden, met de ontbrekende cijfers benoemd." },
          ]}
          footnote="Een opgesteld voorbeeld, nog niet getoetst. Dit bestand schrijven we samen in werksessie 1, met een echte taak."
        />
      ) },

    // 6
    { label: "06 Meten", section: "Kader",
      render: (i, n) => (
        <FourQuadrant
            idx={i} total={n}
          eyebrow="Resultaat"
          title="Wat we meten, ons voorstel"
          lead="Vier graadmeters. We doen een nulmeting in werksessie 1 en herhalen die bij de testsessie."
          items={[
            { icon: "clock", title: "Tijd", body: "Hoeveel minuten kost de taak nu, en hoeveel met het profiel." },
            { icon: "pen-line", title: "Kwaliteit", body: "Welk deel van het antwoord blijft staan zonder herschrijven." },
            { icon: "shield-check", title: "Vertrouwen", body: "Durf je dit te gebruiken voor werk dat naar buiten gaat." },
            { icon: "users", title: "Overdracht", body: "Kan een collega het profiel overnemen en zelf aanpassen." },
          ]}
          footnote="Vraag aan jullie: zijn dit de maten waarop een vervolg wordt beoordeeld, of horen er andere bij."
        />
      ) },

    // 7
    { label: "07 Techniek", section: "Techniek",
      render: (i, n) => (
        <NumberedList
          idx={i} total={n}
          eyebrow="Techniek"
          title="Drie manieren om het profiel in vlam-chat te krijgen"
          items={[
            { head: "Vast instructieveld", body: "Het profiel staat er een keer in en geldt in elk nieuw gesprek. Voorkeur, als het veld er is." },
            { head: "Een eigen map", body: "Een map met een eigen instructie en de bestanden erbij. Elk gesprek in die map erft het profiel. Werkt ook voor de taakbestanden." },
            { head: "Bundel per gesprek", body: "Een bestand meesturen en aanvinken dat het helemaal gelezen wordt. Handwerk, maar altijd mogelijk. Terugvaloptie." },
          ]}
          footnote="Welke van de drie in jullie omgeving werkt, weten we pas als we het zien."
        />
      ) },

    // 8
    { label: "08 Vijf checks", section: "Techniek",
      render: (i, n) => (
        <NumberedList
          idx={i} total={n}
          eyebrow="Nu, samen"
          title="Een kwartier op jullie scherm: vijf checks"
          items={[
            { head: "Welk versienummer heeft vlam-chat.", body: "Te vinden onder instellingen, bij informatie." },
            { head: "Is er een veld voor een vaste instructie,", body: "en blijft die staan nadat je uitlogt." },
            { head: "Kun je bij een bijgevoegd bestand kiezen", body: "dat het helemaal gelezen wordt." },
            { head: "Wordt het hele bestand gelezen of alleen stukjes.", body: "We vragen naar de laatste alinea." },
            { head: "Wat doet de controle op persoonsgegevens", body: "met een eigen naam en functie: waarschuwen, blokkeren of vervangen." },
          ]}
        />
      ) },

    // 9
    { label: "09 Planning", section: "Planning",
      render: (i, n) => (
        <TimelineVertical
          idx={i} total={n}
          eyebrow="Planning"
          title="Van vandaag naar 8 oktober"
          items={[
            { when: "Week 1", title: "10 tot 12 september", body: "Kick-off, techniek vastgesteld, datum werksessie 1 geprikt." },
            { when: "Week 2", title: "Werksessie 1", body: "Werkweek in kaart, taken gekozen, eerste test." },
            { when: "Week 3", title: "Schrijven en gebruiken", body: "Wij schrijven het profiel en de taakbestanden, de ambtenaar gebruikt ze." },
            { when: "Week 4", title: "Testsessie", body: "Echte taken, bijstellen op wat we zien." },
            { when: "Daarna", title: "Conclusie", body: "Bevindingen, oplevering en advies over een vervolg." },
          ]}
        />
      ) },

    // 10
    { label: "10 Werksessie 1", section: "Planning",
      render: (i, n) => (
        <NumberedList
          idx={i} total={n}
          eyebrow="Werksessie 1"
          title="Twee uur, vijf blokken"
          items={[
            { num: "0", head: "Vertrouwen en relevantie.", body: "Waarom dit, wat er met de opbrengst gebeurt, wat we niet doen." },
            { num: "1", head: "De werkweek in kaart.", body: "Wat komt terug, wat kost tijd, wat is jouw handschrift." },
            { num: "2", head: "Taken kiezen.", body: "Twee of drie taken, met een voorbeeld van eerder werk erbij." },
            { num: "3", head: "vlam-chat live.", body: "Zonder profiel, installeren, profiel-check, met profiel, verschil bespreken." },
            { num: "4", head: "Reflectie en de brug.", body: "Wat neem je mee, wat doen wij in week 3." },
          ]}
          footnote="De ambtenaar klikt zelf, van begin tot eind. Wij vertellen vooraf welke vier stappen komen."
        />
      ) },

    // 11
    { label: "11 Wat we nodig hebben", section: "Planning",
      render: (i, n) => (
        <NumberedList
          idx={i} total={n}
          eyebrow="Wat we nodig hebben"
          title="Vijf dingen van BZK"
          items={[
            { head: "Een deelnemer die vier weken meedoet.", body: "Twee uur voor werksessie 1, daarna ongeveer een uur per week." },
            { head: "Toegang om te kijken.", body: "Een testaccount, of steeds een moment op het scherm van Harold of Pepijn." },
            { head: "Duidelijkheid over eigen stukken.", body: "Wat mag mee het profiel in, en wie tekent daarvoor." },
            { head: "Geen wijziging van het model tot 8 oktober.", body: "Of een bericht als het toch verandert, dan meten we opnieuw." },
            { head: "Een ruimte met een scherm voor werksessie 1.", body: "Voor slides en begeleiding." },
          ]}
        />
      ) },

    // 12
    { label: "12 Oplevering", section: "Vastleggen",
      render: (i, n) => (
        <FourQuadrant
          idx={i} total={n}
          eyebrow="Oplevering"
          title="Wat er op het einde ligt"
          items={[
            { icon: "file-text", title: "Een werkend 'profiel-plus'", body: "Profiel-basis, twee of drie taakbestanden en een instructiekaart." },
            { icon: "book-open", title: "Een leesmij", body: "Hoe je het installeert, hoe je het actueel houdt en hoe een collega het overneemt. Geschreven voor iemand zonder technische achtergrond." },
            { icon: "search", title: "Bevindingen", body: "Wat werkte, wat niet, en waar vlam-chat tegen zijn grenzen liep. Met de metingen erbij." },
            { icon: "compass", title: "Advies over een vervolg", body: "Wat er nodig is om dit voor een hele directie te doen, en wat dat aan tijd en begeleiding vraagt." },
          ]}
        />
      ) },

    // 13
    { label: "13 Closing", section: "Afsluiting",
      render: (i, n) => (
        <Closing
          idx={i} total={n}
          message="Tot werksessie 1."
          contact={[
            { icon: "mail", label: "Contact", value: "annet@missionrelearn.com" },
            { icon: "building-2", label: "Van", value: "Mission Relearn" },
          ]}
        />
      ) },
  ];
}

function Tweaks() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  return (
    <TweaksPanel>
      <TweakSection title="Template">
        <TweakToggle
          label="Show layout labels"
          value={tweaks.showLayoutLabels}
          onChange={(v) => setTweak("showLayoutLabels", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------------- MAIN APP ---------------- */
function App() {
  const [tweaks] = useTweaks(TWEAK_DEFAULTS);
  let slides = useSlides(tweaks);
  /* QA: ?only=N renders just slide N so headless screenshots can capture it */
  const only = parseInt(new URLSearchParams(location.search).get("only") || "", 10);
  if (only >= 1 && only <= slides.length) slides = [slides[only - 1]];

  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.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 />);