/* Flow A v2 — Deadline toevoegen (dichtgetimmerd)
   Zes states:
     A1 · Leeg · "Mijn vakken" default, met search-affordance
     A2 · Validatie · datum in verleden
     A3 · Toegevoegd · Stapel + Pulse-regel
     A4 · Bewerken · zelfde sheet met data prefilled + overflow-menu open
     A5 · Verwijder-bevestigen · rustige dialog
     A6 · Conflict · Pulse meldt botsing met planning, keuzes

   Beslissingen:
     Overflow → "Meer opties"-accordion. 80% slaat op zonder koppeling.
     Vakkenselector → "Mijn vakken" default. Search boven. Geen tabs
       (cognitieve kost te hoog voor een rand-geval). "Alle vakken"
       als uitklap onder "Mijn vakken".
     Subject picker = compact (search + chips) binnen Field, blijft 360px-safe.
*/

function FlowA() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
      {/* rij 1 — happy path */}
      <ARow
        label="Create-flow"
        color="#38BDF8"
        items={[
          { tag: 'A1 · Leeg',          note: '"Mijn vakken" default · zoek actief',    state: 'empty' },
          { tag: 'A2 · Validatie',     note: 'datum in verleden',                      state: 'invalid' },
          { tag: 'A3 · Toegevoegd',    note: 'Stapel + Pulse-regel',                    state: 'added' },
        ]}
      />
      {/* rij 2 — edit + delete + conflict */}
      <ARow
        label="Edit · Verwijderen · Conflict"
        color="#C4B5FD"
        items={[
          { tag: 'A4 · Bewerken',      note: 'overflow-menu geopend',                  state: 'edit' },
          { tag: 'A5 · Verwijderen',   note: 'rustige bevestiging',                    state: 'delete' },
          { tag: 'A6 · Conflict',      note: 'maandag-avond is al vol',                state: 'conflict' },
        ]}
      />
    </div>
  );
}

function ARow({ label, color, items }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          fontSize: 9.5, fontWeight: 800, color, letterSpacing: 0.8,
          textTransform: 'uppercase',
          padding: '3px 9px', borderRadius: 5,
          background: `color-mix(in srgb, ${color} 16%, transparent)`,
          border: `1px solid color-mix(in srgb, ${color} 30%, transparent)`,
        }}>{label}</div>
        <div style={{ flex: 1, height: 1, background: t.border }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18 }}>
        {items.map((it, i) => (
          <ACol key={i} tag={it.tag} note={it.note} state={it.state} />
        ))}
      </div>
    </div>
  );
}

function ACol({ tag, note, state }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 13, color: t.fg,
          background: t.cardHi, borderRadius: 7, padding: '4px 10px',
          letterSpacing: '-0.01em',
        }}>{tag}</div>
        <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>{note}</div>
      </div>
      <AStage state={state} />
    </div>
  );
}

function AStage({ state }) {
  const t = TK;
  // A4 edit met open "Meer opties" is largest (~930px in verifier viewport).
  // Alle A-states krijgen zelfde hoogte voor visuele consistentie in showcase-grid.
  const H = 960;
  return (
    <div style={{
      position: 'relative', height: H, borderRadius: 14, overflow: 'hidden',
      background: t.bg, border: `1px solid ${t.border}`,
    }}>
      <AContext state={state} />
      {state === 'added' && <APulseBar />}
      {(state === 'empty' || state === 'invalid' || state === 'edit' || state === 'conflict') && (
        <ASheet state={state} />
      )}
      {state === 'delete' && <ADeleteDialog />}
    </div>
  );
}

/* Gedimde Stapel-context */
function AContext({ state }) {
  const t = TK;
  const highlightNew = state === 'added';
  const dimmed = state !== 'added';

  const today = [
    { subject: 'biologie', title: 'Celbiologie § 4.2 lezen', mins: 25 },
    { subject: 'wiskunde', title: 'Oefeningen § 2.3', mins: 15 },
    { subject: 'biologie', title: '10 flashcards', mins: 15 },
  ];
  const deadlinesBase = [
    { subject: 'biologie', type: 'Toets', title: 'H4 · Celbiologie', days: 2, progress: 0.35 },
    { subject: 'wiskunde', type: 'SO', title: 'SO · Functies', days: 5, progress: 0.60 },
  ];
  const newOne = { subject: 'geschiedenis', type: 'Toets', title: 'H3 · Koude Oorlog', days: 9, progress: 0, fresh: true };
  const editing = { subject: 'biologie', type: 'Toets', title: 'H4 · Celbiologie', days: 2, progress: 0.35, editing: state === 'edit' || state === 'delete' };
  const deadlines = highlightNew
    ? [...deadlinesBase, newOne]
    : (state === 'edit' || state === 'delete')
      ? [editing, deadlinesBase[1]]
      : deadlinesBase;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: dimmed ? 0.32 : 1,
      filter: dimmed ? 'blur(0.4px)' : 'none',
      pointerEvents: 'none',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        height: 44, background: t.topbar, borderBottom: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', padding: '0 14px', gap: 8, flexShrink: 0,
      }}>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>Plannen</div>
        <span style={{ flex: 1 }} />
        <div style={{
          width: 24, height: 24, borderRadius: 7, background: t.primaryDim,
          border: `1px solid color-mix(in srgb, ${t.primary} 30%, transparent)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', color: t.primary,
        }}><I name="plus" size={12} strokeWidth={3} /></div>
      </div>
      <div style={{ padding: '10px 14px 6px', flexShrink: 0 }}>
        <WeekGrid density="compact" showHeader={false}
          week={[
            { day: 'ma', date: 7,  past: true,  items: [{ s: 'biologie', n: 1 }] },
            { day: 'di', date: 8,  past: true,  items: [{ s: 'biologie', n: 2 }] },
            { day: 'wo', date: 9,  today: true, items: [{ s: 'biologie', n: 2 }] },
            { day: 'do', date: 10, items: [{ s: 'biologie', n: 1 }] },
            { day: 'vr', date: 11, deadline: 'biologie', deadlineType: 'Toets', dlLabel: 'Bio toets' },
            { day: 'za', date: 12 },
            { day: 'zo', date: 13, items: [{ s: 'engels', n: 1 }] },
          ]}
        />
      </div>
      <div style={{
        flex: 1, padding: '0 14px 14px', display: 'grid',
        gridTemplateColumns: '160px 1fr', gap: 10, minHeight: 0,
      }}>
        <section style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 11, color: t.fg }}>Deadlines</div>
          {deadlines.map((d, i) => <MiniDeadline key={i} d={d} />)}
        </section>
        <section style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 11, color: t.primary }}>Vandaag</div>
          {today.map((tk, i) => <MiniTask key={i} task={tk} active={i === 0} />)}
        </section>
      </div>
    </div>
  );
}

function MiniDeadline({ d }) {
  const t = TK;
  const s = SUBJECTS[d.subject];
  return (
    <div style={{
      background: d.fresh ? `color-mix(in srgb, ${s.color} 12%, ${t.card})` :
                  d.editing ? `color-mix(in srgb, ${s.color} 8%, ${t.card})` : t.card,
      border: d.fresh ? `1.5px solid ${s.color}` :
              d.editing ? `1.5px solid color-mix(in srgb, ${s.color} 55%, transparent)` :
              `1px solid ${t.border}`,
      borderRadius: 9, padding: '7px 9px',
      boxShadow: d.fresh ? `0 0 0 3px color-mix(in srgb, ${s.color} 20%, transparent)` : 'none',
      position: 'relative',
    }}>
      {d.fresh && (
        <div style={{
          position: 'absolute', top: -6, right: -6,
          background: s.color, color: '#07090F',
          fontSize: 7.5, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase',
          padding: '2px 5px', borderRadius: 3,
        }}>Nieuw</div>
      )}
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 2 }}>
        <div style={{ width: 2.5, height: 9, background: s.color, borderRadius: 1 }} />
        <span style={{ fontSize: 8.5, fontWeight: 800, color: s.color, textTransform: 'uppercase', letterSpacing: 0.3 }}>{s.label.slice(0,3)}</span>
        <span style={{ flex: 1 }} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 9.5, color: d.days <= 3 ? t.red : t.fgDim }}>{d.days}d</span>
      </div>
      <div style={{ fontSize: 9.5, fontWeight: 800, color: t.fg, lineHeight: 1.25 }}>{d.title}</div>
    </div>
  );
}

function MiniTask({ task, active }) {
  const t = TK;
  const s = SUBJECTS[task.subject];
  return (
    <div style={{
      background: active ? t.cardHi : t.card,
      border: active ? `1.5px solid ${t.primary}` : `1px solid ${t.border}`,
      borderRadius: 9, padding: '7px 9px',
      display: 'flex', alignItems: 'center', gap: 6,
    }}>
      <div style={{
        width: 12, height: 12, borderRadius: 3,
        border: `1.5px solid ${active ? t.primary : t.fgMute}`, flexShrink: 0,
      }} />
      <span style={{ fontSize: 8.5, fontWeight: 800, color: s.color, letterSpacing: 0.3, textTransform: 'uppercase' }}>{s.label.slice(0,3)}</span>
      <span style={{ fontSize: 9.5, fontWeight: 700, color: t.fg, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{task.title}</span>
      <span style={{ fontSize: 8.5, fontWeight: 800, color: t.fgMute }}>{task.mins}m</span>
    </div>
  );
}

/* ═════════ SIDE-SHEET v2 — fixed chrome, collapsible "meer opties" ═════════ */
function ASheet({ state }) {
  const t = TK;
  const empty = state === 'empty';
  const invalid = state === 'invalid';
  const editing = state === 'edit';
  const conflict = state === 'conflict';

  // prefill data per state
  const prefill = invalid
    ? { subject: 'geschiedenis', title: 'H3 · Koude Oorlog', type: 'Toets', hours: 3, date: 'ma 7 okt' }
    : editing
    ? { subject: 'biologie', title: 'H4 · Celbiologie', type: 'Toets', hours: 3, date: 'vr 12 okt' }
    : conflict
    ? { subject: 'scheikunde', title: 'H2 · Zuren & basen', type: 'SO', hours: 2, date: 'di 16 okt' }
    : { subject: null, title: '', type: null, hours: null, date: '' };

  const headerTitle = editing ? 'Bewerk deadline' : conflict ? 'Nieuwe deadline' : 'Nieuwe deadline';

  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(7,9,15,0.55)', zIndex: 15 }} />
      <aside style={{
        position: 'absolute', top: 0, right: 0, bottom: 0, width: '88%', maxWidth: 380, zIndex: 25,
        background: '#0F1525', borderLeft: `1px solid ${t.border}`,
        boxShadow: '-30px 0 60px rgba(0,0,0,0.6)',
        display: 'flex', flexDirection: 'column', overflow: 'hidden',
      }}>
        {/* fixed header */}
        <div style={{
          padding: '14px 16px', borderBottom: `1px solid ${t.border}`,
          background: `linear-gradient(180deg, ${editing ? 'rgba(196,181,253,0.08)' : t.primaryDim}, transparent)`,
          flexShrink: 0,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              width: 26, height: 26, borderRadius: 7,
              background: editing ? 'rgba(157,78,221,0.18)' : t.primaryDim,
              color: editing ? '#C4B5FD' : t.primary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <I name={editing ? 'pen-line' : 'flag'} size={13} fill={editing ? 'none' : 'currentColor'} strokeWidth={editing ? 2.5 : 0} />
            </div>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, letterSpacing: '-0.01em' }}>
              {headerTitle}
            </div>
            <span style={{ flex: 1 }} />
            {editing && <AOverflowMenu open />}
            {!editing && (
              <button style={iconBtn(t)}><I name="x" size={11} /></button>
            )}
          </div>
          {!editing && !conflict && (
            <div style={{ fontSize: 10.5, color: t.fgDim, marginTop: 5, fontWeight: 600 }}>
              Pulse stelt studie-momenten voor zodra je opslaat.
            </div>
          )}
          {editing && (
            <div style={{ fontSize: 10.5, color: t.fgDim, marginTop: 5, fontWeight: 600 }}>
              Wijzig velden — gekoppelde studie-momenten worden meegesleept.
            </div>
          )}
          {conflict && (
            <div style={{ fontSize: 10.5, color: t.fgDim, marginTop: 5, fontWeight: 600 }}>
              Sanne stelt SO-deadline in, maar maandag-avond zit al vol.
            </div>
          )}
        </div>

        {/* body — geen scroll: showcase toont alles */}
        <div style={{
          flex: 1, overflow: 'visible',
          padding: '12px 16px 16px',
          display: 'flex', flexDirection: 'column', gap: 12,
          position: 'relative', minWidth: 0,
        }}>

          {conflict ? (
            /* A6 — compacte samenvatting + prominente conflict-resolutie */
            <ASummaryRow prefill={prefill} />
          ) : (
            <>
              <Field label="Vak">
                <SubjectPickerV2 selected={prefill.subject} />
              </Field>

              <Field label="Titel" required>
                <Input value={prefill.title} placeholder="Bijv. Hoofdstuk 4 & 5" />
              </Field>

              <Field label="Type">
                <TypePicker selected={prefill.type} />
              </Field>

              <Field
                label="Datum"
                required
                error={invalid ? 'Datum ligt in het verleden — kies een dag vanaf vandaag' : null}
              >
                <DatePicker value={prefill.date} invalid={invalid} />
                {!empty && !invalid && <DaysUntil days={editing ? 2 : 9} />}
                {invalid && <DaysUntil days={-3} negative />}
              </Field>

              <Field label="Geschatte studietijd" hint={prefill.hours ? `standaard voor ${prefill.type?.toLowerCase()}: ${prefill.hours}u` : null}>
                <HoursPicker value={prefill.hours} />
              </Field>

              {/* "Meer opties" accordion */}
              <AMoreOptions open={editing} />
            </>
          )}

          {conflict && <AConflictNotice />}

        </div>

        {/* fixed footer */}
        {editing && (
          <div style={{
            padding: '7px 16px 0', background: '#0F1525',
            borderTop: `1px solid ${t.border}`, flexShrink: 0,
            fontSize: 10, color: t.fgMute, fontWeight: 700,
            display: 'flex', alignItems: 'center', gap: 5,
          }}>
            <I name="link" size={9} /> 2 momenten gekoppeld — worden meegesleept
          </div>
        )}
        <div style={{
          padding: '10px 16px', borderTop: editing ? 0 : `1px solid ${t.border}`,
          display: 'flex', gap: 6, alignItems: 'center', flexShrink: 0,
          background: '#0F1525',
        }}>
          <button style={{ ...shellBtn(t, 'ghost'), height: 34, padding: '0 10px', fontSize: 11.5 }}>Annuleer</button>
          <span style={{ flex: 1 }} />
          <button style={{
            height: 34, padding: '0 14px', borderRadius: 8,
            background: empty ? t.cardHi : editing ? '#C4B5FD' : t.primary,
            color: empty ? t.fgMute : '#07090F', border: 0,
            fontFamily: 'Nunito', fontWeight: 800, fontSize: 12,
            display: 'inline-flex', alignItems: 'center', gap: 5,
            cursor: empty ? 'not-allowed' : 'pointer',
            boxShadow: empty ? 'none' :
              editing ? '0 6px 16px rgba(196,181,253,0.25)' :
              '0 6px 16px rgba(0,180,216,0.28)',
          }}>
            <I name="check" size={12} strokeWidth={3} />
            {editing ? 'Bewaar' : 'Opslaan'}
          </button>
        </div>
      </aside>
    </>
  );
}

function iconBtn(t) {
  return {
    width: 22, height: 22, borderRadius: 6, background: t.card,
    border: `1px solid ${t.border}`, color: t.fgDim, cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
  };
}

/* Overflow-menu (shown open in A4) */
function AOverflowMenu({ open }) {
  const t = TK;
  return (
    <div style={{ position: 'relative' }}>
      <button style={{
        ...iconBtn(t),
        background: open ? t.cardHi : t.card,
        color: open ? t.fg : t.fgDim,
      }}><I name="more-horizontal" size={12} /></button>
      {open && (
        <button style={{ ...iconBtn(t), marginLeft: 4 }}><I name="x" size={11} /></button>
      )}
      {open && (
        <div style={{
          position: 'absolute', top: 28, right: 0, zIndex: 50,
          minWidth: 180, background: '#161D2E',
          border: `1px solid ${t.border}`, borderRadius: 9,
          boxShadow: '0 20px 44px rgba(0,0,0,0.6)',
          padding: 5, display: 'flex', flexDirection: 'column', gap: 2,
        }}>
          <OverflowItem icon="copy" label="Dupliceer" />
          <OverflowItem icon="bell" label="Herinnering instellen" />
          <OverflowItem icon="share-2" label="Deel met ouder/klas" />
          <div style={{ height: 1, background: t.border, margin: '4px 2px' }} />
          <OverflowItem icon="trash-2" label="Verwijderen" danger />
        </div>
      )}
    </div>
  );
}

function OverflowItem({ icon, label, danger }) {
  const t = TK;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 9,
      height: 30, padding: '0 10px', borderRadius: 6,
      color: danger ? t.red : t.fgDim,
      fontSize: 11.5, fontWeight: 700, cursor: 'pointer',
    }}>
      <I name={icon} size={12} />
      {label}
    </div>
  );
}

/* ═════════ Vakkenselector v2 — "Mijn vakken" + search + collapsible overig ═════════ */
function SubjectPickerV2({ selected }) {
  const t = TK;
  const myList = ['biologie','wiskunde','scheikunde','nederlands','engels','geschiedenis','aardrijkskunde','frans'];
  const allOthers = ['natuurkunde','economie'];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {/* search */}
      <div style={{
        height: 30, borderRadius: 8, background: t.cardHi,
        border: `1px solid ${t.border}`,
        padding: '0 10px', display: 'flex', alignItems: 'center', gap: 7,
      }}>
        <I name="search" size={12} color={t.fgMute} />
        <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 600, flex: 1 }}>Zoek vak…</span>
        <kbd style={{
          fontSize: 8.5, fontWeight: 800, color: t.fgMute,
          padding: '1px 5px', borderRadius: 3,
          background: t.card, border: `1px solid ${t.border}`,
        }}>/</kbd>
      </div>

      {/* my vakken */}
      <div>
        <div style={{
          fontSize: 9, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6,
          textTransform: 'uppercase', marginBottom: 5,
          display: 'flex', alignItems: 'center', gap: 5,
        }}>
          Mijn vakken <span style={{ color: t.fgDim, fontWeight: 800 }}>· 8</span>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
          {myList.map(k => {
            const s = SUBJECTS[k];
            const active = selected === k;
            return (
              <div key={k} style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                height: 24, padding: '0 8px', borderRadius: 9999,
                background: active
                  ? `color-mix(in srgb, ${s.color} 22%, transparent)`
                  : t.card,
                border: active ? `1.5px solid ${s.color}` : `1px solid ${t.border}`,
                color: active ? s.color : t.fgDim,
                fontWeight: 800, fontSize: 10.5, cursor: 'pointer',
              }}>
                <I name={s.icon} size={10} />
                {s.label}
              </div>
            );
          })}
        </div>
      </div>

      {/* Meer + vak toevoegen */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 5,
          height: 22, padding: '0 8px', borderRadius: 6,
          background: 'transparent', border: 0, color: t.fgDim,
          fontSize: 10, fontWeight: 800, cursor: 'pointer',
        }}>
          <I name="chevron-down" size={11} />
          Alle vakken ({allOthers.length})
        </button>
        <span style={{ flex: 1 }} />
        <button style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          height: 22, padding: '0 8px', borderRadius: 6,
          background: 'transparent', border: `1px dashed ${t.border}`, color: t.fgDim,
          fontSize: 10, fontWeight: 800, cursor: 'pointer',
        }}>
          <I name="plus" size={10} strokeWidth={3} />
          Vak toevoegen
        </button>
      </div>
    </div>
  );
}

/* ═════════ "Meer opties" — collapsible kennis-koppeling ═════════ */
function AMoreOptions({ open }) {
  const t = TK;
  return (
    <div style={{
      border: `1px dashed ${t.border}`, borderRadius: 10,
      overflow: 'hidden', marginTop: 2,
    }}>
      <div style={{
        padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 8,
        cursor: 'pointer',
        background: open ? 'rgba(0,180,216,0.04)' : 'transparent',
      }}>
        <div style={{
          width: 22, height: 22, borderRadius: 6,
          background: open ? t.primaryDim : t.cardHi,
          color: open ? t.primary : t.fgMute,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="link-2" size={11} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 11, fontWeight: 800, color: t.fg, lineHeight: 1.2 }}>Meer opties</div>
          <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 600, marginTop: 1 }}>
            Koppel aan quiz, leer-hoofdstuk of notitie
          </div>
        </div>
        <I name={open ? 'chevron-up' : 'chevron-down'} size={13} color={t.fgDim} />
      </div>
      {open && (
        <div style={{ padding: '0 12px 12px', display: 'flex', flexDirection: 'column', gap: 6 }}>
          <LinkedPickerV2 icon="layers" title="Bio H4 — 42 flashcards" meta="uit library" linked />
          <LinkedPickerV2 icon="book-open" title="Koppel leer-hoofdstuk" meta="zoek…" />
          <LinkedPickerV2 icon="file-text" title="Koppel notitie" meta="zoek…" />
        </div>
      )}
    </div>
  );
}

function LinkedPickerV2({ icon, title, meta, linked }) {
  const t = TK;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 8,
      height: 34, padding: '0 10px',
      background: linked ? 'rgba(0,180,216,0.06)' : t.card,
      border: linked ? `1px solid color-mix(in srgb, ${t.primary} 30%, transparent)` : `1px solid ${t.border}`,
      borderRadius: 8, cursor: 'pointer',
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 6,
        background: linked ? t.primary : t.primaryDim,
        color: linked ? '#07090F' : t.primary,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><I name={icon} size={11} /></div>
      <span style={{ fontSize: 11, fontWeight: 700, color: t.fg, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</span>
      <span style={{ fontSize: 9.5, fontWeight: 700, color: t.fgMute }}>{meta}</span>
      {linked
        ? <I name="check" size={11} strokeWidth={3} color={t.primary} />
        : <I name="plus" size={11} color={t.fgDim} />}
    </div>
  );
}

/* ═════════ A6 Conflict-melding ═════════ */
function AConflictNotice() {
  const t = TK;
  return (
    <div style={{
      background: 'rgba(245,158,11,0.06)',
      border: '1px solid rgba(245,158,11,0.32)',
      borderRadius: 10, padding: '10px 12px',
      display: 'flex', flexDirection: 'column', gap: 10,
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8, flexShrink: 0,
          background: 'rgba(245,158,11,0.16)', color: '#F59E0B',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <I name="git-merge" size={13} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
            <span style={{
              fontSize: 9, fontWeight: 800, color: '#F59E0B', letterSpacing: 0.5, textTransform: 'uppercase',
              background: 'rgba(245,158,11,0.14)', padding: '2px 6px', borderRadius: 3,
            }}>Conflict</span>
            <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>· ma 15 okt · avond</span>
          </div>
          <div style={{ fontSize: 11, fontWeight: 700, color: t.fg, lineHeight: 1.4 }}>
            2u studie past niet vóór de SO — je hebt op ma-avond al <b>1u 30m</b> Bio-review staan.
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
        <ConflictOption
          icon="arrow-right-left"
          label="Schuif de Bio-review naar do-avond"
          hint="Pulse stelt voor · do-avond is vrij"
        />
        <ConflictOption
          icon="minus"
          label="Plan deze SO korter (1u 15m)"
          hint="minimum voor SO-type"
        />
        <ConflictOption
          icon="sparkles"
          label="Laat Pulse kiezen"
          hint="op basis van deadline-afstand"
          purple
        />
      </div>
    </div>
  );
}

function ConflictOption({ icon, label, hint, purple }) {
  const t = TK;
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 9,
      padding: '8px 10px', borderRadius: 8,
      background: purple ? 'rgba(157,78,221,0.08)' : t.card,
      border: purple ? '1px solid rgba(157,78,221,0.28)' : `1px solid ${t.border}`,
      cursor: 'pointer',
    }}>
      <div style={{
        width: 22, height: 22, borderRadius: 6, flexShrink: 0,
        background: purple ? 'rgba(157,78,221,0.18)' : t.cardHi,
        color: purple ? '#C4B5FD' : t.fgDim,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><I name={icon} size={11} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 11, fontWeight: 800, color: t.fg, lineHeight: 1.25 }}>{label}</div>
        <div style={{ fontSize: 9.5, fontWeight: 700, color: t.fgMute, marginTop: 1 }}>{hint}</div>
      </div>
      <I name="chevron-right" size={12} color={t.fgMute} />
    </div>
  );
}

/* ═════════ A5 Delete-dialog ═════════ */
function ADeleteDialog() {
  const t = TK;
  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: 'rgba(7,9,15,0.65)', zIndex: 20 }} />
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        width: '90%', maxWidth: 340, zIndex: 30,
        background: '#161D2E', border: `1px solid ${t.border}`,
        borderRadius: 14, padding: 20,
        boxShadow: '0 30px 80px rgba(0,0,0,0.7)',
      }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: 'rgba(239,68,68,0.12)', color: t.red,
          border: '1px solid rgba(239,68,68,0.22)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 12,
        }}>
          <I name="trash-2" size={18} strokeWidth={2.2} />
        </div>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 18, color: t.fg,
          letterSpacing: '-0.01em', marginBottom: 6,
        }}>
          Deadline verwijderen?
        </div>
        <div style={{ fontSize: 12.5, color: t.fgDim, lineHeight: 1.5, fontWeight: 500, marginBottom: 14 }}>
          <b style={{ color: t.fg, fontWeight: 800 }}>H4 · Celbiologie</b> wordt weggehaald, plus <b style={{ color: t.fg, fontWeight: 800 }}>2 gekoppelde studie-momenten</b> op donderdag en vrijdagochtend.
        </div>

        {/* "dit gebeurt er" mini-list */}
        <div style={{
          background: t.cardHi, borderRadius: 9, padding: '9px 11px',
          display: 'flex', flexDirection: 'column', gap: 5, marginBottom: 14,
        }}>
          <DeleteEffect icon="flag" label="H4 · Celbiologie" sub="Biologie · Toets" />
          <DeleteEffect icon="calendar" label="§ 4.2 lezen — do-avond" sub="40 min" />
          <DeleteEffect icon="layers" label="10 flashcards — vr 08:00" sub="15 min" />
        </div>

        <div style={{
          display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 10.5, color: t.fgMute, fontWeight: 600, marginBottom: 12,
        }}>
          <I name="info" size={11} />
          <span>Je library-quiz en leer-hoofdstuk blijven bestaan.</span>
        </div>

        <div style={{ display: 'flex', gap: 6 }}>
          <button style={{
            flex: 1, height: 36, borderRadius: 9,
            background: t.card, border: `1px solid ${t.border}`,
            color: t.fgDim, fontWeight: 800, fontSize: 12, cursor: 'pointer',
          }}>Behouden</button>
          <button style={{
            flex: 1.2, height: 36, borderRadius: 9, border: 0,
            background: t.red, color: '#fff',
            fontWeight: 800, fontSize: 12, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 5,
            boxShadow: '0 6px 16px rgba(239,68,68,0.3)',
          }}>
            <I name="trash-2" size={12} strokeWidth={2.5} />
            Verwijder
          </button>
        </div>
      </div>
    </>
  );
}

function DeleteEffect({ icon, label, sub }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <div style={{
        width: 20, height: 20, borderRadius: 5, flexShrink: 0,
        background: t.card, color: t.fgMute,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}><I name={icon} size={10} /></div>
      <span style={{ fontSize: 11, fontWeight: 800, color: t.fg, flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
      <span style={{ fontSize: 9.5, fontWeight: 700, color: t.fgMute }}>{sub}</span>
    </div>
  );
}

/* ═════════ A6 — compacte ingevulde-samenvatting (i.p.v. volledige form) ═════════ */
function ASummaryRow({ prefill }) {
  const t = TK;
  const s = SUBJECTS[prefill.subject];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 10, padding: '10px 12px',
      display: 'flex', flexDirection: 'column', gap: 8,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        fontSize: 9, fontWeight: 800, color: t.fgMute,
        letterSpacing: 0.6, textTransform: 'uppercase',
      }}>
        Ingevuld <span style={{ color: t.primary }}>· 5 velden</span>
        <span style={{ flex: 1 }} />
        <button style={{
          height: 20, padding: '0 7px', borderRadius: 5,
          background: 'transparent', border: `1px solid ${t.border}`,
          color: t.fgDim, fontSize: 9, fontWeight: 800, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 3,
        }}>
          <I name="pen-line" size={9} /> Wijzig
        </button>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          height: 22, padding: '0 8px', borderRadius: 9999,
          background: `color-mix(in srgb, ${s.color} 18%, transparent)`,
          color: s.color, border: `1px solid color-mix(in srgb, ${s.color} 35%, transparent)`,
          fontSize: 10, fontWeight: 800,
        }}>
          <I name={s.icon} size={10} /> {s.label}
        </div>
        <span style={{
          fontSize: 10, fontWeight: 800, color: t.fg,
          background: t.cardHi, padding: '3px 7px', borderRadius: 5,
        }}>{prefill.type}</span>
        <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>·</span>
        <span style={{ fontSize: 10.5, fontWeight: 800, color: t.fg }}>{prefill.hours}u studietijd</span>
      </div>
      <div style={{ fontSize: 12, fontWeight: 800, color: t.fg, lineHeight: 1.3 }}>
        {prefill.title}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <I name="calendar" size={11} color={t.fgDim} />
        <span style={{ fontSize: 10.5, fontWeight: 700, color: t.fgDim }}>{prefill.date}</span>
        <DaysUntil days={5} />
      </div>
    </div>
  );
}

/* ═════════ Helpers (shared) ═════════ */
function Field({ label, required, hint, error, children }) {
  const t = TK;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        <label style={{ fontSize: 10, fontWeight: 800, color: t.fg, letterSpacing: 0.4, textTransform: 'uppercase' }}>
          {label}{required && <span style={{ color: t.red, marginLeft: 3 }}>*</span>}
        </label>
        {hint && <span style={{ fontSize: 9.5, color: t.fgMute, fontWeight: 700 }}>· {hint}</span>}
      </div>
      {children}
      {error && (
        <div style={{
          display: 'flex', alignItems: 'center', gap: 5,
          fontSize: 10.5, color: t.red, fontWeight: 700,
        }}>
          <I name="alert-circle" size={11} /> {error}
        </div>
      )}
    </div>
  );
}

function Input({ value, placeholder }) {
  const t = TK;
  const empty = !value;
  return (
    <div style={{
      height: 34, borderRadius: 8, background: '#1A2235',
      border: `1px solid ${t.border}`,
      padding: '0 11px', display: 'flex', alignItems: 'center',
      fontSize: 12.5, fontWeight: 700,
      color: empty ? t.fgMute : t.fg,
    }}>
      {value || placeholder}
      {!empty && <span style={{
        marginLeft: 'auto', width: 2, height: 15, background: t.primary,
        animation: 'blink 1s step-end infinite',
      }} />}
    </div>
  );
}

function TypePicker({ selected }) {
  const t = TK;
  const types = [
    { k: 'toets', label: 'Toets', icon: 'clipboard-check' },
    { k: 'so', label: 'SO', icon: 'file-text' },
    { k: 'presentatie', label: 'Pres', icon: 'presentation' },
    { k: 'werkstuk', label: 'Werkstk', icon: 'folder' },
    { k: 'inlever', label: 'Inlever', icon: 'upload' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4 }}>
      {types.map(ty => {
        const sel = selected === ty.label || (selected === 'Toets' && ty.k === 'toets') || (selected === 'SO' && ty.k === 'so');
        return (
          <div key={ty.k} style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3,
            padding: '7px 3px', borderRadius: 7,
            background: sel ? t.primaryDim : t.card,
            border: sel ? `1.5px solid ${t.primary}` : `1px solid ${t.border}`,
            color: sel ? t.primary : t.fgDim,
            cursor: 'pointer',
          }}>
            <I name={ty.icon} size={12} />
            <span style={{ fontSize: 9, fontWeight: 800 }}>{ty.label}</span>
          </div>
        );
      })}
    </div>
  );
}

function DatePicker({ value, invalid }) {
  const t = TK;
  const empty = !value;
  return (
    <div style={{
      height: 34, borderRadius: 8, background: '#1A2235',
      border: `1.5px solid ${invalid ? t.red : t.border}`,
      padding: '0 11px', display: 'flex', alignItems: 'center', gap: 7,
    }}>
      <I name="calendar" size={13} color={invalid ? t.red : t.fgDim} />
      <span style={{
        fontSize: 12.5, fontWeight: 700,
        color: empty ? t.fgMute : invalid ? t.red : t.fg,
      }}>{value || 'Kies datum…'}</span>
      <span style={{ flex: 1 }} />
      <I name="chevron-down" size={11} color={t.fgMute} />
    </div>
  );
}

function DaysUntil({ days, negative }) {
  const t = TK;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 5,
      fontSize: 10, fontWeight: 800,
      color: negative ? t.red : t.primary,
      background: negative ? 'rgba(239,68,68,0.12)' : t.primaryDim,
      border: `1px solid ${negative ? 'rgba(239,68,68,0.3)' : 'color-mix(in srgb, '+t.primary+' 28%, transparent)'}`,
      padding: '3px 8px', borderRadius: 9999,
      alignSelf: 'flex-start',
    }}>
      <I name={negative ? 'alert-triangle' : 'sparkles'} size={10} />
      {negative ? `${Math.abs(days)} dagen geleden` : `nog ${days} dagen`}
    </div>
  );
}

function HoursPicker({ value }) {
  const t = TK;
  const hours = [1,2,3,4,5,6,8];
  return (
    <div style={{ display: 'flex', gap: 4 }}>
      {hours.map(h => {
        const sel = value === h;
        return (
          <div key={h} style={{
            flex: 1, height: 30, borderRadius: 6,
            background: sel ? t.primaryDim : t.card,
            border: sel ? `1.5px solid ${t.primary}` : `1px solid ${t.border}`,
            color: sel ? t.primary : t.fgDim,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Fredoka One', fontSize: 12,
            cursor: 'pointer',
          }}>{h}u</div>
        );
      })}
    </div>
  );
}

/* ═════════ A3 — Pulse-bar, 2 regels: meta + tekst+acties ═════════ */
function APulseBar() {
  const t = TK;
  return (
    <div style={{
      position: 'absolute', left: 14, right: 14, top: 108,
      zIndex: 20,
      background: `linear-gradient(180deg, color-mix(in srgb, ${t.primary} 18%, #0F1525), color-mix(in srgb, ${t.primary} 6%, #0F1525))`,
      border: `1.5px solid color-mix(in srgb, ${t.primary} 38%, transparent)`,
      borderRadius: 11, padding: '10px 12px',
      display: 'flex', flexDirection: 'column', gap: 8,
      boxShadow: '0 16px 36px rgba(0,0,0,0.55), 0 0 0 4px color-mix(in srgb, ' + t.primary + ' 8%, transparent)',
    }}>
      {/* regel 1 — badge + vak + dismiss */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
        <div style={{
          width: 26, height: 26, borderRadius: 7,
          background: 'rgba(0,180,216,0.22)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <PulseMascot variant="glow" mood="encouraging" size="sm" />
        </div>
        <span style={{
          fontSize: 9, fontWeight: 800, color: t.primary,
          letterSpacing: 0.6, textTransform: 'uppercase',
          background: 'rgba(0,180,216,0.14)', padding: '3px 7px', borderRadius: 4,
        }}>Toegevoegd</span>
        <SubjPill k="geschiedenis" size="sm" />
        <span style={{ flex: 1 }} />
        <button style={{
          width: 22, height: 22, borderRadius: 5,
          background: 'transparent', border: 0, color: t.fgMute,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}><I name="x" size={11} /></button>
      </div>
      {/* regel 2 — tekst + bekijk */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1, minWidth: 0, fontSize: 11, fontWeight: 700, color: t.fg, lineHeight: 1.4 }}>
          <b>3 studie-momenten</b> ingepland — eerste morgen · 20 min.
        </div>
        <button style={{
          height: 26, padding: '0 10px', borderRadius: 6,
          background: t.primary, border: 0, color: '#07090F',
          fontSize: 10.5, fontWeight: 800, cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 4, flexShrink: 0,
          boxShadow: '0 4px 12px rgba(0,180,216,0.35)',
        }}>
          <I name="eye" size={10} /> Bekijk plan
        </button>
      </div>
    </div>
  );
}

window.FlowA = FlowA;