/* polish/shell-herhaalsessie.jsx — Herhaalsessie showcase */

function HerhaalsessieApp() {
  return (
    <ShowcasePage
      kicker="Leren-pijler · stap 3 — herhaalsessie-runner"
      title="Leren · herhaalsessie"
      subtitle="Sam klikt 'Begin herhaling' en de FSRS-runner start. 12 kaarten, 4 vakken, ~8 minuten. Eén kaart in beeld tegelijk — focus, geen stapel-overload. Subject-context per kaart, voortgang als gekleurde balk per vak. Sidebar blijft staan: Sam mag elk moment uit de sessie. Pulse blijft rustig — celebrating is gereserveerd voor het sessie-einde-rapport."
    >
      <Block num="01"
        title="Kaart-flip-moment — antwoord-zijde, kaart 3 / 12"
        note="De voortgangsbalk laat verdeling per vak zien (Bio 2/5 al gedaan, rest nog te doen). Stack-hint achter de kaart suggereert 'er komen er nog'. Vier grade-knoppen met FSRS-tijdsindicaties; Pulse fluistert dat eerlijk grading beter is dan optimisme."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · KAART-FLIP" t={TK_LIGHT} Component={FrameSessieKaart} />
          <HeroFrame label="DARK · KAART-FLIP"  t={TK_DARK}  Component={FrameSessieKaart} />
        </div>
      </Block>

      <Block num="02"
        title="Kaart-front — vraagzijde, kaart 5 / 12"
        note="Front-state: Sam ziet alleen de vraag, geen antwoord, geen grade-knoppen. Eén primary CTA 'Toon antwoord' centraal, met copy eronder die aanmoedigt om eerst zelf te formuleren. Pulse=thinking — geen druk, hardop oefenen helpt. Voortgangsbalk staat op 5/12."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · KAART-FRONT" t={TK_LIGHT} Component={FrameSessieFront} />
          <HeroFrame label="DARK · KAART-FRONT"  t={TK_DARK}  Component={FrameSessieFront} />
        </div>
      </Block>

      <Block num="03"
        title="Post-grade feedback — net 'Goed' gekozen"
        note="Tussenstate ná de grade, vóór de volgende kaart. Kaart krijgt subtiel groene tint, vinkje + 'Goed gedaan — morgen weer'. Pulse=happy. Voortgangsbalk is al doorgeschoven naar 6/12 — auto-advance staat op het punt te triggeren (kleine spinner + 'Volgende kaart…' rechts). Geen knoppen — gebruiker hoeft niets te doen."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · POST-GRADE" t={TK_LIGHT} Component={FrameSessiePostGrade} />
          <HeroFrame label="DARK · POST-GRADE"  t={TK_DARK}  Component={FrameSessiePostGrade} />
        </div>
      </Block>

      <Block num="04"
        title="Vroege-stop — sessie pauzeren"
        note="Modal-overlay binnen de view. Achterliggende flow gedimd zichtbaar, dus Sam ziet wat hij verlaat. Twee CTA's: primary 'Doorgaan' (default actie, sluit modal) en secondary 'Pauzeren en stoppen'. Geen Pulse-card IN de modal — Pulse blijft achter de overlay, modal voelt dan strak en doelgericht."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · PAUZEREN" t={TK_LIGHT} Component={FrameSessiePauze} />
          <HeroFrame label="DARK · PAUZEREN"  t={TK_DARK}  Component={FrameSessiePauze} />
        </div>
      </Block>

      <Block num="05"
        title="Sessie-einde-rapport — Pulse celebrating, niet schreeuwerig"
        note="9/12 goed, 8 min, +18 XP, +24 Snaps, streak 12 → 13. Vier-stat-grid met XP en Snaps gekleurd (rest neutraal). 'Wat zat er in deze sessie' geeft Sam een beeld zonder dat hij het geheugen hoeft te raadplegen. Drie CTA's eindigen met de cross-pijler-handoff naar Oefenen."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · RAPPORT" t={TK_LIGHT} Component={FrameSessieRapport} />
          <HeroFrame label="DARK · RAPPORT"  t={TK_DARK}  Component={FrameSessieRapport} />
        </div>
      </Block>

      <Block num="06"
        title="Sessie-rapport — hoofdstuk gemastered (cross-pijler handoff)"
        note="Speciale rapport-variant: deze sessie heeft het laatste subkopje van 'De Gouden Eeuw' naar 4/4 mastery getild. Hero is pijler-blauw getint met grotere mascot=celebrating en kicker 'HOOFDSTUK BEHEERST'. Mastery-delta-card vervangt 'wat hebben we gedaan' — toont alle 4 subkopjes met before→after, alleen het laatste krijgt de groene check + delta. De DS_CD v2 HandoffCard-primitive draagt de cross-pijler-CTA naar Oefenen (groen, pijler-kleur). Onderaan klein-secondary: terug naar Leren / onderhoudsherhaling plannen."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · MASTERED" t={TK_LIGHT} Component={FrameSessieRapportMastered} />
          <HeroFrame label="DARK · MASTERED"  t={TK_DARK}  Component={FrameSessieRapportMastered} />
        </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' }}>Herhaalsessie · 6 frames in light + dark.</b><br/>
        Mastered-rapport gebruikt de DS_CD v2 HandoffCard-primitive voor de cross-pijler-CTA naar Oefenen. Mascot=celebrating in hero (size 80), encouraging in handoff (size 48).
      </footer>
    </ShowcasePage>
  );
}

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