/* ═════════ Flow D — Onboarding (eerste keer Plannen opent) ═════════
   4 schermen:
   D1 Welkom · D2 Vakken kiezen · D3 Eerste deadline · D4 Klaar-state

   Elke kaart = iPhone-achtige portrait-frame (400×780) binnen een web-viewport,
   zodat de 4 stappen in één blik gelezen kunnen worden.
*/

function FlowD() {
  const t = TK;
  const steps = [
    { id: 'welcome', num: 'D1', label: 'Welkom', note: 'Pulse begroet, 1 zin, 2 CTA' },
    { id: 'subjects', num: 'D2', label: 'Vakken kiezen', note: '4 categorieën, niets vooraf' },
    { id: 'deadline', num: 'D3', label: 'Eerste deadline', note: 'Skip mogelijk' },
    { id: 'ready', num: 'D4', label: 'Klaar', note: 'Lege Stapel + eerste plan' },
  ];

  return (
    <div id="flow-d" style={{ fontFamily: 'Nunito' }}>
      {/* stap-tabs */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10,
        marginBottom: 16,
      }}>
        {steps.map((s, i) => (
          <div key={s.id} style={{
            background: t.card, border: `1px solid ${t.border}`, borderRadius: 11,
            padding: '10px 12px', display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <div style={{
              width: 30, height: 30, borderRadius: 8,
              background: 'rgba(0,180,216,0.14)', color: t.primary,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Fredoka One', fontSize: 12, letterSpacing: '-0.01em',
            }}>{s.num}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 800, color: t.fg }}>{s.label}</div>
              <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 600, marginTop: 1 }}>{s.note}</div>
            </div>
            {i < 3 && <I name="arrow-right" size={12} color={t.fgMute} />}
          </div>
        ))}
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
      }}>
        <DScreen num="D1"><D1Welcome /></DScreen>
        <DScreen num="D2"><D2Subjects /></DScreen>
        <DScreen num="D3"><D3Deadline /></DScreen>
        <DScreen num="D4"><D4Ready /></DScreen>
      </div>
    </div>
  );
}

function DScreen({ num, children }) {
  const t = TK;
  return (
    <div style={{
      background: t.bg, borderRadius: 16, border: `1px solid ${t.border}`,
      overflow: 'hidden', position: 'relative', height: 640,
      boxShadow: '0 20px 60px rgba(0,0,0,0.35)',
    }}>
      <div style={{
        position: 'absolute', top: 10, left: 12, zIndex: 10,
        background: 'rgba(15,21,37,0.9)', border: `1px solid ${t.border}`,
        borderRadius: 6, padding: '2px 7px',
        fontSize: 9.5, fontWeight: 800, letterSpacing: 0.5, color: t.fgDim,
      }}>{num}</div>
      {children}
    </div>
  );
}

/* ── D1 Welkom ──────────────────────────────────── */
function D1Welcome() {
  const t = TK;
  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: `radial-gradient(circle at 50% 18%, rgba(0,180,216,0.22), transparent 55%), ${t.bg}`,
      padding: '42px 28px 24px', textAlign: 'center', alignItems: 'center',
    }}>
      {/* lockup hint */}
      <div style={{ opacity: 0.7, marginBottom: 16 }}>
        <Lockup color={t.fg} primary={t.primary} />
      </div>

      {/* pulse */}
      <div style={{
        width: 92, height: 92, marginTop: 18, marginBottom: 18,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <PulseMascot variant="glow" mood="happy" size="xl" eyeAnimation="idle" />
      </div>

      <div style={{
        fontFamily: 'Fredoka One', fontSize: 24, color: t.fg,
        letterSpacing: '-0.02em', marginBottom: 10, lineHeight: 1.15,
      }}>Welkom, Sanne</div>

      <div style={{
        fontSize: 13.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55,
        maxWidth: 260, marginBottom: 32,
      }}>
        Plannen houdt je toetsen in beeld en verdeelt je studie rustig over de week. Jij bepaalt het tempo.
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, width: '100%', marginTop: 'auto' }}>
        <button style={{
          height: 46, borderRadius: 12, background: t.primary, color: '#07090F',
          border: 0, fontFamily: 'Nunito', fontWeight: 800, fontSize: 14.5,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
          boxShadow: '0 10px 24px rgba(0,180,216,0.32)',
        }}>
          Laten we beginnen <I name="arrow-right" size={14} strokeWidth={3} />
        </button>
        <button style={{
          height: 38, borderRadius: 10, background: 'transparent',
          color: t.fgDim, border: 0, fontFamily: 'Nunito', fontWeight: 700, fontSize: 12.5,
        }}>Later doen</button>
      </div>

      {/* stap-indicator */}
      <div style={{ display: 'flex', gap: 5, marginTop: 16 }}>
        <Step active /><Step /><Step /><Step />
      </div>
    </div>
  );
}

/* ── D2 Vakken kiezen ──────────────────────────── */
function D2Subjects() {
  const t = TK;
  const cats = [
    {
      title: 'Talen', icon: 'languages',
      items: [
        { k: 'nederlands', sel: true },
        { k: 'engels', sel: true },
        { k: 'frans', sel: false },
      ],
    },
    {
      title: 'Exact', icon: 'calculator',
      items: [
        { k: 'wiskunde', sel: true },
        { k: 'natuurkunde', sel: false },
        { k: 'scheikunde', sel: true },
        { k: 'biologie', sel: true },
      ],
    },
    {
      title: 'Mens & maatschappij', icon: 'globe',
      items: [
        { k: 'geschiedenis', sel: true },
        { k: 'aardrijkskunde', sel: false },
        { k: 'economie', sel: false },
      ],
    },
  ];
  const total = cats.reduce((s, c) => s + c.items.filter(i => i.sel).length, 0);

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column', background: t.bg,
    }}>
      {/* header */}
      <div style={{ padding: '38px 24px 14px' }}>
        <div style={{ fontSize: 10, fontWeight: 800, color: t.primary, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>Stap 2 van 4</div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, letterSpacing: '-0.01em', marginBottom: 6, lineHeight: 1.2 }}>
          Welke vakken volg je?
        </div>
        <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55 }}>
          Tik ze aan. Je niveau staat op <b style={{ color: t.fg }}>HAVO 4</b> — kun je later wijzigen.
        </div>
      </div>

      {/* categorieën */}
      <div style={{ flex: 1, overflow: 'hidden', padding: '0 20px 14px',
        display: 'flex', flexDirection: 'column', gap: 12 }}>
        {cats.map(c => (
          <div key={c.title}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
              <I name={c.icon} size={12} color={t.fgMute} />
              <span style={{ fontSize: 10, fontWeight: 800, color: t.fgMute, letterSpacing: 0.5, textTransform: 'uppercase' }}>{c.title}</span>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {c.items.map(it => <SubjChoice key={it.k} k={it.k} selected={it.sel} />)}
            </div>
          </div>
        ))}
      </div>

      {/* footer */}
      <div style={{ padding: '10px 20px 18px', borderTop: `1px solid ${t.border}`,
        background: 'rgba(15,21,37,0.75)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700 }}>{total} vakken</div>
          <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>HAVO 4 · wijzigen</div>
        </div>
        <button style={{
          height: 40, padding: '0 16px', borderRadius: 10,
          background: total > 0 ? t.primary : t.cardHi,
          color: total > 0 ? '#07090F' : t.fgMute, border: 0,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          Volgende <I name="arrow-right" size={12} strokeWidth={3} />
        </button>
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0 12px', gap: 5 }}>
        <Step /><Step active /><Step /><Step />
      </div>
    </div>
  );
}

function SubjChoice({ k, selected }) {
  const t = TK;
  const s = SUBJECTS[k];
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 5, height: 28, padding: '0 11px',
      borderRadius: 9999,
      background: selected ? `color-mix(in srgb, ${s.color} 16%, transparent)` : t.card,
      color: selected ? s.color : t.fgDim,
      border: `1.5px solid ${selected ? `color-mix(in srgb, ${s.color} 42%, transparent)` : t.border}`,
      fontFamily: 'Nunito', fontSize: 11.5, fontWeight: 800, cursor: 'pointer',
    }}>
      <I name={selected ? 'check' : s.icon} size={11} strokeWidth={selected ? 3 : 2} />
      {s.label}
    </div>
  );
}

/* ── D3 Eerste deadline ──────────────────────────── */
function D3Deadline() {
  const t = TK;
  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column', background: t.bg,
    }}>
      {/* header */}
      <div style={{ padding: '36px 22px 14px' }}>
        <div style={{ fontSize: 10, fontWeight: 800, color: t.primary, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 6 }}>Stap 3 van 4</div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 20, color: t.fg, letterSpacing: '-0.01em', marginBottom: 6, lineHeight: 1.2 }}>
          Begin met één toets
        </div>
        <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 500, lineHeight: 1.55 }}>
          Je <b style={{ color: t.fg }}>eerstvolgende</b> toets is het makkelijkst. Daar plan ik studie-momenten voor.
        </div>
      </div>

      {/* pulse-tip */}
      <div style={{ margin: '0 18px 14px', padding: '10px 12px',
        background: 'rgba(0,180,216,0.1)', border: `1px solid rgba(0,180,216,0.22)`,
        borderRadius: 10, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <div style={{ width: 22, height: 22, borderRadius: 6, background: 'rgba(0,180,216,0.22)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <PulseMascot variant="glow" mood="encouraging" size="sm" />
        </div>
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
          Check je agenda of schoolbord. Zoiets als <i>"Bio H4 · vrijdag"</i>.
        </div>
      </div>

      {/* velden */}
      <div style={{ flex: 1, padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Field label="Vak" value={<SubjPill k="biologie" size="sm" />} />
        <Field label="Titel" value={<span style={{ fontSize: 13, fontWeight: 700, color: t.fg }}>H4 · Celbiologie</span>} />
        <Field label="Datum" value={<span style={{ fontSize: 13, fontWeight: 700, color: t.fg }}>vr 12 okt · over 2 dagen</span>} />
        <Field label="Type" value={
          <div style={{ display: 'flex', gap: 5 }}>
            {['Toets', 'SO', 'Inlev.'].map((x, i) => (
              <div key={x} style={{
                padding: '4px 10px', borderRadius: 6,
                background: i === 0 ? 'rgba(0,180,216,0.16)' : t.cardHi,
                color: i === 0 ? t.primary : t.fgDim,
                border: `1px solid ${i === 0 ? 'rgba(0,180,216,0.3)' : t.border}`,
                fontSize: 10.5, fontWeight: 800,
              }}>{x}</div>
            ))}
          </div>
        } />
      </div>

      {/* footer */}
      <div style={{ padding: '12px 18px 16px', borderTop: `1px solid ${t.border}`,
        background: 'rgba(15,21,37,0.75)', display: 'flex', gap: 8, alignItems: 'center' }}>
        <button style={{
          height: 38, padding: '0 10px', borderRadius: 9,
          background: 'transparent', color: t.fgDim, border: 0,
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 11.5,
        }}>Overslaan</button>
        <span style={{ flex: 1 }} />
        <button style={{
          height: 40, padding: '0 16px', borderRadius: 10,
          background: t.primary, color: '#07090F', border: 0,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          boxShadow: '0 6px 16px rgba(0,180,216,0.28)',
        }}>
          <I name="check" size={12} strokeWidth={3} /> Opslaan
        </button>
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', padding: '8px 0 12px', gap: 5 }}>
        <Step /><Step /><Step active /><Step />
      </div>
    </div>
  );
}

function Field({ label, value }) {
  const t = TK;
  return (
    <div>
      <div style={{ fontSize: 9.5, fontWeight: 800, color: t.fgMute, letterSpacing: 0.6, textTransform: 'uppercase', marginBottom: 4 }}>{label}</div>
      <div style={{
        background: t.card, border: `1px solid ${t.border}`, borderRadius: 9,
        padding: '8px 10px', minHeight: 34,
        display: 'flex', alignItems: 'center',
      }}>{value}</div>
    </div>
  );
}

/* ── D4 Klaar — lege Stapel + eerste plan ─────────── */
function D4Ready() {
  const t = TK;

  const week = [
    { day: 'ma', date: 8, items: [] },
    { day: 'di', date: 9, items: [] },
    { day: 'wo', date: 10, items: [{ s: 'biologie', n: 1 }], today: true },
    { day: 'do', date: 11, items: [{ s: 'biologie', n: 1 }] },
    { day: 'vr', date: 12, items: [], deadline: 'biologie', dlLabel: 'H4 Celbio' },
    { day: 'za', date: 13, items: [] },
    { day: 'zo', date: 14, items: [] },
  ];

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column', background: t.bg,
    }}>
      {/* header */}
      <div style={{ padding: '28px 20px 12px', textAlign: 'center' }}>
        <div style={{ width: 52, height: 52, margin: '0 auto 8px',
          display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <PulseMascot variant="glow" mood="celebrating" size="lg" />
        </div>
        <div style={{ fontFamily: 'Fredoka One', fontSize: 18, color: t.fg, letterSpacing: '-0.01em' }}>
          Klaar — dit is je Stapel
        </div>
      </div>

      {/* week (mini) */}
      <div style={{ padding: '6px 14px 10px' }}>
        <div style={{ transform: 'scale(0.84)', transformOrigin: 'top left', width: '119%' }}>
          <WeekGrid week={week} compact showHeader={false} />
        </div>
      </div>

      {/* pulse-note */}
      <div style={{ margin: '2px 16px 12px', padding: '10px 12px',
        background: 'rgba(0,180,216,0.08)', border: `1px solid rgba(0,180,216,0.2)`,
        borderRadius: 10, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <div style={{ width: 22, height: 22, borderRadius: 6, background: 'rgba(0,180,216,0.22)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <PulseMascot variant="glow" mood="encouraging" size="sm" />
        </div>
        <div style={{ fontSize: 10.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>
          Ik verdeel <b style={{ color: t.fg }}>3 studie-momenten</b> voor <b style={{ color: t.fg }}>Bio H4</b> deze week.
          Kom morgen terug voor je eerste — <b style={{ color: t.fg }}>20 min · celdeling</b>.
        </div>
      </div>

      {/* vandaag-kaart */}
      <div style={{ padding: '0 16px', flex: 1 }}>
        <div style={{
          background: t.card, border: `1px solid ${t.border}`, borderRadius: 11,
          padding: 12, display: 'flex', flexDirection: 'column', gap: 8,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Dot c={t.primary} size={6} />
            <span style={{ fontSize: 11, fontWeight: 800, color: t.primary, letterSpacing: 0.4, textTransform: 'uppercase' }}>Vandaag</span>
            <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>· rustig</span>
          </div>
          <div style={{ fontSize: 12, fontWeight: 600, color: t.fgDim, lineHeight: 1.5 }}>
            Geen taken vandaag. Morgen start je eerste studie-moment automatisch.
          </div>
        </div>
      </div>

      {/* footer */}
      <div style={{ padding: '12px 16px 16px', display: 'flex', justifyContent: 'center' }}>
        <button style={{
          height: 40, padding: '0 18px', borderRadius: 10,
          background: t.primary, color: '#07090F', border: 0,
          fontFamily: 'Nunito', fontWeight: 800, fontSize: 13,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          boxShadow: '0 6px 16px rgba(0,180,216,0.28)',
        }}>
          Ga naar Stapel <I name="arrow-right" size={12} strokeWidth={3} />
        </button>
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', padding: '0 0 12px', gap: 5 }}>
        <Step /><Step /><Step /><Step active />
      </div>
    </div>
  );
}

function Step({ active = false }) {
  return (
    <div style={{
      width: active ? 22 : 6, height: 6, borderRadius: 9999,
      background: active ? '#00B4D8' : '#1E293B',
      transition: 'width 200ms',
    }} />
  );
}

window.FlowD = FlowD;