/* Polish desktop hero-frames — set 2:
   03 Focus-mode takeover (proefweek woensdag, overweldigd)
   04 Flashcard-sessie (Bio H4 reviewing)
   05 Deadline-drawer (Wisk-toets over 3d, tijdsanalyse) */

/* ──────────────────────────────────────────────────────────
   FRAME 03 — FOCUS-MODE TAKEOVER
   ──────────────────────────────────────────────────────────
   Context: proefweek-woensdag 07:30. Sanne heeft gister slecht
   geslapen, opent Plannen → voelt overweldigd. Pulse stelt
   focus-mode voor: 1 taak, timer, Stapel dimt achter scrim.
   Kritieke test: scrim-donkerheid in light-mode (geen claustrofobie). */

function FrameFocusMode({ t }) {
  return (
    <BrowserShell t={t}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, position: 'relative' }}>
        <Topbar t={t} title="Plannen"
          subtitle="Woensdag 6 november · 07:32 · proefweek dag 3"
          rightExtra={
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 6, height: 28, padding: '0 10px',
              borderRadius: 999, background: t.purpleDim, color: t.purpleFg,
              border: `1px solid ${hexToRgba(t.purple, 0.32)}`,
              fontSize: 10.5, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            }}>
              <PI name="maximize-2" size={10} /> Focus actief
            </div>
          }
        />

        {/* Rust-achtergrond — géén doorschemerende Stapel.
            Focus = afsluiten van wat er nu niet toe doet. Een egale, warme
            basistint geeft het gevoel 'even niks anders'. */}
        <div style={{
          flex: 1,
          background: t.mode === 'dark'
            ? 'linear-gradient(180deg, #0B1221 0%, #0A0F1E 100%)'
            : 'linear-gradient(180deg, #F8FAFC 0%, #EFF4FB 100%)',
        }} />

        {/* Focus-stage */}
        <div style={{
          position: 'absolute', inset: '85px 40px 30px', zIndex: 11,
          display: 'grid', gridTemplateColumns: '1fr 300px', gap: 22,
        }}>
          {/* Linker hoofd-kaart */}
          <div style={{
            background: t.mode === 'dark'
              ? 'linear-gradient(180deg, #1E293B 0%, #141B2C 100%)'
              : '#FFFFFF',
            border: `1.5px solid ${t.borderStrong}`,
            borderRadius: 20, padding: '28px 32px',
            display: 'flex', flexDirection: 'column', gap: 20,
            boxShadow: t.mode === 'dark'
              ? '0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04)'
              : '0 30px 80px rgba(15,23,42,0.16), 0 8px 24px rgba(15,23,42,0.08)',
            position: 'relative', overflow: 'hidden',
          }}>
            {/* Decoratieve radial */}
            <div style={{
              position: 'absolute', top: -120, right: -120, width: 380, height: 380,
              borderRadius: '50%',
              background: `radial-gradient(circle, ${hexToRgba(SUBJECTS.biologie, 0.22)}, transparent 70%)`,
              pointerEvents: 'none',
            }} />

            {/* Header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, position: 'relative' }}>
              <SubjectChip t={t} subject="biologie" size="md" />
              <TaskTypeLabel t={t}>lezen</TaskTypeLabel>
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 11, fontWeight: 700, color: t.fgMute }}>Taak 1 van 3 · vandaag</span>
            </div>

            {/* Title */}
            <div style={{ position: 'relative' }}>
              <div style={{
                fontSize: 11, fontWeight: 800, color: t.primary,
                letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 10,
              }}>Nu · ochtend-sessie</div>
              <h2 style={{
                fontFamily: 'Fredoka One', fontWeight: 400,
                fontSize: 32, lineHeight: 1.15, letterSpacing: '-0.02em',
                color: t.fg, margin: 0,
              }}>Celbiologie §4.2 — mitose doornemen</h2>
              <p style={{
                fontSize: 14, color: t.fgDim, lineHeight: 1.55, fontWeight: 500,
                marginTop: 10, marginBottom: 0, maxWidth: 520,
              }}>8 bladzijden · focus op fasen (profase → telofase). Mindmap van 2 punten maken, geen notities overtikken.</p>
            </div>

            {/* Progress line — visueel doel */}
            <div style={{
              background: t.cardSunken, border: `1px solid ${t.border}`,
              borderRadius: 10, padding: '12px 14px',
              display: 'flex', alignItems: 'center', gap: 12, position: 'relative',
            }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: hexToRgba(SUBJECTS.biologie, 0.15),
                border: `1px solid ${hexToRgba(SUBJECTS.biologie, 0.30)}`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: t.subjectFg(SUBJECTS.biologie),
              }}>
                <PI name="book-open" size={16} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12, fontWeight: 700, color: t.fg, marginBottom: 4 }}>Leesvoortgang</div>
                <div style={{ height: 6, background: t.border, borderRadius: 99, overflow: 'hidden' }}>
                  <div style={{
                    width: '35%', height: '100%',
                    background: t.subjectFg(SUBJECTS.biologie),
                    borderRadius: 99,
                  }} />
                </div>
              </div>
              <span style={{ fontSize: 11, fontWeight: 700, color: t.fgDim, whiteSpace: 'nowrap' }}>
                bladzijde 3 van 8
              </span>
            </div>

            {/* Acties */}
            <div style={{
              display: 'flex', gap: 10, paddingTop: 4, position: 'relative',
            }}>
              <button style={{
                display: 'inline-flex', alignItems: 'center', gap: 7,
                height: 40, padding: '0 18px', borderRadius: 10,
                background: t.primary, color: t.mode === 'dark' ? '#0A0F1E' : '#FFFFFF',
                border: 0, cursor: 'pointer',
                fontFamily: 'Nunito', fontWeight: 800, fontSize: 13.5,
              }}>
                <PI name="book-open" size={14} /> Open hoofdstuk
              </button>
              <button style={{
                display: 'inline-flex', alignItems: 'center', gap: 6,
                height: 40, padding: '0 14px', borderRadius: 10,
                background: 'transparent', color: t.fgDim,
                border: `1px solid ${t.border}`, cursor: 'pointer',
                fontFamily: 'Nunito', fontWeight: 700, fontSize: 12.5,
              }}>
                <PI name="pen-line" size={12} /> Notities
              </button>
              <span style={{ flex: 1 }} />
              <button style={{
                display: 'inline-flex', alignItems: 'center', gap: 7,
                height: 40, padding: '0 18px', borderRadius: 10,
                background: t.green, color: '#FFFFFF',
                border: 0, cursor: 'pointer',
                fontFamily: 'Nunito', fontWeight: 800, fontSize: 13.5,
              }}>
                <PI name="check" size={14} strokeWidth={3} /> Klaar · volgende
              </button>
            </div>
          </div>

          {/* Rechter kolom — timer + peek + Pulse */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, minHeight: 0 }}>

            {/* Timer-kaart */}
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 16,
              padding: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 14,
              boxShadow: t.shadowCard,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <PI name="clock" size={11} color={t.fgMute} />
                <span style={{
                  fontSize: 10, fontWeight: 800, color: t.fgMute,
                  letterSpacing: 0.8, textTransform: 'uppercase',
                }}>Timer</span>
              </div>
              <div style={{ position: 'relative', width: 132, height: 132 }}>
                <svg width="132" height="132" viewBox="0 0 132 132" style={{ transform: 'rotate(-90deg)' }}>
                  <circle cx="66" cy="66" r="58" fill="none"
                    stroke={t.mode === 'dark' ? '#0F1525' : '#F1F5F9'} strokeWidth="8" />
                  <circle cx="66" cy="66" r="58" fill="none"
                    stroke={t.primary} strokeWidth="8"
                    strokeDasharray="364.4" strokeDashoffset="110"
                    strokeLinecap="round" />
                </svg>
                <div style={{
                  position: 'absolute', inset: 0, display: 'flex',
                  flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                }}>
                  <span style={{
                    fontFamily: 'Fredoka One', fontSize: 30, color: t.fg,
                    letterSpacing: '-0.02em', lineHeight: 1,
                    fontVariantNumeric: 'tabular-nums',
                  }}>17:23</span>
                  <span style={{
                    fontSize: 10, fontWeight: 800, color: t.fgMute,
                    marginTop: 4, letterSpacing: 0.4, textTransform: 'uppercase',
                  }}>van 25 min</span>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 6, width: '100%' }}>
                <button style={{
                  flex: 1, height: 32, borderRadius: 8,
                  background: t.cardSunken, border: `1px solid ${t.border}`,
                  color: t.fgDim, fontSize: 11.5, fontWeight: 800,
                  cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
                  justifyContent: 'center', gap: 5,
                }}>
                  <PI name="pause" size={11} /> Pauze
                </button>
                <button style={{
                  width: 32, height: 32, borderRadius: 8,
                  background: t.cardSunken, border: `1px solid ${t.border}`,
                  color: t.fgDim, cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <PI name="rotate-ccw" size={11} />
                </button>
              </div>
            </div>

            {/* Daarna-peek */}
            <div style={{
              background: 'transparent', border: `1px dashed ${t.borderStrong}`,
              borderRadius: 10, padding: '10px 12px',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <PI name="arrow-down" size={11} color={t.fgMute} />
              <div style={{ minWidth: 0, flex: 1 }}>
                <div style={{
                  fontSize: 9.5, fontWeight: 800, color: t.fgMute,
                  letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 2,
                }}>Daarna</div>
                <div style={{
                  fontSize: 12, fontWeight: 700, color: t.fgDim,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
                }}>Flashcards ronde 2 · celbiologie</div>
              </div>
              <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fgMute }}>15m</span>
            </div>

            {/* Pulse stille supporter */}
            <div style={{
              marginTop: 'auto', padding: '12px 14px',
              background: t.card, border: `1px solid ${t.border}`,
              borderRadius: 12,
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <PulseMascot size={38} mood="idle" />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 800, color: t.fg, marginBottom: 2 }}>
                  Ik ben er als je me nodig hebt
                </div>
                <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, lineHeight: 1.4 }}>
                  Tik mij voor hulp · anders stil.
                </div>
              </div>
            </div>

            {/* Stop focus — altijd bereikbaar */}
            <button style={{
              height: 34, borderRadius: 9,
              background: 'transparent', border: `1px solid ${t.border}`,
              color: t.fgDim, fontSize: 11.5, fontWeight: 800, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              letterSpacing: 0.3,
            }}>
              <PI name="x" size={12} /> Stop focus
            </button>
          </div>
        </div>
      </div>
    </BrowserShell>
  );
}

/* ──────────────────────────────────────────────────────────
   FRAME 04 — FLASHCARD-SESSIE (Bio H4 reviewing)
   ──────────────────────────────────────────────────────────
   Context: Sanne doet flashcards voor Bio-proefwerk, kaart 7/20.
   3 rating-knoppen (weer / twijfel / ken ik) = SnapSnel spaced-repetition.
   Kritieke test: de rating-knop-cluster moet weloverwogen tonen,
   niet driving-ranting; flashcard-flip-staat in rust (voorkant getoond). */

function FrameFlashcards({ t }) {
  return (
    <BrowserShell t={t}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar t={t} title="Flashcards" subtitle="Celbiologie H4 · ronde 2 van 3" />

        <main style={{
          flex: 1, overflow: 'hidden', background: t.bgApp,
          display: 'grid', gridTemplateColumns: '1fr 340px',
        }}>
          {/* Hoofd-kolom — flashcard */}
          <div style={{
            padding: '36px 48px', display: 'flex', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center', gap: 28,
            position: 'relative', overflow: 'hidden',
          }}>
            {/* Voortgang-strook boven */}
            <div style={{
              position: 'absolute', top: 24, left: 48, right: 48,
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <SubjectChip t={t} subject="biologie" size="md" />
              <div style={{
                flex: 1, height: 6, background: t.border, borderRadius: 99, overflow: 'hidden',
                position: 'relative',
              }}>
                <div style={{
                  width: '35%', height: '100%',
                  background: `linear-gradient(90deg, ${t.subjectFg(SUBJECTS.biologie)}, ${SUBJECTS.biologie})`,
                  borderRadius: 99,
                }} />
              </div>
              <span style={{
                fontFamily: 'Fredoka One', fontSize: 15, color: t.fg,
                letterSpacing: '-0.01em', fontVariantNumeric: 'tabular-nums',
              }}>7<span style={{ color: t.fgMute, fontSize: 12 }}> / 20</span></span>
            </div>

            {/* Flashcard */}
            <div style={{
              width: '100%', maxWidth: 560, aspectRatio: '16 / 11',
              background: t.card, border: `1.5px solid ${t.border}`,
              borderRadius: 20,
              padding: '32px 36px',
              display: 'flex', flexDirection: 'column', gap: 18,
              boxShadow: t.mode === 'dark'
                ? '0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03)'
                : '0 20px 48px rgba(15,23,42,0.10), 0 4px 14px rgba(15,23,42,0.06)',
              position: 'relative', overflow: 'hidden',
            }}>
              {/* Kleur-accent links */}
              <div style={{
                position: 'absolute', top: 0, left: 0, bottom: 0, width: 4,
                background: SUBJECTS.biologie,
                borderRadius: '20px 0 0 20px',
              }} />
              {/* Side-light radial */}
              <div style={{
                position: 'absolute', top: -80, right: -80, width: 280, height: 280,
                borderRadius: '50%',
                background: `radial-gradient(circle, ${hexToRgba(SUBJECTS.biologie, 0.12)}, transparent 70%)`,
                pointerEvents: 'none',
              }} />

              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{
                  fontSize: 10, fontWeight: 800, color: t.fgMute,
                  letterSpacing: 1.2, textTransform: 'uppercase',
                }}>Begrip</span>
                <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>·</span>
                <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 700 }}>Celbiologie · mitose</span>
                <span style={{ flex: 1 }} />
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  padding: '3px 8px', borderRadius: 6,
                  background: t.warnDim, color: t.warnFg,
                  fontSize: 10, fontWeight: 800, letterSpacing: 0.3,
                }}>
                  <PI name="rotate-ccw" size={10} strokeWidth={2.5} /> tweede keer
                </span>
              </div>

              <div style={{
                flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
                textAlign: 'center', padding: '0 20px',
              }}>
                <h3 style={{
                  fontFamily: 'Fredoka One', fontWeight: 400,
                  fontSize: 30, lineHeight: 1.2, color: t.fg,
                  letterSpacing: '-0.02em', margin: 0,
                  textWrap: 'pretty',
                }}>Wat is de belangrijkste gebeurtenis tijdens de metafase?</h3>
              </div>

              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                paddingTop: 12, borderTop: `1px solid ${t.border}`,
              }}>
                <PI name="eye" size={11} color={t.fgMute} />
                <span style={{ fontSize: 11, fontWeight: 700, color: t.fgMute }}>
                  Klik om antwoord te zien · of spatiebalk
                </span>
              </div>
            </div>

            {/* Rating-knoppen — 3 opties, semantiek: rood·amber·groen.
                Rust komt uit egale hoogtes, matige saturatie, geen icoon-hiërarchie. */}
            <div style={{ display: 'flex', gap: 10, width: '100%', maxWidth: 560 }}>
              <RatingBtn t={t} variant="weer"   kbd="1" label="Weet ik nog niet"  sub="herhaal snel"      />
              <RatingBtn t={t} variant="twijfel" kbd="2" label="Twijfel"            sub="straks opnieuw"    />
              <RatingBtn t={t} variant="ken"     kbd="3" label="Ken ik"             sub="+4 dagen uitstel"  />
            </div>

            {/* Pulse encouraging, onder */}
            <div style={{
              position: 'absolute', bottom: 18, left: 48, right: 48,
              display: 'flex', alignItems: 'center', gap: 10,
              color: t.fgMute, fontSize: 11, fontWeight: 700,
            }}>
              <PulseMascot size={24} mood="idle" />
              <span>Ronde 2 loopt goed · nog ~7 min</span>
              <span style={{ flex: 1 }} />
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <PI name="keyboard" size={11} /> <b style={{ color: t.fgDim }}>1 2 3</b> om te scoren
              </span>
            </div>
          </div>

          {/* Rechter sidebar — sessie-context */}
          <aside style={{
            background: t.card, borderLeft: `1px solid ${t.border}`,
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
          }}>
            <div style={{
              padding: '14px 18px 12px', borderBottom: `1px solid ${t.border}`,
              display: 'flex', alignItems: 'baseline', gap: 8,
            }}>
              <h3 style={{
                fontFamily: 'Fredoka One', fontSize: 16, color: t.fg,
                margin: 0, letterSpacing: '-0.01em',
              }}>Deze sessie</h3>
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700, marginLeft: 'auto' }}>
                ronde 2 / 3
              </span>
            </div>

            <div style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
              {/* Stat-grid */}
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                <StatTile t={t} color={t.green}  value="12" label="ken ik"        />
                <StatTile t={t} color={t.warn}   value="4"  label="twijfel"       />
                <StatTile t={t} color={t.red}    value="3"  label="niet"          />
                <StatTile t={t} color={t.primary} value="7:12" label="tijd"      />
              </div>

              {/* Verloop-mini */}
              <div>
                <div style={{
                  fontSize: 10.5, fontWeight: 800, color: t.fgMute,
                  letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8,
                }}>Verloop</div>
                <div style={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
                  {[
                    'g','g','r','g','a','g','g',
                    'g','a','g','g','r','g','g',
                    'g','g','a','r','g','-',
                  ].map((s, i) => {
                    const c = s === 'g' ? t.green : s === 'a' ? t.warn : s === 'r' ? t.red : t.border;
                    const isCurrent = i === 6;
                    return (
                      <span key={i} style={{
                        width: 18, height: 18, borderRadius: 4,
                        background: s === '-' ? 'transparent' : hexToRgba(c, 0.18),
                        border: `1px solid ${isCurrent ? t.primary : hexToRgba(c, 0.36)}`,
                        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                        fontSize: 9, fontWeight: 800, color: c,
                      }}>{i + 1}</span>
                    );
                  })}
                </div>
              </div>

              <div style={{ height: 1, background: t.border, margin: '2px 0' }} />

              {/* Deck-metadata */}
              <div>
                <div style={{
                  fontSize: 10.5, fontWeight: 800, color: t.fgMute,
                  letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8,
                }}>Dek</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                  <MetaRow t={t} icon="layers"   label="Celbiologie H4" value="42 kaarten" />
                  <MetaRow t={t} icon="clock"    label="Laatst gezien"  value="5 dagen terug" />
                  <MetaRow t={t} icon="calendar" label="Toetsdatum"     value="vrijdag · 2d"
                    valueStyle={{ color: t.warnFg, fontWeight: 800 }} />
                </div>
              </div>

              {/* Koppeling naar Pulse-tip */}
              <div style={{
                marginTop: 4, padding: '12px 14px',
                background: t.purpleDim, border: `1px solid ${hexToRgba(t.purple, 0.22)}`,
                borderRadius: 10,
                display: 'flex', gap: 10, alignItems: 'flex-start',
              }}>
                <PulseMascot size={30} mood="thinking" style={{ marginTop: 1 }} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 10, fontWeight: 800, color: t.purpleFg,
                    letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 3,
                  }}>Pulse-tip</div>
                  <div style={{ fontSize: 11.5, fontWeight: 600, color: t.fgDim, lineHeight: 1.5 }}>
                    Mitose-fasen verwar je vaak. Na deze ronde open ik ze als los deckje.
                  </div>
                </div>
              </div>
            </div>

            {/* Sessie-stop onderaan */}
            <div style={{
              padding: '12px 18px', borderTop: `1px solid ${t.border}`,
              marginTop: 'auto',
            }}>
              <button style={{
                width: '100%', height: 36, borderRadius: 9,
                background: 'transparent', border: `1px solid ${t.border}`,
                color: t.fgDim, fontSize: 11.5, fontWeight: 800, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                letterSpacing: 0.3,
              }}>
                <PI name="x" size={11} /> Stop sessie · bewaar voortgang
              </button>
            </div>
          </aside>
        </main>
      </div>
    </BrowserShell>
  );
}

/* Rating-knop — 3 states, gelijk gewicht. */
function RatingBtn({ t, variant, kbd, label, sub }) {
  const spec = variant === 'weer'
    ? { bg: t.redDim,   fg: t.mode === 'dark' ? t.redFg : t.red,   bd: hexToRgba(t.red, 0.30) }
    : variant === 'twijfel'
      ? { bg: t.warnDim, fg: t.mode === 'dark' ? t.warnFg : t.warn, bd: hexToRgba(t.warn, 0.30) }
      : { bg: t.greenDim, fg: t.mode === 'dark' ? '#86EFAC' : t.green, bd: hexToRgba(t.green, 0.30) };

  return (
    <button style={{
      flex: 1, padding: '12px 14px', borderRadius: 12,
      background: spec.bg, border: `1.5px solid ${spec.bd}`,
      color: spec.fg, cursor: 'pointer',
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 4,
      fontFamily: 'Nunito', position: 'relative',
    }}>
      <span style={{
        position: 'absolute', top: 10, right: 12,
        width: 20, height: 20, borderRadius: 5,
        background: t.mode === 'dark' ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.7)',
        border: `1px solid ${spec.bd}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 10, fontWeight: 800, color: spec.fg,
      }}>{kbd}</span>
      <span style={{ fontSize: 13, fontWeight: 800, letterSpacing: 0.1 }}>{label}</span>
      <span style={{ fontSize: 10.5, fontWeight: 600, opacity: 0.75 }}>{sub}</span>
    </button>
  );
}

/* Stat-tegel in de rechter sidebar */
function StatTile({ t, color, value, label }) {
  return (
    <div style={{
      background: hexToRgba(color, 0.10),
      border: `1px solid ${hexToRgba(color, 0.24)}`,
      borderRadius: 10, padding: '10px 12px',
    }}>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 20, color,
        letterSpacing: '-0.01em', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
      }}>{value}</div>
      <div style={{
        fontSize: 9.5, fontWeight: 800, color: t.fgMute,
        letterSpacing: 0.8, textTransform: 'uppercase', marginTop: 6,
      }}>{label}</div>
    </div>
  );
}

function MetaRow({ t, icon, label, value, valueStyle }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      fontSize: 11.5, color: t.fgDim, fontWeight: 600,
    }}>
      <PI name={icon} size={12} color={t.fgMute} />
      <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
      <span style={{ color: t.fg, fontWeight: 700, ...(valueStyle || {}) }}>{value}</span>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   FRAME 05 — DEADLINE-DETAIL DRAWER
   ──────────────────────────────────────────────────────────
   Context: Sanne tikt op Wisk-SO-deadline (over 3d) in de linker
   Deadlines-kolom → side-sheet (480px) schuift in vanaf rechts.
   Tijdsanalyse-strook = diagnostisch, niet paniekerig. Primary CTA
   Start quiz. Reversibel (ESC / klik-buiten / X).
   Kritieke test: drawer-prominentie zonder dat Stapel eruit klapt. */

function FrameDeadlineDrawer({ t }) {
  return (
    <BrowserShell t={t} height={940}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, position: 'relative' }}>
        <Topbar t={t} title="Plannen" subtitle="Dinsdag 22 oktober · 16:07" />

        {/* Week-strip */}
        <div style={{ padding: '18px 24px 14px', background: t.bg, borderBottom: `1px solid ${t.border}` }}>
          <WeekStrip t={t}
            week={WEEK_STAPEL}
            label="Week 43"
            range="21–27 okt"
            context="Wisk SO vrijdag · geselecteerd"
            controls={false}
          />
        </div>

        {/* 3-koloms achtergrond — licht gedimd om focus naar drawer te trekken */}
        <main style={{
          flex: 1, minHeight: 0, overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '280px 1fr',
          filter: 'saturate(0.85)',
        }}>
          <section style={{
            borderRight: `1px solid ${t.border}`, background: t.bg,
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
          }}>
            <ColumnHeader t={t} title="Deadlines" subtitle="komende 14d" />
            <div style={{ flex: 1, overflow: 'auto', padding: '14px 16px',
              display: 'flex', flexDirection: 'column', gap: 10 }}>
              <SectionLabel t={t}>Toetsen</SectionLabel>
              <DeadlineRow t={t} subject="biologie" label="Bio-toets H4 — celbiologie" days="over 3d" variant="urgent" />
              {/* Geselecteerd-state — highlight maar geen accentkleur wissel */}
              <div style={{
                position: 'relative', outline: `2px solid ${t.primary}`,
                outlineOffset: 2, borderRadius: 12,
              }}>
                <DeadlineRow t={t} subject="wiskunde" label="Wisk SO — statistiek" days="over 3d" variant="urgent" />
              </div>
              <DeadlineRow t={t} subject="engels" label="Essay inleveren" days="over 11d" />
              <SectionLabel t={t}>Inleveren</SectionLabel>
              <DeadlineRow t={t} subject="scheikunde" label="Samenvatting H4" days="over 5d" variant="soon" />
              <DeadlineRow t={t} subject="frans" label="Woordenschat-lijst H6" days="over 14d" />
            </div>
          </section>

          <section style={{
            background: t.cardAlt, display: 'flex', flexDirection: 'column',
            opacity: 0.45, pointerEvents: 'none',
            filter: 'blur(0.5px)',
          }}>
            <ColumnHeader t={t} title="Vandaag" accent={t.primary} count={3} subtitle="dinsdag 22 okt" />
            <div style={{ padding: '14px 18px 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ height: 88, background: t.card, borderRadius: 14, border: `1px solid ${t.border}` }} />
              <div style={{ height: 80, background: t.card, borderRadius: 12, border: `1px solid ${t.border}` }} />
              <div style={{ height: 80, background: t.card, borderRadius: 12, border: `1px solid ${t.border}` }} />
              <div style={{ height: 80, background: t.card, borderRadius: 12, border: `1px solid ${t.border}` }} />
            </div>
          </section>
        </main>

        {/* Scrim onder drawer */}
        <div style={{
          position: 'absolute', inset: '65px 0 0 0', zIndex: 10,
          background: t.mode === 'dark' ? 'rgba(5,10,20,0.55)' : 'rgba(15,23,42,0.35)',
          backdropFilter: 'blur(3px)',
          WebkitBackdropFilter: 'blur(3px)',
        }} />

        {/* Drawer */}
        <aside style={{
          position: 'absolute', top: 65, right: 0, bottom: 0, width: 480, zIndex: 11,
          background: t.card,
          borderLeft: `1px solid ${t.borderStrong}`,
          boxShadow: t.mode === 'dark'
            ? '-30px 0 80px rgba(0,0,0,0.55)'
            : '-20px 0 60px rgba(15,23,42,0.18)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
        }}>
          {/* Drawer-header */}
          <div style={{
            padding: '18px 22px 16px', borderBottom: `1px solid ${t.border}`,
            display: 'flex', alignItems: 'flex-start', gap: 12,
          }}>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                <SubjectChip t={t} subject="wiskunde" size="md" />
                <TaskTypeLabel t={t}>schriftelijke overhoring</TaskTypeLabel>
              </div>
              <h2 style={{
                fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 22,
                color: t.fg, letterSpacing: '-0.015em', lineHeight: 1.25, margin: 0,
              }}>Wisk SO — statistiek H7</h2>
              <div style={{
                display: 'flex', alignItems: 'center', gap: 10, marginTop: 8,
                fontSize: 12, color: t.fgDim, fontWeight: 600,
              }}>
                <PI name="calendar" size={12} color={t.fgMute} />
                <span>vrijdag 25 oktober</span>
                <span style={{ color: t.fgFaint }}>·</span>
                <span style={{
                  fontWeight: 800, color: t.red,
                  padding: '2px 7px', borderRadius: 6,
                  background: t.redDim, letterSpacing: 0.2,
                }}>over 3 dagen</span>
              </div>
            </div>
            <button style={{
              width: 30, height: 30, borderRadius: 8,
              background: 'transparent', border: `1px solid ${t.border}`,
              color: t.fgDim, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <PI name="x" size={14} />
            </button>
          </div>

          {/* Body */}
          <div style={{
            flex: 1, overflow: 'auto', padding: '16px 20px 20px',
            display: 'flex', flexDirection: 'column', gap: 16,
            minHeight: 0,
          }}>
            {/* Tijdsanalyse-strook */}
            <section>
              <SectionLabel t={t}>Tijdsanalyse</SectionLabel>
              <div style={{
                background: t.cardSunken, border: `1px solid ${t.border}`,
                borderRadius: 12, padding: '12px 14px',
                display: 'flex', flexDirection: 'column', gap: 10,
              }}>
                {/* Bar */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 0, height: 12, borderRadius: 4, overflow: 'hidden' }}>
                  <div style={{ width: '32%', background: t.green, height: '100%' }} title="Gedaan" />
                  <div style={{ width: '26%', background: t.primary, height: '100%', opacity: 0.85 }} title="Aanbevolen" />
                  <div style={{
                    width: '42%',
                    background: t.mode === 'dark' ? 'rgba(148,163,184,0.18)' : '#E2E8F0',
                    height: '100%',
                  }} title="Beschikbaar" />
                </div>
                {/* Legenda */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  <LegendItem t={t} dot={t.green}  label="Gedaan"      value="55 min" />
                  <LegendItem t={t} dot={t.primary} label="Aanbevolen" value="45 min" note="nog" />
                  <LegendItem t={t} dot={t.mode === 'dark' ? '#64748B' : '#94A3B8'} label="Vrij" value="70 min" />
                </div>
                <div style={{
                  fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5,
                  padding: '7px 10px',
                  background: t.mode === 'dark' ? 'rgba(0,180,216,0.05)' : 'rgba(0,150,199,0.04)',
                  borderRadius: 8, borderLeft: `2px solid ${t.primary}`,
                }}>
                  <b style={{ color: t.fg, fontWeight: 800 }}>Tijd is er.</b> 45 min extra, verdeeld over wo en do tussen 15:00–17:00. Past nog.
                </div>
              </div>
            </section>

            {/* Gekoppelde content */}
            <section>
              <SectionLabel t={t}>Gekoppeld</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                <LinkedRow t={t} icon="layers"  title="Quiz · H7 statistiek"
                  meta="20 vragen · ~15 min" badge="70% gehad" badgeColor={t.green} primary />
                <LinkedRow t={t} icon="book-open" title="Hoofdstuk · H7"
                  meta="leerstof · 14 blz" />
                <LinkedRow t={t} icon="file-text" title="Oefenopgaves · set B"
                  meta="8 opgaven · met uitwerkingen" />
              </div>
            </section>

            {/* Acties secondair */}
            <section style={{ paddingBottom: 4 }}>
              <SectionLabel t={t}>Acties</SectionLabel>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                <SecondaryAction t={t} icon="sparkles" title="Laat Pulse herplannen"
                  meta="verdeelt 45 min over wo + do" badge="Premium" />
                <SecondaryAction t={t} icon="bell" title="Herinnering zetten"
                  meta="bijv. donderdag 15:30" />
                <SecondaryAction t={t} icon="calendar-plus" title="Extra taak toevoegen"
                  meta="handmatig · oefenen of lezen" />
              </div>
            </section>
          </div>

          {/* Footer — primary CTA + overflow */}
          <div style={{
            padding: '14px 20px', borderTop: `1px solid ${t.border}`,
            background: t.card,
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <button style={{
              width: 36, height: 40, borderRadius: 10,
              background: 'transparent', border: `1px solid ${t.border}`,
              color: t.fgDim, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }} title="Meer opties">
              <PI name="more-horizontal" size={14} />
            </button>
            <button style={{
              flex: 1, height: 40, borderRadius: 10,
              background: t.primary, color: t.mode === 'dark' ? '#0A0F1E' : '#FFFFFF',
              border: 0, cursor: 'pointer',
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 14,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              letterSpacing: 0.2,
            }}>
              <PI name="play" size={13} fill="currentColor" strokeWidth={0} /> Start quiz · H7
            </button>
          </div>
        </aside>
      </div>
    </BrowserShell>
  );
}

function LegendItem({ t, dot, label, value, note }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <span style={{ width: 8, height: 8, borderRadius: 2, background: dot }} />
        <span style={{
          fontSize: 9.5, fontWeight: 800, color: t.fgMute,
          letterSpacing: 0.6, textTransform: 'uppercase',
        }}>{label}</span>
      </div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 15, color: t.fg,
        letterSpacing: '-0.01em', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
      }}>
        {value}
        {note && <span style={{
          fontFamily: 'Nunito', fontSize: 10, fontWeight: 700, color: t.fgMute,
          marginLeft: 4, letterSpacing: 0.3,
        }}>· {note}</span>}
      </div>
    </div>
  );
}

function LinkedRow({ t, icon, title, meta, badge, badgeColor, primary = false }) {
  return (
    <div style={{
      padding: '10px 12px', borderRadius: 10,
      background: primary
        ? (t.mode === 'dark' ? 'rgba(0,180,216,0.08)' : 'rgba(0,150,199,0.05)')
        : t.cardSunken,
      border: `1px solid ${primary ? hexToRgba(t.primary, 0.35) : t.border}`,
      display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
    }}>
      <div style={{
        width: 32, height: 32, borderRadius: 8,
        background: primary ? t.primaryDim : t.card,
        border: `1px solid ${primary ? hexToRgba(t.primary, 0.30) : t.border}`,
        color: primary ? t.primary : t.fgDim,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}>
        <PI name={icon} size={15} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 12.5, fontWeight: 800, color: t.fg,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{title}</div>
        <div style={{ fontSize: 11, fontWeight: 600, color: t.fgDim, marginTop: 2 }}>{meta}</div>
      </div>
      {badge && (
        <span style={{
          padding: '3px 8px', borderRadius: 6,
          background: hexToRgba(badgeColor, 0.14),
          color: badgeColor, fontSize: 10, fontWeight: 800,
          letterSpacing: 0.3, whiteSpace: 'nowrap', flexShrink: 0,
        }}>{badge}</span>
      )}
      <PI name="chevron-right" size={13} color={t.fgMute} />
    </div>
  );
}

function SecondaryAction({ t, icon, title, meta, badge }) {
  return (
    <div style={{
      padding: '10px 12px', borderRadius: 10,
      background: t.cardSunken, border: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
    }}>
      <PI name={icon} size={14} color={t.fgDim} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 12.5, fontWeight: 700, color: t.fg,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>{title}</div>
        <div style={{ fontSize: 10.5, fontWeight: 600, color: t.fgMute, marginTop: 2 }}>{meta}</div>
      </div>
      {badge === 'Premium' && <PlanBadge t={t} plan="premium" size="sm" />}
      <PI name="chevron-right" size={13} color={t.fgMute} />
    </div>
  );
}

Object.assign(window, { FrameFocusMode, FrameFlashcards, FrameDeadlineDrawer });