/* polish/shell-onboarding.jsx — Onboarding showcase */

function OnboardingApp() {
  return (
    <ShowcasePage
      kicker="Leren-pijler · stap 5 — eerste-keer onboarding"
      title="Leren · onboarding"
      subtitle="Sam opent SnapSnel voor het eerst en landt op het Leren-dashboard. We willen hem niet wegduwen met een form-wizard — Pulse pakt hem bij de hand met een korte spotlight-tour over de échte interface. Welkom-modal, drie spotlight-stops (bibliotheek · herhalen · pijler-handoff naar Oefenen), en een afsluit-state zonder overlay maar mét eerste-actie-prompt. Skip-link altijd zichtbaar tot het einde."
    >

      {/* ─── 01 · Welkom-modal ─── */}
      <Block num="01"
        title="Stap 1/4 — welkom (centrale modal)"
        note="Geen spotlight nog — Sam moet eerst weten wíe Pulse is voor we naar de interface wijzen. Centrale modal (480 max, radius 12), grote mascot 80px mood=encouraging, korte intro (twee zinnen, geen jargon, geen lijstjes), full-width primary CTA 'Laat zien'. Voortgangs-dots 1/4 actief. Skip-link rechtsboven blijft zichtbaar — onboarding mag nooit gedwongen voelen."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · WELKOM" t={TK_LIGHT} Component={FrameOnboardingWelkom} />
          <HeroFrame label="DARK · WELKOM"  t={TK_DARK}  Component={FrameOnboardingWelkom} />
        </div>
      </Block>

      {/* ─── 02 · Spotlight: bibliotheek ─── */}
      <Block num="02"
        title="Stap 2/4 — spotlight op de bibliotheek"
        note="Eerste spotlight-stop. Het dashboard is volledig zichtbaar maar gedimd; de 'Waar je mee bezig bent'-sectie krijgt een soft pijler-blauwe spotlight (radius 12, glow). Tooltip-card rechts ervan met klein driehoekje naar de spotlight. Mini-mascot 40px mood=curious. Body legt uit dat dit zowel methodes als eigen materiaal omvat — twee bronnen, één plek. Dots 2/4."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · BIBLIOTHEEK" t={TK_LIGHT} Component={FrameOnboardingBibliotheek} />
          <HeroFrame label="DARK · BIBLIOTHEEK"  t={TK_DARK}  Component={FrameOnboardingBibliotheek} />
        </div>
      </Block>

      {/* ─── 03 · Spotlight: herhalen ─── */}
      <Block num="03"
        title="Stap 3/4 — spotlight op herhalen-vandaag"
        note="Tweede spotlight: de HerhalingenCard rechtsboven in het dashboard. Tooltip staat links ervan zodat hij niet uit het frame valt. Mini-mascot mood=thinking — 'ik plan dit voor je'. Geen FSRS-jargon: 'kaarten die je dreigt te vergeten' en 'paar minuten per dag is genoeg' — de waardepropositie van het systeem in twee zinnen. Dots 3/4."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · HERHALEN" t={TK_LIGHT} Component={FrameOnboardingHerhalen} />
          <HeroFrame label="DARK · HERHALEN"  t={TK_DARK}  Component={FrameOnboardingHerhalen} />
        </div>
      </Block>

      {/* ─── 04 · Spotlight: pijler-nav naar Oefenen ─── */}
      <Block num="04"
        title="Stap 4/4 — spotlight op pijler-nav (naar Oefenen)"
        note="Laatste spotlight zit op de Oefenen-nav-link in de sidebar. Doel: Sam laten zien dat Leren niet het eindpunt is — er is een tweede pijler waar hij uiteindelijk naartoe gaat. Mascot=encouraging, body legt de Leren→Oefenen-flow in één zin uit. Primary CTA wisselt naar 'Begin met leren' (afsluiter, single-line, radius 10). Dots 4/4."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · OEFENEN" t={TK_LIGHT} Component={FrameOnboardingOefenen} />
          <HeroFrame label="DARK · OEFENEN"  t={TK_DARK}  Component={FrameOnboardingOefenen} />
        </div>
      </Block>

      {/* ─── 05 · Klaar — eerste actie-prompt ─── */}
      <Block num="05"
        title="Onboarding voltooid — eerste actie-prompt"
        note="Overlay weg, dashboard volledig zichtbaar en bedienbaar. Eén welcome-card bovenin (pijler-blauw getint, radius 12) blijft staan als zachte nudge: mascot=happy, titel 'Klaar om te beginnen', primary CTA 'Hoofdstuk toevoegen', close-X rechtsboven om weg te klikken. Geen voortgangs-dots meer — onboarding is klaar. Sidebar/topbar volledig actief — de tour is voorbij."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · KLAAR" t={TK_LIGHT} Component={FrameOnboardingKlaar} />
          <HeroFrame label="DARK · KLAAR"  t={TK_DARK}  Component={FrameOnboardingKlaar} />
        </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' }}>Onboarding · 5 frames in light + dark.</b><br/>
        Spotlight-positie is per frame hard-coded omdat dit showcase-statics zijn — in de live app meet de overlay de target-rect via DOM-refs. Volgende ronde indien gewenst: progressive disclosure (eerste keer een hoofdstuk openen), eerste herhaalsessie-coach-marks, méér mascot-moods over context.
      </footer>
    </ShowcasePage>
  );
}

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