/* Leren-hub composite components.
   Specifieke samengestelde cards voor de Leren-pijler:
   - PulseGreetCard      → rustige Pulse-banner bovenaan
   - VandaagLerenCard    → "wat moet je vandaag leren" — uit Plannen
   - HerhalingenCard     → spaced-repetition kaarten (FSRS-stijl)
   - DoorgaanCard        → "waar was je gisteren mee bezig"
   - VakRow              → bibliotheek-rij met MasteryDots + chapter
   - MiniCursusCard      → studietechniek mini-cursus (1 van 4)
   - VraagPulseCard      → CTA naar vrije chat met Pulse
*/

/* ─── PulseGreetCard ────────────────────────────────────── */
/* Rustige greet-banner. In Leren is Pulse niet aanmoedigend-springerig
   maar warm en rustig. Geen confetti, geen "GO". */
function PulseGreetCard({ t, mood = 'idle', kicker, title, body, badges, footer }) {
  const dark = t.mode === 'dark';
  // Leren = Pulse Blue tint (niet de paarse Plannen-Pulse-card)
  const bg = dark
    ? 'linear-gradient(135deg, #0F1F2E 0%, #0E2235 60%, #102438 100%)'
    : 'linear-gradient(135deg, #ECFEFF 0%, #E0F2FE 60%, #F0F9FF 100%)';
  const border = dark ? 'rgba(0,180,216,0.22)' : '#BAE6FD';
  const titleColor = dark ? '#F1F5F9' : '#0C4A6E';
  const bodyColor = dark ? '#94A3B8' : '#075985';
  const labelColor = dark ? '#7DD3FC' : '#0369A1';

  return (
    <div style={{
      background: bg, border: `1px solid ${border}`,
      borderRadius: 12, padding: '20px 22px',
      display: 'flex', gap: 18, alignItems: 'flex-start',
      position: 'relative', overflow: 'hidden',
    }}>
      <PulseMascot size={64} mood={mood} style={{ marginTop: 2 }} />
      <div style={{ flex: 1, minWidth: 0 }}>
        {kicker && (
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 8,
          }}>
            <div style={{
              width: 7, height: 7, borderRadius: 999, background: labelColor,
              boxShadow: dark ? `0 0 8px ${labelColor}` : 'none',
            }} />
            <span style={{
              fontSize: 10.5, fontWeight: 800, letterSpacing: 0.7, textTransform: 'uppercase',
              color: labelColor,
            }}>{kicker}</span>
          </div>
        )}
        <div style={{
          fontFamily: 'Fredoka One', fontWeight: 400, fontSize: 22, lineHeight: 1.25,
          letterSpacing: '-0.01em', color: titleColor, marginBottom: 6,
        }}>{title}</div>
        <div style={{ fontSize: 13.5, fontWeight: 500, color: bodyColor, lineHeight: 1.55 }}>{body}</div>
        {badges && (
          <div style={{ marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {badges}
          </div>
        )}
        {footer && (
          <div style={{
            marginTop: 14, paddingTop: 12,
            borderTop: `1px solid ${dark ? 'rgba(125,211,252,0.18)' : 'rgba(3,105,161,0.18)'}`,
            fontSize: 12, color: dark ? '#94A3B8' : '#0369A1', fontWeight: 600,
          }}>{footer}</div>
        )}
      </div>
    </div>
  );
}

/* ─── VandaagLerenCard ──────────────────────────────────── */
/* Grote "vandaag-leren" card. Komt uit de planner (HandoffBadge from-plannen).
   Toont vak, hoofdstuk, geschatte tijd, voortgang, CTA. */
function VandaagLerenCard({ t, subject, chapter, source, mins, progress, masteryLevel, fromPlannen, toetsContext }) {
  return (
    <GradientBorderCard t={t} subject={subject} radius={16}
      style={{ background: t.card }}>
      <div style={{ padding: '18px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, flexWrap: 'wrap' }}>
          <SubjectChip t={t} subject={subject} size="md" />
          {fromPlannen && <HandoffBadge t={t} pillar="plannen" direction="from" label="uit Plannen" />}
          {toetsContext && (
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 5, height: 22, padding: '0 9px',
              borderRadius: 999,
              background: t.mode === 'dark' ? 'rgba(245,158,11,0.14)' : 'rgba(180,83,9,0.10)',
              color: t.mode === 'dark' ? '#FCD34D' : '#92400E',
              border: `1px solid ${t.mode === 'dark' ? 'rgba(245,158,11,0.28)' : 'rgba(180,83,9,0.30)'}`,
              fontSize: 10.5, fontWeight: 800, letterSpacing: 0.3, textTransform: 'uppercase',
            }}>
              <PI name="alert-circle" size={10} />{toetsContext}
            </span>
          )}
        </div>

        <div style={{
          fontFamily: 'Fredoka One', fontSize: 22, color: t.fg,
          letterSpacing: '-0.01em', lineHeight: 1.25, marginBottom: 4,
        }}>{chapter}</div>
        <div style={{ fontSize: 12.5, color: t.fgDim, fontWeight: 600, marginBottom: 16 }}>
          {source} · ± {mins} min werk
        </div>

        {/* progress + mastery */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
          <div style={{ flex: 1 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
              <Label t={t}>Voortgang hoofdstuk</Label>
              <span style={{ fontFamily: 'Fredoka One', fontSize: 14, color: t.fg }}>{progress}%</span>
            </div>
            <ProgressBar t={t} value={progress} />
          </div>
          <div style={{ width: 1, height: 36, background: t.border }} />
          <div>
            <Label t={t}>Beheersing</Label>
            <div style={{ marginTop: 6 }}>
              <MasteryDots t={t} level={masteryLevel} size="md" showLabel />
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <BtnPrimary t={t} icon="play">Verder lezen</BtnPrimary>
          <BtnGhost t={t} icon="message-circle">Vraag aan Pulse</BtnGhost>
          <BtnGhost t={t} icon="file-text">Samenvatting</BtnGhost>
          <div style={{ flex: 1 }} />
          <HandoffBadge t={t} pillar="oefenen" direction="to" label="dan Oefenen" icon="layers" />
        </div>
      </div>
    </GradientBorderCard>
  );
}

/* ─── HerhalingenCard ─────────────────────────────────── */
/* Spaced-repetition stack — FSRS-stijl. Toont een mini-stapel kaarten (visueel),
   verdeling per vak, dagelijkse cap-bar, CTA "Begin herhaling". */
function HerhalingenCard({ t, total = 12, perVak = [], cappedAt = 12 }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 12, padding: 18,
      boxShadow: dark ? '0 2px 12px rgba(0,0,0,0.30)' : '0 1px 3px rgba(15,23,42,0.08)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
        <div style={{
          width: 32, height: 32, borderRadius: 8,
          background: t.primaryDim, color: t.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PI name="repeat" size={16} color={t.primary} strokeWidth={2.4} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Fredoka One', fontSize: 17, color: t.fg, lineHeight: 1.1 }}>
            Herhalen vandaag
          </div>
          <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
            slim verspreid · ± 8–12 min
          </div>
        </div>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 28, color: t.primary, lineHeight: 1,
        }}>{total}</div>
      </div>

      {/* mini stack-illustratie */}
      <div style={{
        position: 'relative', height: 78, marginBottom: 14,
        display: 'flex', justifyContent: 'center', alignItems: 'center',
      }}>
        {[2, 1, 0].map(i => {
          const subj = perVak[i % perVak.length]?.subject || 'biologie';
          const hex = SUBJECTS[subj];
          return (
            <div key={i} style={{
              position: 'absolute',
              width: 124, height: 70,
              left: `calc(50% - 62px + ${(i - 1) * 14}px)`,
              top: i * 4,
              background: t.card, border: `1px solid ${hexToRgba(hex, 0.30)}`,
              borderTop: `3px solid ${hex}`,
              borderRadius: 8,
              boxShadow: dark ? '0 4px 12px rgba(0,0,0,0.40)' : '0 2px 6px rgba(15,23,42,0.10)',
              transform: `rotate(${(i - 1) * 2.5}deg)`,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              padding: '8px 10px',
            }}>
              <SubjectChip t={t} subject={subj} size="sm" iconOnly />
              <div style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>kaart</div>
            </div>
          );
        })}
      </div>

      {/* per-vak breakdown */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 7, marginBottom: 14 }}>
        {perVak.map((v, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <SubjectChip t={t} subject={v.subject} size="sm" iconOnly />
            <div style={{ flex: 1, fontSize: 12, color: t.fg, fontWeight: 700, textTransform: 'capitalize' }}>
              {v.subject}
            </div>
            <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 700 }}>{v.count}</div>
            <div style={{
              width: 60, height: 4, borderRadius: 999,
              background: t.cardSunken, border: `1px solid ${t.border}`, overflow: 'hidden',
            }}>
              <div style={{
                width: `${(v.count / total) * 100}%`, height: '100%',
                background: SUBJECTS[v.subject], borderRadius: 999,
              }} />
            </div>
          </div>
        ))}
      </div>

      {/* daily cap */}
      <div style={{
        fontSize: 10.5, fontWeight: 700, color: t.fgMute,
        marginBottom: 10, display: 'flex', alignItems: 'center', gap: 6,
      }}>
        <PI name="shield" size={11} />
        Daglimiet {cappedAt} kaarten — geen overload.
      </div>

      <BtnPrimary t={t} icon="play">Begin herhaling</BtnPrimary>
    </div>
  );
}

/* ─── DoorgaanCard — "waar was je gisteren" ─────────────── */
function DoorgaanCard({ t, kind = 'cursus', title, subtitle, progress, icon = 'play-circle', subject }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{
      background: t.cardAlt, border: `1px solid ${t.border}`,
      borderRadius: 8, padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 38, height: 38, borderRadius: 8,
        background: subject ? hexToRgba(SUBJECTS[subject], 0.14) : t.primaryDim,
        color: subject ? t.subjectFg(SUBJECTS[subject]) : t.primary,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <PI name={icon} size={18} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <Label t={t}>{kind}</Label>
          {progress !== undefined && (
            <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>· {progress}</span>
          )}
        </div>
        <div style={{ fontSize: 13, color: t.fg, fontWeight: 800, lineHeight: 1.3,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{title}</div>
        {subtitle && (
          <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, marginTop: 1,
            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{subtitle}</div>
        )}
      </div>
      <PI name="chevron-right" size={16} color={t.fgMute} />
    </div>
  );
}

/* ─── VakRow — bibliotheek-rij ──────────────────────────── */
function VakRow({ t, subject, chapter, source, masteryLevel, progress, isCurrent, badge }) {
  const dark = t.mode === 'dark';
  return (
    <GradientBorderCard t={t} subject={subject} radius={12}>
      <div style={{
        padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
        background: isCurrent ? hexToRgba(SUBJECTS[subject], dark ? 0.06 : 0.04) : 'transparent',
      }}>
        <SubjectChip t={t} subject={subject} size="md" iconOnly />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
            <span style={{
              fontSize: 13, color: t.fg, fontWeight: 800, textTransform: 'capitalize',
            }}>{subject}</span>
            {badge}
          </div>
          <div style={{ fontSize: 12.5, color: t.fg, fontWeight: 700, lineHeight: 1.3 }}>
            {chapter}
          </div>
          <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
            {source}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 5, minWidth: 80 }}>
          <MasteryDots t={t} level={masteryLevel} size="sm" />
          {progress !== undefined && (
            <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 800, letterSpacing: 0.3 }}>
              {progress}% gelezen
            </span>
          )}
        </div>
        <PI name="chevron-right" size={16} color={t.fgMute} />
      </div>
    </GradientBorderCard>
  );
}

/* ─── MiniCursusCard ───────────────────────────────────── */
function MiniCursusCard({ t, title, subtitle, step, totalSteps, status = 'idle', icon = 'lightbulb' }) {
  const dark = t.mode === 'dark';
  const isActive = status === 'active';
  const isDone = status === 'done';
  const accent = isDone
    ? (dark ? '#22C55E' : '#15803D')
    : t.primary;
  return (
    <div style={{
      background: isActive ? (dark ? 'rgba(0,180,216,0.06)' : 'rgba(0,150,199,0.04)') : t.card,
      border: `1px solid ${isActive ? hexToRgba(t.primary, 0.30) : t.border}`,
      borderRadius: 8, padding: '12px 14px',
      display: 'flex', flexDirection: 'column', gap: 10,
      minHeight: 130,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{
          width: 28, height: 28, borderRadius: 8,
          background: isDone ? hexToRgba(accent, 0.14) : t.primaryDim,
          color: accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <PI name={isDone ? 'check' : icon} size={14} color={accent} strokeWidth={2.4} />
        </div>
        {isActive && (
          <span style={{
            fontSize: 9, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            color: t.primary, padding: '2px 7px', borderRadius: 999,
            background: t.primaryDim, border: `1px solid ${hexToRgba(t.primary, 0.28)}`,
          }}>bezig</span>
        )}
        {isDone && (
          <span style={{
            fontSize: 9, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            color: accent, padding: '2px 7px', borderRadius: 999,
            background: hexToRgba(accent, 0.14), border: `1px solid ${hexToRgba(accent, 0.28)}`,
          }}>klaar</span>
        )}
      </div>
      <div style={{ flex: 1 }}>
        <div style={{
          fontSize: 13.5, color: t.fg, fontWeight: 800, lineHeight: 1.3, marginBottom: 4,
        }}>{title}</div>
        <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, lineHeight: 1.45 }}>{subtitle}</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1 }}>
          <ProgressBar t={t} value={(step / totalSteps) * 100} color={accent} />
        </div>
        <span style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 800 }}>
          {step}/{totalSteps}
        </span>
      </div>
    </div>
  );
}

/* ─── VraagPulseCard ──────────────────────────────────── */
function VraagPulseCard({ t, lastChat }) {
  const dark = t.mode === 'dark';
  const purple = dark ? '#9D4EDD' : '#7C3AED';
  return (
    <div style={{
      background: dark
        ? 'linear-gradient(135deg, #1B1530 0%, #1F1A38 100%)'
        : 'linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%)',
      border: `1px solid ${dark ? 'rgba(157,78,221,0.30)' : '#DDD6FE'}`,
      borderRadius: 8, padding: '14px 16px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <PulseMascot size={48} mood="thinking" />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
          color: purple, marginBottom: 3,
        }}>Vraag aan Pulse</div>
        <div style={{
          fontFamily: 'Fredoka One', fontSize: 16, color: t.fg, lineHeight: 1.25,
        }}>Snap je iets niet?</div>
        {lastChat && (
          <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 3 }}>
            Laatst: "{lastChat}"
          </div>
        )}
      </div>
      <button style={{
        width: 36, height: 36, borderRadius: 8,
        background: purple, color: '#fff', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <PI name="message-circle" size={16} strokeWidth={2.4} />
      </button>
    </div>
  );
}

/* ─── FoutenanalyseCard — uit Oefenen ──────────────────── */
function FoutenanalyseCard({ t, subject, score, total, topic }) {
  const dark = t.mode === 'dark';
  const c = pillarColor('oefenen', dark);
  return (
    <div style={{
      background: t.card, border: `1px solid ${t.border}`,
      borderRadius: 8, padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 36, height: 36, borderRadius: 8,
        background: hexToRgba(c, 0.14), color: c,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        fontFamily: 'Fredoka One', fontSize: 14,
      }}>{score}</div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
          <HandoffBadge t={t} pillar="oefenen" direction="from" label="uit Oefenen" />
        </div>
        <div style={{ fontSize: 13, color: t.fg, fontWeight: 800, lineHeight: 1.3 }}>
          Oefentoets {topic}: {score}/{total}
        </div>
        <div style={{ fontSize: 11, color: t.fgDim, fontWeight: 600, marginTop: 1 }}>
          Pulse markeerde 3 onderwerpen om door te nemen
        </div>
      </div>
      <PI name="chevron-right" size={16} color={t.fgMute} />
    </div>
  );
}

/* ─── ChapterStack — stapel-metafoor voor "meerdere vandaag" ──────
   Eén hoofdstuk-card bovenop (de meest urgente),
   peek van de volgende(n) eronder via shadow-stripes,
   tellertje + "Volgende" + handoff naar Plannen. */
function ChapterStack({ t, items = [], onNext, onSeeAll, currentIdx = 0 }) {
  const total = items.length;
  const top = items[currentIdx % total] || items[0];
  const peekCount = Math.min(2, total - 1);
  const dark = t.mode === 'dark';
  return (
    <div style={{ position: 'relative' }}>
      {/* Peek-stack onder de top-card — elk volgend hoofdstuk een tikje
          smaller en lichter, met top-color uit het vak */}
      {[...Array(peekCount)].map((_, i) => {
        const peekIdx = (currentIdx + i + 1) % total;
        const peek = items[peekIdx];
        const inset = (i + 1) * 10;
        const yOff = (i + 1) * 6;
        const peekHex = SUBJECTS[peek.subject] || '#94A3B8';
        return (
          <div key={i} style={{
            position: 'absolute', left: inset, right: inset, top: yOff,
            height: 34, borderRadius: 8,
            background: t.card, border: `1px solid ${t.border}`,
            borderTop: `2px solid ${hexToRgba(peekHex, 0.55)}`,
            boxShadow: dark
              ? '0 1px 4px rgba(0,0,0,0.35)'
              : '0 1px 3px rgba(15,23,42,0.06)',
            zIndex: 1,
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '0 14px',
            opacity: 1 - (i * 0.18),
          }}>
            <SubjectChip t={t} subject={peek.subject} size="sm" iconOnly />
            <span style={{
              fontSize: 11.5, color: t.fgDim, fontWeight: 700, lineHeight: 1,
              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
            }}>{peek.chapter}</span>
            <span style={{ flex: 1 }} />
            {peek.toetsContext && (
              <span style={{ fontSize: 10, color: t.fgMute, fontWeight: 700 }}>
                {peek.toetsContext}
              </span>
            )}
          </div>
        );
      })}

      {/* Top-card */}
      <div style={{
        position: 'relative', zIndex: 2,
        marginBottom: peekCount * 6 + (peekCount > 0 ? 10 : 0),
      }}>
        <VandaagLerenCard
          t={t}
          subject={top.subject}
          chapter={top.chapter}
          source={top.source}
          mins={top.mins}
          progress={top.progress}
          masteryLevel={top.masteryLevel}
          fromPlannen={top.fromPlannen}
          toetsContext={top.toetsContext}
        />
      </div>

      {/* Stapel-controle: teller + volgende + handoff */}
      {total > 1 && (
        <div style={{
          marginTop: 10, display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 12px',
          background: t.cardAlt, border: `1px solid ${t.border}`,
          borderRadius: 8,
        }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 11, color: t.fgDim, fontWeight: 700,
          }}>
            <PI name="layers" size={12} color={t.fgMute} />
            <b style={{ color: t.fg, fontWeight: 800 }}>{(currentIdx % total) + 1}</b> van {total} vandaag
          </span>
          <span style={{ flex: 1 }} />
          <button onClick={onNext} style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '6px 10px', borderRadius: 8,
            background: 'transparent', border: `1px solid ${t.border}`,
            color: t.fgDim, fontSize: 11.5, fontWeight: 800,
            cursor: 'pointer', fontFamily: 'Nunito',
          }}>
            Volgende <PI name="arrow-right" size={12} />
          </button>
          <button onClick={onSeeAll} style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            padding: '6px 10px', borderRadius: 8, background: 'transparent',
            border: 'none', color: pillarColor('plannen', t.mode === 'dark'),
            fontSize: 11.5, fontWeight: 800, cursor: 'pointer', fontFamily: 'Nunito',
          }}>
            Bekijk in Plannen <PI name="arrow-up-right" size={12} color={pillarColor('plannen', t.mode === 'dark')} />
          </button>
        </div>
      )}
    </div>
  );
}

/* ─── PulseTipCard — één rustige mini-cursus-uitnodiging ──────
   Vervangt de 4-kolomgrid op het hoofdframe.
   Smal, dismissible (× later, × ik weet het al). Niet meer dan dat. */
function PulseTipCard({ t, title, body, mins, onStart, onDismiss, onAlreadyKnow }) {
  const dark = t.mode === 'dark';
  return (
    <div style={{
      background: dark ? 'rgba(0,180,216,0.06)' : 'rgba(0,150,199,0.04)',
      border: `1px dashed ${hexToRgba(t.primary, dark ? 0.34 : 0.30)}`,
      borderRadius: 8, padding: '12px 14px',
      display: 'flex', alignItems: 'center', gap: 12,
    }}>
      <div style={{
        width: 30, height: 30, borderRadius: 8,
        background: t.primaryDim, color: t.primary,
        display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        <PI name="lightbulb" size={15} color={t.primary} strokeWidth={2.4} />
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 2,
        }}>
          <span style={{
            fontSize: 9.5, fontWeight: 800, letterSpacing: 0.5, textTransform: 'uppercase',
            color: t.primary,
          }}>Pulse-tip</span>
          <span style={{ color: t.fgMute, fontSize: 10, fontWeight: 700 }}>· studietechniek</span>
        </div>
        <div style={{ fontSize: 13, color: t.fg, fontWeight: 800, lineHeight: 1.3 }}>
          {title} <span style={{ color: t.fgDim, fontWeight: 600 }}>— {body}</span>
        </div>
        <div style={{ fontSize: 10.5, color: t.fgMute, fontWeight: 700, marginTop: 2 }}>± {mins} min</div>
      </div>
      <button onClick={onStart} style={{
        padding: '6px 12px', borderRadius: 8,
        background: t.primary, border: 'none',
        color: dark ? '#0A0F1E' : '#FFFFFF',
        fontSize: 11.5, fontWeight: 800, cursor: 'pointer', fontFamily: 'Nunito',
        flexShrink: 0,
      }}>Begin</button>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, flexShrink: 0 }}>
        <button onClick={onDismiss} title="later" style={{
          width: 22, height: 22, borderRadius: 6, background: 'transparent',
          border: `1px solid ${t.border}`, color: t.fgMute, cursor: 'pointer',
          fontSize: 12, lineHeight: 1, padding: 0, display: 'flex',
          alignItems: 'center', justifyContent: 'center',
        }}>×</button>
      </div>
    </div>
  );
}

/* ─── PulseChatEntryCard — vrije chat-ingang ───────────────────────
   Prominenter dan VraagPulseCard — een tekstveld-look-alike á la
   composer met suggesties. Bedoeld voor "ik snap iets niet,
   los van een hoofdstuk". Klinkt als een vraag, geen knop. */
function PulseChatEntryCard({ t, suggestions = [] }) {
  const dark = t.mode === 'dark';
  const purple = dark ? '#9D4EDD' : '#7C3AED';
  const purpleSoft = dark ? 'rgba(157,78,221,0.10)' : 'rgba(124,58,237,0.05)';
  return (
    <div style={{
      background: dark
        ? 'linear-gradient(135deg, #1B1530 0%, #1F1A38 100%)'
        : 'linear-gradient(135deg, #FAF7FF 0%, #F3EEFF 100%)',
      border: `1px solid ${dark ? 'rgba(157,78,221,0.28)' : '#E9DDFF'}`,
      borderRadius: 12, padding: '14px 16px',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
        <PulseMascot size={42} mood="thinking" />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{
            fontSize: 10, fontWeight: 800, letterSpacing: 0.6, textTransform: 'uppercase',
            color: purple, marginBottom: 2,
          }}>Vraag aan Pulse</div>
          <div style={{
            fontFamily: 'Fredoka One', fontSize: 16, color: t.fg, lineHeight: 1.25,
          }}>Snap je iets niet?</div>
          <div style={{ fontSize: 11.5, color: t.fgDim, fontWeight: 600, marginTop: 2 }}>
            Pulse beantwoordt op basis van je eigen lesmateriaal.
          </div>
        </div>
      </div>

      {/* Tekstveld-look */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8,
        background: t.card, border: `1px solid ${dark ? 'rgba(157,78,221,0.30)' : '#DDD6FE'}`,
        borderRadius: 8, padding: '8px 10px 8px 12px',
      }}>
        <span style={{
          flex: 1, color: t.fgMute, fontSize: 12.5, fontWeight: 600,
          fontFamily: 'Nunito', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
        }}>Bijv. “Wat is het verschil tussen mitose en meiose?”</span>
        <button style={{
          width: 28, height: 28, borderRadius: 8,
          background: purple, color: '#fff', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <PI name="send" size={13} strokeWidth={2.4} />
        </button>
      </div>

      {suggestions.length > 0 && (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
          {suggestions.map((s, i) => (
            <span key={i} style={{
              display: 'inline-flex', alignItems: 'center', gap: 4,
              padding: '4px 9px', borderRadius: 999,
              background: purpleSoft, color: purple,
              border: `1px solid ${dark ? 'rgba(157,78,221,0.28)' : '#E9DDFF'}`,
              fontFamily: 'Nunito', fontSize: 11, fontWeight: 700, cursor: 'pointer',
            }}>
              <PI name="sparkles" size={10} color={purple} />{s}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

Object.assign(window, {
  PulseGreetCard, VandaagLerenCard, HerhalingenCard, DoorgaanCard,
  VakRow, MiniCursusCard, VraagPulseCard, FoutenanalyseCard,
  ChapterStack, PulseTipCard, PulseChatEntryCard,
});