/* ═════════════════════════════════════════════════════════
   Scene 5 — Maand-vooruitblik tijdens proefweek
   Scene 6 — Zondag-avond decompressie
   ═════════════════════════════════════════════════════════ */

/* Scene 5 — User opent maand-blik op woensdag, midden in de week.
   Ontwerpbeslissing: maand-blik KRIJGT een proefweek-laag:
   de proefweek-week zelf is "visueel afgesloten" met een subtiele
   streep/grens, zodat de user ZIET dat alles ná vrijdag pas relevant
   wordt. Geen toegevoegde info DURING — alleen betekenisvolle vormgeving.
   Rest van de maand behoudt zijn normale maand-blik-vocabulaire.
*/
function Scene5() {
  const t = TK;

  // juni 2026 vanuit "nu = woensdag 10 juni"
  const weeks = [
    // w23 — nu
    [
      { date: 8,  pastInWeek: true, done: true },
      { date: 9,  pastInWeek: true, deadline: 'biologie', dlLabel: 'Bio',   done: true },
      { date: 10, today: true, active: true, deadline: 'frans', dlLabel: 'Frans', double: 'wiskunde', doubleLabel: 'Wi' },
      { date: 11, deadline: 'geschiedenis', dlLabel: 'Ges' },
      { date: 12, deadline: 'scheikunde', dlLabel: 'Sk',
                  deadlineAlt: 'engels', altLabel: 'En', altType: 'inl' },
      { date: 13, weekend: true, intensity: 0.1, fade: true },
      { date: 14, weekend: true, intensity: 0, fade: true },
    ],
    // w24 — 1 inlever + rust
    [
      { date: 15, deadline: 'nederlands', dlLabel: 'Ned', dlType: 'inl' },
      { date: 16, intensity: 0.25 },
      { date: 17, intensity: 0.2 },
      { date: 18, intensity: 0.15 },
      { date: 19, intensity: 0.1 },
      { date: 20, weekend: true, intensity: 0 },
      { date: 21, weekend: true, intensity: 0 },
    ],
    // w25 — normale week
    [
      { date: 22, intensity: 0.3 },
      { date: 23, intensity: 0.4 },
      { date: 24, intensity: 0.3 },
      { date: 25, intensity: 0.5, deadline: 'wiskunde', dlLabel: 'Wi', dlType: 'SO' },
      { date: 26, intensity: 0.3 },
      { date: 27, weekend: true, intensity: 0 },
      { date: 28, weekend: true, intensity: 0 },
    ],
    // w26 — zomervakantie start
    [
      { date: 29, intensity: 0.2 },
      { date: 30, intensity: 0.2 },
      { date: '1 jul', holiday: true },
      { date: 2, holiday: true },
      { date: 3, holiday: true },
      { date: 4, holiday: true, weekend: true },
      { date: 5, holiday: true, weekend: true },
    ],
  ];
  const weekLabels = [
    { label: 'Week 23 · proefweek', accent: true },
    { label: 'Week 24 · decompressie' },
    { label: 'Week 25' },
    { label: 'Week 26 · zomerv. start' },
  ];

  return (
    <StapelShell
      title="Plannen › Juni"
      subtitle="Woensdag 10 juni · midden in de proefweek"
      rightExtra={<MiniBreadcrumb />}
      height={800}>
      <main style={{ flex: 1, overflow: 'auto', padding: '18px 24px 22px',
        display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* Proefweek-context-bar */}
        <div style={{
          background: `linear-gradient(90deg, rgba(239,68,68,0.08), transparent 60%)`,
          border: `1px solid rgba(239,68,68,0.22)`, borderRadius: 11,
          padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12,
        }}>
          <div style={{ width: 28, height: 28, borderRadius: 7, background: 'rgba(239,68,68,0.16)',
            color: '#FCA5A5', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <I name="flame" size={14} />
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg }}>
              Je zit nog <b style={{ color: '#FCA5A5' }}>in</b> proefweek — deze maand-blik is er voor context, niet om nu te plannen.
            </div>
            <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
              Alles na vrijdag wordt pas "echt" als proefweek klaar is. Tot die tijd is het grijs-blauw.
            </div>
          </div>
          <button style={{
            height: 28, padding: '0 11px', borderRadius: 7,
            background: t.cardHi, color: t.fgDim, border: `1px solid ${t.border}`,
            fontSize: 11, fontWeight: 800, cursor: 'pointer',
          }}>
            <I name="arrow-left" size={10} style={{ marginRight: 4 }} /> Terug naar Stapel
          </button>
        </div>

        {/* Header + legenda */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, letterSpacing: '-0.01em' }}>
            Juni 2026
          </div>
          <span style={{ flex: 1 }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 10.5, fontWeight: 700, color: t.fgDim }}>
            <Legend c="#FCA5A5" label="proefweek-toets" />
            <Legend c={t.primary} label="deadline" />
            <Legend c={t.warn} label="inlever" />
            <Legend c="rgba(148,163,184,0.4)" label="nog abstract" />
          </div>
        </div>

        {/* Day headers */}
        <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)', gap: 8 }}>
          <div />
          {['ma','di','wo','do','vr','za','zo'].map(d => (
            <div key={d} style={{
              fontSize: 10, fontWeight: 800, color: t.fgMute,
              letterSpacing: 0.6, textTransform: 'uppercase', textAlign: 'center',
            }}>{d}</div>
          ))}
        </div>

        {/* Weeks */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {weeks.map((wk, wi) => (
            <React.Fragment key={wi}>
              <div style={{ display: 'grid', gridTemplateColumns: '160px repeat(7, 1fr)', gap: 8, alignItems: 'stretch' }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 6,
                  paddingRight: 6,
                }}>
                  {weekLabels[wi].accent && (
                    <span style={{
                      display: 'inline-block', width: 8, height: 8, borderRadius: 2,
                      background: '#FCA5A5',
                    }} />
                  )}
                  <span style={{
                    fontSize: 10.5, fontWeight: 800, color: weekLabels[wi].accent ? '#FCA5A5' : t.fgDim,
                    textAlign: 'right', lineHeight: 1.3,
                  }}>{weekLabels[wi].label}</span>
                </div>
                {wk.map((d, di) => (
                  <ProefMonthCell key={di} d={d} proefweek={wi === 0} upcoming={wi > 0 && wi < 3} />
                ))}
              </div>
              {wi === 0 && (
                <div style={{
                  display: 'grid', gridTemplateColumns: '160px 1fr', gap: 8,
                  padding: '4px 0',
                }}>
                  <div />
                  <div style={{
                    height: 2, background: `linear-gradient(90deg, rgba(239,68,68,0.4), transparent)`,
                    borderRadius: 1, position: 'relative',
                  }}>
                    <span style={{
                      position: 'absolute', left: '62%', top: -7, fontSize: 9.5, fontWeight: 800,
                      color: '#FCA5A5', letterSpacing: 0.5, background: t.bg, padding: '0 6px',
                      textTransform: 'uppercase',
                    }}>· proefweek voorbij ·</span>
                  </div>
                </div>
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Onderste blok: "wat je NU niet hoeft te doen" */}
        <div style={{
          marginTop: 6, padding: '12px 16px',
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 11,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{ width: 28, height: 28, borderRadius: 8, background: 'rgba(0,180,216,0.14)',
            color: t.primary, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
            <PulseMascot variant="glow" mood="encouraging" size="sm" />
          </div>
          <div style={{ flex: 1, fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
            Wiskunde-SO op <b style={{ color: t.fg }}>25 juni</b> en boekverslag Nederlands op <b style={{ color: t.fg }}>15 juni</b>. Ik pak ze op zodra vrijdag voorbij is — je hoeft er nu niet aan te denken.
          </div>
          <button style={{
            height: 28, padding: '0 11px', borderRadius: 7,
            background: 'transparent', color: t.fgMute, border: `1px solid ${t.border}`,
            fontSize: 10.5, fontWeight: 800, cursor: 'pointer',
          }}>
            Ok · sluit
          </button>
        </div>
      </main>
    </StapelShell>
  );
}

function Legend({ c, label }) {
  const t = TK;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
      <span style={{ width: 8, height: 8, borderRadius: 2, background: c, flexShrink: 0 }} />
      {label}
    </span>
  );
}

function MiniBreadcrumb() {
  const t = TK;
  return (
    <button style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      height: 28, padding: '0 10px', borderRadius: 7,
      background: t.card, color: t.fgDim, border: `1px solid ${t.border}`,
      fontSize: 11, fontWeight: 800, cursor: 'pointer',
    }}>
      <I name="chevron-left" size={11} /> Terug naar vandaag
    </button>
  );
}

function ProefMonthCell({ d, proefweek, upcoming }) {
  const t = TK;
  const isHoliday = d.holiday;
  const hasDl = !!d.deadline;
  const hasAlt = !!d.deadlineAlt;
  const hasDouble = !!d.double;
  const dlColor = hasDl ? SUBJECTS[d.deadline].color : null;
  const altColor = hasAlt ? SUBJECTS[d.deadlineAlt].color : null;
  const doubleColor = hasDouble ? SUBJECTS[d.double].color : null;

  // Styling logic:
  // - Proefweek dagen mét deadline: vol-kleur + rode glow
  // - Past-in-week: gedimd maar nog zichtbaar
  // - Upcoming weeks: grijsblauw, lichte intensiteit, geen volledige vakkleur
  // - Holiday: apart

  const base = {
    height: 58, borderRadius: 8, padding: '4px 5px', overflow: 'hidden',
    position: 'relative', display: 'flex', flexDirection: 'column', gap: 3,
  };

  // proefweek deadline-cel
  if (proefweek && hasDl) {
    const isToday = d.today;
    const mixColor = isToday ? '#FCA5A5' : dlColor;
    return (
      <div style={{
        ...base,
        background: `color-mix(in srgb, ${mixColor} 18%, ${t.cardAlt})`,
        border: isToday ? `2px solid #FCA5A5` : `1.5px solid color-mix(in srgb, ${mixColor} 55%, transparent)`,
        boxShadow: isToday ? `0 0 16px rgba(239,68,68,0.35)` : undefined,
        opacity: d.pastInWeek ? 0.55 : 1,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
          <span style={{
            fontFamily: 'Fredoka One', fontSize: 12, lineHeight: 1, letterSpacing: '-0.01em',
            color: isToday ? '#FCA5A5' : t.fg,
          }}>{d.date}</span>
          {d.done && <I name="check" size={9} color={t.green} strokeWidth={3} />}
          {isToday && <span style={{ fontSize: 8, fontWeight: 800, color: '#FCA5A5',
            letterSpacing: 0.5, marginLeft: 'auto' }}>NU</span>}
        </div>
        <div style={{ display: 'flex', gap: 2, flexWrap: 'wrap' }}>
          <ExamChip color={dlColor} label={d.dlLabel} />
          {hasDouble && <ExamChip color={doubleColor} label={d.doubleLabel} />}
          {hasAlt && <ExamChip color={altColor} label={d.altLabel} warn={d.altType === 'inl'} />}
        </div>
      </div>
    );
  }

  // proefweek-zaterdag/zondag (rust)
  if (proefweek && d.fade) {
    return (
      <div style={{ ...base,
        background: 'rgba(148,163,184,0.04)',
        border: `1px dashed ${t.border}`,
        opacity: 0.5,
      }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 11, color: t.fgMute }}>{d.date}</span>
        <span style={{ fontSize: 9, color: t.fgMute, fontWeight: 700 }}>rust</span>
      </div>
    );
  }

  // upcoming-weken met deadline — grijsblauw-abstract
  if (upcoming && (hasDl || hasAlt)) {
    const mainColor = hasAlt ? SUBJECTS[d.deadlineAlt].color : dlColor;
    return (
      <div style={{
        ...base,
        background: t.cardAlt, border: `1px solid ${t.border}`,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
          <span style={{ fontFamily: 'Fredoka One', fontSize: 11, color: t.fgDim, letterSpacing: '-0.01em' }}>{d.date}</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
          <span style={{ width: 6, height: 6, borderRadius: 2, background: mainColor, opacity: 0.7 }} />
          <span style={{ fontSize: 9, fontWeight: 800, color: t.fgDim, textTransform: 'uppercase', letterSpacing: 0.3 }}>
            {hasAlt ? d.altLabel : d.dlLabel}
          </span>
          {d.dlType === 'inl' && <span style={{ fontSize: 8, color: t.warn, fontWeight: 800 }}>·inl</span>}
          {d.dlType === 'SO' && <span style={{ fontSize: 8, color: t.fgMute, fontWeight: 800 }}>·SO</span>}
        </div>
        {!d.dlType && <span style={{ fontSize: 8.5, color: t.fgMute, fontWeight: 700 }}>deadline</span>}
      </div>
    );
  }

  // holiday
  if (isHoliday) {
    return (
      <div style={{ ...base,
        background: 'rgba(245,158,11,0.06)',
        border: `1px dashed rgba(245,158,11,0.22)`,
      }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 11, color: t.warn }}>{d.date}</span>
        <span style={{ fontSize: 8.5, color: t.warn, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.4 }}>
          vakantie
        </span>
      </div>
    );
  }

  // normal / empty
  const intensity = d.intensity || 0;
  return (
    <div style={{
      ...base,
      background: t.cardAlt, border: `1px solid ${t.border}`,
      opacity: d.weekend ? 0.5 : (upcoming ? 0.8 : 1),
    }}>
      {!d.weekend && intensity > 0.05 && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          height: `${intensity * 100}%`,
          background: `linear-gradient(180deg, transparent, rgba(100,116,139,${0.15 + intensity * 0.18}))`,
          pointerEvents: 'none',
        }} />
      )}
      <span style={{ fontFamily: 'Fredoka One', fontSize: 11, color: d.weekend ? t.fgMute : t.fg,
        letterSpacing: '-0.01em', position: 'relative', zIndex: 1 }}>{d.date}</span>
    </div>
  );
}

function ExamChip({ color, label, warn }) {
  const t = TK;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 3,
      padding: '1px 5px', borderRadius: 3,
      background: `color-mix(in srgb, ${color} 28%, ${t.bg})`,
      fontSize: 9, fontWeight: 800, color: '#fff', letterSpacing: 0.2,
      textTransform: 'uppercase', lineHeight: 1.3,
    }}>
      {label}
      {warn && <span style={{ color: '#FDE68A' }}>·inl</span>}
    </span>
  );
}

/* ═════════════════════════════════════════════════════════
   Scene 6 — Zondag 19:00, decompressie
   Proefweek voorbij. Pulse MAG niet doen alsof er niks gebeurd is.
   Maar óók niet gamified vieren. Dit is zachte decompressie.
   ═════════════════════════════════════════════════════════ */
function Scene6() {
  const t = TK;

  return (
    <StapelShell
      title="Plannen"
      subtitle="Zondag 16 juni · 19:00 · proefweek achter de rug"
      rightExtra={<DecompressBadge />}
      height={760}>
      <main style={{ flex: 1, overflow: 'auto', padding: '18px 24px 22px',
        display: 'flex', flexDirection: 'column', gap: 16 }}>

        {/* Hero — rustige decompressie, geen confetti */}
        <DecompressHero />

        <div style={{
          flex: 1, display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 16, minHeight: 0,
        }}>
          {/* Links: proefweek terugblik — feiten, geen oordeel */}
          <ProefweekRecap />

          {/* Rechts: maandag rustig opstart */}
          <SoftMondayCard />
        </div>

        {/* Onderste rust-rij */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12,
        }}>
          <RustOption
            icon="moon"
            iconColor={t.purpleFg}
            title="Niks doen"
            body="Geen taken tot morgenochtend. Je verdient dit."
            cta="Accepteer"
            primary
          />
          <RustOption
            icon="layers"
            iconColor={t.gold}
            title="5 flashcards · vrijblijvend"
            body="Sk reacties waren wisselvallig. Hoeft niet."
            cta="Doe er 5"
          />
          <RustOption
            icon="message-circle"
            iconColor={t.primary}
            title="Iets delen?"
            body="Eén zin over de week. Alleen voor jezelf."
            cta="Schrijf iets"
          />
        </div>
      </main>
    </StapelShell>
  );
}

function DecompressBadge() {
  const t = TK;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 28, padding: '0 11px', borderRadius: 9999,
      background: 'rgba(157,78,221,0.14)', color: t.purpleFg,
      border: `1px solid rgba(157,78,221,0.3)`,
      fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
    }}>
      <I name="wind" size={11} /> Decompressie
    </div>
  );
}

function DecompressHero() {
  const t = TK;
  return (
    <div style={{
      background: `
        radial-gradient(600px 200px at 80% 0%, rgba(157,78,221,0.12), transparent 60%),
        radial-gradient(400px 180px at 20% 100%, rgba(34,197,94,0.08), transparent 60%),
        ${t.card}
      `,
      border: `1px solid ${t.border}`, borderRadius: 14,
      padding: '22px 28px', display: 'flex', alignItems: 'center', gap: 20,
    }}>
      <div style={{ width: 64, height: 64, borderRadius: 16, flexShrink: 0,
        background: 'rgba(157,78,221,0.14)',
        display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <PulseMascot variant="glow" mood="proud" size="lg" />
      </div>
      <div style={{ flex: 1 }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 22, color: t.fg, letterSpacing: '-0.01em',
          lineHeight: 1.15 }}>
          Proefweek is klaar.
        </div>
        <div style={{ fontSize: 13.5, color: t.fgDim, fontWeight: 500, marginTop: 8, lineHeight: 1.6, maxWidth: 600 }}>
          7 toetsen geweest, 4 inlevers gedaan, 2 echt lastige dagen. <b style={{ color: t.fg }}>Dit was veel.</b> Geen cijfers nu — die komen vanzelf. We pakken maandag rustig op, niet hard.
        </div>
      </div>
      <div style={{
        background: t.cardAlt, border: `1px solid ${t.border}`, borderRadius: 10,
        padding: '10px 14px', display: 'flex', flexDirection: 'column', gap: 2, textAlign: 'right',
      }}>
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase' }}>
          Streak
        </span>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 19, color: t.fg, letterSpacing: '-0.01em' }}>
          34 dagen
        </span>
        <span style={{ fontSize: 9.5, color: t.fgMute, fontWeight: 700 }}>niet in gevaar vandaag</span>
      </div>
    </div>
  );
}

function ProefweekRecap() {
  const t = TK;
  const exams = [
    { k: 'biologie',      label: 'Bio',       day: 'ma',  done: true },
    { k: 'frans',         label: 'Frans SO',  day: 'wo',  done: true },
    { k: 'wiskunde',      label: 'Wisk',      day: 'wo',  done: true },
    { k: 'geschiedenis',  label: 'Ges',       day: 'do',  done: true, tough: true },
    { k: 'engels',        label: 'En essay',  day: 'vr',  done: true },
    { k: 'scheikunde',    label: 'Sk',        day: 'vr',  done: true },
    { k: 'nederlands',    label: 'Ned vsl.',  day: 'ma15',done: true, type: 'inl' },
  ];
  return (
    <section style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10, overflow: 'auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <h2 style={colHeader(t)}>Wat is er gebeurd</h2>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>alleen feiten</span>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
        {exams.map((e, i) => {
          const s = SUBJECTS[e.k];
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '7px 10px', borderRadius: 8,
              background: e.tough ? 'rgba(157,78,221,0.06)' : 'transparent',
              border: e.tough ? `1px solid rgba(157,78,221,0.22)` : `1px solid transparent`,
            }}>
              <div style={{ width: 22, height: 22, borderRadius: 6, flexShrink: 0,
                background: `color-mix(in srgb, ${s.color} 22%, transparent)`,
                color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <I name={s.icon} size={11} />
              </div>
              <SubjPill k={e.k} size="sm" />
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· {e.day}</span>
              <span style={{ flex: 1 }} />
              {e.tough && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                  fontSize: 10, color: t.purpleFg, fontWeight: 800,
                  padding: '2px 7px', borderRadius: 5,
                  background: 'rgba(157,78,221,0.12)', border: `1px solid rgba(157,78,221,0.24)`,
                }}>
                  <I name="cloud" size={9} /> jij vond 'm zwaar
                </span>
              )}
              {e.type === 'inl' && (
                <span style={{ fontSize: 10, color: t.warn, fontWeight: 800,
                  padding: '2px 6px', borderRadius: 5,
                  background: 'rgba(245,158,11,0.12)' }}>ingeleverd</span>
              )}
              <div style={{ width: 18, height: 18, borderRadius: 5, flexShrink: 0,
                background: t.green, color: '#07090F',
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <I name="check" size={11} strokeWidth={3} />
              </div>
            </div>
          );
        })}
      </div>

      <div style={{
        padding: '10px 12px', borderRadius: 9, marginTop: 4,
        background: t.cardAlt, border: `1px solid ${t.border}`,
        display: 'flex', gap: 8, alignItems: 'flex-start',
      }}>
        <I name="info" size={12} color={t.fgMute} style={{ marginTop: 2 }} />
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
          Cijfers verschijnen hier automatisch zodra ze in Magister staan. Dan kunnen we samen kijken wat werkte — als je wilt, niet omdat het moet.
        </div>
      </div>
    </section>
  );
}

function SoftMondayCard() {
  const t = TK;
  return (
    <section style={{ background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
      padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <h2 style={colHeader(t)}>Maandag — rustig</h2>
        <span style={{ flex: 1 }} />
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>auto-kalm-modus · 3 dagen</span>
      </div>

      <div style={{
        padding: '10px 12px', background: t.cardAlt, border: `1px solid ${t.border}`,
        borderRadius: 9, display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <div style={{ width: 26, height: 26, borderRadius: 7, flexShrink: 0,
          background: 'rgba(0,180,216,0.14)', color: t.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I name="calendar-clock" size={13} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 12, fontWeight: 800, color: t.fg }}>Na school: <b>50 min totaal</b></div>
          <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600 }}>normaal is dit bij jou 90 min. Ik heb 'm halvering aangezet tot woensdag.</div>
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <TaskRow task={{
          subject: 'nederlands', type: 'oefenen',
          title: 'Boekverslag-revisie · 15 min',
          detail: 'je hebt feedback van vrijdag',
          mins: 15, source: 'Ned · ingeleverd vr',
        }} state="queued" />
        <TaskRow task={{
          subject: 'geschiedenis', type: 'flashcards',
          title: '10 flashcards · zacht oppakken', mins: 10,
          source: 'Ges · toets liep niet',
        }} state="queued" />
        <TaskRow task={{
          subject: 'biologie', type: 'lezen',
          title: '§5.1 snel doorlezen', mins: 20,
          source: 'Bio · volgende week verder',
        }} state="queued" />
      </div>

      <div style={{
        padding: '10px 12px', background: 'rgba(34,197,94,0.04)',
        border: `1px dashed rgba(34,197,94,0.22)`, borderRadius: 9,
        display: 'flex', alignItems: 'flex-start', gap: 8,
      }}>
        <I name="heart" size={12} color="#86EFAC" style={{ marginTop: 2, flexShrink: 0 }} />
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
          Geen missies deze week. Geen streak-druk. Geen "morgen harder". Gewoon landen.
        </div>
      </div>
    </section>
  );
}

function RustOption({ icon, iconColor, title, body, cta, primary }) {
  const t = TK;
  return (
    <div style={{
      background: primary ? 'rgba(157,78,221,0.08)' : t.card,
      border: primary ? `1.5px solid ${t.purpleFg}` : `1px solid ${t.border}`,
      borderRadius: 11, padding: '14px 16px',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 8, flexShrink: 0,
          background: `color-mix(in srgb, ${iconColor} 18%, transparent)`,
          color: iconColor, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <I name={icon} size={13} />
        </div>
        <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg }}>{title}</div>
      </div>
      <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
        {body}
      </div>
      <button style={{
        height: 30, padding: '0 11px', borderRadius: 7,
        background: primary ? t.purple : t.cardHi,
        color: primary ? '#fff' : t.fgDim,
        border: primary ? 0 : `1px solid ${t.border}`,
        fontSize: 11, fontWeight: 800, cursor: 'pointer',
        alignSelf: 'flex-start',
      }}>
        {cta}
      </button>
    </div>
  );
}

window.Scene5 = Scene5;
window.Scene6 = Scene6;