/* Stapel-mobile components — built on foundation-shared primitives.
   All ingredients for the 7 Stapel-frames live here. */

/* ─── SubjectChip — vak-tint pill met lucide icoon ─── */
const SUBJECT_ICONS = {
  wiskunde: 'calculator', biologie: 'leaf', scheikunde: 'flask-conical',
  natuurkunde: 'zap', geschiedenis: 'landmark', aardrijkskunde: 'map',
  economie: 'trending-up', informatica: 'terminal', engels: 'book',
  nederlands: 'book-open-text', frans: 'languages', duits: 'languages',
  maatschappijleer: 'users', kunst: 'palette',
};
function SubjectChip({ t, subject, size = 'md' }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const labels = {
    biologie: 'Biologie', wiskunde: 'Wiskunde', engels: 'Engels',
    scheikunde: 'Scheikunde', frans: 'Frans', geschiedenis: 'Geschiedenis',
    nederlands: 'Nederlands', natuurkunde: 'Natuurkunde', aardrijkskunde: 'Aardrijkskunde',
    economie: 'Economie', informatica: 'Informatica', duits: 'Duits',
    maatschappijleer: 'Maatschappijleer', kunst: 'Kunst',
  };
  const h = size === 'sm' ? 22 : 24;
  const fs = size === 'sm' ? 12 : 13;
  const ic = size === 'sm' ? 13 : 14;
  const iconName = SUBJECT_ICONS[subject] || 'book';
  const fg = t.subjectFg(hex);
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4, height: h,
      padding: '0 10px', borderRadius: 9999,
      background: hexToRgba(hex, t.mode === 'dark' ? 0.18 : 0.13),
      color: fg,
      border: `1px solid ${hexToRgba(hex, 0.30)}`,
      fontFamily: 'Nunito', fontWeight: 700, fontSize: fs, lineHeight: 1,
      letterSpacing: 0.1,
    }}>
      <MI name={iconName} size={ic} color={fg} strokeWidth={2.2} />
      {labels[subject] || subject}
    </span>
  );
}

/* ─── TypePill — TOETS / SO / INLEV ─── */
function TypePill({ t, kind }) {
  const map = {
    toets: { fg: t.red, bg: t.redDim, bd: hexToRgba(t.red, 0.32), label: 'TOETS' },
    so:    { fg: t.warnFg, bg: t.warnDim, bd: hexToRgba('#F59E0B', 0.32), label: 'SO' },
    inlev: { fg: t.purpleFg, bg: t.purpleDim, bd: hexToRgba(t.purple, 0.32), label: 'INLEV' },
  };
  const s = map[kind] || map.toets;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', height: 20,
      padding: '0 7px', borderRadius: 6,
      background: s.bg, color: s.fg, border: `1px solid ${s.bd}`,
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 10, lineHeight: 1,
      letterSpacing: 0.5,
    }}>{s.label}</span>
  );
}

/* ─── MiniWeekStrip — sticky-under-topbar weekrail ─── */
function MiniWeekStrip({ t, todayIdx = 1, loads = [2, 3, 1, 0, 2, 0, 0], summary, allEmpty = false }) {
  // loads[i] = task count for that day. Index 0..6 = ma..zo.
  const dayLabels = ['MA', 'DI', 'WO', 'DO', 'VR', 'ZA', 'ZO'];
  const dates = [21, 22, 23, 24, 25, 26, 27];
  const dotsFor = (n) => {
    if (n === 0) return { count: 0, op: 0 };
    if (n === 1) return { count: 1, op: 0.30 };
    if (n <= 3) return { count: 2, op: 0.60 };
    return { count: 3, op: 1.00 };
  };
  return (
    <div style={{
      background: t.card, borderBottom: `1px solid ${t.border}`,
      padding: '10px 14px 8px', flexShrink: 0,
    }}>
      {/* Header row */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
        <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg, letterSpacing: '-0.01em' }}>Week 17</span>
        <button style={{
          width: 22, height: 22, borderRadius: 6, background: 'transparent',
          border: 'none', color: t.fgDim, display: 'inline-flex',
          alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}><MI name="chevron-left" size={14} color={t.fgDim} strokeWidth={2.4} /></button>
        <button style={{
          width: 22, height: 22, borderRadius: 6, background: 'transparent',
          border: 'none', color: t.fgDim, display: 'inline-flex',
          alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}><MI name="chevron-right" size={14} color={t.fgDim} strokeWidth={2.4} /></button>
        <div style={{ flex: 1 }} />
        {summary && (
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 4, height: 20,
            padding: '0 8px', borderRadius: 999,
            background: t.primaryDim, color: t.primary,
            border: `1px solid ${hexToRgba(t.primary, 0.28)}`,
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 10.5, lineHeight: 1,
          }}>
            <MI name="sparkles" size={10} color={t.primary} strokeWidth={2.4} />
            {summary}
          </span>
        )}
      </div>
      {/* Cells */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7,1fr)', gap: 3 }}>
        {dayLabels.map((dl, i) => {
          const isToday = i === todayIdx;
          const isWeekend = i >= 5;
          const isVakantie = i === 4;
          const load = allEmpty ? 0 : loads[i];
          const d = dotsFor(load);
          return (
            <div key={i} style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              gap: 2, padding: '5px 0 4px',
              borderRadius: 8,
              border: isToday ? `2px solid ${t.primary}` : '2px solid transparent',
              background: isToday ? t.primaryDim : isWeekend ? hexToRgba(t.fgFaint, 0.06) : 'transparent',
              opacity: 1,
            }}>
              <span style={{
                fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5,
                color: isToday ? t.primary : t.fgDim, letterSpacing: 0.6,
              }}>{dl}</span>
              <span style={{
                fontFamily: 'Fredoka One', fontSize: 15, lineHeight: 1,
                color: isToday ? t.primary : t.fg,
              }}>{dates[i]}</span>
              <div style={{ height: 6, display: 'flex', alignItems: 'center', gap: 2.5, marginTop: 2 }}>
                {load === 0 ? (
                  <span style={{ fontFamily: 'Nunito', fontWeight: 700, fontSize: 9, color: t.fgFaint, lineHeight: 1 }}>—</span>
                ) : (
                  Array.from({ length: d.count }).map((_, j) => (
                    <span key={j} style={{
                      width: 4, height: 4, borderRadius: 999,
                      background: t.primary, opacity: d.op,
                    }} />
                  ))
                )}
              </div>
              {isVakantie && !allEmpty && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 2, marginTop: 1 }}>
                  <span style={{ fontSize: 9 }}>☀</span>
                  <div style={{ position: 'absolute', height: 2, width: 18, background: t.warn, marginTop: 18, borderRadius: 2 }} />
                </div>
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ─── SegmentedSwitcher — Vandaag / Morgen / Deadlines ─── */
function SegmentedSwitcher({ t, active = 0, counts = [3, 2, 5] }) {
  const tabs = ['Vandaag', 'Morgen', 'Deadlines'];
  return (
    <div style={{
      margin: '10px 14px 4px',
      height: 40, padding: 4, borderRadius: 999,
      background: t.cardSunken, border: `1px solid ${t.border}`,
      display: 'flex', gap: 4, flexShrink: 0,
    }}>
      {tabs.map((label, i) => {
        const on = i === active;
        return (
          <div key={i} style={{
            flex: 1, height: '100%', borderRadius: 999,
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
            background: on ? t.card : 'transparent',
            boxShadow: on ? t.shadowCard : 'none',
            color: on ? t.fg : t.fgDim,
            fontFamily: 'Nunito', fontWeight: on ? 800 : 600, fontSize: 12.5,
          }}>
            <span>{label}</span>
            <span style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
              color: on ? t.primary : t.fgMute, letterSpacing: 0.2,
            }}>· {counts[i]}</span>
          </div>
        );
      })}
    </div>
  );
}

/* ─── Body wrapper — scrollable body w/ bottom padding ─── */
function StapelBody({ children, paddingBottom = 96 }) {
  return (
    <div style={{
      flex: 1, overflow: 'hidden', padding: `12px 14px ${paddingBottom}px`,
      display: 'flex', flexDirection: 'column', gap: 12,
    }}>{children}</div>
  );
}

/* ─── OverlineRow — sectie-koppen tussen content ─── */
function Overline({ t, color, children }) {
  return (
    <div style={{
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
      color: color || t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
      padding: '4px 2px 0',
    }}>{children}</div>
  );
}

/* ─── TaskCard — 1 huiswerk-rij ─── */
function TaskCard({ t, subject, duration, title, source, isNow = false, done = false, compact = false }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: 11,
      background: t.card, borderRadius: 14,
      border: `1px solid ${t.border}`, borderLeft: `4px solid ${hex}`,
      padding: compact ? '10px 12px 10px 11px' : '12px 12px 12px 11px',
      boxShadow: isNow ? `0 0 0 2px ${hexToRgba(t.primary, 0.55)}, ${t.shadowCard}` : t.shadowCard,
      opacity: done ? 0.6 : 1, position: 'relative',
    }}>
      {/* Checkbox */}
      <div style={{
        width: 22, height: 22, borderRadius: 6, flexShrink: 0, marginTop: 1,
        border: done ? 'none' : `1.5px solid ${t.fgFaint}`,
        background: done ? t.primary : 'transparent',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        {done && <MI name="check" size={14} color="#FFFFFF" strokeWidth={3} />}
      </div>
      <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <SubjectChip t={t} subject={subject} size="sm" />
          <span style={{ fontFamily: 'Nunito', fontWeight: 600, fontSize: 11, color: t.fgDim }}>· {duration}</span>
          <div style={{ flex: 1 }} />
          {done ? (
            <span style={{
              height: 20, padding: '0 8px', borderRadius: 999,
              background: t.greenDim, color: t.green,
              border: `1px solid ${hexToRgba(t.green, 0.30)}`,
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 10, lineHeight: 1,
              display: 'inline-flex', alignItems: 'center', gap: 3, letterSpacing: 0.5,
            }}><MI name="check" size={10} color={t.green} strokeWidth={3} />AF</span>
          ) : compact ? (
            <MI name="chevron-right" size={16} color={t.fgFaint} strokeWidth={2.4} />
          ) : isNow ? (
            <Btn t={t} variant="primary" size="sm" icon="play">Start · 15m</Btn>
          ) : (
            <button style={{
              width: 28, height: 28, borderRadius: 8,
              background: t.cardSunken, border: `1px solid ${t.border}`,
              color: t.fg, display: 'inline-flex', alignItems: 'center',
              justifyContent: 'center', cursor: 'pointer',
            }}><MI name="play" size={13} color={t.fg} strokeWidth={2.4} fill="currentColor" /></button>
          )}
        </div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
          color: t.fg, lineHeight: 1.3,
          textDecoration: done ? 'line-through' : 'none',
          textDecorationColor: done ? t.fgFaint : 'inherit',
        }}>{title}</div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
          color: t.fgDim, lineHeight: 1.3,
        }}>{source}</div>
      </div>
    </div>
  );
}

/* ─── Herstel-bak — 4 gemiste taken ─── */
function HerstelBak({ t, count = 4 }) {
  return (
    <div style={{
      background: t.herstelBg, border: `1px solid ${t.herstelBorder}`,
      borderRadius: 14, padding: 13,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <MI name="rotate-ccw" size={14} color={t.herstelFg} strokeWidth={2.4} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
          color: t.herstelFg, letterSpacing: 1, textTransform: 'uppercase',
        }}>Herstel · {count} taken</span>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 600, fontSize: 13,
        color: t.fg, lineHeight: 1.45,
      }}>
        Vier taken uit vorige week staan nog open.<br />
        <span style={{ color: t.fgDim, fontWeight: 500 }}>Pulse stelt voor: verdelen of archiveren?</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <button style={{
          height: 42, borderRadius: 11, border: `1px solid ${t.red}`,
          background: t.red, color: '#FFFFFF', cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13.5, letterSpacing: 0.2,
        }}>Herplannen naar deze week</button>
        <button style={{
          height: 36, borderRadius: 10, border: 'none',
          background: 'transparent', color: t.herstelFg, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 12.5,
        }}>Bekijk lijst</button>
      </div>
    </div>
  );
}

/* ─── PulseCard — prominent overline + body + dismiss ─── */
function PulseCard({ t, label = 'Pulse · Goedemiddag', mood = 'thinking', body, dismissible = true }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 14, padding: 14, position: 'relative',
      display: 'flex', gap: 12, alignItems: 'flex-start',
    }}>
      <PulseMascotImg size={46} mood={mood} />
      <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
          color: t.primary, letterSpacing: 1, textTransform: 'uppercase',
          marginBottom: 4,
        }}>{label}</div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 13,
          color: t.fg, lineHeight: 1.5, paddingRight: 18,
        }}>{body}</div>
      </div>
      {dismissible && (
        <button style={{
          position: 'absolute', top: 10, right: 10,
          width: 22, height: 22, borderRadius: 6,
          background: 'transparent', border: 'none', color: t.fgFaint, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name="x" size={14} color={t.fgFaint} /></button>
      )}
    </div>
  );
}

/* ─── PulseTip — compact tip-row ─── */
function PulseTip({ t, body }) {
  return (
    <div style={{
      background: t.cardSunken, borderRadius: 12, padding: '10px 12px',
      display: 'flex', gap: 10, alignItems: 'flex-start', position: 'relative',
    }}>
      <PulseMascotImg size={28} mood="happy" style={{ marginTop: 2 }} />
      <div style={{ flex: 1, minWidth: 0, paddingRight: 16 }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5,
          color: t.primary, letterSpacing: 1, textTransform: 'uppercase',
          marginBottom: 2,
        }}>Pulse-tip</div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
          color: t.fgDim, lineHeight: 1.45,
        }}>{body}</div>
      </div>
      <button style={{
        position: 'absolute', top: 6, right: 6,
        width: 20, height: 20, borderRadius: 6,
        background: 'transparent', border: 'none', color: t.fgFaint, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="x" size={12} color={t.fgFaint} /></button>
    </div>
  );
}

/* ─── GeenZin link ─── */
function GeenZinLink({ t }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '4px 0 2px' }}>
      <span style={{
        fontFamily: 'Nunito', fontWeight: 600, fontSize: 12.5,
        color: t.fgDim, textDecoration: 'underline', textDecorationStyle: 'dotted',
        textUnderlineOffset: 3, cursor: 'pointer',
      }}>Vandaag heb ik geen zin →</span>
    </div>
  );
}

/* ─── InlineAddTask — dashed-border + Taak ─── */
function InlineAddTask({ t, label = '+ Taak voor morgen' }) {
  return (
    <button style={{
      width: '100%', height: 46, borderRadius: 12,
      background: 'transparent', cursor: 'pointer',
      border: `2px dashed ${hexToRgba(t.primary, 0.32)}`,
      color: t.primary,
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 13.5, letterSpacing: 0.2,
    }}>{label}</button>
  );
}

/* ─── DayHeader sticky ─── */
function DayHeader({ t, day, summary }) {
  return (
    <div style={{ padding: '6px 2px 0' }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
        color: t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
      }}>{day}</div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 12.5,
        color: t.fg, marginTop: 2,
      }}>{summary}</div>
    </div>
  );
}

/* ─── TePlannenBak — header + 3 cards ─── */
function TePlannenBak({ t, items }) {
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 14, padding: 13,
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <MI name="inbox" size={14} color={t.fg} strokeWidth={2.4} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
          color: t.fg, letterSpacing: 1, textTransform: 'uppercase',
        }}>Te plannen · {items.length}</span>
        <div style={{ flex: 1 }} />
        <MI name="chevron-up" size={16} color={t.fgDim} strokeWidth={2.4} />
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map((it, i) => <UnscheduledDeadlineCard key={i} t={t} {...it} />)}
      </div>
    </div>
  );
}

function UnscheduledDeadlineCard({ t, subject, title, dueIn, src }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  return (
    <div style={{
      background: t.cardSunken, border: `1px dashed ${t.subjectBorder(hex)}`,
      borderRadius: 12, padding: 11,
      display: 'flex', flexDirection: 'column', gap: 7,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <SubjectChip t={t} subject={subject} size="sm" />
        <div style={{ flex: 1 }} />
        <span style={{
          height: 18, padding: '0 6px', borderRadius: 5,
          background: t.warnDim, color: t.warnFg,
          border: `1px solid ${hexToRgba('#F59E0B', 0.30)}`,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5, lineHeight: 1,
          display: 'inline-flex', alignItems: 'center', letterSpacing: 0.5,
        }}>TE PLANNEN</span>
        <button style={{
          width: 20, height: 20, borderRadius: 5,
          background: 'transparent', border: 'none', color: t.fgFaint,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
        }}><MI name="more-horizontal" size={14} color={t.fgFaint} /></button>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13,
        color: t.fg, lineHeight: 1.3,
      }}>{title}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
        <MI name="calendar" size={11} color={t.fgDim} strokeWidth={2.2} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 600, fontSize: 10.5,
          color: t.fgDim, letterSpacing: 0.3, textTransform: 'uppercase',
        }}>{dueIn} · {src}</span>
      </div>
      <button style={{
        height: 34, borderRadius: 9, border: `1px solid ${t.primary}`,
        background: t.primary, color: '#FFFFFF', cursor: 'pointer',
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 12.5, letterSpacing: 0.2,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
      }}>
        <MI name="calendar-plus" size={13} color="#FFFFFF" strokeWidth={2.4} />
        Plan in
      </button>
    </div>
  );
}

/* ─── DeadlineCard — type-pill + datum + progress ─── */
function DeadlineCard({ t, kind, subject, title, date, days, progress }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const badgeColor =
    days <= 3 ? { fg: t.red,    bg: t.redDim,  bd: hexToRgba(t.red, 0.32) } :
    days <= 7 ? { fg: t.warnFg, bg: t.warnDim, bd: hexToRgba('#F59E0B', 0.30) } :
                { fg: t.fgDim,  bg: t.cardSunken, bd: t.border };
  return (
    <div style={{
      background: t.card, borderRadius: 14,
      border: `1px solid ${t.border}`, borderLeft: `4px solid ${hex}`,
      padding: '12px 12px 11px', boxShadow: t.shadowCard,
      display: 'flex', flexDirection: 'column', gap: 7,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
        <TypePill t={t} kind={kind} />
        <SubjectChip t={t} subject={subject} size="sm" />
        <div style={{ flex: 1 }} />
        <span style={{
          height: 20, padding: '0 7px', borderRadius: 6,
          background: badgeColor.bg, color: badgeColor.fg,
          border: `1px solid ${badgeColor.bd}`,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10, lineHeight: 1,
          display: 'inline-flex', alignItems: 'center', letterSpacing: 0.4,
        }}>{date}</span>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
        color: t.fg, lineHeight: 1.3,
      }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{
          width: '100%', height: 4, borderRadius: 999,
          background: t.cardSunken, overflow: 'hidden',
        }}>
          <div style={{
            width: `${progress}%`, height: '100%',
            background: progress === 0 ? 'transparent' : t.primary, borderRadius: 999,
          }} />
        </div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 600, fontSize: 10.5, color: t.fgDim,
        }}>{progress}% voorbereid · {progress === 0 ? 'nog niet gestart' : `${Math.max(1, Math.round((100 - progress)/20))} stappen open`}</div>
      </div>
    </div>
  );
}

/* ─── ZachteModus-card ─── */
function ZachteModusCard({ t }) {
  const bg = `linear-gradient(135deg, ${hexToRgba(t.primary, 0.10)}, ${t.card} 80%)`;
  return (
    <div style={{
      background: bg, border: `1px solid ${hexToRgba(t.primary, 0.24)}`,
      borderRadius: 16, padding: 18,
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8,
    }}>
      <PulseMascotImg size={56} mood="encouraging" />
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
        color: t.primary, letterSpacing: 1, textTransform: 'uppercase',
      }}>Zachte dagmodus</div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, lineHeight: 1.2,
        letterSpacing: '-0.01em',
      }}>Oké. Laten we de dag kleiner maken.</div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 13,
        color: t.fgDim, lineHeight: 1.5,
      }}>Ik laat alleen de kleinste taak staan.</div>
    </div>
  );
}

/* ─── Footer-card ─── */
function FooterCard({ t, children }) {
  return (
    <div style={{
      background: 'transparent', border: `1px solid ${t.border}`,
      borderRadius: 12, padding: '12px 14px',
      fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
      color: t.fgDim, lineHeight: 1.45,
    }}>{children}</div>
  );
}

/* ─── Sticky CTA-bar ─── */
function StickyCTA({ t, children }) {
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, bottom: 80, // above bottom-nav (height 80)
      background: t.card, borderTop: `1px solid ${t.border}`,
      padding: '10px 14px 12px', display: 'flex', gap: 8, zIndex: 4,
    }}>{children}</div>
  );
}

/* ─── CelebrationBanner ─── */
function CelebrationBanner({ t }) {
  // confetti dots
  const dots = [];
  const palette = [t.primary, t.gold, t.green, t.red, t.purple];
  for (let i = 0; i < 14; i++) {
    const angle = (i / 14) * Math.PI * 2;
    const r = 38 + (i % 3) * 8;
    const x = 50 + Math.cos(angle) * r;
    const y = 50 + Math.sin(angle) * r;
    dots.push({ x, y, c: palette[i % palette.length] });
  }
  return (
    <div style={{
      background: hexToRgba(t.green, 0.07), border: `1px solid ${hexToRgba(t.green, 0.32)}`,
      borderRadius: 16, padding: 16, position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7, textAlign: 'center',
    }}>
      <div style={{ position: 'relative', width: 110, height: 90, marginTop: 2 }}>
        {dots.map((d, i) => (
          <span key={i} style={{
            position: 'absolute', left: `${d.x}%`, top: `${d.y}%`,
            width: 4, height: 4, borderRadius: 999, background: d.c, opacity: 0.65,
            transform: 'translate(-50%, -50%)',
          }} />
        ))}
        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }}>
          <PulseMascotImg size={64} mood="happy" />
        </div>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
        color: t.green, letterSpacing: 1, textTransform: 'uppercase',
        display: 'inline-flex', alignItems: 'center', gap: 4,
      }}><MI name="check" size={12} color={t.green} strokeWidth={3} /> Vandaag klaar</div>
      <div style={{
        fontFamily: 'Fredoka One', fontSize: 22, color: t.fg, lineHeight: 1.15,
        letterSpacing: '-0.01em',
      }}>Lekker bezig.</div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
        color: t.fgDim, lineHeight: 1.45, maxWidth: 260,
      }}>Alle 3 taken afgevinkt — nog ruimte? Pak een extra of relax.</div>
      <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
        <Btn t={t} variant="primary" size="sm" icon="plus">Extra taak</Btn>
        <Btn t={t} variant="secondary" size="sm" icon="plus">Nieuwe deadline</Btn>
      </div>
    </div>
  );
}

/* ─── WelkomBanner ─── */
function WelkomBanner({ t }) {
  const bg = `linear-gradient(135deg, ${hexToRgba(t.primary, 0.10)} 0%, ${hexToRgba(t.purple, 0.10)} 100%)`;
  return (
    <div style={{
      background: bg, border: `1px solid ${hexToRgba(t.primary, 0.30)}`,
      borderRadius: 16, padding: 18, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 3,
        background: `linear-gradient(90deg, ${t.primary}, ${t.purple})`,
      }} />
      <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start', marginBottom: 12 }}>
        <PulseMascotImg size={56} mood="happy" />
        <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
            color: t.primary, letterSpacing: 1, textTransform: 'uppercase',
            marginBottom: 4,
          }}>👋 Welkom bij Plannen</div>
          <div style={{
            fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, lineHeight: 1.15,
            letterSpacing: '-0.01em',
          }}>Laten we beginnen.</div>
        </div>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
        color: t.fg, lineHeight: 1.5, marginBottom: 12,
      }}>Start met een deadline (toets, SO, inlever). Of laad je huiswerk automatisch in via je schoolsysteem of een foto van je planning.</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <Btn t={t} variant="primary" size="md" icon="plus" full>Eerste deadline</Btn>
        <Btn t={t} variant="secondary" size="md" icon="link-2" full>Schoolsysteem koppelen</Btn>
      </div>
    </div>
  );
}

Object.assign(window, {
  SubjectChip, TypePill, MiniWeekStrip, SegmentedSwitcher, StapelBody, Overline,
  TaskCard, HerstelBak, PulseCard, PulseTip, GeenZinLink, InlineAddTask, DayHeader,
  TePlannenBak, UnscheduledDeadlineCard, DeadlineCard, ZachteModusCard,
  FooterCard, StickyCTA, CelebrationBanner, WelkomBanner,
});