/* ═════════ Flow F — Week-view (uitgebreid) + Maand-blik ═════════
   2 states + mini:
   F1  Volledige week-pagina (7 dag-kolommen, content-rich)
   F2  Klik op donderdag — dag-details drawer rechts
   F-mini  Maand-blik (compact overzicht, alleen deadlines+zware dagen)
*/

function FlowF() {
  const t = TK;
  return (
    <div id="flow-f" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
      <FStageLabel num="F1" title="Week-pagina vanuit Stapel" note="7 dag-kolommen · scrollbaar per dag" />
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
      }}>
        <F1WeekView />
      </div>

      <FStageLabel num="F2" title="Klik op donderdag" note="Drawer rechts · dag-details inline" />
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
      }}>
        <F2DayDetail />
      </div>

      <FStageLabel num="F-mini" title="Maand-blik" note="Ver-vooruit tool · niet de hoofdplanner" />
      <div style={{
        background: t.bg, borderRadius: 14, border: `1px solid ${t.border}`,
        overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
        padding: 0,
      }}>
        <FMonthGlance />
      </div>
    </div>
  );
}

function FStageLabel({ num, title, note }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: -18 }}>
      <div style={{
        background: 'rgba(196,181,253,0.18)', color: t.purpleFg,
        padding: '5px 10px', borderRadius: 8,
        fontFamily: 'Fredoka One', fontSize: 13, letterSpacing: '-0.01em',
      }}>{num}</div>
      <div style={{ fontSize: 14, fontWeight: 800, color: t.fg }}>{title}</div>
      <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600 }}>· {note}</div>
    </div>
  );
}

/* ── F1 — Full week-page ──────────────────────────── */
function F1WeekView() {
  const t = TK;

  const days = buildWeekDays();

  return (
    <StapelShell
      title="Plannen › Week 41"
      subtitle="7–13 okt · vrijdag is je toetsdag"
      rightExtra={<WeekNav />}
      height={760}
    >
      <main style={{ flex: 1, overflow: 'hidden', padding: '20px 24px',
        display: 'flex', flexDirection: 'column', gap: 14 }}>

        {/* 7-koloms dag-grid, content-rich */}
        <div style={{ flex: 1, display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)',
          gap: 10, minHeight: 0 }}>
          {days.map((d, i) => <DayColumn key={i} d={d} />)}
        </div>

        {/* onderin: komende toetsen + vandaag samenvatting */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12, flexShrink: 0,
        }}>
          <div style={{
            background: t.card, border: `1px solid ${t.border}`, borderRadius: 12,
            padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 8, background: 'rgba(255,208,0,0.14)',
              color: t.gold, display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}><I name="flag" size={14} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase', marginBottom: 3 }}>Komende toetsen</div>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                <UpcomingChip k="biologie" days={2} label="Bio H4" />
                <UpcomingChip k="wiskunde" days={5} label="Wisk SO" />
                <UpcomingChip k="engels" days={8} label="Essay" />
                <UpcomingChip k="geschiedenis" days={9} label="Ges H3" />
              </div>
            </div>
          </div>

          <div style={{
            background: 'rgba(0,180,216,0.08)', border: `1px solid rgba(0,180,216,0.22)`, borderRadius: 12,
            padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ width: 34, height: 34, borderRadius: 9,
              background: 'rgba(0,180,216,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <PulseMascot variant="glow" mood="encouraging" size="sm" />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 800, color: t.fg }}>Vandaag 3 taken · ±50 min</div>
              <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
                Rustige dag. Morgen pik je je eerste Bio-blok op.
              </div>
            </div>
            <button style={shellBtn(t, 'primary')}>
              <I name="play" size={11} fill="currentColor" strokeWidth={0} color="#07090F" /> Start
            </button>
          </div>
        </div>
      </main>
    </StapelShell>
  );
}

function WeekNav() {
  const t = TK;
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      <button style={iconBtn()}><I name="chevron-left" size={13} /></button>
      <button style={{
        height: 32, padding: '0 11px', borderRadius: 8,
        background: t.card, border: `1px solid ${t.border}`, color: t.fgDim,
        display: 'inline-flex', alignItems: 'center', gap: 5,
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
      }}>
        <I name="calendar" size={12} /> Maand
      </button>
      <button style={iconBtn()}><I name="chevron-right" size={13} /></button>
    </div>
  );
}
function iconBtn() {
  const t = TK;
  return {
    width: 32, height: 32, borderRadius: 8,
    background: t.card, border: `1px solid ${t.border}`, color: t.fgDim,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    cursor: 'pointer',
  };
}

function UpcomingChip({ k, days, label }) {
  const t = TK;
  const s = SUBJECTS[k];
  const soon = days <= 3;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: `color-mix(in srgb, ${s.color} 12%, transparent)`,
      border: `1px solid color-mix(in srgb, ${s.color} 26%, transparent)`,
      borderRadius: 9999, padding: '4px 10px', fontFamily: 'Nunito',
    }}>
      <I name={s.icon} size={10} color={s.color} />
      <span style={{ fontSize: 11, fontWeight: 800, color: t.fg }}>{label}</span>
      <span style={{ fontSize: 10, fontWeight: 700,
        color: soon ? t.red : t.fgMute, marginLeft: 2 }}>{days}d</span>
    </div>
  );
}

/* ── Day column (full ruimte, met alle taken) ────── */
function DayColumn({ d, highlight = false }) {
  const t = TK;
  const isToday = !!d.today;
  const isPast = !!d.past;
  const hasDeadline = !!d.deadline;
  const spec = hasDeadline ? SUBJECTS[d.deadline] : null;

  return (
    <div style={{
      background: isToday ? 'rgba(0,180,216,0.08)' : t.card,
      border: isToday ? `1.5px solid ${t.primary}` :
              highlight ? `1.5px solid ${t.purpleFg}` :
              `1px solid ${t.border}`,
      borderRadius: 11, overflow: 'hidden', position: 'relative',
      display: 'flex', flexDirection: 'column', minHeight: 0,
      opacity: isPast && !isToday ? 0.6 : 1,
    }}>
      {isToday && (
        <div style={{
          position: 'absolute', top: 0, left: 0, right: 0, height: 3,
          background: `linear-gradient(90deg, ${t.primary}, transparent)`, zIndex: 1,
        }} />
      )}
      {/* header */}
      <div style={{ padding: '9px 10px 7px', borderBottom: `1px solid ${t.border}`, flexShrink: 0 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <span style={{
            fontSize: 10, fontWeight: 800,
            color: isToday ? t.primary : t.fgMute,
            letterSpacing: 0.8, textTransform: 'uppercase',
          }}>{d.day}{isToday ? ' · nu' : ''}</span>
          <span style={{
            fontFamily: 'Fredoka One', fontSize: 15, lineHeight: 1,
            color: isToday ? t.primary : t.fg, letterSpacing: '-0.01em',
          }}>{d.date}</span>
        </div>
      </div>

      {/* body */}
      <div style={{ flex: 1, overflow: 'hidden', padding: 7,
        display: 'flex', flexDirection: 'column', gap: 5 }}>
        {hasDeadline && (
          <div style={{
            background: `color-mix(in srgb, ${spec.color} 20%, transparent)`,
            border: `1px solid color-mix(in srgb, ${spec.color} 45%, transparent)`,
            borderRadius: 6, padding: '5px 7px',
            display: 'flex', flexDirection: 'column', gap: 2,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
              <I name={spec.icon} size={9} color={spec.color} />
              <span style={{ fontSize: 8.5, fontWeight: 800, color: spec.color, letterSpacing: 0.5, textTransform: 'uppercase' }}>{d.deadlineType || 'Toets'}</span>
            </div>
            <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fg, lineHeight: 1.25 }}>{d.dlLabel}</span>
          </div>
        )}
        {(d.tasks || []).map((task, i) => {
          const ts = SUBJECTS[task.s];
          const typeIcon = {
            lezen: 'book-open', quiz: 'check-square', flashcards: 'layers',
            oefenen: 'pen-tool',
          }[task.type] || 'circle';
          return (
            <div key={i} style={{
              background: `color-mix(in srgb, ${ts.color} 10%, transparent)`,
              border: `1px solid color-mix(in srgb, ${ts.color} 18%, transparent)`,
              borderRadius: 6, padding: '5px 6px',
              display: 'flex', flexDirection: 'column', gap: 2,
              textDecoration: task.done ? 'line-through' : 'none',
              opacity: task.done ? 0.5 : 1,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 3 }}>
                <I name={typeIcon} size={9} color={ts.color} />
                <span style={{ fontSize: 8.5, fontWeight: 800, color: ts.color, letterSpacing: 0.4, textTransform: 'uppercase' }}>
                  {ts.label.slice(0, 4)}
                </span>
                <span style={{ flex: 1 }} />
                <span style={{ fontSize: 8.5, color: t.fgMute, fontWeight: 700 }}>{task.mins}m</span>
              </div>
              <span style={{ fontSize: 10, fontWeight: 700, color: t.fg, lineHeight: 1.25, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
                {task.title}
              </span>
            </div>
          );
        })}
        {(d.tasks || []).length === 0 && !hasDeadline && (
          <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 600, fontStyle: 'italic', marginTop: 4 }}>— leeg —</div>
        )}
      </div>

      {/* footer: totaal minuten */}
      {((d.tasks || []).length > 0 || hasDeadline) && (
        <div style={{
          padding: '6px 9px', borderTop: `1px solid ${t.border}`, flexShrink: 0,
          fontSize: 9.5, fontWeight: 800, color: isToday ? t.primary : t.fgDim,
          display: 'flex', alignItems: 'center', gap: 4,
        }}>
          <I name="clock" size={9} /> {(d.tasks || []).reduce((s, tsk) => s + (tsk.mins || 0), 0)}m
        </div>
      )}
    </div>
  );
}

/* ── F2 — Day detail drawer ─────────────────────── */
function F2DayDetail() {
  const t = TK;
  const days = buildWeekDays();

  return (
    <StapelShell
      title="Plannen › Week 41"
      subtitle="Donderdag 11 okt · detail"
      rightExtra={<WeekNav />}
      height={720}
    >
      <main style={{ flex: 1, overflow: 'hidden', padding: '20px 24px',
        display: 'flex', flexDirection: 'column', gap: 14, position: 'relative' }}>

        {/* week-grid met donderdag gehighlight */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 10, flex: 1, minHeight: 0,
        }}>
          {days.map((d, i) => (
            <DayColumn key={i} d={d} highlight={i === 3} />
          ))}
        </div>

        {/* drawer rechts */}
        <div style={{
          position: 'absolute', top: 12, right: 12, bottom: 12, width: 340,
          background: '#0F1525', border: `1.5px solid ${t.purpleFg}`,
          borderRadius: 12, boxShadow: '-20px 0 50px rgba(0,0,0,0.4)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden', zIndex: 10,
        }}>
          {/* header */}
          <div style={{
            padding: '14px 16px', borderBottom: `1px solid ${t.border}`,
            background: 'rgba(196,181,253,0.08)',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <div style={{
              width: 28, height: 28, borderRadius: 7,
              background: 'rgba(196,181,253,0.2)', color: t.purpleFg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <I name="calendar-days" size={14} />
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, letterSpacing: '-0.01em' }}>
                Donderdag 11 okt
              </div>
              <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 700, marginTop: 1 }}>
                2 taken · 40 min · dag voor toets
              </div>
            </div>
            <button style={iconBtn()}><I name="x" size={12} /></button>
          </div>

          {/* stretch-over-weergave */}
          <div style={{ padding: '14px 16px', borderBottom: `1px solid ${t.border}` }}>
            <div style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>Beschikbaar</div>
            <div style={{
              position: 'relative', height: 18, background: t.cardAlt,
              borderRadius: 4, border: `1px solid ${t.border}`, overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', left: `${(15.5/24)*100}%`, width: `${(2.5/24)*100}%`,
                top: 1, bottom: 1, background: 'rgba(0,180,216,0.35)',
                border: `1px solid ${t.primary}`, borderRadius: 3,
              }} />
              <div style={{
                position: 'absolute', left: `${(15.75/24)*100}%`, width: `${(0.5/24)*100}%`,
                top: 1, bottom: 1, background: 'rgba(34,197,94,0.5)',
                border: `1px solid ${t.green}`, borderRadius: 3,
              }} />
              <div style={{
                position: 'absolute', left: `${(16.33/24)*100}%`, width: `${(0.5/24)*100}%`,
                top: 1, bottom: 1, background: 'rgba(59,130,246,0.5)',
                border: `1px solid #3B82F6`, borderRadius: 3,
              }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 3,
              fontSize: 9, color: t.fgMute, fontWeight: 700 }}>
              <span>15:30</span><span>17:00</span><span>18:00</span>
            </div>
          </div>

          {/* task list */}
          <div style={{ flex: 1, overflow: 'auto', padding: 14,
            display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase' }}>Geplande taken</div>

            <DetailTask k="biologie" type="lezen" title="§ 4.3 — Celdeling afmaken" mins={25} source="Bio — toets morgen" primary />
            <DetailTask k="biologie" type="flashcards" title="15 flashcards mix" mins={15} source="Bio — spaced repetition" />

            <button style={{
              height: 34, borderRadius: 9,
              background: t.cardHi, color: t.fgDim,
              border: `1.5px dashed ${t.border}`, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
            }}>
              <I name="plus" size={11} strokeWidth={3} /> Taak toevoegen aan donderdag
            </button>
          </div>

          {/* footer acties */}
          <div style={{
            padding: '10px 16px', borderTop: `1px solid ${t.border}`,
            display: 'flex', gap: 6, flexShrink: 0, background: '#0F1525',
          }}>
            <button style={{ ...shellBtn(t, 'ghost'), height: 32, fontSize: 11.5 }}>
              <I name="calendar-x" size={11} /> Niet beschikbaar
            </button>
            <span style={{ flex: 1 }} />
            <button style={{
              height: 32, padding: '0 12px', borderRadius: 8,
              background: t.purpleFg, color: '#2E1065', border: 0,
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
              display: 'inline-flex', alignItems: 'center', gap: 5,
            }}>
              <I name="shuffle" size={11} /> Herplan deze dag
            </button>
          </div>
        </div>
      </main>
    </StapelShell>
  );
}

function DetailTask({ k, type, title, mins, source, primary }) {
  const t = TK;
  const s = SUBJECTS[k];
  const typeIcon = {
    lezen: 'book-open', quiz: 'check-square', flashcards: 'layers', oefenen: 'pen-tool',
  }[type] || 'circle';
  return (
    <div style={{
      background: primary ? `color-mix(in srgb, ${s.color} 14%, ${t.card})` : t.card,
      border: `1px solid ${primary ? s.color : t.border}`,
      borderRadius: 10, padding: '10px 12px',
      display: 'flex', gap: 10, alignItems: 'center',
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: `color-mix(in srgb, ${s.color} 18%, transparent)`,
        color: s.color, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <I name={typeIcon} size={13} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, marginBottom: 2 }}>
          <SubjPill k={k} size="sm" />
          <span style={{ fontSize: 9.5, color: t.fgMute, fontWeight: 700 }}>· {source}</span>
        </div>
        <div style={{ fontSize: 12, fontWeight: 800, color: t.fg, lineHeight: 1.3 }}>{title}</div>
      </div>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 3,
        background: t.cardHi, color: t.fgDim, borderRadius: 6,
        padding: '3px 7px', fontSize: 10, fontWeight: 800, flexShrink: 0,
      }}>
        <I name="clock" size={9} /> {mins}m
      </div>
    </div>
  );
}

/* ── F-mini — Maand-blik ──────────────────────── */
function FMonthGlance() {
  const t = TK;
  const weeks = [
    // w40 (past)
    [
      { date: 1, intensity: 0.3, past: true },
      { date: 2, intensity: 0.4, past: true },
      { date: 3, intensity: 0.2, past: true },
      { date: 4, intensity: 0.3, past: true },
      { date: 5, intensity: 0.6, deadline: 'wiskunde', past: true },
      { date: 6, intensity: 0, past: true },
      { date: 7, intensity: 0.1, past: true },
    ],
    // w41 (current)
    [
      { date: 8, intensity: 0.3 },
      { date: 9, intensity: 0.3 },
      { date: 10, intensity: 0.4, today: true },
      { date: 11, intensity: 0.7 },
      { date: 12, intensity: 1, deadline: 'biologie' },
      { date: 13, intensity: 0 },
      { date: 14, intensity: 0.2 },
    ],
    // w42
    [
      { date: 15, intensity: 0.8, deadline: 'wiskunde' },
      { date: 16, intensity: 0.4 },
      { date: 17, intensity: 0.3 },
      { date: 18, intensity: 0.9, deadline: 'engels' },
      { date: 19, intensity: 0.7, deadline: 'geschiedenis' },
      { date: 20, intensity: 0 },
      { date: 21, intensity: 0.1 },
    ],
    // w43
    [
      { date: 22, intensity: 0.2, note: 'herfstvakantie' },
      { date: 23, intensity: 0.1 },
      { date: 24, intensity: 0.1 },
      { date: 25, intensity: 0.1 },
      { date: 26, intensity: 0.1 },
      { date: 27, intensity: 0 },
      { date: 28, intensity: 0 },
    ],
  ];
  const weekLabels = ['Week 40', 'Week 41 · nu', 'Week 42', 'Week 43 · herfstvak.'];

  return (
    <div style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, letterSpacing: '-0.01em' }}>
          Oktober
        </div>
        <span style={{ fontSize: 11.5, color: t.fgMute, fontWeight: 700 }}>· vooruitblik</span>
        <span style={{ flex: 1 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 10.5, fontWeight: 700, color: t.fgDim }}>
          <LegendDot c="rgba(0,180,216,0.7)" label="druk" />
          <LegendDot c={t.gold} label="deadline" />
          <span style={{ color: t.fgMute }}>· klik voor week</span>
        </div>
      </div>

      {/* dag-headers */}
      <div style={{ display: 'grid', gridTemplateColumns: '80px 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>

      {/* 4 weken */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {weeks.map((wk, wi) => (
          <div key={wi} style={{ display: 'grid', gridTemplateColumns: '80px repeat(7, 1fr)',
            gap: 8, alignItems: 'center' }}>
            <div style={{
              fontSize: 10.5, fontWeight: 800,
              color: wi === 1 ? t.primary : t.fgMute,
              textAlign: 'right',
            }}>
              {weekLabels[wi]}
            </div>
            {wk.map((d, di) => <MonthDayCell key={di} d={d} />)}
          </div>
        ))}
      </div>

      {/* vakantie-bar */}
      <div style={{
        marginTop: 4, padding: '10px 14px',
        background: 'rgba(245,158,11,0.08)', border: `1px solid rgba(245,158,11,0.22)`,
        borderRadius: 10, display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <I name="palm-tree" size={14} color={t.warn} />
        <span style={{ fontSize: 11.5, fontWeight: 700, color: t.fgDim }}>
          <b style={{ color: t.fg }}>22–28 okt</b> — herfstvakantie. Pulse plant geen nieuwe taken tenzij jij een toets erna hebt.
        </span>
      </div>
    </div>
  );
}

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

function MonthDayCell({ d }) {
  const t = TK;
  const hasDl = !!d.deadline;
  const spec = hasDl ? SUBJECTS[d.deadline] : null;
  const intensity = d.intensity || 0;
  // intensity as blue fill height
  return (
    <div style={{
      height: 38, borderRadius: 7, position: 'relative', overflow: 'hidden',
      background: hasDl ? `color-mix(in srgb, ${spec.color} 16%, ${t.cardAlt})` : t.cardAlt,
      border: d.today ? `1.5px solid ${t.primary}` :
              hasDl ? `1.5px solid color-mix(in srgb, ${spec.color} 45%, transparent)` :
              `1px solid ${t.border}`,
      opacity: d.past ? 0.45 : 1,
      padding: '3px 5px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
    }}>
      {/* intensity fill */}
      {!hasDl && intensity > 0.1 && (
        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          height: `${intensity * 100}%`,
          background: `linear-gradient(180deg, transparent, rgba(0,180,216,${0.18 + intensity * 0.25}))`,
          pointerEvents: 'none',
        }} />
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 3, position: 'relative', zIndex: 1 }}>
        <span style={{
          fontFamily: 'Fredoka One', fontSize: 11, lineHeight: 1,
          color: d.today ? t.primary : hasDl ? spec.color : t.fg, letterSpacing: '-0.01em',
        }}>{d.date}</span>
        {hasDl && <I name="flag" size={8} color={spec.color} fill={spec.color} strokeWidth={0} />}
      </div>
      {hasDl && (
        <div style={{
          fontSize: 8.5, fontWeight: 800, color: spec.color,
          letterSpacing: 0.3, textTransform: 'uppercase',
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
          position: 'relative', zIndex: 1,
        }}>
          {SUBJECTS[d.deadline].label.slice(0, 4)}
        </div>
      )}
    </div>
  );
}

/* ── Shared data builder ──────────────────────── */
function buildWeekDays() {
  return [
    { day: 'ma', date: 8, past: true,
      tasks: [
        { s: 'biologie', type: 'lezen', title: '§ 4.1 · inleiding', mins: 20, done: true },
        { s: 'wiskunde', type: 'oefenen', title: 'Oefening 2.1', mins: 15, done: true },
      ] },
    { day: 'di', date: 9, past: true,
      tasks: [
        { s: 'biologie', type: 'lezen', title: '§ 4.2 · organellen', mins: 25, done: true },
        { s: 'biologie', type: 'flashcards', title: '10 cards herhalen', mins: 10, done: true },
      ] },
    { day: 'wo', date: 10, today: true,
      tasks: [
        { s: 'biologie', type: 'lezen', title: '§ 4.3 · celdeling', mins: 25 },
        { s: 'wiskunde', type: 'oefenen', title: 'Oefeningen § 2.3', mins: 10 },
        { s: 'biologie', type: 'flashcards', title: '10 flashcards', mins: 15 },
      ] },
    { day: 'do', date: 11,
      tasks: [
        { s: 'biologie', type: 'lezen', title: '§ 4.3 afmaken', mins: 25 },
        { s: 'biologie', type: 'flashcards', title: '15 mix flashcards', mins: 15 },
      ] },
    { day: 'vr', date: 12, deadline: 'biologie', dlLabel: 'H4 Celbio',
      tasks: [
        { s: 'biologie', type: 'flashcards', title: 'Laatste ronde', mins: 10 },
      ] },
    { day: 'za', date: 13,
      tasks: [] },
    { day: 'zo', date: 14,
      tasks: [
        { s: 'wiskunde', type: 'oefenen', title: 'Voorbereiden SO', mins: 20 },
        { s: 'engels', type: 'lezen', title: 'Essay lezen', mins: 15 },
      ] },
  ];
}

window.FlowF = FlowF;