/* Polish shell — Leren-pijler showcase. */

function ModeLabel({ label }) {
  const isDark = label.includes('DARK');
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: isDark ? '#1A2235' : '#FFFFFF',
      color: isDark ? '#F1F5F9' : '#0F172A',
      border: `1px solid ${isDark ? '#334155' : '#CBD5E1'}`,
      fontSize: 10, fontWeight: 800, letterSpacing: 0.8, textTransform: 'uppercase',
      fontFamily: 'Nunito, system-ui, sans-serif',
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: 999,
        background: isDark ? '#0F172A' : '#FEF3C7',
        border: `1px solid ${isDark ? '#475569' : '#FBBF24'}`,
      }} />
      {label}
    </div>
  );
}

function HeroFrame({ label, t, Component, height }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
      <ModeLabel label={label} />
      <Component t={t} height={height} />
    </div>
  );
}

function StateFrame({ label, note, t, Component }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
        <ModeLabel label={label} />
        {note && (
          <span style={{ fontSize: 12, color: '#94A3B8', fontWeight: 600, fontStyle: 'italic' }}>
            {note}
          </span>
        )}
      </div>
      <Component t={t} />
    </div>
  );
}

function SectionHeader({ kicker, title, subtitle }) {
  return (
    <header style={{
      maxWidth: 1320, margin: '0 auto 48px',
      paddingBottom: 22, borderBottom: '1px solid #E2E8F0',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 800, color: '#0096C7',
        letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 12,
      }}>{kicker}</div>
      <h1 style={{
        fontFamily: 'Fredoka One', fontSize: 42, color: '#0F172A',
        letterSpacing: '-0.02em', lineHeight: 1.1, margin: '0 0 14px',
      }}>{title}</h1>
      {subtitle && (
        <p style={{ fontSize: 15, color: '#475569', lineHeight: 1.65, fontWeight: 500, margin: 0, maxWidth: 820 }}>
          {subtitle}
        </p>
      )}
    </header>
  );
}

function Block({ num, title, note, children }) {
  return (
    <section style={{ marginBottom: 80, maxWidth: 1320, margin: '0 auto 80px' }}>
      <header style={{ marginBottom: 22 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 8 }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: '#94A3B8', letterSpacing: 0.5 }}>{num}</span>
          <h2 style={{ margin: 0, fontSize: 24, fontWeight: 800, color: '#F1F5F9', letterSpacing: '-0.015em' }}>{title}</h2>
        </div>
        {note && (
          <p style={{ margin: 0, fontSize: 13.5, color: '#CBD5E1', lineHeight: 1.6, fontWeight: 500, maxWidth: 900 }}>
            {note}
          </p>
        )}
      </header>
      {children}
    </section>
  );
}

function ComponentInventory() {
  const items = [
    { name: 'PulseGreetCard', tag: 'nieuw', desc: 'Rustige Pulse-banner — kicker + Fredoka-titel + body + footer + badges. Pulse Blue tint (geen paars zoals Plannen-PulseCard) omdat dit de Leren-pijler is.' },
    { name: 'VandaagLerenCard', tag: 'nieuw', desc: 'Dominante "vandaag te leren"-card. SubjectChip + uit-Plannen-badge + toets-context-pill, Fredoka-hoofdstuktitel, ProgressBar + MasteryDots zij-aan-zij, CTA-rij eindigend in Naar-Oefenen-badge.' },
    { name: 'HerhalingenCard', tag: 'nieuw', desc: 'Spaced-repetition aside. Mini-stapel-illustratie (3 kaarten met vakkleur top-border, lichte rotatie), per-vak breakdown met mini-bars, daglimiet-mededeling, primary CTA.' },
    { name: 'DoorgaanCard', tag: 'nieuw', desc: 'Compacte rij voor "pak op waar je was" — kind-label (mini-cursus / hoofdstuk / chat), titel, subtitle, optionele progress en chevron.' },
    { name: 'VakRow', tag: 'nieuw', desc: 'Bibliotheek-rij. SubjectChip-iconOnly + capitalized vaknaam + chapter + source + MasteryDots (rechts) + % gelezen. GradientBorder uit DS.' },
    { name: 'MiniCursusCard', tag: 'nieuw', desc: 'Studietechniek-tegel — icon-tile, status-pill (bezig/klaar), titel + subtitle, progress-bar onderin met N/4-teller.' },
    { name: 'VraagPulseCard', tag: 'nieuw', desc: 'Purple-tint banner-strip met Pulse (thinking) + CTA-knop. Gebruikt in normaal en eerste-keer state. Subtle "laatste chat"-meta.' },
    { name: 'FoutenanalyseCard', tag: 'nieuw', desc: 'Inline rij met Oefenen-handoff-badge + score-tile + topic-titel. Hoort bij aside als signaal "uit Oefenen".' },
    { name: 'DagOverzichtCard', tag: 'nieuw', desc: '"Vandaag — afgerond" lijst met groene check-bullets + Snaps-totaal onderin. Alleen in alles-af state.' },
    { name: 'KomtTerugCard', tag: 'nieuw', desc: 'Vakantie-only tijdlijn — datum-kolommen + label + meta. Communiceert "het slaapt, het wordt wakker".' },
    { name: 'BeginKaart', tag: 'nieuw', desc: 'Genummerd 1/2/3 begin-tegel voor eerste-keer state. Icon-tile + Fredoka-titel + body + outlined CTA met arrow.' },
    { name: 'MasteryDots', tag: 'DS', desc: 'Cross-pijler primitive (4 Pulse-bolletjes). Niet nieuw — uit DS overgenomen.' },
    { name: 'HandoffBadge / HandoffCard', tag: 'DS', desc: 'Cross-pijler primitives. Gebruikt voor "uit Plannen", "Naar Oefenen", "Naar Plannen". Plannen-paars, Oefenen-groen, Leren-cyaan.' },
    { name: 'SubjectChip / GradientBorderCard / Topbar / Sidebar', tag: 'DS', desc: 'Standaard DS-componenten, hergebruikt uit Plannen-polish.' },
  ];
  return (
    <section style={{ maxWidth: 1320, margin: '0 auto 80px' }}>
      <header style={{ marginBottom: 22 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 8 }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: '#94A3B8', letterSpacing: 0.5 }}>05</span>
          <h2 style={{ margin: 0, fontSize: 24, fontWeight: 800, color: '#F1F5F9', letterSpacing: '-0.015em' }}>
            Component-inventaris
          </h2>
        </div>
        <p style={{ margin: 0, fontSize: 13.5, color: '#CBD5E1', lineHeight: 1.6, fontWeight: 500, maxWidth: 900 }}>
          Wat ik nieuw heb samengesteld voor de Leren-hub. Deze kunnen later in de DS landen als ze cross-pijler waarde blijken te hebben — dan worden het primitives, geen one-offs.
        </p>
      </header>
      <div style={{
        background: '#FFFFFF', border: '1px solid #E2E8F0',
        borderRadius: 14, overflow: 'hidden',
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            display: 'grid', gridTemplateColumns: '220px 60px 1fr', gap: 16,
            padding: '14px 18px',
            borderTop: i === 0 ? 'none' : '1px solid #F1F5F9',
            alignItems: 'flex-start',
          }}>
            <div style={{
              fontFamily: 'ui-monospace, SF Mono, Menlo, monospace',
              fontSize: 12.5, color: '#0F172A', fontWeight: 700,
            }}>{it.name}</div>
            <div>
              <span style={{
                display: 'inline-block', padding: '2px 8px', borderRadius: 999,
                background: it.tag === 'nieuw' ? '#ECFEFF' : '#F1F5F9',
                color: it.tag === 'nieuw' ? '#0369A1' : '#64748B',
                border: `1px solid ${it.tag === 'nieuw' ? '#BAE6FD' : '#E2E8F0'}`,
                fontSize: 9.5, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase',
              }}>{it.tag}</span>
            </div>
            <div style={{ fontSize: 12.5, color: '#475569', lineHeight: 1.6 }}>{it.desc}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function App() {
  return (
    <div style={{
      minHeight: '100vh', background: '#0B1220',
      fontFamily: 'Nunito, system-ui, sans-serif',
      padding: '56px 40px 120px',
    }}>
      <div style={{
        maxWidth: 1320, margin: '0 auto 48px', padding: '40px 36px',
        background: '#F1F5F9', borderRadius: 18, border: '1px solid #E2E8F0',
      }}>
        <SectionHeader
          kicker="Leren-pijler · stap 1 — eerste compositie"
          title="Leren · dashboard-hub"
          subtitle="Eerste pas op het Leren-dashboard naast Plannen en (toekomstig) Oefenen. Doel: een rustige werktafel waar Sam in één blik vindt waar hij vandaag mee verder kan — zonder leaderboards, zonder druk. Pulse zit naast hem, niet op zijn schouder. Frames zijn 1240px breed, browser-shell zoals in Plannen-polish. Light + dark als hoofdframes; drie state-frames voor randgevallen."
        />
      </div>

      {/* ─── Hoofdframe NORMAAL — light + dark ─── */}
      <Block num="01"
        title="Hoofdframe — Sam, dinsdag, Bio-toets vrijdag"
        note="Sam is havo-3, lvl 7, 12-dagen-streak. Plannen heeft Bio H3 als vandaag-leertaak gepland (toets vrijdag). Hij heeft 12 herhaalkaarten verspreid over 4 vakken. Gisteren was hij bezig met de mini-cursus 'Actief ophalen' (stap 2/4) en heeft gechat met Pulse over een organel-vraag. Layout = 1fr / 340px: main draagt de greeting, vandaag-card, bibliotheek-rijen en mini-cursussen; aside draagt herhalingen, doorgaan-rail, foutenanalyse uit Oefenen, vraag-Pulse en een Plannen-handoff. Scroll-marathon vermeden door visuele dichtheid en duidelijke ritmes (kaart-strip-grid)."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · NORMAAL" t={TK_LIGHT} Component={FrameLerenHub} />
          <HeroFrame label="DARK · NORMAAL"  t={TK_DARK}  Component={FrameLerenHub} />
        </div>
      </Block>

      {/* ─── Variant: stapel (3 hoofdstukken op één dag) ─── */}
      <Block num="01b"
        title="Variant — stapel (3 hoofdstukken op één drukke dag)"
        note="Wat als Plannen vandaag niet één maar drie hoofdstukken oplevert? Het hoofdframe zou dan de mono-card laten ploffen. ChapterStack is de stapel-metafoor: het bovenste hoofdstuk is groot en uitgeklapt (start-actie), de twee eronder zijn smaller, getapeld zichtbaar in afnemende prominentie — wachten op hun beurt. Pulse spreidt het werk al via Plannen, dus deze variant verschijnt zelden, maar het is wél de echte schaal-test van de hub. Mini-cursus-grid is hier weggelaten ten gunste van een enkele PulseTipCard."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          <HeroFrame label="LIGHT · STAPEL" t={TK_LIGHT} Component={FrameLerenHubStack} />
          <HeroFrame label="DARK · STAPEL"  t={TK_DARK}  Component={FrameLerenHubStack} />
        </div>
      </Block>

      {/* ─── State: alles af ─── */}
      <Block num="02"
        title="State — alles af voor vandaag"
        note="Sam heeft zijn hoofdstuk gelezen, alle 12 herhalingen gedaan, een vraag aan Pulse gesteld. De hub schakelt naar een rustige klaar-state: zen-Pulse zegt dankjewel, het 'vandaag-overzicht' staat als afgevinkte lijst rechts, suggesties links zijn vrijwillig en eindigen met 'Tot morgen — zet je Snapsnel maar dicht'. Geen confetti, geen badges-shower. De energie zegt 'rust' niet 'ga door'."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <StateFrame label="LIGHT · ALLES AF" t={TK_LIGHT} Component={FrameAllesAf}
            note="Pulse-mood: zen. Snaps en streak blijven zichtbaar maar niet gevierd." />
          <StateFrame label="DARK · ALLES AF" t={TK_DARK} Component={FrameAllesAf} />
        </div>
      </Block>

      {/* ─── State: vakantie ─── */}
      <Block num="03"
        title="State — vakantie (alles in slaap-stand)"
        note="Herfstvakantie. FSRS-herhalingen pauzeren (geen achterstand-stress); leertaken zijn stilgelegd; streak wordt 'bevroren' weergegeven met dashed border ipv schreeuwende vlam. Aside vervangen door een 'Komt terug' tijdlijn. Pulse staat in zen-modus en belooft 2 dagen voor school weer rustig wakker te maken. Een 'pauze opheffen' knop blijft beschikbaar — geen lock-in. Optionele kaarten zijn écht optioneel (gelabeld 'vrijwillig')."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <StateFrame label="LIGHT · VAKANTIE" t={TK_LIGHT} Component={FrameVakantie}
            note="Streak-pill heeft dashed border om bevriezing te tonen zonder rood alarm." />
          <StateFrame label="DARK · VAKANTIE" t={TK_DARK} Component={FrameVakantie} />
        </div>
      </Block>

      {/* ─── State: eerste keer ─── */}
      <Block num="04"
        title="State — eerste keer (account net aangemaakt)"
        note="Sam heeft net z'n account aangemaakt. Geen toetsen, geen FSRS-kaarten, geen voortgang. De hub probeert NIET alles op te vullen met dummy-content — in plaats daarvan: een Pulse-welkom (curious mood, 'geen haast'), drie genummerde begin-paden (bibliotheek / mini-cursus / vraag aan Pulse), een handoff naar Plannen voor toetsen-invoer (zodat de slimme planning kan starten), en een rustig 'Hoe Leren werkt'-uitleggetje rechts. Snaps=0, streak=0 in topbar — eerlijk."
      >
        <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
          <StateFrame label="LIGHT · EERSTE KEER" t={TK_LIGHT} Component={FrameEersteKeer}
            note="Drie genummerde begin-paden (1/2/3) als zachte structuur — niet 'je MOET dit eerst'." />
          <StateFrame label="DARK · EERSTE KEER" t={TK_DARK} Component={FrameEersteKeer} />
        </div>
      </Block>

      <ComponentInventory />

      <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' }}>Leren-pijler · stap 1 · 4 frames + 1 inventaris.</b><br/>
        Hoofdframe staat in light + dark; alles-af, vakantie en eerste-keer als state-frames. Geen klikgedrag — statische compositie zoals afgesproken. Volgende stappen: detail-views (hoofdstuk-detail, herhaalsessie, mini-cursus-runner, Pulse-chat), responsive 1024/768, motion-pas voor de Pulse-banner-mood-overgangen.
      </footer>
    </div>
  );
}

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