/* Leren-frames — fase 1.5.
   Wijzigingen t.o.v. v1:
   - Topbar slank (Snaps + Streak nu in Sidebar)
   - Streak-badges in greet-card naar oranje (of weggelaten)
   - ChapterStack-variant op het hoofdframe
   - PulseTipCard ipv 4-kolom mini-cursus-grid op normaal
   - Subtiele MasteryDots in bibliotheek-rij — al aanwezig
   - PulseChatEntryCard prominenter in aside
   - Returning-user variant van alles-af (geen mini-cursus-suggestie)
   - LerenPage zelf is verhuisd naar leren-shared.jsx (cross-view) */

const orangeStreakBadge = (t) => {
  const dark = t.mode === 'dark';
  const orange = dark ? '#F97316' : '#C2410C';
  return {
    bg: dark ? 'rgba(249,115,22,0.14)' : 'rgba(234,88,12,0.10)',
    fg: orange,
    bd: dark ? 'rgba(249,115,22,0.28)' : 'rgba(234,88,12,0.30)',
  };
};

/* ────────────────────────────────────────────────────────────
   FRAME 1 — NORMAAL (één hoofdstuk)
   ─────────────────────────────────────────────────────────── */
function FrameLerenHub({ t }) {
  return (
    <LerenPage t={t} subtitle="Goedemiddag Sam · dinsdag 22 oktober · havo-3">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180 }}>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>

          <PulseGreetCard
            t={t} mood="encouraging"
            kicker="Pulse · vandaag"
            title="Hé Sam — vrijdag is je Bio-toets, dus pak vandaag rustig H3 op."
            body="Daarna heb ik 12 herhaalkaarten voor je over je vakken. Twaalf minuten werk, samen tafel-eten klaar."
            badges={
              <HandoffBadge t={t} pillar="plannen" direction="from" label="uit Plannen" />
            }
          />

          <div>
            <SectionLabel t={t}>Vandaag te leren</SectionLabel>
            <VandaagLerenCard
              t={t}
              subject="biologie"
              chapter="H3 — Cellen en celdeling"
              source="Biologie voor jou · havo-3"
              mins={28}
              progress={35}
              masteryLevel={2}
              fromPlannen
              toetsContext="toets vrijdag"
            />
          </div>

          {/* Bibliotheek-rijen */}
          <div>
            <SectionLabel t={t} right={
              <span style={{
                display: 'inline-flex', alignItems: 'center', gap: 4,
                fontSize: 11, color: t.primary, fontWeight: 800, cursor: 'pointer',
              }}>
                Bekijk hele bibliotheek <PI name="arrow-right" size={11} color={t.primary} />
              </span>
            }>Waar je mee bezig bent · 4 vakken</SectionLabel>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <VakRow t={t} subject="biologie"
                chapter="H3 Cellen en celdeling" source="Biologie voor jou · H3"
                masteryLevel={2} progress={35} isCurrent
                badge={<span style={{
                  fontSize: 9, fontWeight: 800, letterSpacing: 0.4, textTransform: 'uppercase',
                  color: t.primary, padding: '2px 6px', borderRadius: 4,
                  background: t.primaryDim,
                }}>nu bezig</span>} />
              <VakRow t={t} subject="wiskunde"
                chapter="H4 Kwadratische functies" source="Getal &amp; Ruimte · H4"
                masteryLevel={3} progress={82}
                badge={<Label t={t} color={t.mode === 'dark' ? '#22C55E' : '#15803D'}>Bijna klaar</Label>} />
              <VakRow t={t} subject="geschiedenis"
                chapter="H7 De Verlichting" source="Geschiedeniswerkplaats · H7"
                masteryLevel={1} progress={18} />
              <VakRow t={t} subject="engels"
                chapter="U5 Past Perfect" source="Stepping Stones · U5"
                masteryLevel={2} progress={60}
                badge={<Label t={t}>4 kaarten te herhalen</Label>} />
            </div>
          </div>

          {/* Pulse-tip ipv 4-kolomgrid */}
          <div>
            <SectionLabel t={t} right={
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700, cursor: 'pointer' }}>
                Alle studietechnieken →
              </span>
            }>Studietechniek</SectionLabel>
            <PulseTipCard t={t}
              title="Actief ophalen"
              body="vragen stellen aan jezelf werkt beter dan herlezen"
              mins={6} />
          </div>
        </div>

        {/* ─── ASIDE ─── */}
        <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <HerhalingenCard t={t} total={12} cappedAt={12}
            perVak={[
              { subject: 'biologie',     count: 5 },
              { subject: 'engels',       count: 4 },
              { subject: 'wiskunde',     count: 2 },
              { subject: 'geschiedenis', count: 1 },
            ]} />

          <PulseChatEntryCard t={t}
            suggestions={['Bio H3 uitleg', 'Wisk H4 voorbeeld', 'Engels: past perfect']} />

          <div>
            <SectionLabel t={t}>Pak op waar je was</SectionLabel>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <DoorgaanCard t={t} kind="hoofdstuk"
                title="H3 §3.2 Mitose" subject="biologie"
                subtitle="gisteren · 8 min gelezen" progress="35%"
                icon="book-open" />
              <DoorgaanCard t={t} kind="chat met pulse"
                title="Wat is een organel?"
                subtitle="gisteren · 6 berichten"
                icon="message-circle" />
            </div>
          </div>

          <FoutenanalyseCard t={t} subject="biologie" score={6} total={10} topic="Bio H3" />

          <HandoffCard t={t} pillar="plannen" direction="to"
            title="Plan een focus-blok"
            subtitle="Suggestie: 25 min vandaag 16:00 voor Bio H3"
            compact />
        </aside>

      </div>
    </LerenPage>
  );
}

/* ────────────────────────────────────────────────────────────
   FRAME 1B — NORMAAL met STAPEL (3 hoofdstukken vandaag)
   ─────────────────────────────────────────────────────────── */
function FrameLerenHubStack({ t }) {
  const stack = [
    {
      subject: 'biologie', chapter: 'H3 — Cellen en celdeling',
      source: 'Biologie voor jou · havo-3',
      mins: 28, progress: 35, masteryLevel: 2,
      fromPlannen: true, toetsContext: 'toets vrijdag',
    },
    {
      subject: 'wiskunde', chapter: 'H4 — Kwadratische functies',
      source: 'Getal &amp; Ruimte · H4',
      mins: 22, progress: 60, masteryLevel: 3,
      fromPlannen: true, toetsContext: 'SO vrijdag',
    },
    {
      subject: 'engels', chapter: 'U5 — Past Perfect',
      source: 'Stepping Stones · U5',
      mins: 18, progress: 40, masteryLevel: 2,
      fromPlannen: true, toetsContext: 'overhoring vrijdag',
    },
  ];
  return (
    <LerenPage t={t} subtitle="Goedemiddag Sam · dinsdag 22 oktober · drukke vrijdag op komst">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180 }}>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <PulseGreetCard
            t={t} mood="encouraging"
            kicker="Pulse · vandaag"
            title="Hé Sam — vrijdag is een drukke dag, dus we pakken vandaag drie hoofdstukken samen."
            body="We beginnen met Bio H3 — die telt het zwaarst. Wisk en Engels staan eronder klaar voor als je daarna nog zin hebt."
            badges={
              <HandoffBadge t={t} pillar="plannen" direction="from" label="uit Plannen · 3 toetsen" />
            }
          />

          <div>
            <SectionLabel t={t}>Vandaag te leren · stapel</SectionLabel>
            <ChapterStack t={t} items={stack} currentIdx={0} />
          </div>

          <div>
            <SectionLabel t={t}>Studietechniek</SectionLabel>
            <PulseTipCard t={t}
              title="Slim spreiden"
              body="korter en vaker werkt beter dan één lange sessie"
              mins={6} />
          </div>
        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <HerhalingenCard t={t} total={12} cappedAt={12}
            perVak={[
              { subject: 'biologie',     count: 5 },
              { subject: 'engels',       count: 4 },
              { subject: 'wiskunde',     count: 2 },
              { subject: 'geschiedenis', count: 1 },
            ]} />

          <PulseChatEntryCard t={t}
            suggestions={['Mitose vs meiose', 'Discriminant?', 'Past perfect uitleg']} />

          <FoutenanalyseCard t={t} subject="biologie" score={6} total={10} topic="Bio H3" />

          <HandoffCard t={t} pillar="plannen" direction="to"
            title="Bekijk je weekplanning"
            subtitle="3 toetsen vrijdag — Pulse spreidde het werk over 4 dagen"
            compact />
        </aside>

      </div>
    </LerenPage>
  );
}

/* ────────────────────────────────────────────────────────────
   FRAME 2 — ALLES AF (returning-user, alle 4 mini-cursussen al gedaan)
   ─────────────────────────────────────────────────────────── */
function FrameAllesAf({ t }) {
  const dark = t.mode === 'dark';
  return (
    <LerenPage t={t} subtitle="Goedemiddag Sam · dinsdag 22 oktober · klaar voor vandaag">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>

          <PulseGreetCard
            t={t} mood="zen"
            kicker="Pulse · klaar voor vandaag"
            title="Knap gedaan, Sam. Je bent klaar voor vandaag."
            body="Je hoofdstuk is gelezen, herhalingen zijn gedaan. Geen druk meer. Als je zin hebt, hieronder wat rustige opties — anders mag je Snapsnel ook gewoon dichtklappen."
            badges={
              <>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5, height: 22, padding: '0 9px',
                  borderRadius: 999,
                  background: dark ? 'rgba(34,197,94,0.14)' : 'rgba(21,128,61,0.10)',
                  color: dark ? '#22C55E' : '#15803D',
                  border: `1px solid ${dark ? 'rgba(34,197,94,0.28)' : 'rgba(21,128,61,0.28)'}`,
                  fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
                }}>
                  <PI name="check" size={10} strokeWidth={3} />Hoofdstuk gelezen
                </span>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5, height: 22, padding: '0 9px',
                  borderRadius: 999,
                  background: dark ? 'rgba(34,197,94,0.14)' : 'rgba(21,128,61,0.10)',
                  color: dark ? '#22C55E' : '#15803D',
                  border: `1px solid ${dark ? 'rgba(34,197,94,0.28)' : 'rgba(21,128,61,0.28)'}`,
                  fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
                }}>
                  <PI name="check" size={10} strokeWidth={3} />12/12 herhaald
                </span>
              </>
            }
            footer="Nieuwe herhaalkaarten verschijnen morgen rond 8:00 — Pulse spreidt ze automatisch."
          />

          {/* Returning-user: GEEN mini-cursus-suggestie meer */}
          <div>
            <SectionLabel t={t}>Als je nog zin hebt — geen druk</SectionLabel>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <RustigeSuggestie t={t}
                icon="book-open" tint="primary"
                title="Vooruit kijken naar H4"
                body="Volgende hoofdstuk Bio — DNA en erfelijkheid. Geen voortgang, geen Snaps."
                meta="vrijwillig" />
              <RustigeSuggestie t={t}
                icon="message-circle" tint="purple"
                title="Iets vragen aan Pulse"
                body="Stel een vraag over wat je vandaag las."
                meta="vrije chat" />
              <RustigeSuggestie t={t}
                icon="repeat" tint="primary"
                title="Engels-vocab oefenen"
                body="Sam, ik zag dat U5 best snel gaat — zin in een extra rondje?"
                meta="optioneel" />
              <RustigeSuggestie t={t}
                icon="moon" tint="muted"
                title="Tot morgen"
                body="Je breindel werkt vannacht voor je. Zet je Snapsnel maar dicht."
                meta="aanbevolen" />
            </div>
          </div>

        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <DagOverzichtCard t={t} />
          <HandoffCard t={t} pillar="oefenen" direction="to"
            title="Test wat je leerde"
            subtitle="Vrijwillige mini-quiz Bio H3 · 5 min"
            compact />
          <HandoffCard t={t} pillar="plannen" direction="to"
            title="Bekijk je weekplanning"
            subtitle="Morgen staat Wisk-herhaling klaar"
            compact />
        </aside>

      </div>
    </LerenPage>
  );
}

function RustigeSuggestie({ t, icon, tint, title, body, meta }) {
  const dark = t.mode === 'dark';
  const tintMap = {
    primary: { c: t.primary, bg: t.primaryDim },
    purple:  { c: dark ? '#9D4EDD' : '#7C3AED',
               bg: dark ? 'rgba(157,78,221,0.14)' : 'rgba(124,58,237,0.08)' },
    muted:   { c: t.fgDim, bg: dark ? 'rgba(148,163,184,0.10)' : 'rgba(100,116,139,0.08)' },
  };
  const k = tintMap[tint] || tintMap.muted;
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 8, minHeight: 124,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 30, height: 30, borderRadius: 8,
          background: k.bg, color: k.c,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PI name={icon} size={15} color={k.c} strokeWidth={2.4} />
        </div>
        <Label t={t}>{meta}</Label>
      </div>
      <div style={{ fontSize: 13.5, color: t.fg, fontWeight: 800, lineHeight: 1.3 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>{body}</div>
    </div>
  );
}

function DagOverzichtCard({ t }) {
  const dark = t.mode === 'dark';
  const green = dark ? '#22C55E' : '#15803D';
  const items = [
    { label: 'Hoofdstuk gelezen', meta: 'Bio H3 · 28 min', done: true },
    { label: '12 kaarten herhaald', meta: '~10 min · 9 goed', done: true },
    { label: 'Pulse-vraag gesteld', meta: 'Wat is een organel?', done: true },
  ];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <PI name="check-circle-2" size={16} color={green} strokeWidth={2.2} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg }}>Vandaag — afgerond</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 18, height: 18, borderRadius: 999,
              background: green,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}>
              <PI name="check" size={11} color={dark ? '#0A0F1E' : '#fff'} strokeWidth={3.2} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, color: t.fg, fontWeight: 800 }}>{it.label}</div>
              <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>{it.meta}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{
        marginTop: 14, paddingTop: 12, borderTop: `1px solid ${t.border}`,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, flex: 1 }}>
          Snaps verdiend
        </span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 4,
          fontFamily: 'Fredoka One', fontSize: 14, color: t.gold,
        }}>
          <PI name="zap" size={12} fill="currentColor" strokeWidth={0} color={t.gold} />
          +85
        </span>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   FRAME 3 — VAKANTIE
   ─────────────────────────────────────────────────────────── */
function FrameVakantie({ t }) {
  return (
    <LerenPage t={t} streakFrozen
      subtitle="Herfstvakantie · 19 oktober – 3 november · alles staat in slaap-stand">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>

          <PulseGreetCard
            t={t} mood="zen"
            kicker="Pulse · vakantie-modus"
            title="Geniet van je vakantie, Sam. Ik pauzeer alles voor je."
            body="Je herhaalkaarten staan vast — geen achterstand wanneer je terugkomt. Je leertaken zijn stilgelegd. Ik wek je 2 dagen voor school weer rustig op."
            badges={
              <>
                <span style={{
                  display: 'inline-flex', alignItems: 'center', gap: 5, height: 22, padding: '0 9px',
                  borderRadius: 999,
                  background: t.mode === 'dark' ? 'rgba(157,78,221,0.14)' : 'rgba(124,58,237,0.10)',
                  color: t.mode === 'dark' ? '#C4B5FD' : '#6D28D9',
                  border: `1px solid ${t.mode === 'dark' ? 'rgba(157,78,221,0.28)' : 'rgba(124,58,237,0.30)'}`,
                  fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
                }}>
                  <PI name="pause" size={9} fill="currentColor" strokeWidth={0} />pauze · 12 dagen
                </span>
              </>
            }
            footer="Wakker worden op maandag 3 november — eerste schooldag is op woensdag."
          />

          <div>
            <SectionLabel t={t}>Vrijwillig — als je écht zin hebt</SectionLabel>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
              <VakantieKaart t={t} icon="brain"
                title="Mini-cursus afmaken"
                body="Actief ophalen — nog 2 stappen wachten."
                meta="± 6 min" />
              <VakantieKaart t={t} icon="book-open"
                title="Lees-modus aan"
                body="Dwaal door je hoofdstukken zonder voortgang. Geen Snaps, geen druk."
                meta="freestyle" />
              <VakantieKaart t={t} icon="message-circle" purple
                title="Vraag iets aan Pulse"
                body="Pulse beantwoordt vragen over je lesmateriaal — vakantie-tempo."
                meta="vrije chat" />
            </div>
          </div>
        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <KomtTerugCard t={t} />
          <button style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            padding: '12px 14px', borderRadius: 10,
            background: 'transparent', border: `1px dashed ${t.borderStrong}`,
            color: t.fgDim, fontFamily: 'Nunito', fontSize: 12, fontWeight: 700,
            cursor: 'pointer',
          }}>
            <PI name="play" size={13} />
            Pauze opheffen — toch leren
          </button>
        </aside>
      </div>
    </LerenPage>
  );
}

function VakantieKaart({ t, icon, title, body, meta, purple }) {
  const dark = t.mode === 'dark';
  const c = purple ? (dark ? '#9D4EDD' : '#7C3AED') : t.fgDim;
  const bg = purple
    ? (dark ? 'rgba(157,78,221,0.10)' : 'rgba(124,58,237,0.06)')
    : (dark ? 'rgba(148,163,184,0.06)' : 'rgba(100,116,139,0.04)');
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 14,
      display: 'flex', flexDirection: 'column', gap: 8, minHeight: 130,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 30, height: 30, borderRadius: 8, background: bg, color: c,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PI name={icon} size={15} color={c} strokeWidth={2.4} />
        </div>
        <Label t={t}>{meta}</Label>
      </div>
      <div style={{ fontSize: 13.5, color: t.fg, fontWeight: 800, lineHeight: 1.3 }}>{title}</div>
      <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, lineHeight: 1.5 }}>{body}</div>
    </div>
  );
}

function KomtTerugCard({ t }) {
  const dark = t.mode === 'dark';
  const purple = dark ? '#9D4EDD' : '#7C3AED';
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 16,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
        <PI name="calendar-clock" size={15} color={purple} strokeWidth={2.2} />
        <span style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg }}>Komt terug</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        <KomtTerugItem t={t} datum="ma 3 nov"
          label="Eerste schooldag"
          meta="Pulse wekt je dan rustig op" />
        <KomtTerugItem t={t} datum="ma 3 nov"
          label="Herhaalkaarten ontdooien"
          meta="Geen achterstand — slim ingebouwd" />
        <KomtTerugItem t={t} datum="vr 7 nov"
          label="Wiskunde SO ingepland"
          meta="Plannen-pijler herinnert je tijdig" />
      </div>
    </div>
  );
}

function KomtTerugItem({ t, datum, label, meta }) {
  return (
    <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
      <div style={{
        width: 60, fontSize: 10.5, color: t.fgMute, fontWeight: 800,
        letterSpacing: 0.4, textTransform: 'uppercase', flexShrink: 0,
        paddingTop: 1,
      }}>{datum}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 12.5, color: t.fg, fontWeight: 800 }}>{label}</div>
        <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600 }}>{meta}</div>
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────
   FRAME 4 — EERSTE KEER (geen voortgang)
   Mini-cursussen prominent — dat past hier wel.
   ─────────────────────────────────────────────────────────── */
function FrameEersteKeer({ t }) {
  return (
    <LerenPage t={t} subtitle="Welkom Sam · havo-3 · nog niets begonnen"
      snaps={0} streak={0} level={1}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 20, maxWidth: 1180 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>

          <PulseGreetCard
            t={t} mood="curious"
            kicker="Pulse · welkom"
            title="Hoi Sam — fijn dat je er bent. Geen haast."
            body="Leren begint klein. Kies hieronder waar je wilt starten — een hoofdstuk zoeken in de bibliotheek, een korte cursus over hoe leren werkt, of gewoon een vraag stellen. Je hoeft vandaag niets perfect te doen."
          />

          <div>
            <SectionLabel t={t}>Drie manieren om te beginnen</SectionLabel>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <BeginKaart t={t} icon="library" tint="primary"
                num="1" title="Open je bibliotheek"
                body="Vind je methode of upload eigen materiaal. We halen er hoofdstukken uit waar je in kunt duiken."
                cta="Naar bibliotheek" />
              <BeginKaart t={t} icon="brain" tint="primary"
                num="2" title="Lees over leren"
                body="Vier mini-cursussen van ± 6 min. Slim spreiden, actief ophalen, slaap &amp; geheugen, plannen voor leren."
                cta="Begin met 'Slim spreiden'" />
              <BeginKaart t={t} icon="message-circle" tint="purple"
                num="3" title="Vraag Pulse iets"
                body="Stel een vraag over een vak waar je nu mee zit. Pulse antwoordt op basis van je lesmateriaal."
                cta="Stel een vraag" />
            </div>
          </div>

          {/* Mini-cursussen WEL prominent in eerste-keer state */}
          <div>
            <SectionLabel t={t} right={
              <span style={{ fontSize: 11, color: t.fgMute, fontWeight: 700 }}>
                4 mini-cursussen · elk ± 6 min
              </span>
            }>Studietechniek — hoe leer je écht?</SectionLabel>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              <MiniCursusCard t={t} title="Slim spreiden"
                subtitle="Waarom 4\u00d7 15 min beter werkt dan 1 uur stampen"
                step={0} totalSteps={4} status="idle" icon="calendar-clock" />
              <MiniCursusCard t={t} title="Actief ophalen"
                subtitle="Vragen stellen aan jezelf in plaats van herlezen"
                step={0} totalSteps={4} status="idle" icon="brain" />
              <MiniCursusCard t={t} title="Slaap &amp; geheugen"
                subtitle="Wat er 's nachts in je hoofd gebeurt met de stof"
                step={0} totalSteps={4} status="idle" icon="moon" />
              <MiniCursusCard t={t} title="Plannen voor leren"
                subtitle="Hoe verdeel je een hoofdstuk over een week?"
                step={0} totalSteps={4} status="idle" icon="map" />
            </div>
          </div>

          <div>
            <SectionLabel t={t}>Of laat de Plannen-pijler je vertellen wat eerst</SectionLabel>
            <HandoffCard t={t} pillar="plannen" direction="to"
              title="Voer je toetsen in — dan plant Pulse je leerwerk slim"
              subtitle="Zonder toetsen weet ik niet wat het meest urgent is. Dat duurt 2 minuten." />
          </div>
        </div>

        <aside style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{
            background: t.card, border: `1px solid ${t.border}`,
            borderRadius: 12, padding: 16,
          }}>
            <div style={{ fontFamily: 'Fredoka One', fontSize: 15, color: t.fg, marginBottom: 10 }}>
              Hoe Leren werkt
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { ic: 'book-open', t1: 'Begrijpen', t2: 'Lees, vraag, vat samen.' },
                { ic: 'repeat', t1: 'Herhalen', t2: 'Slim verspreid — niet stampen.' },
                { ic: 'layers', t1: 'Oefenen', t2: 'Test pas wanneer je ’m snapt.' },
              ].map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: 8,
                    background: t.primaryDim, color: t.primary,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                  }}>
                    <PI name={s.ic} size={14} color={t.primary} strokeWidth={2.4} />
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12.5, color: t.fg, fontWeight: 800 }}>{s.t1}</div>
                    <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.4 }}>{s.t2}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <PulseChatEntryCard t={t}
            suggestions={['Hoe werkt Snapsnel?', 'Wat is havo-3 stof?']} />
        </aside>
      </div>
    </LerenPage>
  );
}

function BeginKaart({ t, icon, tint, num, title, body, cta }) {
  const dark = t.mode === 'dark';
  const tintMap = {
    primary: { c: t.primary, bg: t.primaryDim, bd: hexToRgba(t.primary, 0.30) },
    purple: {
      c: dark ? '#9D4EDD' : '#7C3AED',
      bg: dark ? 'rgba(157,78,221,0.12)' : 'rgba(124,58,237,0.06)',
      bd: dark ? 'rgba(157,78,221,0.30)' : 'rgba(124,58,237,0.30)',
    },
  };
  const k = tintMap[tint];
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 18,
      display: 'flex', flexDirection: 'column', gap: 10, minHeight: 200,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{
          width: 36, height: 36, borderRadius: 8, background: k.bg, color: k.c,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PI name={icon} size={18} color={k.c} strokeWidth={2.4} />
        </div>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 22, color: k.c, lineHeight: 1,
          marginLeft: 'auto', opacity: 0.55,
        }}>{num}</div>
      </div>
      <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, lineHeight: 1.25 }}>
        {title}
      </div>
      <div style={{ fontSize: 12, color: t.fgDim, fontWeight: 600, lineHeight: 1.55, flex: 1 }}>
        {body}
      </div>
      <button style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '8px 12px', borderRadius: 10,
        background: k.bg, border: `1px solid ${k.bd}`, color: k.c,
        fontFamily: 'Nunito', fontSize: 12, fontWeight: 800, cursor: 'pointer',
      }}>
        <span>{cta}</span>
        <PI name="arrow-right" size={13} color={k.c} />
      </button>
    </div>
  );
}

Object.assign(window, {
  LerenPage, FrameLerenHub, FrameLerenHubStack, FrameAllesAf, FrameVakantie, FrameEersteKeer,
});