/* Week-view mobile — 6 frames, dark + light per row. */

/* Day-strip data sets */
const WEEK17_DAYS_DI = [
  { dl: 'MA', date: 21, load: 2, past: true  },
  { dl: 'DI', date: 22, load: 3 },          // today
  { dl: 'WO', date: 23, load: 1 },
  { dl: 'DO', date: 24, load: 0 },
  { dl: 'VR', date: 25, load: 2, marker: true }, // Bio-toets
  { dl: 'ZA', date: 26, load: 0, weekend: true },
  { dl: 'ZO', date: 27, load: 0, weekend: true },
];
const WEEK17_DAYS_VR = [
  { dl: 'MA', date: 21, load: 2, past: true },
  { dl: 'DI', date: 22, load: 3, past: true },
  { dl: 'WO', date: 23, load: 1, past: true },
  { dl: 'DO', date: 24, load: 0, past: true },
  { dl: 'VR', date: 25, load: 2, marker: true },
  { dl: 'ZA', date: 26, load: 0, weekend: true },
  { dl: 'ZO', date: 27, load: 0, weekend: true },
];
const WEEK19_DAYS = [
  { dl: 'MA', date:  5, load: 0, vakantie: true },
  { dl: 'DI', date:  6, load: 0, vakantie: true },
  { dl: 'WO', date:  7, load: 0, vakantie: true },
  { dl: 'DO', date:  8, load: 0, vakantie: true },
  { dl: 'VR', date:  9, load: 0, vakantie: true },
  { dl: 'ZA', date: 10, load: 0, weekend: true, vakantie: true },
  { dl: 'ZO', date: 11, load: 0, weekend: true, vakantie: true },
];

/* ─────────── Frame 1 — Dinsdag VANDAAG ─────────── */
function Frame1_DinsdagVandaag({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <WeekTopbar t={t} title="Week 17" subtitle="21–27 april · Bio-toets vrijdag" />
      <WeekToolbar t={t} view="week" />
      <DayStrip t={t} days={WEEK17_DAYS_DI} selected={1} todayIdx={1} />
      <WeekBody>
        <WeekDayHeader t={t} label="Dinsdag 22 april · Vandaag" labelColor={t.primary} studyTime="2u 30m" />
        <WeekDeadlineCard t={t} kind="toets" subject="biologie"
          title="Bio-toets H4 — celbiologie" time="vrijdag · 10:00"
          progress={60} progressLabel="60% voorbereid" />
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
          color: t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
          padding: '2px 2px 0',
        }}>Geplande taken · 3</div>
        <TaskBlock t={t} subject="biologie" duration="15 min" time="15:30"
          title="Celbiologie — flashcards ronde 2" source="Bio · H4 · 60% af" isNow />
        <TaskBlock t={t} subject="wiskunde" duration="20 min" time="16:00"
          title="Statistiek — 3 oefenopgaves" source="Wisk · H7" />
        <TaskBlock t={t} subject="engels" duration="15 min" time="16:30"
          title="Essay-paragraaf 2 schrijven" source="Engels · week 42" />
        <InlineAddDay t={t} label="+ Taak op deze dag" />
        <UnavailableLink t={t} />
      </WeekBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─────────── Frame 2 — Vrijdag MET TOETS ─────────── */
function Frame2_VrijdagToets({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <WeekTopbar t={t} title="Week 17" subtitle="21–27 april · Bio-toets vrijdag" />
      <WeekToolbar t={t} view="week" />
      <DayStrip t={t} days={WEEK17_DAYS_VR} selected={4} todayIdx={1} />
      <WeekBody>
        <WeekDayHeader t={t} label="Vrijdag 25 april" studyTime="1u 0m" />
        <WeekDeadlineCard t={t} kind="toets" subject="biologie"
          title="Bio-toets H4 — celbiologie" time="10:00"
          progress={60} progressLabel="60% voorbereid · vandaag laatste kans"
          prominent />
        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
          color: t.fgDim, letterSpacing: 1, textTransform: 'uppercase',
          padding: '2px 2px 0',
        }}>Geplande taken · 2</div>
        <TaskBlock t={t} subject="biologie" duration="30 min" time="08:00"
          title="Bio H4 — laatste oefenronde" source="Bio · H4-5" />
        <TaskBlock t={t} subject="biologie" duration="30 min" time="09:00"
          title="Bio H4 — formules en termen herhalen" source="Bio · H4" />
        <InlineAddDay t={t} label="+ Taak op deze dag" />
      </WeekBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─────────── Frame 3 — Vakantie woensdag ─────────── */
function Frame3_VakantieDag({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <WeekTopbar t={t} title="Week 19" subtitle="5–11 mei · Meivakantie" />
      <WeekToolbar t={t} view="week" />
      <DayStrip t={t} days={WEEK19_DAYS} selected={2} todayIdx={-1} />
      <WeekBody>
        <WeekDayHeader t={t} label="Woensdag 7 mei" labelColor={t.warnFg} />
        <VakantieBanner t={t}
          title="HEEL DE DAG · Meivakantie"
          body="5–11 mei · Pulse plant geen taken tenzij je een toets erna hebt." />
        <EmptyCard t={t} icon="sun" iconColor={t.gold}
          title="Vakantie" body="Geen plannen — Pulse verstoort niet."
          ctas={<Btn t={t} variant="ghost" size="sm">Toch een taak inplannen?</Btn>} />
      </WeekBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─────────── Frame 4 — Weekend leeg ─────────── */
function Frame4_WeekendLeeg({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <WeekTopbar t={t} title="Week 17" subtitle="21–27 april · Bio-toets vrijdag" />
      <WeekToolbar t={t} view="week" />
      <DayStrip t={t} days={WEEK17_DAYS_VR} selected={5} todayIdx={1} />
      <WeekBody>
        <WeekDayHeader t={t} label="Zaterdag 26 april · Weekend" />
        <EmptyCard t={t} icon="sun" iconColor={t.gold}
          title="Weekend" body="Geen plannen — Pulse verstoort niet."
          ctas={<Btn t={t} variant="ghost" size="sm">Toch een taak inplannen?</Btn>} />
        <UnavailableLink t={t} />
      </WeekBody>
      <MobileBottomNav t={t} active="plannen" />
    </PhoneShell>
  );
}

/* ─────────── Frame 5 — Herplan-sheet over dinsdag ─────────── */
function Frame5_HerplanSheet({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <WeekTopbar t={t} title="Week 17" subtitle="21–27 april · Bio-toets vrijdag" />
      <WeekToolbar t={t} view="week" />
      <DayStrip t={t} days={WEEK17_DAYS_DI} selected={1} todayIdx={1} />
      <WeekBody>
        <WeekDayHeader t={t} label="Dinsdag 22 april · Vandaag" labelColor={t.primary} studyTime="2u 30m" />
        <TaskBlock t={t} subject="biologie" duration="15 min" time="15:30"
          title="Celbiologie — flashcards ronde 2" source="Bio · H4 · 60% af" isNow />
        <TaskBlock t={t} subject="wiskunde" duration="20 min" time="16:00"
          title="Statistiek — 3 oefenopgaves" source="Wisk · H7" />
        <TaskBlock t={t} subject="engels" duration="15 min" time="16:30"
          title="Essay-paragraaf 2 schrijven" source="Engels · week 42" />
      </WeekBody>
      <MobileBottomNav t={t} active="plannen" />
      <HerplanSheet t={t} />
    </PhoneShell>
  );
}

/* ─────────── Frame 6 — Week-wissel-sheet ─────────── */
function Frame6_WeekWisselSheet({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <WeekTopbar t={t} title="Week 17" subtitle="21–27 april · Bio-toets vrijdag" />
      <WeekToolbar t={t} view="week" />
      <DayStrip t={t} days={WEEK17_DAYS_DI} selected={1} todayIdx={1} />
      <WeekBody>
        <WeekDayHeader t={t} label="Dinsdag 22 april · Vandaag" labelColor={t.primary} studyTime="2u 30m" />
        <TaskBlock t={t} subject="biologie" duration="15 min" time="15:30"
          title="Celbiologie — flashcards ronde 2" source="Bio · H4 · 60% af" isNow />
        <TaskBlock t={t} subject="wiskunde" duration="20 min" time="16:00"
          title="Statistiek — 3 oefenopgaves" source="Wisk · H7" />
        <TaskBlock t={t} subject="engels" duration="15 min" time="16:30"
          title="Essay-paragraaf 2 schrijven" source="Engels · week 42" />
      </WeekBody>
      <MobileBottomNav t={t} active="plannen" />
      <WeekWisselSheet t={t} />
    </PhoneShell>
  );
}

/* ─── Row ─── */
function FrameRow({ label, dark, light }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{
        fontFamily: 'Nunito', fontWeight: 800, fontSize: 11,
        color: '#64748B', letterSpacing: 0.7, textTransform: 'uppercase',
      }}>{label}</div>
      <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
        {dark}
        {light}
      </div>
    </div>
  );
}

/* ─── Page ─── */
function WeekPage() {
  return (
    <div style={{
      padding: 32, display: 'flex', flexDirection: 'column', gap: 56,
      background: '#F1F5F9', minHeight: '100vh',
    }}>
      <header>
        <div style={{
          fontSize: 11, fontWeight: 800, color: '#64748B',
          letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 6,
        }}>Plannen Mobile · Week-view</div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 36, color: '#0F172A',
          letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Per-dag focus · 6 frames</h1>
        <p style={{
          margin: '8px 0 0', fontSize: 13, color: '#475569',
          fontWeight: 500, lineHeight: 1.5, maxWidth: 720,
        }}>Mobile-redesign van de week-view: sticky day-strip met load-dots, per-dag-focus body, geen drag/drop — herplan via BottomSheet. 6 frames in dark + light, inclusief vakantie- en weekend-states + 2 sheet-varianten.</p>
      </header>

      <FrameRow label="Frame 1 · Dinsdag vandaag · 3 tasks + Bio-deadline preview"
        dark={<Frame1_DinsdagVandaag t={TK_DARK} />}
        light={<Frame1_DinsdagVandaag t={TK_LIGHT} />} />

      <FrameRow label="Frame 2 · Vrijdag met Bio-toets · prominente deadline + 2 voorbereidings-tasks"
        dark={<Frame2_VrijdagToets t={TK_DARK} />}
        light={<Frame2_VrijdagToets t={TK_LIGHT} />} />

      <FrameRow label="Frame 3 · Vakantie-dag · sun-banner + empty"
        dark={<Frame3_VakantieDag t={TK_DARK} />}
        light={<Frame3_VakantieDag t={TK_LIGHT} />} />

      <FrameRow label="Frame 4 · Weekend zaterdag · empty"
        dark={<Frame4_WeekendLeeg t={TK_DARK} />}
        light={<Frame4_WeekendLeeg t={TK_LIGHT} />} />

      <FrameRow label="Frame 5 · Herplan bottom-sheet · medium height · date+time-picker"
        dark={<Frame5_HerplanSheet t={TK_DARK} />}
        light={<Frame5_HerplanSheet t={TK_LIGHT} />} />

      <FrameRow label="Frame 6 · Week-wissel bottom-sheet · small height · list-rows"
        dark={<Frame6_WeekWisselSheet t={TK_DARK} />}
        light={<Frame6_WeekWisselSheet t={TK_LIGHT} />} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<WeekPage />);