/* polish/shell-hoofdstuk.jsx — Hoofdstuk-detail showcase */

function HoofdstukApp() {
  return (
    <ShowcasePage
      kicker="Leren-pijler · stap 2 — hoofdstuk-detail"
      title="Leren · hoofdstuk-detail"
      subtitle="Sam klikt 'Verder lezen' op het dashboard en landt hier — focused werkomgeving voor één hoofdstuk. Zelfde sidebar, zelfde topbar; main-area zoomt in op één onderwerp. Vier tabs: Samenvatting / Mindmap / Flashcards / Vraag aan Pulse. Right rail toont stand-van-zaken + cross-pijler-handoffs (Oefenen, Plannen). Zes frames: drie tabs uitgewerkt, mindmap, plus edge-states (nog niet begonnen, voltooid)."
    >
      <Block num="01"
        title="Samenvatting-tab — markdown-stijl content"
        note="Default-tab als Sam binnenkomt. Drie sub-secties met 'Leg verder uit'-knop per sectie (zachte hint dat Pulse altijd kan inhaken). Footer-notice maakt expliciet dat Pulse de samenvatting heeft samengesteld — geen black box. Right rail: stand-van-zaken (beheersing 2/4, 8 kaarten te herhalen, ~22 min werk, toets vrijdag), bron-credit, en twee cross-pijler-handoffs."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · SAMENVATTING" t={TK_LIGHT} Component={FrameHoofdstukSamenvatting} />
          <HeroFrame label="DARK · SAMENVATTING"  t={TK_DARK}  Component={FrameHoofdstukSamenvatting} />
        </div>
      </Block>

      <Block num="02"
        title="Flashcards-tab — kaart 3 / 12 met stack-hint"
        note="Eén kaart-in-beeld pattern (focus). Subtiele stack-hint achter de kaart geeft aan dat er meer komen. Vier grade-knoppen post-flip met menselijke timing-indicaties (zo weer / straks weer / morgen / over 4 dagen) — kleur-coded zonder agressie. Rustige Pulse-aanmoediging onderin, niet hijgerig."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · FLASHCARDS" t={TK_LIGHT} Component={FrameHoofdstukFlashcards} />
          <HeroFrame label="DARK · FLASHCARDS"  t={TK_DARK}  Component={FrameHoofdstukFlashcards} />
        </div>
      </Block>

      <Block num="03"
        title="Vraag aan Pulse-tab — RAG-chat met source-citations"
        note="Pulse antwoordt expliciet op basis van het hoofdstuk-materiaal. Source-context-badge bovenin, citations onder elk antwoord (klikbaar in clickable proto). Voorbeeld-vraag-chips boven de composer voor cold-start. Komt niet in plaats van de samenvatting — komt erbovenop."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · VRAAG AAN PULSE" t={TK_LIGHT} Component={FrameHoofdstukPulse} />
          <HeroFrame label="DARK · VRAAG AAN PULSE"  t={TK_DARK}  Component={FrameHoofdstukPulse} />
        </div>
      </Block>

      <Block num="04"
        title="Edge-state — hoofdstuk nog niet begonnen"
        note="Sam opent dit hoofdstuk voor het eerst. Geen kaart-stats, geen 'volgende stap'-highlight, geen toets-druk in de topbar. Hero-kaart met encouraging Pulse en heldere primary CTA 'Start hoofdstuk'. Inhoud-preview toont de drie onderwerpen met lege MasteryDots — context zonder verplichting. Right rail vervangt herhalings-CTA door dezelfde Start-knop, en handoff naar Plannen ('voor wanneer plan je dit in?')."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · NOG NIET BEGONNEN" t={TK_LIGHT} Component={FrameHoofdstukNieuw} />
          <HeroFrame label="DARK · NOG NIET BEGONNEN"  t={TK_DARK}  Component={FrameHoofdstukNieuw} />
        </div>
      </Block>

      <Block num="05"
        title="Edge-state — hoofdstuk voltooid"
        note="Mastery 4/4 op alle subkopjes. Celebrating Pulse, geen drukke 'volgende stap'. CTA degradeert naar secondary 'Onderhoudsherhaling starten' (1× per week, ~3 min). Pill toont volgende geplande herhaling ('ma 14 apr'). Topbar zonder toets-context, sidebar-rail toont onderhouds-ritme i.p.v. resterend werk."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · VOLTOOID" t={TK_LIGHT} Component={FrameHoofdstukVoltooid} />
          <HeroFrame label="DARK · VOLTOOID"  t={TK_DARK}  Component={FrameHoofdstukVoltooid} />
        </div>
      </Block>

      <Block num="06"
        title="Mindmap-tab — radiale visuele inhoudsopgave"
        note="Alternatief op de tekstuele samenvatting — zelfde inhoud, andere ingang. Hoofdstuk-titel in het centrum, 6 onderwerpen radiaal eromheen, elk met MasteryDots zodat je in één blik ziet waar je sterk en zwak zit. Eén knooppunt staat in hover-state ('Mitose vs meiose') om de interactie te tonen. Stippellijnen voor niet-actieve relaties, doorgetrokken voor de hover. Side-hint legt de interactie uit zonder te zwaar te zijn."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · MINDMAP" t={TK_LIGHT} Component={FrameHoofdstukMindmap} />
          <HeroFrame label="DARK · MINDMAP"  t={TK_DARK}  Component={FrameHoofdstukMindmap} />
        </div>
      </Block>

      <footer style={{
        maxWidth: 1320, margin: '48px auto 0',
        padding: '20px 24px', borderRadius: 12,
        background: '#FFFFFF', border: '1px solid #E2E8F0',
        color: '#475569', fontSize: 13, lineHeight: 1.7,
      }}>
        <b style={{ color: '#0F172A' }}>Hoofdstuk-detail · 6 frames in light + dark.</b><br/>
        Volgende ronde: motion voor tab-switch en card-flip, knooppunt-detail-overlay vanuit de mindmap, upload-flow voor eigen materiaal in dit hoofdstuk-context.
      </footer>
    </ShowcasePage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<HoofdstukApp />);