/* Add-flows frames — 6 frames × dark/light.
   Wizard (3) full-screen flow, then quick-add / losse-taak / import (3) bottom-sheets. */

function AFRow({ 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>
  );
}

/* Re-use TASKS_TODAY as dim background for sheet frames */
const TASKS_BG = [
  { subject: 'biologie', duration: '15 min', title: 'Celbiologie — flashcards ronde 2', source: 'Bio · H4', isNow: true },
  { subject: 'wiskunde', duration: '20 min', title: 'Statistiek — 3 oefenopgaves',      source: 'Wisk · H7' },
  { subject: 'engels',   duration: '15 min', title: 'Essay-paragraaf 2 schrijven',      source: 'Engels · week 42' },
];

function DimmedStapelBg2({ t }) {
  return (
    <>
      <MobileTopbar t={t} title="Plannen" subtitle="Dinsdag 22 april · 14:03" bellAlert />
      <MiniWeekStrip t={t} loads={[1, 3, 1, 0, 2, 0, 0]} summary="Bio-toets vrij" />
      <SegmentedSwitcher t={t} active={0} counts={[3, 2, 5]} />
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden', background: t.bgApp }}>
        <div style={{ padding: '14px 14px 90px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Overline t={t}>Vandaag · 3 taken · ~50 min</Overline>
          {TASKS_BG.map((task, i) => <TaskCard key={i} t={t} {...task} />)}
        </div>
        <SheetBackdrop t={t} />
      </div>
    </>
  );
}

/* Small overline helper (used in wizard sections) */
function FieldLabel({ t, children, accent }) {
  return (
    <div style={{
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
      color: accent || t.fgDim, letterSpacing: 0.7, marginBottom: 8,
    }}>{children}</div>
  );
}

/* Body input row */
function InputRow({ t, value, placeholder, helper }) {
  return (
    <div>
      <div style={{
        padding: '12px 14px', borderRadius: 10,
        background: t.cardSunken, border: `1px solid ${t.border}`,
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5,
        color: value ? t.fg : t.fgMute, minHeight: 44,
        display: 'flex', alignItems: 'center',
      }}>{value || placeholder}</div>
      {helper && (
        <div style={{
          marginTop: 6, fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
          color: t.fgDim, letterSpacing: 0.1,
        }}>{helper}</div>
      )}
    </div>
  );
}

/* Type segmented (icon + label) */
function TypePills({ t, selected = 'TOETS' }) {
  const items = [
    { k: 'TOETS', icon: 'target' },
    { k: 'SO', icon: 'edit-3' },
    { k: 'INLEV', icon: 'upload' },
    { k: 'MAAK', icon: 'wrench' },
    { k: 'LEER', icon: 'book-open' },
  ];
  return (
    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
      {items.map(it => {
        const on = it.k === selected;
        return (
          <div key={it.k} style={{
            height: 36, padding: '0 12px', borderRadius: 999,
            background: on ? t.primary : t.cardSunken,
            border: `1.5px solid ${on ? t.primary : t.border}`,
            color: on ? '#FFFFFF' : t.fgDim,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5, letterSpacing: 0.4,
            boxShadow: on ? `0 4px 12px ${hexToRgba(t.primary, 0.30)}` : 'none',
          }}>
            <MI name={it.icon} size={14} color={on ? '#FFFFFF' : t.fgDim} strokeWidth={2.4} />
            {it.k}
          </div>
        );
      })}
    </div>
  );
}

/* Date row (in wizard) */
function DateRow({ t, label, urgency }) {
  return (
    <div style={{
      padding: '12px 14px', borderRadius: 10,
      background: t.cardSunken, border: `1px solid ${t.border}`,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <MI name="calendar" size={18} color={t.fgDim} strokeWidth={2.2} />
      <span style={{
        fontFamily: 'Nunito', fontWeight: 700, fontSize: 13.5, color: t.fg,
      }}>{label}</span>
      <div style={{ flex: 1 }} />
      {urgency && (
        <div style={{
          height: 22, padding: '0 9px', borderRadius: 999,
          background: hexToRgba(t.red, t.mode === 'dark' ? 0.22 : 0.14),
          color: t.red,
          display: 'inline-flex', alignItems: 'center',
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5, letterSpacing: 0.5,
        }}>{urgency}</div>
      )}
      <MI name="chevron-right" size={16} color={t.fgDim} strokeWidth={2.4} />
    </div>
  );
}

/* Hour stepper */
function HourStepper({ t, value = '3u 00m', hint }) {
  const StepBtn = ({ children }) => (
    <button style={{
      height: 32, padding: '0 10px', borderRadius: 9,
      background: 'transparent', border: `1px solid ${t.border}`, cursor: 'pointer',
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, color: t.fgDim, letterSpacing: 0.2,
    }}>{children}</button>
  );
  return (
    <div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
        <StepBtn>− 1u</StepBtn>
        <StepBtn>−15m</StepBtn>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 26, color: t.fg, letterSpacing: '-0.01em',
          minWidth: 110, textAlign: 'center',
        }}>{value}</div>
        <StepBtn>+15m</StepBtn>
        <StepBtn>+ 1u</StepBtn>
      </div>
      {hint && (
        <div style={{
          marginTop: 8, fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
          color: t.fgDim, textAlign: 'center', lineHeight: 1.4,
        }}>{hint}</div>
      )}
    </div>
  );
}

/* "Pulse vult in" gold button */
function PulseFillBtn({ t }) {
  return (
    <button style={{
      height: 28, padding: '0 10px', borderRadius: 999,
      background: hexToRgba(t.gold, t.mode === 'dark' ? 0.20 : 0.16),
      border: `1px solid ${hexToRgba(t.gold, 0.45)}`, cursor: 'pointer',
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, color: t.gold, letterSpacing: 0.2,
    }}>
      <MI name="sparkles" size={12} color={t.gold} strokeWidth={2.4} />
      Pulse vult in
    </button>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 1 — Wizard stap 1 · INFO
   ═════════════════════════════════════════════════════════ */
function F1_WizardInfo({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <FlowTopbar t={t} title="Nieuwe deadline" />
      <ProgressDots t={t} step={1} total={3} />
      <div style={{ flex: 1, overflow: 'hidden', background: t.bgApp,
        padding: '16px 16px 20px', display: 'flex', flexDirection: 'column', gap: 18 }}>

        {/* Pulse hint */}
        <div>
          <FieldLabel t={t} accent={t.primary}>Pulse wist…</FieldLabel>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 500, fontSize: 12.5,
            color: t.fg, lineHeight: 1.45,
          }}>Pulse stelt straks studie-momenten voor zodra je opslaat.</div>
        </div>

        {/* Vak */}
        <div>
          <FieldLabel t={t}>Vak</FieldLabel>
          <SubjectChipRow t={t} selected="biologie" />
        </div>

        {/* Titel */}
        <div>
          <FieldLabel t={t}>Titel</FieldLabel>
          <InputRow t={t} value="Bio-toets H4 — celbiologie"
            helper="Bijv. Bio-toets H4 — celbiologie" />
        </div>

        {/* Type */}
        <div>
          <FieldLabel t={t}>Type</FieldLabel>
          <TypePills t={t} selected="TOETS" />
        </div>

        {/* Datum */}
        <div>
          <FieldLabel t={t}>Datum</FieldLabel>
          <DateRow t={t} label="zaterdag 25 april" urgency="OVER 3D" />
        </div>

        {/* Uren stepper */}
        <div>
          <FieldLabel t={t}>Geschatte uren</FieldLabel>
          <HourStepper t={t} value="3u 00m"
            hint="Je kunt dit straks opknippen in blokken · standaard voor toets: 3u" />
        </div>

        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 12, color: t.primary,
        }}>Meer opties ▼</div>
      </div>
      <StickyFooter t={t}
        right={<Btn t={t} variant="primary" size="md" full
          iconRight="arrow-right">Volgende · opknippen</Btn>} />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 2 — Wizard stap 2 · BLOKKEN
   ═════════════════════════════════════════════════════════ */
function F2_WizardBlokken({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <FlowTopbar t={t} title="Blokken kiezen" />
      <ProgressDots t={t} step={2} total={3} />
      <div style={{ flex: 1, overflow: 'hidden', background: t.bgApp,
        padding: '16px 16px 20px', display: 'flex', flexDirection: 'column', gap: 16 }}>

        <div>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.fg,
            letterSpacing: '-0.01em', lineHeight: 1.2 }}>In welke blokken opknippen?</div>
          <div style={{ marginTop: 4, fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
            color: t.fgDim, lineHeight: 1.45 }}>
            Je hebt 3 uur ingeschat. Kies blok-duur en schrijf per blok op wat je gaat doen.
          </div>
        </div>

        <div>
          <FieldLabel t={t}>Blok-duur</FieldLabel>
          <PresetPills t={t} items={['20m','25m','30m','45m','60m']} selected="30m" />
          <div style={{ marginTop: 8, fontFamily: 'Nunito', fontWeight: 500, fontSize: 11,
            color: t.fgDim, lineHeight: 1.4 }}>
            Tip: de meeste leerlingen vinden 25–30 minuten fijn (Pomodoro-ritme).
          </div>
        </div>

        <div style={{
          background: t.card, border: `1px solid ${t.border}`,
          borderRadius: 14, padding: 14,
          display: 'flex', flexDirection: 'column', gap: 10,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{ flex: 1, minWidth: 0,
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
              color: t.fgDim, letterSpacing: 0.6 }}>
              Stappenplan · 6 blokken van 30m · 2/6 ingevuld
            </div>
            <PulseFillBtn t={t} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <BlokRow t={t} idx={1} subject="biologie" value="Lees § 4.1–4.2" duur="30m" />
            <BlokRow t={t} idx={2} subject="biologie" value="Flashcards ronde 1" duur="30m" />
            <BlokRow t={t} idx={3} subject="biologie" placeholder="Wat ga je doen in dit blok van 30m?" duur="30m" />
            <BlokRow t={t} idx={4} subject="biologie" placeholder="Wat ga je doen in dit blok van 30m?" duur="30m" />
            <BlokRow t={t} idx={5} subject="biologie" placeholder="Wat ga je doen in dit blok van 30m?" duur="30m" />
            <BlokRow t={t} idx={6} subject="biologie" placeholder="Wat ga je doen in dit blok van 30m?" duur="30m" />
          </div>
        </div>
      </div>
      <StickyFooter t={t}
        left={<Btn t={t} variant="ghost" size="md" full icon="chevron-left">Vorige</Btn>}
        right={<Btn t={t} variant="primary" size="md" full iconRight="arrow-right">Volgende · plannen</Btn>} />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 3 — Wizard stap 3 · PLANNEN
   ═════════════════════════════════════════════════════════ */
function F3_WizardPlannen({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <FlowTopbar t={t} title="Plannen" />
      <ProgressDots t={t} step={3} total={3} />
      <div style={{ flex: 1, overflow: 'hidden', background: t.bgApp,
        padding: '14px 16px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>

        <PulseSuggestionCard t={t}
          label="Pulse stelt voor"
          body="Ik heb 6 blokken verspreid over deze week — telkens op een rustig moment met genoeg pauze. Tap een blok om aan te passen." />

        <div>
          <FieldLabel t={t}>Deze week</FieldLabel>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            <DayCard t={t} header="DI 22 APR · VANDAAG" headerKind="today" blocks={[
              { subject: 'biologie', title: 'Blok 1 · Lees § 4.1–4.2', time: '15:30 · 30m' },
              { subject: 'biologie', title: 'Blok 2 · Flashcards ronde 1', time: '16:15 · 30m' },
            ]} />
            <DayCard t={t} header="WO 23 APR" blocks={[
              { subject: 'biologie', title: 'Blok 3 · Flashcards ronde 2', time: '16:00 · 30m' },
            ]} />
            <DayCard t={t} header="DO 24 APR" blocks={[
              { subject: 'biologie', title: 'Blok 4 · Oefenopgaves', time: '15:00 · 30m' },
              { subject: 'biologie', title: 'Blok 5 · Samenvatting', time: '16:00 · 30m' },
            ]} />
          </div>
        </div>

        {/* Niet-ingeplande warn */}
        <div style={{
          background: hexToRgba(t.warn, 0.08),
          border: `1px solid ${hexToRgba(t.warn, 0.32)}`,
          borderRadius: 12, padding: 12,
          display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 8 }}>
            <MI name="alert-circle" size={16} color={t.warn} strokeWidth={2.4} style={{ marginTop: 1 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'Nunito', fontWeight: 800, fontSize: 10.5,
                color: t.warn, letterSpacing: 0.7 }}>1 BLOK NOG TE PLANNEN</div>
              <div style={{ marginTop: 3, fontFamily: 'Nunito', fontWeight: 500, fontSize: 12,
                color: t.fg, lineHeight: 1.4 }}>
                Pulse vond geen rustig moment voor Blok 6. Plan zelf of accepteer drukker.
              </div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <Btn t={t} variant="ghost" size="sm">Toon andere week</Btn>
            <Btn t={t} variant="primary" size="sm">Plan toch</Btn>
          </div>
        </div>

        <div style={{
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5, color: t.fgDim,
          textAlign: 'center', letterSpacing: 0.3,
        }}>5 van 6 gepland · 5×30m · over 3 dagen</div>
      </div>
      <StickyFooter t={t}
        left={<Btn t={t} variant="ghost" size="md" full icon="chevron-left">Vorige</Btn>}
        right={<Btn t={t} variant="primary" size="md" full iconRight="check">Opslaan & klaar</Btn>} />
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 4 — Quick-add deadline (BottomSheet medium)
   ═════════════════════════════════════════════════════════ */
function F4_QuickAdd({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg2 t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="medium">
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8, flexShrink: 0 }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background: t.fgFaint }} />
        </div>
        <SheetHeader t={t} title="Snel toevoegen"
          subtitle="Alleen toevoegen — Pulse plant later. Tip: voor toetsen of langlopende deadlines gebruik liever de volledige wizard." />
        <div style={{ flex: 1, overflow: 'hidden', padding: '16px',
          display: 'flex', flexDirection: 'column', gap: 16 }}>
          <div>
            <FieldLabel t={t}>Vak</FieldLabel>
            <SubjectChipRow t={t} selected="biologie"
              subjects={['biologie','wiskunde','scheikunde','engels','nederlands']} />
          </div>
          <div>
            <FieldLabel t={t}>Titel</FieldLabel>
            <InputRow t={t} value="Bio-toets H4 — celbiologie" />
          </div>
          <div>
            <FieldLabel t={t}>Type</FieldLabel>
            <TypePills t={t} selected="TOETS" />
          </div>
          <div>
            <FieldLabel t={t}>Datum</FieldLabel>
            <DateRow t={t} label="zaterdag 25 april" urgency="OVER 3D" />
          </div>
        </div>
        <StickyFooter t={t}
          left={<Btn t={t} variant="ghost" size="md" full>Annuleren</Btn>}
          right={<Btn t={t} variant="primary" size="md" full icon="plus">Toevoegen</Btn>} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 5 — Add losse taak (BottomSheet medium)
   ═════════════════════════════════════════════════════════ */
function F5_LosseTaak({ t }) {
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg2 t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="medium">
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8, flexShrink: 0 }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background: t.fgFaint }} />
        </div>
        <SheetHeader t={t} title="Losse taak toevoegen"
          subtitle="Een snelle taak zonder deadline. Bijv. 'Lees voor literatuur' of 'Oefen presentatie'." />
        <div style={{ flex: 1, overflow: 'hidden', padding: '14px 16px 16px',
          display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div>
            <FieldLabel t={t}>Wanneer</FieldLabel>
            <PresetPills t={t} items={['Vandaag','Morgen','Andere dag']} selected="Vandaag" />
          </div>
          <div>
            <FieldLabel t={t}>Vak (optioneel)</FieldLabel>
            <SubjectChipRow t={t} selected="nederlands"
              subjects={['nederlands','engels','wiskunde','biologie']}
              showMore={false} />
          </div>
          <div>
            <FieldLabel t={t}>Wat ga je doen?</FieldLabel>
            <InputRow t={t} placeholder="Bijv. Lees voor literatuur" />
          </div>
          <div>
            <FieldLabel t={t}>Hoelang</FieldLabel>
            <PresetPills t={t} items={['15m','25m','45m','60m']} selected="25m" />
          </div>
          <div>
            <FieldLabel t={t}>Tijd (optioneel)</FieldLabel>
            <PresetPills t={t}
              items={['Ochtend','Middag','Avond','Specifieke tijd']} selected="Middag" />
          </div>
        </div>
        <StickyFooter t={t}
          left={<Btn t={t} variant="ghost" size="md" full>Annuleren</Btn>}
          right={<Btn t={t} variant="primary" size="md" full icon="plus">Toevoegen</Btn>} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ═════════════════════════════════════════════════════════
   FRAME 6 — Schoolsysteem-import bevestiging
   ═════════════════════════════════════════════════════════ */
function F6_Import({ t }) {
  const items = [
    { subject: 'biologie',     title: 'Bio-toets H4 — celbiologie', dateLabel: 'VR 25 APR' },
    { subject: 'wiskunde',     title: 'Wisk SO §7.3',                dateLabel: 'MA 28 APR' },
    { subject: 'engels',       title: 'Essay paragraaf 3',           dateLabel: 'WO 30 APR' },
    { subject: 'geschiedenis', title: 'Werkstuk WOII',               dateLabel: 'VR 9 MEI'  },
    { subject: 'scheikunde',   title: 'Schk H4',                     dateLabel: 'DO 1 MEI'  },
  ];
  return (
    <PhoneShell t={t}>
      <StatusBar t={t} />
      <DimmedStapelBg2 t={t} />
      <MobileBottomNav t={t} active="plannen" />
      <BottomSheet t={t} height="medium">
        <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 8, flexShrink: 0 }}>
          <div style={{ width: 36, height: 4, borderRadius: 999, background: t.fgFaint }} />
        </div>
        <SheetHeader t={t} mascot
          title="Net binnen uit je schoolsysteem"
          subtitle="12 nieuwe items gevonden — bekijk en plan in." />
        <div style={{ flex: 1, overflow: 'hidden', padding: '12px 16px 12px',
          display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {items.map((it, i) => <ImportRow key={i} t={t} {...it} />)}
          </div>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 11.5,
            color: t.primary, letterSpacing: 0.3,
          }}>+ 7 meer</div>
          <div style={{
            marginTop: 'auto',
            padding: '10px 12px', borderRadius: 10,
            background: t.cardSunken,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 11, color: t.fgDim,
              textDecoration: 'underline',
            }}>Alles deselecteren</div>
            <div style={{ flex: 1 }} />
            <div style={{
              fontFamily: 'Nunito', fontWeight: 800, fontSize: 11, color: t.fg, letterSpacing: 0.4,
            }}>12 GESELECTEERD</div>
          </div>
        </div>
        <StickyFooter t={t}
          left={<Btn t={t} variant="ghost" size="md" full>Verbergen voor nu</Btn>}
          right={<Btn t={t} variant="primary" size="md" full icon="download">Importeer 12 deadlines</Btn>} />
      </BottomSheet>
    </PhoneShell>
  );
}

/* ─── Page ─── */
function AddFlowsPage() {
  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 · Add-flows</div>
        <h1 style={{
          margin: 0, fontFamily: 'Fredoka One', fontSize: 36, color: '#0F172A',
          letterSpacing: '-0.02em', lineHeight: 1.1,
        }}>Wizard · Quick-add · Losse taak · Import · 6 frames</h1>
        <p style={{
          margin: '8px 0 0', fontSize: 13, color: '#475569',
          fontWeight: 500, lineHeight: 1.5, maxWidth: 760,
        }}>3-staps full-screen wizard voor nieuwe deadlines (info → blokken → plannen, geen drag op mobile, Pulse stelt voor). Quick-add en losse-taak als medium bottom-sheets. Schoolsysteem-import met checkbox-list. Progress-dots, sticky CTA-bars en SubjectChips met vak-iconen overal.</p>
      </header>

      <AFRow label="Frame 1 · Wizard stap 1 · vak + titel + type + datum + uren"
        dark={<F1_WizardInfo t={TK_DARK} />}
        light={<F1_WizardInfo t={TK_LIGHT} />} />

      <AFRow label="Frame 2 · Wizard stap 2 · blok-duur + stappenplan met Pulse-vult-in"
        dark={<F2_WizardBlokken t={TK_DARK} />}
        light={<F2_WizardBlokken t={TK_LIGHT} />} />

      <AFRow label="Frame 3 · Wizard stap 3 · Pulse-suggestie + week-overzicht + 1 nog te plannen"
        dark={<F3_WizardPlannen t={TK_DARK} />}
        light={<F3_WizardPlannen t={TK_LIGHT} />} />

      <AFRow label="Frame 4 · Quick-add deadline (BottomSheet medium)"
        dark={<F4_QuickAdd t={TK_DARK} />}
        light={<F4_QuickAdd t={TK_LIGHT} />} />

      <AFRow label="Frame 5 · Add losse taak (BottomSheet medium)"
        dark={<F5_LosseTaak t={TK_DARK} />}
        light={<F5_LosseTaak t={TK_LIGHT} />} />

      <AFRow label="Frame 6 · Schoolsysteem-import bevestiging (12 nieuwe items)"
        dark={<F6_Import t={TK_DARK} />}
        light={<F6_Import t={TK_LIGHT} />} />
    </div>
  );
}

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