/* Week-view mobile components — per-dag focus-view.
   Builds on foundation-shared + stapel-components (SubjectChip, TypePill). */

/* ─── WeekTopbar — title + subtitle + pills (reuses MobileTopbar style) ─── */
function WeekTopbar({ t, title = 'Week 17', subtitle = '21–27 april · Bio-toets vrijdag' }) {
  return (
    <header style={{
      background: t.topbar, borderBottom: `1px solid ${t.border}`,
      padding: '8px 16px 10px', display: 'flex', alignItems: 'center',
      gap: 10, flexShrink: 0, minHeight: 56, boxSizing: 'border-box',
    }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
          lineHeight: 1.15, letterSpacing: '-0.01em',
        }}>
          {title}
          <MI name="chevron-down" size={16} color={t.fgDim} strokeWidth={2.4} style={{ marginTop: 2 }} />
        </div>
        <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 1, lineHeight: 1.3 }}>{subtitle}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
        <SnapsPillSm t={t} count={240} />
        <StreakPillSm t={t} count={5} />
        <button style={{
          width: 32, height: 32, borderRadius: 9, background: 'transparent',
          border: 'none', color: t.fgDim, cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><MI name="bell" size={18} color={t.fgDim} /></button>
      </div>
    </header>
  );
}

/* ─── WeekToolbar — back, view-toggle, settings, plus ─── */
function WeekToolbar({ t, view = 'week' }) {
  const SegTab = ({ label, on }) => (
    <div style={{
      height: 28, padding: '0 14px', borderRadius: 999,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      background: on ? t.card : 'transparent',
      boxShadow: on ? t.shadowCard : 'none',
      color: on ? t.fg : t.fgDim,
      fontFamily: 'Nunito', fontWeight: on ? 800 : 600, fontSize: 12,
      letterSpacing: 0.2,
    }}>{label}</div>
  );
  return (
    <div style={{
      height: 56, padding: '0 12px', background: t.card,
      borderBottom: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0,
    }}>
      <button style={{
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', color: t.fgDim, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="chevron-left" size={22} color={t.fgDim} strokeWidth={2.4} /></button>
      <div style={{
        height: 36, padding: 4, borderRadius: 999,
        background: t.cardSunken, border: `1px solid ${t.border}`,
        display: 'inline-flex', gap: 2,
      }}>
        <SegTab label="Week" on={view === 'week'} />
        <SegTab label="Maand" on={view === 'maand'} />
      </div>
      <div style={{ flex: 1 }} />
      <button style={{
        width: 32, height: 32, borderRadius: 8, background: 'transparent',
        border: 'none', color: t.fgDim, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="settings-2" size={20} color={t.fgDim} strokeWidth={2.2} /></button>
      <button style={{
        width: 32, height: 32, borderRadius: 8,
        background: t.primaryDim, border: `1px solid ${hexToRgba(t.primary, 0.30)}`,
        color: t.primary, cursor: 'pointer',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      }}><MI name="plus" size={20} color={t.primary} strokeWidth={2.6} /></button>
    </div>
  );
}

/* ─── DayStrip — sticky day cells, 7 across ─── */
function DayStrip({ t, days, selected = 1, todayIdx = 1 }) {
  // days: array of { dl, date, load (0..3), weekend, vakantie, marker (e.g. 'TOETS') }
  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.65 };
    return { count: 3, op: 1.00 };
  };
  return (
    <div style={{
      background: t.card, borderBottom: `1px solid ${t.border}`,
      padding: '10px 10px 10px', flexShrink: 0,
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
        {days.map((d, i) => {
          const isToday = i === todayIdx;
          const isSel = i === selected;
          const past = d.past;
          const weekend = d.weekend;
          const vak = d.vakantie;
          const load = d.load || 0;
          const dt = dotsFor(load);
          const isPrimaryText = isToday || isSel;
          const bg = isToday ? t.primaryDim
                  : weekend ? hexToRgba(t.fgFaint, 0.06)
                  : 'transparent';
          const border = isSel && !isToday ? `2px solid ${t.primary}`
                  : isToday ? `2px solid ${t.primary}`
                  : '2px solid transparent';
          return (
            <div key={i} style={{
              minHeight: 64, borderRadius: 10,
              background: bg, border,
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              gap: 2, padding: '6px 0 5px', position: 'relative',
              opacity: past ? 0.5 : 1,
            }}>
              <span style={{
                fontFamily: 'Nunito', fontWeight: 800, fontSize: 10,
                color: isPrimaryText ? t.primary : weekend ? t.fgMute : t.fgDim,
                letterSpacing: 0.6,
              }}>{d.dl}</span>
              <span style={{
                fontFamily: 'Fredoka One', fontSize: 18, lineHeight: 1,
                color: isPrimaryText ? t.primary : t.fg, marginTop: 1,
              }}>{d.date}</span>
              <div style={{ height: 8, display: 'flex', alignItems: 'center', gap: 2.5, marginTop: 3 }}>
                {load === 0 && !vak ? (
                  <span style={{ fontFamily: 'Nunito', fontWeight: 700, fontSize: 10, color: t.fgFaint, lineHeight: 1 }}>—</span>
                ) : vak ? (
                  <span style={{ fontSize: 11 }}>☀</span>
                ) : (
                  Array.from({ length: dt.count }).map((_, j) => (
                    <span key={j} style={{
                      width: 4, height: 4, borderRadius: 999,
                      background: isPrimaryText ? t.primary : t.primary,
                      opacity: dt.op,
                    }} />
                  ))
                )}
              </div>
              {d.marker && (
                <div style={{
                  position: 'absolute', top: 3, right: 3,
                  width: 6, height: 6, borderRadius: 999, background: t.red,
                  boxShadow: `0 0 0 1.5px ${t.card}`,
                }} />
              )}
              {vak && (
                <div style={{
                  position: 'absolute', left: 8, right: 8, bottom: 2,
                  height: 2, background: t.warn, borderRadius: 2, opacity: 0.85,
                }} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ─── WeekDayHeader — overline + study-time pill ─── */
function WeekDayHeader({ t, label, labelColor, studyTime }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      padding: '2px 2px 0',
    }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
        color: labelColor || t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
        flex: 1, minWidth: 0,
      }}>{label}</div>
      {studyTime && (
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4, height: 22,
          padding: '0 9px', borderRadius: 999,
          background: t.cardSunken, border: `1px solid ${t.border}`,
          color: t.fg, fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, lineHeight: 1,
        }}>
          <MI name="clock" size={11} color={t.fgDim} strokeWidth={2.4} />
          {studyTime}
        </span>
      )}
    </div>
  );
}

/* ─── WeekDeadlineCard — preview / prominent variant ─── */
function WeekDeadlineCard({ t, kind, subject, title, time, progress, progressLabel, prominent = false }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  const bg = hexToRgba(hex, prominent ? (t.mode === 'dark' ? 0.16 : 0.12) : (t.mode === 'dark' ? 0.10 : 0.08));
  const bd = prominent ? `2px solid ${hexToRgba(hex, 0.55)}` : `1.5px solid ${hexToRgba(hex, 0.40)}`;
  return (
    <div style={{
      background: bg, border: bd, borderRadius: 14,
      padding: prominent ? 16 : 14,
      display: 'flex', flexDirection: 'column', gap: prominent ? 10 : 8,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <TypePill t={t} kind={kind} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
          color: t.fg, letterSpacing: 0.3,
        }}>{time}</span>
        <div style={{ flex: 1 }} />
        <MI name="chevron-right" size={16} color={t.fgDim} strokeWidth={2.4} />
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <SubjectChip t={t} subject={subject} size="sm" />
        <div style={{
          fontFamily: prominent ? 'Fredoka One' : 'Nunito',
          fontWeight: prominent ? undefined : 700,
          fontSize: prominent ? 17 : 13.5, color: t.fg, lineHeight: 1.25,
          letterSpacing: prominent ? '-0.01em' : 'normal',
          flex: '1 1 100%',
        }}>{title}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <div style={{
          width: '100%', height: 6, borderRadius: 999,
          background: t.cardSunken, overflow: 'hidden',
        }}>
          <div style={{ width: `${progress}%`, height: '100%', background: t.primary, borderRadius: 999 }} />
        </div>
        <div style={{
          fontFamily: 'Nunito', fontWeight: prominent ? 800 : 600, fontSize: 11,
          color: prominent ? t.fg : t.fgDim,
        }}>{progressLabel || `${progress}% voorbereid`}</div>
      </div>
    </div>
  );
}

/* ─── TaskBlock — week-view huiswerk-rij ─── */
function TaskBlock({ t, subject, duration, time, title, source, isNow = false }) {
  const hex = SUBJECTS[subject] || t.fgMute;
  return (
    <div style={{
      background: t.card, borderRadius: 14,
      border: `1px solid ${t.border}`, borderLeft: `4px solid ${hex}`,
      padding: '11px 12px 9px',
      boxShadow: isNow ? `0 0 0 2px ${hexToRgba(t.primary, 0.55)}, ${t.shadowCard}` : t.shadowCard,
      display: 'flex', flexDirection: 'column', gap: 6, position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <SubjectChip t={t} subject={subject} size="sm" />
        <span style={{ fontFamily: 'Nunito', fontWeight: 600, fontSize: 11, color: t.fgDim }}>· {duration}</span>
        <div style={{ flex: 1 }} />
        <span style={{
          fontFamily: 'Fredoka One', fontSize: 13, color: t.fg,
          letterSpacing: '-0.01em',
        }}>{time}</span>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
        color: t.fg, lineHeight: 1.3,
      }}>{title}</div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
        color: t.fgDim, lineHeight: 1.3,
      }}>{source}</div>
      <div style={{
        display: 'flex', gap: 4, justifyContent: 'flex-end', marginTop: 2,
        marginRight: -4,
      }}>
        <button style={{
          height: 26, padding: '0 8px', borderRadius: 7,
          background: 'transparent', border: 'none', color: t.fgDim, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 11.5,
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          <MI name="calendar-clock" size={13} color={t.fgDim} strokeWidth={2.2} />
          Herplan
        </button>
        <button style={{
          height: 26, padding: '0 8px', borderRadius: 7,
          background: 'transparent', border: 'none', color: t.red, cursor: 'pointer',
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 11.5,
          display: 'inline-flex', alignItems: 'center', gap: 4,
        }}>
          <MI name="trash-2" size={13} color={t.red} strokeWidth={2.2} />
          Verwijder
        </button>
      </div>
    </div>
  );
}

/* ─── VakantieBanner ─── */
function VakantieBanner({ t, title, body }) {
  return (
    <div style={{
      background: hexToRgba(t.warn, 0.10),
      border: `1px solid ${hexToRgba(t.warn, 0.32)}`,
      borderRadius: 12, padding: '11px 13px',
      display: 'flex', flexDirection: 'column', gap: 4,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <MI name="sun" size={14} color={t.warnFg} strokeWidth={2.4} />
        <span style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
          color: t.fg, letterSpacing: 0.3,
        }}>{title}</span>
      </div>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 500, fontSize: 11.5,
        color: t.warnFg, lineHeight: 1.45, paddingLeft: 20,
      }}>{body}</div>
    </div>
  );
}

/* ─── InlineAddDay — full-width dashed CTA ─── */
function InlineAddDay({ t, label = '+ Taak op deze dag' }) {
  return (
    <button style={{
      width: '100%', height: 48, 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>
  );
}

/* ─── UnavailableLink ─── */
function UnavailableLink({ t }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '6px 0 2px' }}>
      <span style={{
        fontFamily: 'Nunito', fontWeight: 600, fontSize: 12,
        color: t.fgDim, textDecoration: 'underline', textDecorationStyle: 'dotted',
        textUnderlineOffset: 3, cursor: 'pointer',
      }}>Markeer dag als niet-beschikbaar</span>
    </div>
  );
}

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

/* ─── HerplanSheet — medium-height bottom-sheet for re-planning ─── */
function HerplanSheet({ t }) {
  const days = [
    { dl: 'DI', date: 22, sub: '22 apr', sel: false, today: true,  dis: false },
    { dl: 'WO', date: 23, sub: '23 apr', sel: true,  today: false, dis: false },
    { dl: 'DO', date: 24, sub: '24 apr', sel: false, today: false, dis: false },
    { dl: 'VR', date: 25, sub: '25 apr', sel: false, today: false, dis: false },
    { dl: 'ZA', date: 26, sub: '26 apr', sel: false, today: false, dis: true  },
    { dl: 'ZO', date: 27, sub: '27 apr', sel: false, today: false, dis: true  },
    { dl: 'MA', date: 28, sub: '28 apr', sel: false, today: false, dis: false },
    { dl: 'DI', date: 29, sub: '29 apr', sel: false, today: false, dis: false },
    { dl: 'WO', date: 30, sub: '30 apr', sel: false, today: false, dis: false },
    { dl: 'DO', date:  1, sub: '1 mei',  sel: false, today: false, dis: false },
    { dl: 'VR', date:  2, sub: '2 mei',  sel: false, today: false, dis: false },
    { dl: 'ZA', date:  3, sub: '3 mei',  sel: false, today: false, dis: true  },
    { dl: 'ZO', date:  4, sub: '4 mei',  sel: false, today: false, dis: true  },
    { dl: 'MA', date:  5, sub: '5 mei',  sel: false, today: false, dis: false },
  ];
  const timeSegs = ['Ochtend', 'Middag', 'Avond', 'Custom'];
  const reasons = [
    { label: 'Beter pacing', on: false },
    { label: 'Ander dag-deel', on: true },
    { label: 'Andere reden', on: false },
  ];
  return (
    <div style={{
      position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
      justifyContent: 'flex-end', zIndex: 5,
    }}>
      <div style={{ position: 'absolute', inset: 0, background: t.scrim }} />
      <div style={{
        position: 'relative', height: '70%',
        background: t.card,
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        boxShadow: '0 -8px 32px rgba(0,0,0,0.20)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* Drag-handle */}
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background: t.fgFaint, opacity: 0.55 }} />
        </div>
        {/* Header */}
        <div style={{
          padding: '10px 18px 8px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em' }}>Verplaats naar…</div>
            <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 1 }}>Wisk · Statistiek 3 oefenopgaves</div>
          </div>
          <button style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'transparent', border: 'none', color: t.fgDim, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><MI name="x" size={20} color={t.fgDim} /></button>
        </div>
        {/* Body */}
        <div style={{ flex: 1, overflow: 'auto', padding: '4px 16px 12px', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {/* Pulse-tip */}
          <div style={{
            background: t.cardSunken, border: `1px solid ${t.border}`,
            borderRadius: 12, padding: 11,
            display: 'flex', gap: 10, alignItems: 'flex-start',
          }}>
            <PulseMascotImg size={32} mood="thinking" style={{ marginTop: 2 }} />
            <div style={{ flex: 1 }}>
              <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.fg, lineHeight: 1.45,
              }}>Verplaats naar woensdag — er staat al een Wisk-blok dichtbij.</div>
            </div>
          </div>

          {/* Wanneer — date-picker */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
              color: t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
            }}>Wanneer</div>
            <div style={{
              display: 'flex', gap: 6, overflowX: 'auto',
              padding: '2px 0 4px', scrollbarWidth: 'none',
            }}>
              {days.map((d, i) => {
                const bg = d.sel ? t.primary
                        : d.today ? t.primaryDim
                        : 'transparent';
                const fg = d.sel ? '#FFFFFF'
                        : d.today ? t.primary
                        : d.dis ? t.fgFaint
                        : t.fg;
                const subFg = d.sel ? 'rgba(255,255,255,0.85)'
                        : d.today ? t.primary
                        : d.dis ? t.fgFaint
                        : t.fgDim;
                return (
                  <div key={i} style={{
                    flexShrink: 0, width: 54, height: 64, borderRadius: 12,
                    background: bg,
                    border: d.sel ? 'none' : `1px solid ${t.border}`,
                    display: 'flex', flexDirection: 'column', alignItems: 'center',
                    justifyContent: 'center', gap: 2,
                    opacity: d.dis ? 0.4 : 1,
                  }}>
                    <span style={{
                      fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5,
                      color: subFg, letterSpacing: 0.6,
                    }}>{d.dl}</span>
                    <span style={{
                      fontFamily: 'Fredoka One', fontSize: 18, color: fg, lineHeight: 1,
                    }}>{d.date}</span>
                  </div>
                );
              })}
            </div>
            {/* Time-picker segmented */}
            <div style={{
              height: 38, padding: 4, borderRadius: 999,
              background: t.cardSunken, border: `1px solid ${t.border}`,
              display: 'flex', gap: 3,
            }}>
              {timeSegs.map((seg, i) => {
                const on = i === 1; // Middag
                return (
                  <div key={i} style={{
                    flex: 1, borderRadius: 999,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    background: on ? t.card : 'transparent',
                    boxShadow: on ? t.shadowCard : 'none',
                    color: on ? t.fg : t.fgDim,
                    fontFamily: 'Nunito', fontWeight: on ? 800 : 600, fontSize: 11.5,
                  }}>{seg}{on ? ' · 15:00' : ''}</div>
                );
              })}
            </div>
          </div>

          {/* Waarom — radio list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
              color: t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
            }}>Waarom <span style={{ fontWeight: 600, textTransform: 'none', letterSpacing: 0.2 }}>(optioneel)</span></div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {reasons.map((r, i) => (
                <div key={i} style={{
                  height: 40, padding: '0 12px', borderRadius: 10,
                  background: r.on ? t.primaryDim : t.cardSunken,
                  border: `1px solid ${r.on ? hexToRgba(t.primary, 0.30) : t.border}`,
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 999,
                    border: `2px solid ${r.on ? t.primary : t.fgFaint}`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    {r.on && <span style={{ width: 8, height: 8, borderRadius: 999, background: t.primary }} />}
                  </span>
                  <span style={{
                    fontFamily: 'Nunito', fontWeight: r.on ? 800 : 600, fontSize: 13,
                    color: r.on ? t.fg : t.fgDim,
                  }}>{r.label}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Sticky footer */}
        <div style={{
          padding: '10px 16px 14px', borderTop: `1px solid ${t.border}`,
          background: t.card, display: 'flex', gap: 8,
        }}>
          <div style={{ flex: 1 }}><Btn t={t} variant="ghost" size="md" full>Annuleren</Btn></div>
          <div style={{ flex: 2 }}><Btn t={t} variant="primary" size="md" icon="check" full>Verplaats</Btn></div>
        </div>
      </div>
    </div>
  );
}

/* ─── WeekWisselSheet — small-height bottom-sheet for week-selector ─── */
function WeekWisselSheet({ t }) {
  const weeks = [
    { n: 16, range: '14–20 apr', state: 'past' },
    { n: 17, range: '21–27 apr', state: 'current', tag: 'DEZE WEEK' },
    { n: 18, range: '28 apr – 4 mei', state: 'future' },
    { n: 19, range: '5–11 mei', state: 'future', tag: 'MEIVAKANTIE', tagColor: 'warn' },
    { n: 20, range: '12–18 mei', state: 'future' },
  ];
  return (
    <div style={{
      position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column',
      justifyContent: 'flex-end', zIndex: 5,
    }}>
      <div style={{ position: 'absolute', inset: 0, background: t.scrim }} />
      <div style={{
        position: 'relative', height: '45%',
        background: t.card,
        borderTopLeftRadius: 28, borderTopRightRadius: 28,
        boxShadow: '0 -8px 32px rgba(0,0,0,0.20)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8 }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background: t.fgFaint, opacity: 0.55 }} />
        </div>
        <div style={{
          padding: '10px 18px 8px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em' }}>Kies week</div>
          <button style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'transparent', border: 'none', color: t.fgDim, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}><MI name="x" size={20} color={t.fgDim} /></button>
        </div>
        <div style={{ flex: 1, overflow: 'auto' }}>
          {weeks.map((w, i) => {
            const cur = w.state === 'current';
            const past = w.state === 'past';
            const tagBg = w.tagColor === 'warn' ? t.warnDim : t.primaryDim;
            const tagFg = w.tagColor === 'warn' ? t.warnFg : t.primary;
            const tagBd = w.tagColor === 'warn' ? hexToRgba(t.warn, 0.30) : hexToRgba(t.primary, 0.30);
            return (
              <div key={i} style={{
                padding: '14px 18px', borderBottom: `1px solid ${t.border}`,
                display: 'flex', alignItems: 'center', gap: 12,
                background: cur ? hexToRgba(t.primary, 0.04) : 'transparent',
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 999, flexShrink: 0,
                  background: cur ? t.primary : 'transparent',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  {cur && <MI name="check" size={14} color="#FFFFFF" strokeWidth={3} />}
                </span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'Nunito',
                    fontWeight: cur ? 800 : 700,
                    fontSize: 14,
                    color: cur ? t.fg : past ? t.fgMute : t.fg,
                    opacity: past ? 0.65 : 1,
                  }}>Week {w.n} <span style={{ fontWeight: 500, color: t.fgDim }}>· {w.range}</span></div>
                </div>
                {w.tag && (
                  <span style={{
                    height: 20, padding: '0 8px', borderRadius: 6,
                    background: tagBg, color: tagFg,
                    border: `1px solid ${tagBd}`,
                    fontFamily: 'Nunito', fontWeight: 800, fontSize: 9.5, lineHeight: 1,
                    letterSpacing: 0.5, display: 'inline-flex', alignItems: 'center',
                  }}>{w.tag}</span>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  WeekTopbar, WeekToolbar, DayStrip, WeekDayHeader, WeekDeadlineCard,
  TaskBlock, VakantieBanner, InlineAddDay, UnavailableLink, WeekBody,
  HerplanSheet, WeekWisselSheet,
});