/* polish/shell-bibliotheek.jsx — Bibliotheek showcase */

function BibliotheekApp() {
  return (
    <ShowcasePage
      kicker="Leren-pijler · stap 4 — bibliotheek"
      title="Leren · bibliotheek"
      subtitle="Sam klikt 'Bekijk hele bibliotheek' op het dashboard. Hij wil een hoofdstuk vinden — of eigen materiaal uploaden. Geen banale dropdowns: de filter-rij is een rustige chip-rij; de items zelf zijn brede rijen met subject-chip + methode + state-tag + MasteryDots. Pulse-entry onderaan voor 'ik weet niet precies wat ik zoek'. Plannen-hint rechts voor wanneer toetsen nog ontbreken."
    >
      <Block num="01"
        title="Alles-tab — gemixte rij van methodes + eigen + gecertificeerd"
        note="Sortering 'recent gewerkt aan' is actief (zichtbaar als gevulde chip). De Bio-H3-rij draagt een TOETS-VRIJDAG-badge zodat hij meteen opvalt zonder de hele rij rood te kleuren. State-tags (NU BEZIG / BIJNA KLAAR / AFGEROND / EIGEN MATERIAAL / NIEUW) gebruiken pijler- en feedback-kleuren consistent met dashboard."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · ALLES" t={TK_LIGHT} Component={FrameBibliotheekAlles} />
          <HeroFrame label="DARK · ALLES"  t={TK_DARK}  Component={FrameBibliotheekAlles} />
        </div>
      </Block>

      <Block num="02"
        title="Filter actief — Vak: Geschiedenis"
        note="Eén actieve filter-chip met ink-1 achtergrond + close-X laat zien wat er gefilterd is. Daarnaast secundaire chips ('Alleen achterstand', 'Recent gezien', 'Alleen gecertificeerd') die nog uit staan — uitnodiging om verder te versmallen. Counter boven de lijst telt op tot 4 hoofdstukken. H7 draagt een 'TOETS OVER 9 DAGEN'-badge. Pulse=curious rechts moedigt aan om een tweede filter te kiezen."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · FILTER ACTIEF" t={TK_LIGHT} Component={FrameBibliotheekFilter} />
          <HeroFrame label="DARK · FILTER ACTIEF"  t={TK_DARK}  Component={FrameBibliotheekFilter} />
        </div>
      </Block>

      <Block num="03"
        title="Eigen materiaal uploaden"
        note="Drop-zone met dashed border (radius 12) als hero — copy 'Sleep een bestand hier of klik om te kiezen' + sub 'PDF, foto of tekst. Pulse maakt er kaarten van.' Onder de drop-zone: 3 voorbeeld-tegels van eerder geüpload materiaal (compact, met MasteryDots en bestandsnaam). Pulse=encouraging rechts: 'Goeie aanvulling.' Geen primary CTA bovenaan — uploaden zelf is de actie."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · UPLOAD" t={TK_LIGHT} Component={FrameBibliotheekUpload} />
          <HeroFrame label="DARK · UPLOAD"  t={TK_DARK}  Component={FrameBibliotheekUpload} />
        </div>
      </Block>

      <Block num="04"
        title="Empty-state — nog niets in de bibliotheek"
        note="Centraal grote Pulse=curious met titel 'Nog niets in je bibliotheek' en uitleg-body. Twee CTA's naast elkaar: primary 'Hoofdstuk toevoegen' + secondary 'Materiaal uploaden'. Geen filter-chips zichtbaar (heeft geen zin zonder content). Sidebar volledig zichtbaar inclusief mascot/streak/snaps — dit is geen onboarding-state."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · EMPTY" t={TK_LIGHT} Component={FrameBibliotheekEmpty} />
          <HeroFrame label="DARK · EMPTY"  t={TK_DARK}  Component={FrameBibliotheekEmpty} />
        </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' }}>Bibliotheek · 4 frames in light + dark.</b><br/>
        Cards radius 10, drop-zone 12. Volgende ronde indien gewenst: methode-detail-view (alle hoofdstukken van één boek), upload-progress-state (PDF wordt verwerkt), bulk-edit-modus.
      </footer>
    </ShowcasePage>
  );
}

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