/* Polish shell — desktop edition.
   Verticaal stacken: dark boven, light onder, met ModeLabel. */

function ModeLabel({ mode }) {
  const isDark = mode === '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'}`,
      }} />
      {mode}
    </div>
  );
}

function FrameSlot({ mode, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10, alignItems: 'flex-start' }}>
      <ModeLabel mode={mode} />
      {children}
    </div>
  );
}

function SideBySide({ num, title, risk, note, Component }) {
  return (
    <section style={{ marginBottom: 80, maxWidth: 1280, margin: '0 auto 80px' }}>
      <header style={{ marginBottom: 20 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 8 }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: '#64748B', letterSpacing: 0.5 }}>{num}</span>
          <h2 style={{ margin: 0, fontSize: 24, fontWeight: 800, color: '#0F172A', letterSpacing: '-0.015em' }}>{title}</h2>
        </div>
        {risk && (
          <div style={{
            fontSize: 12.5, color: '#92400E', fontWeight: 700,
            background: '#FEF3C7', border: '1px solid #FDE68A',
            padding: '6px 12px', borderRadius: 8, marginBottom: 10,
            display: 'inline-block',
          }}>⚠ Risk: {risk}</div>
        )}
        {note && (
          <p style={{ margin: 0, fontSize: 13.5, color: '#475569', lineHeight: 1.6, fontWeight: 500, maxWidth: 900 }}>
            {note}
          </p>
        )}
      </header>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
        <FrameSlot mode="dark"><Component t={TK_DARK} /></FrameSlot>
        <FrameSlot mode="light"><Component t={TK_LIGHT} /></FrameSlot>
      </div>
    </section>
  );
}

function SectionHeader({ kicker, title, subtitle }) {
  return (
    <header style={{
      maxWidth: 1280, margin: '0 auto 56px',
      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: 780 }}>
          {subtitle}
        </p>
      )}
    </header>
  );
}

function MobileNote() {
  return (
    <aside style={{
      maxWidth: 1280, margin: '0 auto 40px',
      background: '#FFFFFF', border: '1px solid #E2E8F0',
      borderRadius: 12, padding: '16px 20px',
      fontSize: 13, color: '#475569', lineHeight: 1.6,
    }}>
      <div style={{
        fontSize: 10.5, fontWeight: 800, color: '#64748B',
        letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 6,
      }}>Mobile previews · bewaard voor Flutter-batch</div>
      <div>
        De eerste iteratie van 2a bouwde mobile (390×780) frames. Die staan in{' '}
        <code style={{ background: '#F1F5F9', padding: '1px 6px', borderRadius: 4, fontFamily: 'ui-monospace, monospace', fontSize: 12 }}>polish-mobile/</code>{' '}
        voor later — niet actief, niet in deze pagina gerenderd. Huidige polish-pass focust op de web-app desktop-view.
      </div>
    </aside>
  );
}

function PolishApp() {
  return (
    <div style={{
      minHeight: '100vh', background: '#F1F5F9',
      fontFamily: 'Nunito, system-ui, sans-serif',
      padding: '56px 40px 120px',
    }}>
      <SectionHeader
        kicker="Stap 2a — light-mode vertaling"
        title="Polish · licht ↔ donker (desktop)"
        subtitle="Beide modes zijn semantisch equivalent: dezelfde informatiehiërarchie, dezelfde visuele rust, andere tonale basis. Elk paar bevat de risico-noot waar ik het extra op gecheckt heb. Frames zijn 1240px breed — browser-chrome wrapper zoals in de stress-test docs."
      />

      <MobileNote />

      <SideBySide
        num="01"
        title="Stapel — rustige dinsdag"
        note="3-koloms hoofdscherm: Deadlines links, Vandaag centraal (accent-kleur), Morgen rechts. Check contrast van sidebar + topbar-pills, week-kolom-scheidingen, subject-chips, Pulse-card prominent-state."
        Component={FrameStapel}
      />

      <SideBySide
        num="02"
        title="Stapel met Herstel-bak — 4 gemiste taken"
        risk="Rood-op-licht mag niet overgaan van 'warm alert' naar 'error alarm'"
        note="In light: bg #FEF2F2 / border #FCA5A5 / title #7F1D1D / body #991B1B. De primaire CTA blijft solid #DC2626 omdat die moet opvallen. De container-rand is opzettelijk zacht, niet schreeuwend. Mini-preview van gemiste items onder een gestippelde rand geeft specificiteit zonder het hele dashboard te claimen."
        Component={FrameHerstelBak}
      />

      <SideBySide
        num="03"
        title="Focus-mode takeover — proefweek woensdag 07:32"
        risk="Focus = afsluiten, niet gedimd-doorschemeren. Achtergrond is een rustige egale tint (géén overlay-trick)."
        note="Sanne opent Plannen in paniek voor proefwerk Bio vanmiddag. Pulse stelt voor: 1 taak (celbiologie §4.2 lezen), 25-min timer, volgende taak gluurt onderin. Géén scrim-over-Stapel — Stapel wordt vervangen door egale rust-achtergrond (licht: #F8FAFC→#EFF4FB verloop, donker: #0B1221→#0A0F1E). 'Stop focus' is altijd zichtbaar rechtsonder. Rechter kolom = timer-ring + daarna-peek + stille Pulse. Links = hoofd-kaart met progress-strook, open-hoofdstuk CTA (primary), klaar-knop (groen). Subject-chip + DS-label bovenaan."
        Component={FrameFocusMode}
      />

      <SideBySide
        num="04"
        title="Flashcard-sessie — Celbiologie H4, ronde 2"
        risk="3 rating-knoppen mogen niet voelen als test-oordeel; gelijk gewicht + rustige saturatie"
        note="Kaart 7/20, voorkant (vraag) getoond. Rechter sidebar bevat sessie-stats (ken ik / twijfel / niet), een 21-cell verloop-grid met current-highlight, deck-metadata (toetsdatum-deadline in amber) en een Pulse-tip kaart (thinking mood) die mitose-fasen als los deckje aanbiedt na deze ronde. Rating-cluster onder de kaart: rood/amber/groen egale hoogte, keyboard-shortcuts 1 2 3 rechtsboven elke knop, subtekst verklaart spaced-repetition-effect ('+4 dagen uitstel'). Sessie-stop altijd bereikbaar onderaan."
        Component={FrameFlashcards}
      />

      <SideBySide
        num="05"
        title="Deadline-drawer — Wisk SO statistiek"
        risk="Drawer-prominentie mag Stapel niet eruit klappen; tijdsanalyse moet diagnostisch voelen, niet paniekerig"
        note="Sanne tikt op Wisk-SO in de Deadlines-kolom (links) → 480px side-sheet schuift in vanaf rechts. Linker-selectie krijgt 2px primary-outline (niet kleur-wissel). Vandaag-kolom dimt naar 45% + blur 0.5px. Drawer-body: (1) tijdsanalyse-strook gedaan/aanbevolen/vrij + copy 'Ruimte is er' ipv 'deadline nadert'; (2) gekoppelde content — quiz (primary, 70%-gehad badge), hoofdstuk, oefenopgaves; (3) acties — Pulse-herplannen (Premium), herinnering, extra taak. Footer: Start quiz (primary) + overflow-menu. Reversibel via X / ESC / klik-buiten."
        Component={FrameDeadlineDrawer}
      />

      <SideBySide
        num="06"
        title="Week-view — 7-dagen kalender (F1 desktop)"
        risk="7 kolommen @ 1240px mag niet te krap worden; nu-lijn moet écht nu voelen"
        note="Topbar toggle Dag/Week/Maand met Week actief. 14:00–21:00 zichtbaar, 7 kolommen + tijd-gutter. Per dag-header: dagnaam caps + Fredoka-datum, deadline-pill indien relevant (vrijdag = Proefwerk Bio 10:20). Blokken: vak-kleur left-border 3px + tint-fill, titel in 2-line clamp, starttijd rechtsboven. Weekend-dagen krijgen een subtielere achtergrondtint. Dinsdag heeft live nu-lijn 16:05 met cyan dot. Proefwerk-header in vrijdag-kolom heeft meer gewicht (pill met subject-color ring) zodat Sanne de week-horizon leest als 'vrijdag is het'."
        Component={FrameWeekView}
      />

      <SideBySide
        num="07"
        title="Instellingen — Reminders actief"
        risk="Toggle-states en Premium-gate moeten helder communiceren zonder schreeuwen"
        note="Linker settings-nav met 6 tabs + footer (Plan/Export/Logout). Tab Reminders actief. 4 secties: Dagelijks (ochtend/middag/avond tijden + toggle), Stille momenten (schooluren/bedtijd/weekend), Slimme herinneringen (Premium-gated, 2 toggles met lock-badge + overlay-upgrade-knop), Pulse-stem (3 tone-opties radio + voorbeeld-bericht met Pulse-mascotte). Time-fields met tabular-nums + clock-icon. Toggles 40×22, cyan primary wanneer on. Premium-sectie toont feature-value in heldere staat + gradient-overlay + upgrade-CTA in purple. Geen emoji, geen slot-icons in UI zelf."
        Component={FrameSettings}
      />

      <SideBySide
        num="08"
        title="Toets-ladder — Bio H4 progressie (40% voorbereid)"
        risk="Ladder mag niet gamified voelen; status-kleuren consistent; final-step moet 'ritueel' voelen ipv eindbaas"
        note="Klik op Bio-toets-deadline opent eigen screen. Context-strook bovenaan met subject-chip, urgency-pill, titel in Fredoka, beschrijving, en Fredoka-getal '40%' in primary. Ladder van 5 stappen met verbindingslijn (40% gevuld met green→cyan gradient). Per stap: circle-dot (done=groen check, bezig=cyan met 6px glow ring, upcoming=grijs met nummer, final=red dashed-border flag-icon) + card rechts (status-pill, task-type-label caps, titel bold, meta, progress-bar alleen voor bezig, CTA alleen voor bezig, lock+ontgrendeld-label voor upcoming, datum-pill voor final). Onder ladder: Pulse-tip rail in purple met concrete voorspelling ('als je X doet sta je Y op Z%') — coaching ipv cheerleading."
        Component={FrameToetsLadder}
      />

      <SideBySide
        num="09"
        title="Herplannen-coach — Free vs Premium side-by-side"
        risk="Free mag niet voelen als gecastreerde versie; Premium moet ontlasting communiceren zonder magie"
        note="2 kaarten naast elkaar na '2 taken gemist gister'. LINKS (Free): 1 voorstel tegelijk, Pulse-bubbel (idle) met concrete zin, voorstel-preview met 1 schuif, 3 knoppen (Oké/Andere tijd/Skip), teller '1 van 2' = reflectie-moment. RECHTS (Premium): 3px purple→cyan gradient-top-accent, subtele purple-shadow, Pulse (thinking) met 'verdisconteerd' framing, 3 schuif-ops in een lijst (elk: vak-kleur-vierkant, vak-caps + titel, nieuwe tijd cyan-bold + doorgestreepte oude tijd + italic-reden), impact-grid 3 tegels (Vandaag/Woe-avond/Toets), 1 primary-knop 'Accepteer alles' + Aanpassen. Disclaimer onderaan legt uit: Free = leren door eigen schuif; Premium = last wegnemen wanneer capaciteit echt nul is, geen FOMO-hook."
        Component={FrameHerplanCoach}
      />

      <footer style={{
        maxWidth: 1280, 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' }}>Stap 2a · frames 1 t/m 9 compleet.</b><br/>
        Alle 9 hero-frames staan in beide modes. Fixes uit vorige review doorgevoerd: Frame 03 scrim = donker rgba(15,23,42,0.35) + 6px blur (hybride a+c voor écht glas-gevoel); Frame 05 overflow opgelost door paddings 18→16, gap 18→16, 20→20 body-padding; Frame 05 light-scrim nu ook 0.35-donker + 3px blur. Gradient-borders zitten al via GradientBorderCard in TaskCard + DeadlineRow (shared.jsx).<br/><br/>
        <b>Nog te doen (stap 2b+):</b> responsive 1024/768, loading/error states, motion-demo, implementation spec. Wacht op jouw feedback op frames 06–09.
      </footer>
    </div>
  );
}

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