/* ═════════════════════════════════════════════════════════
   Scene 1 — Zondag avond 21:00, begin proefweek
   Scene 2 — Dinsdag 14:00, na Bio-toets
   ═════════════════════════════════════════════════════════ */

/* Scene 1 — Aankomst + Proefweek-briefing
   Ontwerp-beslissing:
   Normale Stapel aan + proefweek-briefing er bovenop als SECTIE, niet als overlay.
   Ze is het niet ontvlucht — ze wil het overzicht PAKKEN. Overlay = blocker.
   Sectie met toets-ladder + "de hele week in één blik" + eerste taken.
*/
function Scene1() {
  const t = TK;
  const exams = [
    { k: 'biologie',      label: 'Bio H4-5',     dayLabel: 'di 09:00', time: '09:00', detail: 'Cel + genetica', status: 'next' },
    { k: 'frans',         label: 'Frans SO',     dayLabel: 'wo 09:00', time: '09:00', detail: 'Woordenschat H6', status: 'upcoming' },
    { k: 'wiskunde',      label: 'Wisk toets',   dayLabel: 'wo 13:30', time: '13:30', detail: 'Statistiek',  status: 'upcoming' },
    { k: 'geschiedenis',  label: 'Ges toets',    dayLabel: 'do 10:00', time: '10:00', detail: 'Interbellum', status: 'upcoming' },
    { k: 'engels',        label: 'En essay',     dayLabel: 'vr inl.',  detail: '400w · schrijfopdr.', status: 'upcoming' },
    { k: 'scheikunde',    label: 'Sk toets',     dayLabel: 'vr 11:00', time: '11:00', detail: 'Zuren & basen', status: 'upcoming' },
    { k: 'nederlands',    label: 'Ned verslag',  dayLabel: 'ma 23:59', detail: 'Boekverslag',   status: 'upcoming' },
  ];

  const deadlines = [
    { subject: 'biologie',     type: 'Toets',  title: 'H4 · Celbiologie + H5 · Genetica', days: 2, progress: 0.42, active: true,
      checklist: [
        { label: 'H4 gelezen', done: true },
        { label: 'H5 gelezen', done: true },
        { label: 'Samenvatting af', done: false },
        { label: 'Flashcards 2× gezien', done: false },
      ],
    },
    { subject: 'frans',        type: 'SO',     title: 'Woordenschat H6',                  days: 3, progress: 0.25 },
    { subject: 'wiskunde',     type: 'Toets',  title: 'Statistiek · H7',                  days: 3, progress: 0.55 },
    { subject: 'geschiedenis', type: 'Toets',  title: 'Interbellum',                      days: 4, progress: 0.30 },
  ];

  return (
    <StapelShell
      title="Plannen"
      subtitle="Zondag 9 juni · 21:00 · proefweek start morgen"
      height={920}>
      <main style={{
        flex: 1, overflow: 'auto', padding: '18px 24px 24px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {/* Proefweek-briefing sectie */}
        <ToetsLadder
          title="Je proefweek"
          subtitle="7 deadlines · 10–17 juni"
          exams={exams}
          highlight={0}
        />

        {/* 3-koloms layout */}
        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '300px 1fr 320px',
          gap: 16, minHeight: 0,
        }}>
          {/* LEFT — deadlines */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <h2 style={colHeader(t)}>Deadlines</h2>
                <span style={sectionChip(t)}>{deadlines.length + 3}</span>
              </div>
              <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>
                +3 verder weg
              </span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto', paddingRight: 2 }}>
              {deadlines.map((d, i) => <DeadlineCardWide key={i} d={d} showChecklist={i === 0} compact />)}
              <button style={{
                ...shellBtn(t, 'ghost'), height: 32, justifyContent: 'center',
                border: `1px dashed ${t.border}`, marginTop: 2,
              }}>
                <I name="chevron-down" size={11} /> 3 verdere deadlines
              </button>
            </div>
          </section>

          {/* CENTER — vanavond */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0, overflow: 'auto' }}>
            {/* Briefing kaart — hier begint het mentale model */}
            <div style={{
              background: `linear-gradient(135deg, rgba(0,180,216,0.08), rgba(157,78,221,0.06))`,
              border: `1.5px solid rgba(0,180,216,0.28)`, borderRadius: 14,
              padding: '14px 16px', display: 'flex', gap: 12, flexShrink: 0,
            }}>
              <div style={{ width: 38, height: 38, borderRadius: 10, flexShrink: 0,
                background: 'rgba(0,180,216,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <PulseMascot variant="glow" mood="encouraging" size="sm" />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, letterSpacing: '-0.01em', marginBottom: 4 }}>
                  Morgen begint het, vanavond nog niet.
                </div>
                <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 500, lineHeight: 1.55 }}>
                  Ik heb je week alvast uitgesmeerd: Bio-stof staat het verst, daar gaan we dinsdag goed doorheen. Vanavond <b style={{ color: t.fg }}>15 min flashcards</b> om warm te lopen — de rest mag je laten.
                </div>
                <div style={{ display: 'flex', gap: 6, marginTop: 10 }}>
                  <button style={{ ...shellBtn(t, 'primary'), height: 30 }}>
                    <I name="play" size={11} fill="currentColor" strokeWidth={0} color="#07090F" /> Start flashcards
                  </button>
                  <button style={{ ...shellBtn(t, 'ghost'), height: 30 }}>
                    <I name="eye" size={11} /> Bekijk mijn plan
                  </button>
                </div>
              </div>
            </div>

            {/* vandaag header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 4 }}>
              <Dot c={t.primary} size={8} />
              <h2 style={colHeader(t, t.primary)}>Vanavond</h2>
              <span style={{ ...sectionChip(t, t.primary, 'rgba(0,180,216,0.14)'), border: '1px solid rgba(0,180,216,0.24)' }}>
                1 taak · 15 min
              </span>
              <span style={{ flex: 1 }} />
              <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, fontStyle: 'italic' }}>
                kort · niet te laat naar bed
              </span>
            </div>

            <TaskRow task={{
              subject: 'biologie', type: 'flashcards',
              title: '15 flashcards · mix H4-5',
              detail: 'Warmmaker · geen stress',
              mins: 15, source: 'Bio · morgen',
            }} state="active" />

            <div style={{
              padding: '10px 14px', background: t.card, border: `1px dashed ${t.border}`,
              borderRadius: 12, display: 'flex', alignItems: 'center', gap: 10, opacity: 0.75,
            }}>
              <I name="moon" size={13} color={t.purpleFg} />
              <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>
                Daarna rust — morgenochtend heb je Bio.
              </span>
            </div>

            {/* week-strip onder het gesprek */}
            <div style={{ marginTop: 'auto' }}>
              <MorgenVooruit />
            </div>
          </section>

          {/* RIGHT — dag-opbouw Bio (primary exam) */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <h2 style={colHeader(t)}>Laatste uren voor Bio</h2>
            </div>

            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <SmallTimeBlock time="nu"     label="Flashcards ronde 1" dot={t.purple} pill="15m" active />
              <SmallTimeBlock time="21:20"  label="Samenvatting scannen" dot={SUBJECTS.biologie.color} pill="10m" />
              <SmallTimeBlock time="21:30"  label="Rust" dot={t.fgMute} pill="slapen" mute />
              <div style={{ height: 1, background: t.border, margin: '4px 0' }} />
              <SmallTimeBlock time="di 07:30" label="Quick check flashcards" dot={t.purple} pill="10m" />
              <SmallTimeBlock time="di 08:40" label="Bio-samenvatting nalezen" dot={SUBJECTS.biologie.color} pill="15m" />
              <SmallTimeBlock time="di 09:00" label="TOETS" dot={SUBJECTS.biologie.color} end hot />
            </div>

            <div style={{
              padding: '10px 12px', background: 'rgba(255,208,0,0.06)',
              border: `1px dashed rgba(255,208,0,0.28)`, borderRadius: 10,
              display: 'flex', gap: 8, alignItems: 'flex-start',
            }}>
              <I name="sparkles" size={13} color={t.gold} style={{ marginTop: 2, flexShrink: 0 }} />
              <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
                <b style={{ color: t.fg }}>Tip:</b> H5-flashcards zijn zwakker dan H4. Ronde 1 pakt ze eerst.
              </div>
            </div>
          </section>
        </div>

        {/* Proefweek-mode bar onderaan */}
        <ProefweekModeBar />
      </main>
    </StapelShell>
  );
}

function MorgenVooruit() {
  const t = TK;
  const days = [
    { d: 'ma', date: 10, label: 'vanavond', tasks: 1, mins: 15, active: true },
    { d: 'di', date: 11, label: 'Bio',  tasks: 0, mins: 0, exam: 'biologie' },
    { d: 'wo', date: 12, label: 'Fr + Wi', tasks: 0, mins: 0, exam: 'wiskunde', double: true },
    { d: 'do', date: 13, label: 'Ges',  tasks: 0, mins: 0, exam: 'geschiedenis' },
    { d: 'vr', date: 14, label: 'Sk + essay', tasks: 0, mins: 0, exam: 'scheikunde', double: true },
    { d: 'za', date: 15, label: 'vrij',  tasks: 0, mins: 0 },
    { d: 'zo', date: 16, label: 'Ned prep', tasks: 1, mins: 45 },
  ];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '10px 12px',
    }}>
      <div style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6,
        textTransform: 'uppercase', marginBottom: 8 }}>
        Zo ziet je week eruit
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
        {days.map((d, i) => {
          const s = d.exam ? SUBJECTS[d.exam] : null;
          return (
            <div key={i} style={{
              background: d.active ? 'rgba(0,180,216,0.1)' : t.cardAlt,
              border: d.active ? `1.5px solid ${t.primary}` :
                      d.exam ? `1px solid color-mix(in srgb, ${s.color} 35%, transparent)` :
                      `1px solid ${t.border}`,
              borderRadius: 8, padding: '6px 6px 5px',
              display: 'flex', flexDirection: 'column', gap: 2, alignItems: 'center',
            }}>
              <span style={{ fontSize: 9, fontWeight: 800, color: d.active ? t.primary : t.fgMute,
                letterSpacing: 0.3, textTransform: 'uppercase' }}>{d.d}</span>
              <span style={{ fontFamily: 'Fredoka One', fontSize: 12,
                color: d.active ? t.primary : t.fg, lineHeight: 1 }}>{d.date}</span>
              {d.exam && (
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, marginTop: 1,
                  color: s.color, fontSize: 8.5, fontWeight: 800 }}>
                  <I name="flag" size={7} color={s.color} fill={s.color} strokeWidth={0} />
                  {d.double ? '×2' : ''}
                </div>
              )}
              {!d.exam && d.tasks > 0 && (
                <span style={{ fontSize: 8.5, fontWeight: 700, color: t.fgDim }}>{d.mins}m</span>
              )}
              {!d.exam && d.tasks === 0 && (
                <span style={{ fontSize: 8.5, fontWeight: 700, color: t.fgMute, fontStyle: 'italic' }}>vrij</span>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

function SmallTimeBlock({ time, label, dot, pill, active, hot, mute, end }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, opacity: mute ? 0.55 : 1 }}>
      <span style={{ fontSize: 9.5, fontWeight: 800, color: active ? t.primary : t.fgMute,
        width: 50, fontVariantNumeric: 'tabular-nums', letterSpacing: 0.2 }}>{time}</span>
      <div style={{ position: 'relative', width: 10, display: 'flex', justifyContent: 'center' }}>
        <div style={{
          width: active || end ? 10 : 6, height: active || end ? 10 : 6, borderRadius: 9999,
          background: dot,
          boxShadow: active ? `0 0 0 3px rgba(0,180,216,0.25)` : end ? `0 0 0 3px ${dot}22` : 'none',
        }} />
      </div>
      <span style={{ flex: 1, fontSize: 11.5, fontWeight: hot || end ? 800 : 700,
        color: hot || end ? t.fg : t.fgDim, overflow: 'hidden', textOverflow: 'ellipsis',
        whiteSpace: 'nowrap' }}>
        {label}
      </span>
      {pill && <span style={{ fontSize: 9.5, fontWeight: 800, color: end ? dot : t.fgMute,
        padding: '2px 7px', background: end ? `color-mix(in srgb, ${dot} 14%, transparent)` : t.cardHi,
        borderRadius: 5, letterSpacing: 0.2, textTransform: end ? 'uppercase' : 'none' }}>{pill}</span>}
    </div>
  );
}

function ProefweekModeBar() {
  const t = TK;
  return (
    <div style={{
      background: 'rgba(239,68,68,0.05)', border: `1px solid rgba(239,68,68,0.18)`,
      borderRadius: 10, padding: '8px 14px',
      display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
    }}>
      <I name="flame" size={13} color="#FCA5A5" />
      <span style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>
        <b style={{ color: t.fg }}>Proefweek-modus</b> staat aan · dagelijkse missies gepauzeerd · Pulse is stiller · flashcards 2× zoveel ingepland
      </span>
      <span style={{ flex: 1 }} />
      <button style={{
        height: 24, padding: '0 9px', borderRadius: 6,
        background: 'transparent', color: t.fgMute, border: `1px solid ${t.border}`,
        fontSize: 10, fontWeight: 800, cursor: 'pointer',
      }}>
        Wat verandert er?
      </button>
    </div>
  );
}

/* ═════════════════════════════════════════════════════════
   Scene 2 — Dinsdag 14:00, na Bio-toets
   ═════════════════════════════════════════════════════════ */
function Scene2() {
  const t = TK;
  const exams = [
    { k: 'biologie',      label: 'Bio H4-5',    dayLabel: 'di 09:00', status: 'past', past: true },
    { k: 'frans',         label: 'Frans SO',    dayLabel: 'morgen 09:00', time: '09:00', detail: 'Woordenschat H6', status: 'next' },
    { k: 'wiskunde',      label: 'Wisk toets',  dayLabel: 'morgen 13:30', time: '13:30', detail: 'Statistiek', status: 'next' },
    { k: 'geschiedenis',  label: 'Ges toets',   dayLabel: 'do 10:00', status: 'upcoming' },
    { k: 'engels',        label: 'En essay',    dayLabel: 'vr inl.',  status: 'upcoming' },
    { k: 'scheikunde',    label: 'Sk toets',    dayLabel: 'vr 11:00', status: 'upcoming' },
    { k: 'nederlands',    label: 'Ned verslag', dayLabel: 'ma 23:59', status: 'upcoming' },
  ];

  const deadlines = [
    { subject: 'frans',     type: 'SO',    title: 'Woordenschat H6',   days: 0, progress: 0.48, active: true,
      checklist: [
        { label: '60 woorden geleerd', done: true },
        { label: '20 woorden wisselvallig', done: false },
        { label: 'Flashcards ronde 2', done: false },
      ],
    },
    { subject: 'wiskunde',  type: 'Toets', title: 'Statistiek · H7',   days: 0, progress: 0.65, active: true,
      checklist: [
        { label: 'Oefeningen § 7.1-3', done: true },
        { label: 'Oefeningen § 7.4', done: false },
        { label: 'Proeftoets', done: false },
      ],
    },
    { subject: 'geschiedenis', type: 'Toets', title: 'Interbellum',    days: 1, progress: 0.30 },
    { subject: 'scheikunde',   type: 'Toets', title: 'Zuren & basen',  days: 2, progress: 0.10 },
  ];

  return (
    <StapelShell
      title="Plannen"
      subtitle="Dinsdag 11 juni · 14:00 · Bio gedaan · morgen 2 toetsen"
      height={920}>
      <main style={{
        flex: 1, overflow: 'auto', padding: '18px 24px 24px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {/* Pulse-regel: rustig "Bio staat achter je" — GEEN feestjes */}
        <div style={{
          background: 'rgba(20,27,44,0.8)',
          border: `1px solid ${t.border}`, borderRadius: 12,
          padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0,
        }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, flexShrink: 0,
            background: 'rgba(148,163,184,0.14)', display: 'flex',
            alignItems: 'center', justifyContent: 'center' }}>
            <PulseMascot variant="glow" mood="thinking" size="sm" />
          </div>
          <div style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
            Bio staat achter je. Hoe het ging weet je donderdag pas — ondertussen schuift het naar morgen: <b style={{ color: t.fg }}>Frans + Wiskunde</b>.
          </div>
          <button style={{
            height: 26, padding: '0 10px', borderRadius: 6,
            background: t.cardHi, color: t.fgDim, border: `1px solid ${t.border}`,
            fontSize: 10.5, fontWeight: 800, cursor: 'pointer',
          }}>
            Bio-taken archiveren
          </button>
        </div>

        <ToetsLadder
          title="Proefweek"
          subtitle="Bio gedaan · volgende: morgen dubbele"
          exams={exams}
          highlight={1}
        />

        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '320px 1fr 280px',
          gap: 16, minHeight: 0,
        }}>
          {/* LEFT — active deadlines Frans + Wi */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <h2 style={colHeader(t)}>Morgen</h2>
              <span style={{ ...sectionChip(t, '#FCA5A5', 'rgba(239,68,68,0.12)'),
                border: '1px solid rgba(239,68,68,0.24)' }}>dubbele</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, overflowY: 'auto', paddingRight: 2 }}>
              {deadlines.slice(0, 2).map((d, i) => <DeadlineCardWide key={i} d={d} showChecklist />)}
            </div>

            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
              <h2 style={colHeader(t)}>Daarna</h2>
              <span style={sectionChip(t)}>2</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {deadlines.slice(2).map((d, i) => <DeadlineCardWide key={i} d={d} compact />)}
            </div>
          </section>

          {/* CENTER — vanmiddag */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0, overflow: 'auto' }}>
            {/* Bio-zone archivation affordance */}
            <div style={{
              background: 'transparent', border: `1px dashed ${t.border}`, borderRadius: 12,
              padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 10, opacity: 0.75,
            }}>
              <I name="archive" size={13} color={t.fgMute} />
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
                3 Bio-taken + 15 flashcards gearchiveerd · tikken om te herstellen
              </span>
            </div>

            {/* vanmiddag header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 2 }}>
              <Dot c={t.primary} size={8} />
              <h2 style={colHeader(t, t.primary)}>Vanmiddag</h2>
              <span style={{ ...sectionChip(t, t.primary, 'rgba(0,180,216,0.14)'),
                border: '1px solid rgba(0,180,216,0.24)' }}>
                4 taken · 85 min
              </span>
            </div>

            <TaskRow task={{
              subject: 'frans', type: 'flashcards',
              title: 'Frans woorden ronde 2 · 30 cards',
              detail: 'De 20 wisselvallige + 10 nieuwe',
              mins: 20, source: 'Fr · morgen 09:00',
            }} state="active" />
            <TaskRow task={{
              subject: 'wiskunde', type: 'oefenen',
              title: 'Statistiek § 7.4 · 6 opgaven', mins: 25,
              source: 'Wi · morgen 13:30',
            }} state="queued" />
            <TaskRow task={{
              subject: 'wiskunde', type: 'quiz',
              title: 'Proeftoets statistiek', mins: 25,
              source: 'Wi · morgen 13:30',
            }} state="queued" />
            <TaskRow task={{
              subject: 'frans', type: 'flashcards',
              title: 'Laatste ronde voor bed · 15 cards', mins: 15,
              source: 'Fr · vroeg slapen',
            }} state="queued" />

            <PulseWhisper
              mood="encouraging"
              text={<>Eerst de <b style={{ color: TK.fg }}>wisselvallige Franse woorden</b> — dat pak ik eerst. Wiskunde-proeftoets bewaar ik voor na pauze, dan ben je scherper.</>}
              action="Pulse uit"
            />
          </section>

          {/* RIGHT — ritme + Bio-flashcards beslissing */}
          <section style={{ display: 'flex', flexDirection: 'column', gap: 10, minHeight: 0 }}>
            <h2 style={colHeader(t)}>Bio-stof</h2>
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 12, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <I name="layers" size={13} color={SUBJECTS.biologie.color} />
                <span style={{ fontSize: 12, fontWeight: 800, color: t.fg }}>120 Bio-cards</span>
                <span style={{ flex: 1 }} />
                <span style={{ fontSize: 10, fontWeight: 700, color: t.fgMute }}>SRS pauze</span>
              </div>
              <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
                Niet uit je geheugen — maar tot <b style={{ color: t.fg }}>zaterdag</b> inactief. Hoeft niks nu.
              </div>
              <div style={{ display: 'flex', gap: 5 }}>
                <button style={{
                  flex: 1, height: 28, borderRadius: 7,
                  background: t.cardHi, color: t.fgDim, border: `1px solid ${t.border}`,
                  fontSize: 10.5, fontWeight: 800, cursor: 'pointer',
                }}>Laat ze pauzeren</button>
                <button style={{
                  height: 28, padding: '0 10px', borderRadius: 7,
                  background: 'transparent', color: t.fgMute, border: `1px dashed ${t.border}`,
                  fontSize: 10.5, fontWeight: 800, cursor: 'pointer',
                }}>...</button>
              </div>
            </div>

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

            <h2 style={colHeader(t)}>Ritme vandaag</h2>
            <div style={{
              background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
              padding: 14, display: 'flex', flexDirection: 'column', gap: 10,
            }}>
              <SmallTimeBlock time="09:00" label="Bio toets" dot={SUBJECTS.biologie.color} pill="done" mute />
              <SmallTimeBlock time="10:30" label="Lunch thuis" dot={t.fgMute} mute />
              <SmallTimeBlock time="14:00" label="Nu · Frans ronde 2" dot={SUBJECTS.frans.color} pill="20m" active />
              <SmallTimeBlock time="14:25" label="Wi § 7.4 opgaven" dot={SUBJECTS.wiskunde.color} pill="25m" />
              <SmallTimeBlock time="15:00" label="Pauze · bewegen" dot={t.green} pill="15m" mute />
              <SmallTimeBlock time="15:15" label="Wi proeftoets" dot={SUBJECTS.wiskunde.color} pill="25m" />
              <SmallTimeBlock time="16:00" label="Vrij · buiten" dot={t.green} pill="3u" mute />
              <SmallTimeBlock time="19:00" label="Frans laatste 15 cards" dot={SUBJECTS.frans.color} pill="15m" />
              <SmallTimeBlock time="22:00" label="Slapen" dot={t.purple} end />
            </div>
          </section>
        </div>
      </main>
    </StapelShell>
  );
}

window.Scene1 = Scene1;
window.Scene2 = Scene2;