/* Polish desktop hero-frames — set 3:
   06 Week-view (desktop week-kalender)
   07 Settings (profiel / vakken / reminders / toegankelijkheid)
   08 Toets-ladder (progressie Bio H4)
   09 Herplannen-coach Free+Premium (split) */

/* ──────────────────────────────────────────────────────────
   FRAME 06 — WEEK-VIEW (desktop week-kalender F1)
   ──────────────────────────────────────────────────────────
   Context: Sanne klikt op "Week" in Topbar-toggle. Zie haar
   hele studieplanning over 7 dagen, met tijdsloten en
   ingeplande taken als blokken. Urgency-gradient linker-rand
   per blok volgens DS. Nu-lijn toont live-tijd (dinsdag 16:05).
   Kritieke test: 7 kolommen moeten leesbaar blijven @ 1240px;
   blokken niet-overlappend; proefwerk-deadlines prominent per dag. */

function FrameWeekView({ t }) {
  // Week-schema: [{day, date, today?, deadline?, blocks: [{start, end, subject, title, type}]}]
  const weekSchedule = [
    {
      day: 'ma', date: 21, blocks: [
        { start: 15.5, end: 16.25, subject: 'scheikunde', title: 'H4 oefenen · set A', type: 'oefenen' },
        { start: 19.0,  end: 19.75, subject: 'biologie',   title: 'Flashcards ronde 1',    type: 'flashcards' },
      ],
    },
    {
      day: 'di', date: 22, today: true, blocks: [
        { start: 15.0,  end: 15.75, subject: 'biologie',    title: 'H4 samenvatting',      type: 'lezen' },
        { start: 16.25, end: 17.0,  subject: 'wiskunde',    title: 'Statistiek · Quiz',    type: 'quiz' },
        { start: 19.5,  end: 20.25, subject: 'engels',      title: 'Essay · uitwerken',    type: 'schrijven' },
      ],
    },
    {
      day: 'wo', date: 23, blocks: [
        { start: 14.5, end: 15.5,  subject: 'biologie',  title: 'H4 · fasen mindmap', type: 'lezen' },
        { start: 16.0, end: 16.75, subject: 'frans',     title: 'Woordenschat H6',    type: 'oefenen' },
        { start: 19.0, end: 19.75, subject: 'biologie',  title: 'Flashcards ronde 2', type: 'flashcards' },
      ],
    },
    {
      day: 'do', date: 24, blocks: [
        { start: 15.0, end: 16.0,  subject: 'wiskunde',  title: 'Statistiek · oefenset B', type: 'oefenen' },
        { start: 19.5, end: 20.0,  subject: 'biologie',  title: 'Flashcards ronde 3',       type: 'flashcards' },
      ],
    },
    {
      day: 'vr', date: 25, deadline: { subject: 'biologie', label: 'Bio H4', type: 'Proefwerk', time: '10:20' }, blocks: [
        { start: 14.5, end: 15.25, subject: 'wiskunde',   title: 'SO-voorbereiding',   type: 'oefenen' },
      ],
    },
    {
      day: 'za', date: 26, weekend: true, blocks: [
        { start: 10.0, end: 11.0,  subject: 'engels', title: 'Essay · afmaken', type: 'schrijven' },
      ],
    },
    { day: 'zo', date: 27, weekend: true, blocks: [] },
  ];

  // Tijdslot-band: 14:00 tot 21:00 — 7 uren zichtbaar
  const startHour = 14, endHour = 21;
  const hourHeight = 56; // px per uur

  return (
    <BrowserShell t={t}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* Topbar met view-toggle */}
        <Topbar t={t} title="Plannen"
          subtitle="Week 43 · 21–27 oktober"
          rightExtra={
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 2,
              padding: 3, borderRadius: 8,
              background: t.cardSunken, border: `1px solid ${t.border}`,
            }}>
              <button style={{
                height: 26, padding: '0 12px', borderRadius: 6, border: 0, cursor: 'pointer',
                background: 'transparent', color: t.fgDim,
                fontSize: 11, fontWeight: 800, letterSpacing: 0.3,
              }}>Dag</button>
              <button style={{
                height: 26, padding: '0 12px', borderRadius: 6, border: 0, cursor: 'pointer',
                background: t.card, color: t.fg,
                boxShadow: t.mode === 'dark' ? 'inset 0 0 0 1px rgba(255,255,255,0.08)' : '0 1px 2px rgba(15,23,42,0.06)',
                fontSize: 11, fontWeight: 800, letterSpacing: 0.3,
              }}>Week</button>
              <button style={{
                height: 26, padding: '0 12px', borderRadius: 6, border: 0, cursor: 'pointer',
                background: 'transparent', color: t.fgDim,
                fontSize: 11, fontWeight: 800, letterSpacing: 0.3,
              }}>Maand</button>
            </div>
          }
        />

        {/* Week-nav */}
        <div style={{
          padding: '12px 24px', borderBottom: `1px solid ${t.border}`,
          background: t.bg, display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <button style={{
            width: 30, height: 30, borderRadius: 8,
            background: t.card, border: `1px solid ${t.border}`,
            color: t.fgDim, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}><PI name="chevron-left" size={14} /></button>
          <h2 style={{
            fontFamily: 'Fredoka One', fontSize: 18, color: t.fg,
            margin: 0, letterSpacing: '-0.01em',
          }}>Week 43</h2>
          <span style={{ fontSize: 12, color: t.fgDim, fontWeight: 600 }}>21–27 oktober · proefweek start vrijdag</span>
          <button style={{
            width: 30, height: 30, borderRadius: 8,
            background: t.card, border: `1px solid ${t.border}`,
            color: t.fgDim, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          }}><PI name="chevron-right" size={14} /></button>
          <span style={{ flex: 1 }} />
          <button style={{
            height: 30, padding: '0 12px', borderRadius: 8,
            background: t.primaryDim, color: t.primary,
            border: `1px solid ${hexToRgba(t.primary, 0.30)}`, cursor: 'pointer',
            fontSize: 11.5, fontWeight: 800, letterSpacing: 0.3,
            display: 'inline-flex', alignItems: 'center', gap: 5,
          }}>
            <PI name="calendar" size={11} /> Vandaag
          </button>
        </div>

        <main style={{ flex: 1, minHeight: 0, overflow: 'auto', background: t.bg }}>
          {/* Day-headers */}
          <div style={{
            display: 'grid', gridTemplateColumns: '64px repeat(7, 1fr)',
            borderBottom: `1px solid ${t.borderStrong}`,
            background: t.card,
            position: 'sticky', top: 0, zIndex: 5,
          }}>
            <div style={{ borderRight: `1px solid ${t.border}` }} />
            {weekSchedule.map((d, i) => (
              <DayHeader key={i} t={t} day={d} last={i === 6} />
            ))}
          </div>

          {/* Time grid */}
          <div style={{
            position: 'relative',
            display: 'grid',
            gridTemplateColumns: '64px repeat(7, 1fr)',
            minHeight: (endHour - startHour) * hourHeight,
          }}>
            {/* Tijd-gutter */}
            <div style={{
              borderRight: `1px solid ${t.border}`, background: t.card,
              position: 'relative',
            }}>
              {Array.from({ length: endHour - startHour }, (_, i) => (
                <div key={i} style={{
                  height: hourHeight, display: 'flex',
                  alignItems: 'flex-start', justifyContent: 'flex-end',
                  padding: '4px 8px 0 0',
                  fontSize: 10, fontWeight: 700, color: t.fgMute,
                  fontVariantNumeric: 'tabular-nums', letterSpacing: 0.3,
                }}>{String(startHour + i).padStart(2, '0')}:00</div>
              ))}
            </div>

            {/* 7 day-kolommen */}
            {weekSchedule.map((d, i) => (
              <DayColumn key={i} t={t} day={d} last={i === 6}
                startHour={startHour} endHour={endHour} hourHeight={hourHeight}
                showNowLine={d.today} nowTime={16 + 5/60} />
            ))}
          </div>
        </main>
      </div>
    </BrowserShell>
  );
}

function DayHeader({ t, day, last }) {
  const isWeekend = day.weekend;
  const isToday = day.today;
  return (
    <div style={{
      padding: '10px 10px 8px',
      borderRight: last ? 0 : `1px solid ${t.border}`,
      background: isWeekend ? (t.mode === 'dark' ? 'rgba(148,163,184,0.04)' : '#F8FAFC') : 'transparent',
      display: 'flex', flexDirection: 'column', gap: 4,
      position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <span style={{
          fontSize: 10, fontWeight: 800,
          color: isToday ? t.primary : t.fgMute,
          letterSpacing: 1, textTransform: 'uppercase',
        }}>{day.day}</span>
        <span style={{
          fontFamily: 'Fredoka One', fontSize: 16,
          color: isToday ? t.primary : t.fg,
          letterSpacing: '-0.01em', fontVariantNumeric: 'tabular-nums', lineHeight: 1,
        }}>{day.date}</span>
        {isToday && (
          <span style={{
            fontSize: 9, fontWeight: 800, color: t.primary,
            letterSpacing: 0.6, textTransform: 'uppercase',
            marginLeft: 'auto',
          }}>vandaag</span>
        )}
      </div>
      {day.deadline && (
        <div style={{
          marginTop: 2, padding: '4px 7px', borderRadius: 6,
          background: hexToRgba(SUBJECTS[day.deadline.subject], t.mode === 'dark' ? 0.15 : 0.12),
          border: `1px solid ${hexToRgba(SUBJECTS[day.deadline.subject], t.mode === 'dark' ? 0.38 : 0.32)}`,
          display: 'flex', alignItems: 'center', gap: 5,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: SUBJECTS[day.deadline.subject], flexShrink: 0 }} />
          <span style={{
            fontSize: 9.5, fontWeight: 800,
            color: t.subjectFg(SUBJECTS[day.deadline.subject]),
            letterSpacing: 0.3, textTransform: 'uppercase',
          }}>{day.deadline.type}</span>
          <span style={{ fontSize: 10, fontWeight: 700, color: t.fgDim, marginLeft: 'auto' }}>
            {day.deadline.time}
          </span>
        </div>
      )}
    </div>
  );
}

function DayColumn({ t, day, last, startHour, endHour, hourHeight, showNowLine, nowTime }) {
  return (
    <div style={{
      position: 'relative',
      borderRight: last ? 0 : `1px solid ${t.border}`,
      background: day.weekend ? (t.mode === 'dark' ? 'rgba(148,163,184,0.04)' : '#F8FAFC') : 'transparent',
    }}>
      {/* Hour-lines */}
      {Array.from({ length: endHour - startHour }, (_, i) => (
        <div key={i} style={{
          position: 'absolute', left: 0, right: 0,
          top: i * hourHeight,
          borderTop: i === 0 ? 0 : `1px solid ${t.mode === 'dark' ? 'rgba(148,163,184,0.08)' : '#F1F5F9'}`,
        }} />
      ))}

      {/* Blocks */}
      {day.blocks.map((b, i) => {
        const top = (b.start - startHour) * hourHeight;
        const height = (b.end - b.start) * hourHeight;
        return <ScheduleBlock key={i} t={t} block={b} top={top} height={height} />;
      })}

      {/* Now-line */}
      {showNowLine && (
        <div style={{
          position: 'absolute', left: -3, right: 0,
          top: (nowTime - startHour) * hourHeight,
          height: 2, background: t.primary,
          boxShadow: `0 0 0 1px ${hexToRgba(t.primary, 0.30)}`,
          zIndex: 3, pointerEvents: 'none',
        }}>
          <div style={{
            position: 'absolute', left: -4, top: -4,
            width: 10, height: 10, borderRadius: '50%',
            background: t.primary,
            boxShadow: `0 0 0 3px ${hexToRgba(t.primary, 0.20)}`,
          }} />
        </div>
      )}
    </div>
  );
}

function ScheduleBlock({ t, block, top, height }) {
  const hex = SUBJECTS[block.subject];
  const fg = t.subjectFg(hex);
  return (
    <div style={{
      position: 'absolute', left: 4, right: 4, top: top + 2,
      height: height - 4, borderRadius: 8,
      background: hexToRgba(hex, t.mode === 'dark' ? 0.16 : 0.10),
      border: `1px solid ${hexToRgba(hex, t.mode === 'dark' ? 0.38 : 0.28)}`,
      borderLeft: `3px solid ${hex}`,
      padding: '5px 7px',
      display: 'flex', flexDirection: 'column', gap: 2,
      overflow: 'hidden', cursor: 'pointer',
      boxShadow: t.mode === 'dark' ? 'none' : '0 1px 2px rgba(15,23,42,0.04)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
        <span style={{
          fontSize: 8.5, fontWeight: 800, color: fg,
          letterSpacing: 0.6, textTransform: 'uppercase',
          lineHeight: 1,
        }}>{block.subject}</span>
        <span style={{
          fontSize: 8.5, fontWeight: 700, color: t.fgMute,
          letterSpacing: 0.3, lineHeight: 1, marginLeft: 'auto',
          fontVariantNumeric: 'tabular-nums',
        }}>{fmtHour(block.start)}</span>
      </div>
      <div style={{
        fontSize: 10.5, fontWeight: 700, color: t.fg,
        lineHeight: 1.25,
        overflow: 'hidden', textOverflow: 'ellipsis',
        display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
      }}>{block.title}</div>
    </div>
  );
}

function fmtHour(h) {
  const hh = Math.floor(h);
  const mm = Math.round((h - hh) * 60);
  return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;
}

/* ──────────────────────────────────────────────────────────
   FRAME 07 — SETTINGS
   ──────────────────────────────────────────────────────────
   Context: Sanne opent Settings via sidebar-footer. Drie tabs:
   Profiel / Plan & betaling / Reminders. Focus hier op 'Reminders'
   actief — want dat is waar Pulse-gedrag gestuurd wordt.
   Kritieke test: toggle-states helder, geen emoji, verticale
   rhythm in form-rows ademt, Premium-features zichtbaar gated. */

function FrameSettings({ t }) {
  return (
    <BrowserShell t={t} height={1020}>
      <Sidebar t={t} active="settings" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar t={t} title="Instellingen" subtitle="Reminders & focus-gedrag" />

        <main style={{
          flex: 1, overflow: 'auto', background: t.bg,
          display: 'grid', gridTemplateColumns: '220px 1fr',
          alignItems: 'start',
        }}>
          {/* Settings-nav */}
          <nav style={{
            position: 'sticky', top: 0,
            padding: '22px 12px',
            borderRight: `1px solid ${t.border}`,
            display: 'flex', flexDirection: 'column', gap: 2,
            background: t.bg,
          }}>
            <SettingsNavItem t={t} icon="user" label="Profiel" />
            <SettingsNavItem t={t} icon="book" label="Vakken" count="8" />
            <SettingsNavItem t={t} icon="sparkles" label="Pulse-gedrag" />
            <SettingsNavItem t={t} icon="bell" label="Reminders" active />
            <SettingsNavItem t={t} icon="palette" label="Uiterlijk" />
            <SettingsNavItem t={t} icon="accessibility" label="Toegankelijkheid" />
            <div style={{ height: 1, background: t.border, margin: '10px 8px' }} />
            <SettingsNavItem t={t} icon="credit-card" label="Plan & betaling" chip="Free" />
            <SettingsNavItem t={t} icon="download" label="Gegevens exporteren" />
            <SettingsNavItem t={t} icon="log-out" label="Uitloggen" muted />
          </nav>

          {/* Settings-content */}
          <div style={{ padding: '28px 36px 40px', maxWidth: 720 }}>
            {/* Page-header */}
            <header style={{ marginBottom: 24 }}>
              <h2 style={{
                fontFamily: 'Fredoka One', fontSize: 26, color: t.fg,
                letterSpacing: '-0.015em', margin: 0,
              }}>Reminders</h2>
              <p style={{
                fontSize: 14, color: t.fgDim, fontWeight: 500,
                lineHeight: 1.5, marginTop: 8, marginBottom: 0,
              }}>Bepaal wanneer Pulse je mag porren en wanneer 't stil moet zijn.</p>
            </header>

            {/* Sectie 1 — Dagelijks */}
            <section style={{ marginBottom: 28 }}>
              <SettingsSectionTitle t={t}>Dagelijks</SettingsSectionTitle>
              <div style={{
                background: t.card, border: `1px solid ${t.border}`,
                borderRadius: 12, overflow: 'hidden',
              }}>
                <SettingsRow t={t}
                  title="Ochtend-check"
                  desc="Pulse laat je zien wat er op de planning staat."
                  control={<TimeField t={t} value="07:30" />}
                />
                <SettingsRow t={t}
                  title="Middag-herinnering"
                  desc="Voor wanneer je meestal leert."
                  control={<TimeField t={t} value="15:00" />}
                />
                <SettingsRow t={t}
                  title="Avond-terugblik"
                  desc="Kort lijstje wat je deed + 1 zin van Pulse."
                  control={<Toggle t={t} on />}
                  last
                />
              </div>
            </section>

            {/* Sectie 2 — Stille momenten */}
            <section style={{ marginBottom: 28 }}>
              <SettingsSectionTitle t={t}>Stille momenten</SettingsSectionTitle>
              <div style={{
                background: t.card, border: `1px solid ${t.border}`,
                borderRadius: 12, overflow: 'hidden',
              }}>
                <SettingsRow t={t}
                  title="Niet tijdens schooluren"
                  desc="Geen notificaties tussen 08:30 en 15:15 op werkdagen."
                  control={<Toggle t={t} on />}
                />
                <SettingsRow t={t}
                  title="Bedtijd-stilte"
                  desc="Tussen deze tijden stuurt Pulse niks."
                  control={
                    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                      <TimeField t={t} value="22:00" />
                      <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>tot</span>
                      <TimeField t={t} value="07:00" />
                    </div>
                  }
                />
                <SettingsRow t={t}
                  title="Weekend-modus"
                  desc="Alleen 1 check-in op zaterdag-ochtend, verder niks."
                  control={<Toggle t={t} on={false} />}
                  last
                />
              </div>
            </section>

            {/* Sectie 3 — Slimme herinneringen (Premium) */}
            <section style={{ marginBottom: 28 }}>
              <SettingsSectionTitle t={t}>
                <span>Slimme herinneringen</span>
                <PlanBadge t={t} plan="premium" size="sm" />
              </SettingsSectionTitle>
              <div style={{
                background: t.card, border: `1px solid ${t.border}`,
                borderRadius: 12, overflow: 'hidden', position: 'relative',
              }}>
                <SettingsRow t={t}
                  title="Pulse leest je energie"
                  desc="Herinnert alleen wanneer streak + tijd passen, anders pauze."
                  control={<Toggle t={t} on={false} locked />}
                />
                <SettingsRow t={t}
                  title="Herplan bij gemiste taken"
                  desc="Pulse schuift automatisch, je hoort het via één bericht."
                  control={<Toggle t={t} on={false} locked />}
                  last
                />
                {/* Premium-gate overlay */}
                <div style={{
                  position: 'absolute', inset: 0,
                  background: t.mode === 'dark'
                    ? 'linear-gradient(0deg, rgba(15,15,23,0.75), rgba(15,15,23,0.10))'
                    : 'linear-gradient(0deg, rgba(255,255,255,0.92), rgba(255,255,255,0.30))',
                  display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
                  padding: '14px 16px',
                  borderRadius: 12, pointerEvents: 'none',
                }}>
                  <button style={{
                    pointerEvents: 'auto',
                    height: 34, padding: '0 16px', borderRadius: 8,
                    background: t.purple, color: '#FFFFFF',
                    border: 0, cursor: 'pointer',
                    fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
                    display: 'inline-flex', alignItems: 'center', gap: 7,
                    letterSpacing: 0.2,
                    boxShadow: `0 4px 14px ${hexToRgba(t.purple, 0.35)}`,
                  }}>
                    <PI name="sparkles" size={12} /> Upgrade naar Premium
                  </button>
                </div>
              </div>
            </section>

            {/* Sectie 4 — Pulse-stem */}
            <section>
              <SettingsSectionTitle t={t}>Pulse-stem</SettingsSectionTitle>
              <div style={{
                background: t.card, border: `1px solid ${t.border}`,
                borderRadius: 12, padding: '16px 18px',
                display: 'flex', flexDirection: 'column', gap: 14,
              }}>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 800, color: t.fg, marginBottom: 4 }}>
                    Toon van berichten
                  </div>
                  <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.5, marginBottom: 10 }}>
                    Hoe kordaat of zacht mag Pulse zijn?
                  </div>
                  <div style={{ display: 'flex', gap: 8 }}>
                    <ToneOption t={t} label="Zacht"   desc="bemoedigend, open-einde" />
                    <ToneOption t={t} label="Gewoon"  desc="neutraal, direct" selected />
                    <ToneOption t={t} label="Strak"   desc="kort en kordaat" />
                  </div>
                </div>
                <div style={{ height: 1, background: t.border }} />
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <PulseMascot size={42} mood="idle" />
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 800, color: t.fg }}>
                      Voorbeeld-bericht
                    </div>
                    <div style={{
                      fontSize: 12, color: t.fgDim, fontWeight: 500,
                      lineHeight: 1.5, marginTop: 4,
                      fontStyle: 'italic',
                    }}>
                      "Hé. Je hebt vanmiddag 45 min vrij — zullen we Bio H4 afmaken?"
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </main>
      </div>
    </BrowserShell>
  );
}

function SettingsNavItem({ t, icon, label, active, count, chip, muted }) {
  return (
    <button style={{
      display: 'flex', alignItems: 'center', gap: 10,
      height: 34, padding: '0 10px', borderRadius: 8,
      background: active ? t.primaryDim : 'transparent',
      color: active ? t.primary : muted ? t.fgMute : t.fgDim,
      border: 0, cursor: 'pointer',
      fontFamily: 'Nunito', fontSize: 12.5, fontWeight: active ? 800 : 700,
      textAlign: 'left',
    }}>
      <PI name={icon} size={14} />
      <span style={{ flex: 1 }}>{label}</span>
      {count && (
        <span style={{
          fontSize: 10, fontWeight: 800, color: t.fgMute,
          padding: '1px 6px', borderRadius: 99,
          background: t.cardSunken, border: `1px solid ${t.border}`,
          letterSpacing: 0.3,
        }}>{count}</span>
      )}
      {chip && (
        <span style={{
          fontSize: 9, fontWeight: 800, color: t.fgMute,
          padding: '2px 6px', borderRadius: 4,
          background: t.cardSunken, border: `1px solid ${t.border}`,
          letterSpacing: 0.5, textTransform: 'uppercase',
        }}>{chip}</span>
      )}
    </button>
  );
}

function SettingsSectionTitle({ t, children }) {
  return (
    <h3 style={{
      fontSize: 11, fontWeight: 800, color: t.fgMute,
      letterSpacing: 1.2, textTransform: 'uppercase',
      margin: '0 0 12px 2px',
      display: 'inline-flex', alignItems: 'center', gap: 8,
    }}>{children}</h3>
  );
}

function SettingsRow({ t, title, desc, control, last }) {
  return (
    <div style={{
      padding: '14px 18px',
      borderBottom: last ? 0 : `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 20,
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13.5, fontWeight: 800, color: t.fg, marginBottom: 3 }}>{title}</div>
        <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 500, lineHeight: 1.5 }}>{desc}</div>
      </div>
      <div style={{ flexShrink: 0 }}>{control}</div>
    </div>
  );
}

function TimeField({ t, value }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 30, padding: '0 10px',
      background: t.cardSunken, border: `1px solid ${t.border}`,
      borderRadius: 7,
      fontSize: 12.5, fontWeight: 700, color: t.fg,
      fontVariantNumeric: 'tabular-nums', letterSpacing: 0.3,
    }}>
      <PI name="clock" size={11} color={t.fgMute} /> {value}
    </div>
  );
}

function Toggle({ t, on, locked }) {
  return (
    <div style={{
      position: 'relative', width: 40, height: 22, borderRadius: 99,
      background: on ? t.primary : t.mode === 'dark' ? 'rgba(148,163,184,0.25)' : '#CBD5E1',
      transition: 'background .15s', cursor: locked ? 'not-allowed' : 'pointer',
      opacity: locked ? 0.55 : 1,
    }}>
      <div style={{
        position: 'absolute', top: 2, left: on ? 20 : 2,
        width: 18, height: 18, borderRadius: '50%',
        background: '#FFFFFF',
        boxShadow: '0 1px 3px rgba(15,23,42,0.30)',
        transition: 'left .15s',
      }} />
      {locked && (
        <div style={{
          position: 'absolute', top: -6, right: -6,
          width: 16, height: 16, borderRadius: '50%',
          background: t.card, border: `1px solid ${t.border}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: t.fgMute,
        }}>
          <PI name="lock" size={9} />
        </div>
      )}
    </div>
  );
}

function ToneOption({ t, label, desc, selected }) {
  return (
    <button style={{
      flex: 1, padding: '10px 12px', borderRadius: 10,
      background: selected ? t.primaryDim : t.cardSunken,
      border: `1.5px solid ${selected ? t.primary : t.border}`,
      color: selected ? t.primary : t.fgDim,
      cursor: 'pointer', textAlign: 'left',
      display: 'flex', flexDirection: 'column', gap: 3,
      fontFamily: 'Nunito',
    }}>
      <span style={{ fontSize: 12.5, fontWeight: 800 }}>{label}</span>
      <span style={{ fontSize: 10.5, fontWeight: 600, color: t.fgMute }}>{desc}</span>
    </button>
  );
}

/* ──────────────────────────────────────────────────────────
   FRAME 08 — TOETS-LADDER (Bio H4 progressie)
   ──────────────────────────────────────────────────────────
   Context: Sanne klikt in Stapel op de Bio-toets-deadline → ladder
   opent als eigen screen: 5 stappen van lezen → samenvatten →
   flashcards → quiz → toets. Elke stap toont status (gedaan,
   bezig, nog-niet, vereist-voor-volgende). Huidige stap = flashcards ronde 2.
   Kritieke test: ladder moet 'progressie' voelen zonder gamification-slop;
   status-kleuren consistent met DS (groen=gedaan, cyan=bezig, grijs=nog-niet). */

function FrameToetsLadder({ t }) {
  return (
    <BrowserShell t={t} height={980}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar t={t} title="Bio H4 — proefwerk"
          subtitle="Jouw weg naar vrijdag · 5 stappen"
          back
        />

        <main style={{
          flex: 1, overflow: 'auto', background: t.bgApp,
          padding: '28px 40px 40px',
        }}>
          {/* Context-strook */}
          <div style={{
            maxWidth: 900, margin: '0 auto 28px',
            display: 'grid', gridTemplateColumns: '1fr auto', gap: 20,
            padding: '18px 20px',
            background: t.card, border: `1px solid ${t.border}`,
            borderRadius: 14,
            boxShadow: t.shadowCard,
          }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                <SubjectChip t={t} subject="biologie" size="md" />
                <span style={{
                  fontSize: 10, fontWeight: 800,
                  color: t.red, letterSpacing: 0.8, textTransform: 'uppercase',
                  padding: '3px 8px', borderRadius: 5,
                  background: t.redDim,
                }}>over 3 dagen</span>
              </div>
              <h2 style={{
                fontFamily: 'Fredoka One', fontSize: 24, color: t.fg,
                letterSpacing: '-0.015em', lineHeight: 1.2, margin: 0,
              }}>Celbiologie — hoofdstuk 4</h2>
              <p style={{
                fontSize: 13, color: t.fgDim, fontWeight: 500, lineHeight: 1.55,
                marginTop: 6, marginBottom: 0, maxWidth: 480,
              }}>
                Vrijdag 25 oktober · 10:20 · proefwerk van 1 uur.
                De ladder hieronder verdeelt het werk zodat je niet alles op donderdagavond hoeft.
              </p>
            </div>
            <div style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6,
              padding: '0 14px', borderLeft: `1px solid ${t.border}`,
            }}>
              <div style={{
                fontFamily: 'Fredoka One', fontSize: 32, color: t.primary,
                letterSpacing: '-0.02em', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
              }}>40<span style={{ fontSize: 16, color: t.fgDim, fontWeight: 400 }}>%</span></div>
              <div style={{
                fontSize: 10, fontWeight: 800, color: t.fgMute,
                letterSpacing: 0.8, textTransform: 'uppercase',
              }}>voorbereid</div>
            </div>
          </div>

          {/* Ladder */}
          <div style={{ maxWidth: 900, margin: '0 auto', position: 'relative' }}>
            {/* Verbinding-lijn */}
            <div style={{
              position: 'absolute', left: 27, top: 28, bottom: 28,
              width: 2, background: t.border, zIndex: 1,
            }}>
              <div style={{
                position: 'absolute', top: 0, left: 0, width: '100%',
                height: '40%',
                background: `linear-gradient(180deg, ${t.green}, ${t.primary})`,
              }} />
            </div>

            <LadderStep t={t}
              n={1} status="done"
              title="Lees H4 door" subject="biologie" type="lezen"
              meta="8 blz · ~35 min" completed="zondag · 55 min"
            />
            <LadderStep t={t}
              n={2} status="done"
              title="Maak samenvatting" subject="biologie" type="schrijven"
              meta="2 blz notities · fasen mindmap" completed="maandag · 40 min"
            />
            <LadderStep t={t}
              n={3} status="active"
              title="Flashcards — ronde 2" subject="biologie" type="flashcards"
              meta="42 kaarten · 3 rondes" progress={0.35} progressLabel="kaart 7 van 20"
              action="Ga door met ronde"
            />
            <LadderStep t={t}
              n={4} status="upcoming"
              title="Oefenquiz H4" subject="biologie" type="quiz"
              meta="15 vragen · ~12 min" unlockAt="donderdag"
            />
            <LadderStep t={t}
              n={5} status="final"
              title="Proefwerk" subject="biologie" type="toets"
              meta="1 uur · op school" date="vrijdag 10:20"
            />
          </div>

          {/* Pulse-rail onderaan */}
          <div style={{
            maxWidth: 900, margin: '28px auto 0',
            padding: '14px 18px',
            background: t.purpleDim,
            border: `1px solid ${hexToRgba(t.purple, 0.24)}`,
            borderRadius: 12,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <PulseMascot size={42} mood="thinking" />
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: 10, fontWeight: 800, color: t.purpleFg,
                letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 3,
              }}>Pulse-tip</div>
              <div style={{
                fontSize: 13, color: t.fg, fontWeight: 600, lineHeight: 1.55,
              }}>
                Als je vandaag ronde 2 afmaakt en donderdag de oefenquiz doet, sta je zaterdag op ~80%.
                De mitose-fasen verwar je vaak — ik heb er een los deckje van gemaakt voor morgen.
              </div>
            </div>
          </div>
        </main>
      </div>
    </BrowserShell>
  );
}

function LadderStep({ t, n, status, title, subject, type, meta, completed, progress, progressLabel, action, unlockAt, date }) {
  const isDone = status === 'done';
  const isActive = status === 'active';
  const isFinal = status === 'final';
  const isUpcoming = status === 'upcoming';

  const dotColor = isDone ? t.green : isActive ? t.primary : isFinal ? t.red : t.fgMute;
  const hex = SUBJECTS[subject];

  return (
    <div style={{
      position: 'relative', zIndex: 2,
      display: 'flex', gap: 20,
      marginBottom: 14,
    }}>
      {/* Dot */}
      <div style={{
        width: 56, flexShrink: 0,
        display: 'flex', justifyContent: 'center',
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: '50%',
          background: isActive ? t.primary : isDone ? t.green : isFinal ? t.redDim : t.card,
          border: isActive
            ? `3px solid ${hexToRgba(t.primary, 0.30)}`
            : isFinal
              ? `2px dashed ${t.red}`
              : `2px solid ${isDone ? t.green : t.border}`,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
          color: isActive || isDone ? '#FFFFFF' : isFinal ? t.red : t.fgMute,
          boxShadow: isActive ? `0 0 0 6px ${hexToRgba(t.primary, 0.12)}` : 'none',
          position: 'relative',
        }}>
          {isDone ? <PI name="check" size={22} strokeWidth={3} />
            : isFinal ? <PI name="flag" size={18} strokeWidth={2} />
            : <span style={{
                fontFamily: 'Fredoka One', fontSize: 20,
                letterSpacing: '-0.01em', lineHeight: 1,
              }}>{n}</span>}
        </div>
      </div>

      {/* Card */}
      <div style={{
        flex: 1,
        background: isActive
          ? (t.mode === 'dark' ? 'rgba(0,180,216,0.08)' : 'rgba(0,150,199,0.04)')
          : t.card,
        border: `1.5px solid ${isActive ? hexToRgba(t.primary, 0.35) : t.border}`,
        borderRadius: 12,
        padding: '14px 18px',
        boxShadow: isActive ? `0 6px 20px ${hexToRgba(t.primary, 0.12)}` : 'none',
        opacity: isUpcoming ? 0.75 : 1,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
          <TaskTypeLabel t={t}>{type}</TaskTypeLabel>
          {isDone && (
            <span style={{
              fontSize: 10, fontWeight: 800, color: t.green,
              letterSpacing: 0.5, textTransform: 'uppercase',
              padding: '2px 7px', borderRadius: 5,
              background: t.greenDim,
            }}>gedaan</span>
          )}
          {isActive && (
            <span style={{
              fontSize: 10, fontWeight: 800, color: t.primary,
              letterSpacing: 0.5, textTransform: 'uppercase',
              padding: '2px 7px', borderRadius: 5,
              background: t.primaryDim,
            }}>bezig</span>
          )}
          {isUpcoming && unlockAt && (
            <span style={{
              fontSize: 10, fontWeight: 700, color: t.fgMute,
              letterSpacing: 0.3,
              display: 'inline-flex', alignItems: 'center', gap: 4,
            }}><PI name="lock" size={10} /> ontgrendeld {unlockAt}</span>
          )}
          {isFinal && (
            <span style={{
              fontSize: 10, fontWeight: 800, color: t.red,
              letterSpacing: 0.5, textTransform: 'uppercase',
              padding: '2px 7px', borderRadius: 5,
              background: t.redDim,
            }}>{date}</span>
          )}
        </div>
        <h3 style={{
          fontFamily: 'Nunito', fontSize: 16, fontWeight: 800,
          color: t.fg, margin: 0, lineHeight: 1.3,
        }}>{title}</h3>
        <div style={{
          fontSize: 12, color: t.fgDim, fontWeight: 600,
          marginTop: 4, lineHeight: 1.45,
        }}>{meta}{completed && ` · ${completed}`}</div>

        {/* Progress-strook voor active */}
        {progress != null && (
          <div style={{ marginTop: 12, display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ flex: 1, height: 6, background: t.border, borderRadius: 99, overflow: 'hidden' }}>
              <div style={{
                width: `${progress * 100}%`, height: '100%',
                background: `linear-gradient(90deg, ${t.subjectFg(hex)}, ${hex})`,
                borderRadius: 99,
              }} />
            </div>
            <span style={{
              fontSize: 11, fontWeight: 800, color: t.fgDim,
              whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums',
            }}>{progressLabel}</span>
          </div>
        )}

        {/* CTA voor active */}
        {action && (
          <button style={{
            marginTop: 12,
            height: 34, padding: '0 14px', borderRadius: 8,
            background: t.primary, color: t.mode === 'dark' ? '#0A0F1E' : '#FFFFFF',
            border: 0, cursor: 'pointer',
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            letterSpacing: 0.3,
          }}>
            <PI name="play" size={11} fill="currentColor" strokeWidth={0} /> {action}
          </button>
        )}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   FRAME 09 — HERPLANNEN-COACH (Free vs Premium side-by-side)
   ──────────────────────────────────────────────────────────
   Context: Sanne mist 2 taken op rij → Pulse reageert.
   Links: Free — Pulse stelt 1 ding tegelijk voor, zij accepteert/schuift/afwijst.
   Rechts: Premium — Pulse heeft de hele week heroverwogen, toont voorstel
   met alle schuif-operaties, zij accepteert-geheel of past aan.
   Kritieke test: Free mag niet voelen als gecastreerde versie — het moet
   mentaal-gezond voelen op zichzelf. Premium moet 'ontlasting' communiceren,
   niet 'magie'. Geen features-FOMO prikkels zonder behoefte. */

function FrameHerplanCoach({ t }) {
  return (
    <BrowserShell t={t} height={900}>
      <Sidebar t={t} active="plannen" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <Topbar t={t} title="Herplannen" subtitle="2 taken niet gelukt gister" />

        <main style={{
          flex: 1, overflow: 'auto', background: t.bgApp,
          padding: '20px 28px 32px',
        }}>
          <div style={{
            maxWidth: 1180, margin: '0 auto',
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18,
            alignItems: 'start',
          }}>
            <HerplanFree t={t} />
            <HerplanPremium t={t} />
          </div>

          {/* Context-note onder beide */}
          <div style={{
            maxWidth: 1180, margin: '16px auto 0',
            padding: '12px 16px',
            background: t.card, border: `1px dashed ${t.border}`,
            borderRadius: 10,
            fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.55,
          }}>
            <b style={{ color: t.fg, fontWeight: 800 }}>Verschil:</b> Free = jij sleept zelf. Pulse zegt alleen wát je miste, niet wáár het moet. Premium = Pulse stelt een hele week voor mét uitleg per schuif. Upgrade-nudge alleen ná 3× handmatig herplannen in 7 dagen.
          </div>
        </main>
      </div>
    </BrowserShell>
  );
}

function HerplanFree({ t }) {
  // Free = manual drag. Pulse zegt alleen wat je miste. Geen voorstel.
  const slots = [
    { day: 'vandaag · wo', date: 6, free: '17:00–19:30 · 2u 30m vrij', items: [{ subject: 'biologie', title: 'Bio H4 lezen §4.1', time: '15:30–16:00' }], proefweek: 'Bio-toets vrijdag' },
    { day: 'morgen · do', date: 7, free: '15:30–18:00 · 2u 30m vrij', items: [], proefweek: null },
    { day: 'vrijdag', date: 8, free: '14:00–17:00 · 3u vrij', items: [{ subject: 'biologie', title: 'TOETS Bio H4', time: '10:00', kind: 'toets' }], proefweek: null },
  ];
  return (
    <section style={{
      background: t.card, border: `1.5px solid ${t.border}`,
      borderRadius: 16, overflow: 'hidden',
      boxShadow: t.shadowCard,
    }}>
      <header style={{
        padding: '14px 18px 12px', borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <PlanBadge t={t} plan="free" />
        <h3 style={{
          fontFamily: 'Fredoka One', fontSize: 16, color: t.fg,
          margin: 0, letterSpacing: '-0.01em',
        }}>Sleep zelf</h3>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 10.5, fontWeight: 700, color: t.fgMute }}>2 taken te plaatsen</span>
      </header>

      <div style={{ padding: '14px 18px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* Pulse-bubbel — alleen melding, geen voorstel */}
        <div style={{ display: 'flex', gap: 10 }}>
          <PulseMascot size={32} mood="idle" style={{ flexShrink: 0, marginTop: 2 }} />
          <div style={{
            flex: 1, background: t.purpleDim,
            border: `1px solid ${hexToRgba(t.purple, 0.22)}`,
            borderRadius: '2px 12px 12px 12px',
            padding: '9px 13px',
          }}>
            <div style={{
              fontSize: 12.5, color: t.fg, fontWeight: 600, lineHeight: 1.5,
            }}>
              Hier zijn de 2 taken die je miste. Sleep ze naar een dag die past.
            </div>
          </div>
        </div>

        {/* Drag-bron: gemiste taken */}
        <div style={{
          background: t.cardSunken,
          border: `1.5px dashed ${hexToRgba(t.herstelTitle, 0.4)}`,
          borderRadius: 10, padding: '10px 12px',
        }}>
          <div style={{
            fontSize: 9.5, fontWeight: 800, color: t.herstelTitle,
            letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 8,
          }}>Niet gelukt gister · sleep naar een dag</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <DragChip t={t} subject="biologie" title="Flashcards Bio ronde 1" duration="30 min" />
            <DragChip t={t} subject="scheikunde" title="Samenvatting H4 afmaken" duration="45 min" />
          </div>
        </div>

        {/* Drop-targets: dagen met vrije slots */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
          {slots.map((s, i) => (
            <DaySlot key={i} t={t} slot={s} />
          ))}
        </div>

        {/* Voet — neutraal */}
        <div style={{
          fontSize: 11, color: t.fgMute, fontWeight: 600,
          textAlign: 'center', paddingTop: 4, lineHeight: 1.5,
        }}>
          Klaar met slepen? Tik <b style={{ color: t.fgDim }}>opslaan</b> rechtsonder in je schema.
        </div>
      </div>
    </section>
  );
}

function DragChip({ t, subject, title, duration }) {
  const hex = SUBJECTS[subject];
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 9,
      padding: '8px 10px', borderRadius: 8,
      background: t.card, border: `1px solid ${t.border}`,
      borderLeft: `3px solid ${hex}`,
      cursor: 'grab',
    }}>
      <PI name="grip-vertical" size={12} color={t.fgMute} />
      <span style={{
        fontSize: 9, fontWeight: 800, color: t.subjectFg(hex),
        letterSpacing: 0.5, textTransform: 'uppercase',
      }}>{subject}</span>
      <span style={{
        flex: 1, fontSize: 12, fontWeight: 700, color: t.fg,
        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
      }}>{title}</span>
      <span style={{
        fontSize: 10.5, color: t.fgDim, fontWeight: 700,
        padding: '2px 6px', borderRadius: 4, background: t.cardSunken,
      }}>{duration}</span>
    </div>
  );
}

function DaySlot({ t, slot }) {
  const hasToets = slot.items.some(i => i.kind === 'toets');
  return (
    <div style={{
      padding: '8px 12px', borderRadius: 8,
      background: t.card, border: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{ minWidth: 78 }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: t.fg, lineHeight: 1.2 }}>{slot.day}</div>
        <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600 }}>{slot.date} nov</div>
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11.5, fontWeight: 700, color: t.green, marginBottom: 2 }}>
          {slot.free}
        </div>
        {slot.items.length > 0 && (
          <div style={{
            fontSize: 10.5, color: t.fgDim, fontWeight: 600,
            display: 'flex', gap: 6, flexWrap: 'wrap',
          }}>
            {slot.items.map((it, i) => (
              <span key={i} style={{
                padding: '1.5px 6px', borderRadius: 4,
                background: hasToets && it.kind === 'toets' ? hexToRgba(t.red, 0.12) : t.cardSunken,
                color: hasToets && it.kind === 'toets' ? t.red : t.fgDim,
                fontWeight: 700, fontSize: 10,
              }}>
                {it.kind === 'toets' && '⚠ '}{it.title} · {it.time}
              </span>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

function HerplanPremium({ t }) {
  return (
    <section style={{
      background: t.card,
      border: `1.5px solid ${hexToRgba(t.purple, 0.32)}`,
      borderRadius: 16, overflow: 'hidden',
      boxShadow: t.mode === 'dark'
        ? `0 12px 32px ${hexToRgba(t.purple, 0.18)}`
        : `0 14px 36px ${hexToRgba(t.purple, 0.14)}`,
      position: 'relative',
    }}>
      {/* Top gradient-accent */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: `linear-gradient(90deg, ${t.purple}, ${t.primary})`,
      }} />

      <header style={{
        padding: '14px 18px 12px', borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <PlanBadge t={t} plan="premium" />
        <h3 style={{
          fontFamily: 'Fredoka One', fontSize: 16, color: t.fg,
          margin: 0, letterSpacing: '-0.01em',
        }}>Week opnieuw uitgewerkt</h3>
        <span style={{ flex: 1 }} />
        <span style={{
          fontSize: 10, fontWeight: 800, color: t.purpleFg,
          padding: '3px 8px', borderRadius: 5,
          background: t.purpleDim,
          letterSpacing: 0.5, textTransform: 'uppercase',
        }}>3 schuif-ops</span>
      </header>

      <div style={{ padding: '16px 18px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {/* Pulse-bubbel */}
        <div style={{ display: 'flex', gap: 10 }}>
          <PulseMascot size={36} mood="thinking" style={{ flexShrink: 0, marginTop: 2 }} />
          <div style={{
            flex: 1, background: t.purpleDim,
            border: `1px solid ${hexToRgba(t.purple, 0.22)}`,
            borderRadius: '2px 12px 12px 12px',
            padding: '10px 14px',
          }}>
            <div style={{
              fontSize: 13, color: t.fg, fontWeight: 600, lineHeight: 1.55,
            }}>
              Ik heb het voor je uitgedacht — kijk of je het eens bent. <b>Je toets vrijdag is nog goed te halen</b>.
            </div>
          </div>
        </div>

        {/* Schuif-lijst — met rationale per taak */}
        <div style={{
          background: t.cardSunken, border: `1px solid ${t.border}`,
          borderRadius: 10,
        }}>
          <div style={{
            padding: '10px 14px 8px',
            borderBottom: `1px solid ${t.border}`,
            fontSize: 10, fontWeight: 800, color: t.fgMute,
            letterSpacing: 0.8, textTransform: 'uppercase',
          }}>3 aanpassingen voor je week</div>
          <HerplanRow t={t} subject="biologie" title="Flashcards ronde 1"
            time="vandaag 15:30 — 16:00" from="gister 19:00"
            note="je hebt nu een rustige middag" divider />
          <HerplanRow t={t} subject="scheikunde" title="Samenvatting H4 afmaken"
            time="morgen 16:00 — 16:45" from="gister 20:00"
            note="kort blokje, past tussen Wisk en eten" divider />
          <HerplanRow t={t} subject="biologie" title="Flashcards ronde 2"
            time="donderdag 19:00 — 19:30" from="woensdag 19:00"
            note="woensdag was te druk — donderdag werkt beter" />
        </div>

        {/* Impact-snippet */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8,
        }}>
          <ImpactTile t={t} label="Vandaag" value="+1 taak" note="past nog" />
          <ImpactTile t={t} label="Woe-avond" value="−30 min" note="lichter" />
          <ImpactTile t={t} label="Toets vrij" value="op tijd" note="nog 2 dagen" tone="green" />
        </div>

        {/* Knoppen */}
        <div style={{ display: 'flex', gap: 8 }}>
          <button style={{
            flex: 1, height: 38, borderRadius: 9,
            background: t.purple, color: '#FFFFFF',
            border: 0, cursor: 'pointer',
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            boxShadow: `0 4px 14px ${hexToRgba(t.purple, 0.32)}`,
          }}>
            <PI name="check" size={12} strokeWidth={3} /> Oké, zet zo
          </button>
          <button style={{
            height: 38, padding: '0 14px', borderRadius: 9,
            background: t.cardSunken, color: t.fgDim,
            border: `1px solid ${t.border}`, cursor: 'pointer',
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 12.5,
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>
            <PI name="sliders" size={11} /> Per taak aanpassen
          </button>
        </div>
      </div>
    </section>
  );
}

function HerplanRow({ t, subject, title, time, from, note, divider }) {
  const hex = SUBJECTS[subject];
  return (
    <div style={{
      padding: '10px 14px',
      borderBottom: divider ? `1px solid ${t.border}` : 0,
      display: 'flex', gap: 10, alignItems: 'center',
    }}>
      <div style={{
        width: 28, height: 28, borderRadius: 7,
        background: hexToRgba(hex, t.mode === 'dark' ? 0.18 : 0.12),
        border: `1px solid ${hexToRgba(hex, t.mode === 'dark' ? 0.35 : 0.25)}`,
        flexShrink: 0,
      }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <span style={{
            fontSize: 10, fontWeight: 800,
            color: t.subjectFg(hex),
            letterSpacing: 0.6, textTransform: 'uppercase',
          }}>{subject}</span>
          <span style={{
            fontSize: 12, fontWeight: 700, color: t.fg,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          }}>{title}</span>
        </div>
        <div style={{
          fontSize: 11, color: t.fgDim, fontWeight: 600,
          display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap',
        }}>
          <span style={{ color: t.primary, fontWeight: 800 }}>{time}</span>
          <span style={{ color: t.fgMute }}>·</span>
          <span style={{ color: t.fgMute, textDecoration: 'line-through' }}>vanaf {from}</span>
          {note && <>
            <span style={{ color: t.fgMute }}>·</span>
            <span style={{ fontStyle: 'italic' }}>{note}</span>
          </>}
        </div>
      </div>
    </div>
  );
}

function ImpactTile({ t, label, value, note, tone }) {
  const color = tone === 'green' ? t.green : t.fg;
  return (
    <div style={{
      padding: '8px 10px', borderRadius: 8,
      background: t.cardSunken, border: `1px solid ${t.border}`,
    }}>
      <div style={{
        fontSize: 9.5, fontWeight: 800, color: t.fgMute,
        letterSpacing: 0.8, textTransform: 'uppercase', marginBottom: 4,
      }}>{label}</div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 15, color,
        letterSpacing: '-0.01em', lineHeight: 1, fontVariantNumeric: 'tabular-nums',
      }}>{value}</div>
      <div style={{
        fontSize: 10, fontWeight: 600, color: t.fgMute,
        marginTop: 3,
      }}>{note}</div>
    </div>
  );
}

Object.assign(window, { FrameWeekView, FrameSettings, FrameToetsLadder, FrameHerplanCoach });