/* qweb.jsx — Brief 02 v2 web players, HUD, browser frame, qtype catalog */
const { useState } = React;

/* ── Question-type catalog: COLOR + ICON pairs from color-definitions.ts ── */
const QTYPE = {
  TERM_DEFINITION: { label: 'Begrippen',       color: '#2563EB', icon: 'book-open',     pts: 10 },
  MULTIPLE_CHOICE: { label: 'Multiple Choice', color: '#16A34A', icon: 'check-square',  pts: 10 },
  CONTEXTUAL:      { label: 'Context',         color: '#4F46E5', icon: 'file-text',     pts: 15 },
  FILL_BLANK:      { label: 'Invulvelden',     color: '#EA580C', icon: 'pen-tool',      pts: 10 },
  MATCHING:        { label: 'Koppelen',        color: '#DB2777', icon: 'link-2',        pts: 15 },
  ORDERING:        { label: 'Volgorde',        color: '#0891B2', icon: 'list-ordered',  pts: 12 },
  IMAGE_BASED:     { label: 'Afbeelding',      color: '#0D9488', icon: 'image',         pts: 15 },
  TABLE_FILL:      { label: 'Tabel invullen',  color: '#7C3AED', icon: 'table-2',       pts: 18 },
  MULTI_FIELD:     { label: 'Meerdere velden', color: '#D97706', icon: 'clipboard-list',pts: 20 },
};
window.QTYPE = QTYPE;

const hexA = (h, a) => { const m=h.replace('#',''); return `rgba(${parseInt(m.slice(0,2),16)},${parseInt(m.slice(2,4),16)},${parseInt(m.slice(4,6),16)},${a})`; };
window.hexA = hexA;
const F = "'Fredoka One', cursive";
const N = "'Nunito', sans-serif";

/* ── Browser frame (snapsnel.nl-style) ── */
function Browser({ url='snapsnel.nl/quiz/...', dark=false, w=1280, scale=0.7, label, sub, children }) {
  const bg = dark ? '#0A0F1E' : '#F8FAFC';
  const chrome = dark ? '#111827' : '#FFFFFF';
  const border = dark ? '#1E293B' : '#E2E8F0';
  const fg = dark ? '#F1F5F9' : '#0F172A';
  const dim = dark ? '#94A3B8' : '#64748B';
  return (
    <div style={{ display:'inline-flex', flexDirection:'column', alignItems:'flex-start', gap:10 }}>
      <div style={{ width: w*scale, height: 720*scale, position:'relative' }}>
        <div style={{
          width: w, height: 720, transform:`scale(${scale})`, transformOrigin:'top left',
          position:'absolute', top:0, left:0, background: bg, color: fg,
          borderRadius: 12, border: `1px solid ${border}`,
          boxShadow:'0 24px 60px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)',
          overflow:'hidden', display:'flex', flexDirection:'column',
        }}>
          {/* Tab strip */}
          <div style={{ height:36, background: dark ? '#0F172A' : '#E2E8F0', display:'flex', alignItems:'flex-end', paddingLeft:12, gap:4, flexShrink:0 }}>
            <div style={{ display:'flex', gap:8, padding:'0 14px 8px 6px' }}>
              <div style={{ width:12, height:12, borderRadius:'50%', background:'#FF5F57' }}/>
              <div style={{ width:12, height:12, borderRadius:'50%', background:'#FEBC2E' }}/>
              <div style={{ width:12, height:12, borderRadius:'50%', background:'#28C840' }}/>
            </div>
            <div style={{
              height:28, padding:'0 14px', display:'flex', alignItems:'center', gap:8,
              background: chrome, color: fg, borderRadius:'8px 8px 0 0',
              fontSize:12, fontWeight:600, fontFamily:N, minWidth:200, maxWidth:280,
            }}>
              <window.LucideIcon name="zap" size={12} style={{ color:'#0096C7' }}/>
              <span style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>SnapSnel — Quiz spelen</span>
              <window.LucideIcon name="x" size={11} style={{ color:dim, marginLeft:'auto' }}/>
            </div>
          </div>
          {/* URL bar */}
          <div style={{
            height:40, background: chrome, borderBottom:`1px solid ${border}`,
            display:'flex', alignItems:'center', gap:8, padding:'0 14px', flexShrink:0,
          }}>
            <window.LucideIcon name="arrow-left" size={16} style={{ color:dim }}/>
            <window.LucideIcon name="arrow-right" size={16} style={{ color:dim, opacity:0.4 }}/>
            <window.LucideIcon name="rotate-cw" size={15} style={{ color:dim }}/>
            <div style={{
              flex:1, height:26, borderRadius:13,
              background: dark ? '#1A2235' : '#F1F5F9',
              display:'flex', alignItems:'center', gap:8, padding:'0 12px',
              fontSize:12, color: dim, fontFamily: N, fontWeight:500,
            }}>
              <window.LucideIcon name="lock" size={11} />
              {url}
            </div>
            <div style={{ width:24, height:24, borderRadius:12, background: hexA('#0096C7',0.12), display:'grid', placeItems:'center', fontSize:11, fontWeight:800, color:'#0096C7', fontFamily:N }}>SA</div>
          </div>
          {/* App body — sidebar + main */}
          <div style={{ flex:1, display:'flex', overflow:'hidden' }}>
            <SidebarRail dark={dark}/>
            <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
              {children}
            </div>
          </div>
        </div>
      </div>
      {label && (
        <div style={{ marginTop:6, maxWidth: w*scale }}>
          <div style={{ fontFamily:N, fontSize:13, fontWeight:800, color:'#0F172A' }}>{label}</div>
          {sub && <div style={{ fontFamily:N, fontSize:12, color:'#64748B', marginTop:2, lineHeight:1.5 }}>{sub}</div>}
        </div>
      )}
    </div>
  );
}
window.Browser = Browser;

/* ── Sidebar rail (collapsed during quiz play, per impl.md) ── */
function SidebarRail({ dark }) {
  const bg = dark ? '#111827' : '#FFFFFF';
  const border = dark ? '#1E293B' : '#E2E8F0';
  const dim = dark ? '#64748B' : '#94A3B8';
  const items = ['layout-grid','graduation-cap','target','calendar','wand-2','trophy','store'];
  return (
    <div style={{
      width:60, background: bg, borderRight:`1px solid ${border}`,
      display:'flex', flexDirection:'column', alignItems:'center', padding:'12px 0', gap:8, flexShrink:0,
    }}>
      <div style={{ width:32, height:32, borderRadius:8, background:'#0096C7', display:'grid', placeItems:'center', marginBottom:6 }}>
        <window.LucideIcon name="zap" size={18} style={{ color:'#fff' }}/>
      </div>
      {items.map((ic, i) => (
        <div key={i} style={{
          width:38, height:38, borderRadius:10, display:'grid', placeItems:'center',
          color: ic==='target' ? '#0096C7' : dim,
          background: ic==='target' ? hexA('#0096C7',0.10) : 'transparent',
        }}>
          <window.LucideIcon name={ic} size={18}/>
        </div>
      ))}
    </div>
  );
}

/* ── Web Quiz HUD (3-tier: always / conditional / on-demand) ── */
function WebHUD({
  current=5, total=20, points=64, streak=3,
  delta=null, timerSec=null, mode='practice',
  showFlag=false, flagged=false, examensim=false, oefentoets=false,
  qtype, dark=false,
}) {
  const fg = dark ? '#F1F5F9' : '#0F172A';
  const dim = dark ? '#94A3B8' : '#64748B';
  const border = dark ? '#1E293B' : '#E2E8F0';
  const bg = dark ? '#111827' : '#FFFFFF';
  const pct = Math.round((current/total)*100);
  const t = QTYPE[qtype];
  const timerColor = timerSec!==null && timerSec<60 ? '#DC2626' : (oefentoets ? '#16A34A' : dim);
  return (
    <div style={{ background: bg, borderBottom:`1px solid ${border}`, flexShrink:0 }}>
      {examensim && (
        <div style={{ height:24, background:'#023E8A', color:'#fff', fontSize:10, fontWeight:800, letterSpacing:1.5, textTransform:'uppercase', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:N }}>
          Examensim · stilte aub · geen feedback tussen vragen
        </div>
      )}
      {oefentoets && (
        <div style={{ height:24, background:hexA('#16A34A', dark?0.18:0.10), color:'#16A34A', fontSize:10, fontWeight:800, letterSpacing:1.5, textTransform:'uppercase', display:'flex', alignItems:'center', justifyContent:'center', gap:8, fontFamily:N, borderBottom:`1px solid ${hexA('#16A34A', 0.20)}` }}>
          <window.LucideIcon name="graduation-cap" size={12}/>
          Oefentoets · score-tracking actief · zelfde HUD
        </div>
      )}
      <div style={{ display:'flex', alignItems:'center', gap:14, padding:'12px 20px' }}>
        {/* LEFT: exit + (examensim flag) */}
        <div style={{ display:'flex', gap:6 }}>
          <button style={btnIcon(dark)} aria-label="Stoppen"><window.LucideIcon name="x" size={16}/></button>
          {showFlag && (
            <button style={{
              ...btnIcon(dark),
              background: flagged ? hexA('#EA580C',0.15) : (dark?'#1E293B':'#F1F5F9'),
              color: flagged ? '#EA580C' : (dark?'#94A3B8':'#64748B'),
              border: flagged ? `1px solid ${hexA('#EA580C',0.3)}` : '1px solid transparent',
            }} title="Markeer voor later (Examensim)">
              <window.LucideIcon name="flag" size={15} fill={flagged ? '#EA580C' : 'none'}/>
            </button>
          )}
        </div>
        {/* CENTER: type-badge + progress */}
        <div style={{ flex:1, display:'flex', alignItems:'center', gap:14, minWidth:0 }}>
          {t && (
            <div style={{
              display:'inline-flex', alignItems:'center', gap:6,
              padding:'5px 11px', borderRadius:999,
              background: hexA(t.color,0.10), border:`1px solid ${hexA(t.color,0.28)}`,
              color: t.color, fontSize:11.5, fontWeight:800, fontFamily:N, flexShrink:0,
            }}>
              <window.LucideIcon name={t.icon} size={13}/>
              {t.label}
            </div>
          )}
          <div style={{ flex:1, minWidth:0 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:3 }}>
              <span style={{ fontSize:11.5, fontWeight:800, color:dim, fontFamily:N }}>Vraag {current} van {total}</span>
              {timerSec!==null && (
                <span style={{ fontSize:12, fontWeight:800, fontFamily:'monospace', color:timerColor, display:'inline-flex', gap:4, alignItems:'center' }}>
                  <window.LucideIcon name="clock" size={12}/> {fmtT(timerSec)}
                </span>
              )}
            </div>
            <div style={{ height:6, background:dark?'#1E293B':'#E2E8F0', borderRadius:3, overflow:'hidden' }}>
              <div style={{ height:'100%', width:`${pct}%`, borderRadius:3,
                background: examensim ? '#023E8A' : (oefentoets ? 'linear-gradient(90deg,#16A34A,#22C55E)' : 'linear-gradient(90deg,#0096C7,#00BCD4)') }}/>
            </div>
          </div>
        </div>
        {/* RIGHT: points-pill (streak fused) */}
        <div style={{ position:'relative' }}>
          {delta && (
            <div style={{
              position:'absolute', top:-18, left:'50%', transform:'translateX(-50%)',
              fontSize:13, fontWeight:900, color:'#16A34A', fontFamily:N, whiteSpace:'nowrap',
            }}>+{delta}</div>
          )}
          <div style={{
            display:'inline-flex', alignItems:'center', gap:8,
            padding:'7px 14px', borderRadius:999,
            background:'linear-gradient(135deg,#0096C7,#0077A3)', color:'#fff',
            fontFamily:N, fontWeight:800, fontSize:14, boxShadow:'0 2px 8px rgba(0,150,199,0.35)',
          }}>
            {streak>=3 && (
              <span style={{ display:'inline-flex', alignItems:'center', gap:3, paddingRight:8, borderRight:'1px solid rgba(255,255,255,0.3)', fontSize:12 }}>
                <window.LucideIcon name="flame" size={13}/>{streak}×
              </span>
            )}
            <span>{points}</span>
            <span style={{ fontSize:9, fontWeight:600, opacity:0.7 }}>punten</span>
          </div>
        </div>
      </div>
    </div>
  );
}
window.WebHUD = WebHUD;
function btnIcon(dark){ return { width:34, height:34, borderRadius:8, border:'none', cursor:'pointer',
  background: dark?'#1E293B':'#F1F5F9', color: dark?'#94A3B8':'#64748B', display:'grid', placeItems:'center' }; }
function fmtT(s){ const m=Math.floor(s/60), r=s%60; return `${String(m).padStart(2,'0')}:${String(r).padStart(2,'0')}`; }

/* ── Question card shell — qtype-color top-stripe + icon-badge + content ── */
function QCard({ qtype, dark=false, children, maxW=720 }) {
  const t = QTYPE[qtype];
  const bg = dark ? '#1A2235' : '#FFFFFF';
  const border = dark ? '#1E293B' : '#E2E8F0';
  return (
    <div style={{
      width:'100%', maxWidth: maxW, background: bg, borderRadius:14,
      border:`1px solid ${border}`, boxShadow:'0 4px 18px rgba(0,0,0,0.05)',
      overflow:'hidden', position:'relative',
    }}>
      {t && <div style={{ height:4, background: t.color }}/>}
      {/* icon-badge linksboven, qtype-tinted */}
      {t && (
        <div style={{
          position:'absolute', top: 16, left: 18,
          width: 32, height: 32, borderRadius: 8,
          background: hexA(t.color, dark?0.20:0.12),
          border: `1px solid ${hexA(t.color, dark?0.40:0.28)}`,
          color: t.color, display:'grid', placeItems:'center',
        }}>
          <window.LucideIcon name={t.icon} size={17}/>
        </div>
      )}
      <div style={{ padding:'24px 28px 24px 62px' }}>{children}</div>
    </div>
  );
}
window.QCard = QCard;

/* ── Toelichting line (always visible, no cost) ── */
function Toelichting({ children, dark }) {
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:6,
      fontSize:12, fontStyle:'italic', color: dark?'#94A3B8':'#64748B',
      fontFamily:N, marginTop:6,
    }}>
      <window.LucideIcon name="info" size={13}/>
      <span>{children}</span>
    </div>
  );
}
window.Toelichting = Toelichting;

/* ── Hint button (progressive cost 25/50/75%) ── */
function HintBtn({ tier=1, dark }) {
  const cost = [25,50,75][tier-1] || 25;
  return (
    <button style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:'7px 12px', borderRadius:999, cursor:'pointer',
      background: dark?'rgba(245,158,11,0.14)':'#FEF3C7',
      border:`1px solid ${dark?'rgba(245,158,11,0.3)':'#FDE68A'}`,
      color:'#B45309', fontFamily:N, fontWeight:800, fontSize:12,
    }}>
      <window.LucideIcon name="lightbulb" size={13}/>
      Hint {tier}/3
      <span style={{ opacity:0.7, fontWeight:600 }}>−{cost}%</span>
    </button>
  );
}
window.HintBtn = HintBtn;

/* ── Pulse mascot — 1:1 port van PulseMascot.tsx (24 moods, 10 variants, 4 sizes, 7
   eye-animations) staat in pulse-mascot.jsx en is gebind aan window.PulseMascot.
   In-quiz gebruiken we 'strike' als canonieke variant; mood per quiz-state. */
function Pulse({ size=72, mood='neutral' }) {
  // Map onze pixel-size naar de 4 canonieke presets (sm 40 / md 52 / lg 90 / xl 120).
  const preset = size <= 50 ? 'sm' : size <= 70 ? 'md' : size <= 100 ? 'lg' : 'xl';
  const M = window.PulseMascot;
  if (!M) return <div style={{ width:size, height:size*1.4 }}/>;
  return <M variant="strike" mood={mood} size={preset} animated={false}/>;
}
window.Pulse = Pulse;

/* ── Inline AnimatedFeedback (Robin's preferred anchor — no fullscreen overlays) ── */
function Feedback({ kind='correct', text, sub, explanation, dark=false }) {
  const c = {
    correct: { bg:dark?'rgba(22,163,74,0.12)':'#F0FDF4', fg:'#16A34A', border:dark?'rgba(22,163,74,0.30)':'#BBF7D0', icon:'check-circle-2' },
    wrong:   { bg:dark?'rgba(220,38,38,0.10)':'#FEF2F2', fg:'#DC2626', border:dark?'rgba(220,38,38,0.30)':'#FECACA', icon:'x-circle' },
    partial: { bg:dark?'rgba(217,119,6,0.12)':'#FFFBEB', fg:'#D97706', border:dark?'rgba(217,119,6,0.3)':'#FDE68A', icon:'minus-circle' },
  }[kind];
  return (
    <div style={{
      background: c.bg, border:`1px solid ${c.border}`, borderRadius:12,
      padding:'14px 16px', display:'flex', gap:12, alignItems:'flex-start',
    }}>
      <div style={{ width:34, height:34, borderRadius:999, background: hexA(c.fg,0.16), color:c.fg, display:'grid', placeItems:'center', flexShrink:0 }}>
        <window.LucideIcon name={c.icon} size={20}/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontFamily:N, fontWeight:900, fontSize:14, color:c.fg }}>{text}</div>
        {sub && <div style={{ fontFamily:N, fontSize:12.5, color:dark?'#CBD5E1':'#475569', marginTop:3, lineHeight:1.5 }}>{sub}</div>}
        {explanation && (
          <div style={{ marginTop:10, padding:'10px 12px', borderRadius:8, background: dark?'rgba(245,158,11,0.10)':'rgba(245,158,11,0.08)', border:`1px solid ${hexA('#D97706',0.2)}`, fontSize:12, color: dark?'#FDE68A':'#92400E', lineHeight:1.5, display:'flex', gap:8 }}>
            <span>💡</span><span>{explanation}</span>
          </div>
        )}
      </div>
    </div>
  );
}
window.Feedback = Feedback;

/* ── Bottom CTA bar (consistent across all 9 players) ── */
function CTA({ label, kind='primary', icon='arrow-right', dark=false, full=true }) {
  const colors = {
    primary: { bg:'#0096C7', fg:'#fff', shadow:'0 4px 14px rgba(0,150,199,0.35)' },
    success: { bg:'#16A34A', fg:'#fff', shadow:'0 4px 14px rgba(22,163,74,0.35)' },
    secondary:{ bg: dark?'#1E293B':'#F1F5F9', fg: dark?'#F1F5F9':'#0F172A', shadow:'none' },
  }[kind];
  return (
    <button style={{
      width: full?'100%':'auto', padding:'13px 22px', borderRadius:10, border:'none', cursor:'pointer',
      background: colors.bg, color: colors.fg, boxShadow: colors.shadow,
      fontFamily: F, fontSize:'1rem', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
    }}>
      {label}
      {icon && <window.LucideIcon name={icon} size={15}/>}
    </button>
  );
}
window.CTA = CTA;

/* ───────────────────────── PLAYERS ───────────────────────── */

/* 1. TERM_DEFINITION (begrippen flashcard) */
function P_TermDef({ dark, state='input' }) {
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood={state==='correct'?'happy':'neutral'}/>
      <QCard qtype="TERM_DEFINITION" dark={dark} maxW={620}>
        <div style={{ fontSize:13, fontWeight:600, color:dark?'#94A3B8':'#64748B', fontFamily:N, marginBottom:6, textAlign:'center' }}>Wat betekent dit begrip?</div>
        <div style={{ fontFamily:F, fontSize:'2.2rem', textAlign:'center', padding:'14px 0 4px', color: dark?'#F1F5F9':'#0F172A' }}>Metamorfose</div>
        <div style={{ textAlign:'center', marginBottom:18 }}>
          <Toelichting dark={dark}>biologie · zelfstandig naamwoord</Toelichting>
        </div>
        <input readOnly value={state==='correct'?'gedaanteverandering':''} placeholder="Jouw antwoord…" style={{
          width:'100%', padding:'14px 16px', borderRadius:10,
          border:`2px solid ${state==='correct'?'#16A34A':(dark?'#1E293B':'#E2E8F0')}`,
          background: dark?'#0F172A':'#F8FAFC', color: dark?'#F1F5F9':'#0F172A',
          fontFamily:N, fontSize:15, fontWeight:600, outline:'none', boxSizing:'border-box',
        }}/>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:14 }}>
          <HintBtn tier={1} dark={dark}/>
          <CTA label={state==='correct'?'Volgende vraag':'Controleer'} kind={state==='correct'?'success':'primary'} full={false} dark={dark}/>
        </div>
        {state==='correct' && (<div style={{ marginTop:14 }}><Feedback kind="correct" text="Goed gedaan!" sub="Inclusief richting-bonus +2" dark={dark}/></div>)}
      </QCard>
    </div>
  );
}
window.P_TermDef = P_TermDef;

/* 2. MULTIPLE_CHOICE */
function P_MC({ dark, state='selecting' }) {
  const opts = [
    { L:'A', t:'Het omzetten van glucose in energie', correct:false },
    { L:'B', t:'Het proces waarbij planten CO₂ opnemen en O₂ afgeven', correct:false },
    { L:'C', t:'Het omzetten van lichtenergie in chemische energie', correct:true },
    { L:'D', t:'Het transport van water door wortels', correct:false },
  ];
  const sel = 1; // B
  const optStyle = (o, i) => {
    if (state==='selecting') {
      if (i===sel) return { bg: hexA('#0096C7',0.10), border:`2px solid #0096C7`, color:'#0096C7', dot:true };
      return { bg: dark?'#0F172A':'#FFFFFF', border:`2px solid ${dark?'#1E293B':'#E2E8F0'}`, color: dark?'#F1F5F9':'#0F172A', dot:false };
    }
    if (o.correct) return { bg:hexA('#16A34A',0.10), border:'2px solid #16A34A', color:'#16A34A', dot:true, ic:'check' };
    if (i===sel) return { bg:hexA('#DC2626',0.08), border:'2px solid #DC2626', color:'#DC2626', dot:true, ic:'x' };
    return { bg: dark?'#0F172A':'#FFFFFF', border:`2px solid ${dark?'#1E293B':'#E2E8F0'}`, color: dark?'#F1F5F9':'#0F172A', dot:false, op:0.45 };
  };
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood={state==='wrong'?'encouraging-warm':state==='correct'?'celebrate':'neutral'}/>
      <QCard qtype="MULTIPLE_CHOICE" dark={dark} maxW={680}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, lineHeight:1.5, color:dark?'#F1F5F9':'#0F172A', marginBottom:6 }}>Wat is de definitie van fotosynthese?</div>
        <Toelichting dark={dark}>biologie · plantkunde · klas 3 HAVO</Toelichting>
        <div style={{ display:'flex', flexDirection:'column', gap:9, marginTop:18 }}>
          {opts.map((o, i) => {
            const s = optStyle(o, i);
            return (
              <div key={i} style={{
                minHeight:56, borderRadius:10, padding:'12px 16px', cursor:'pointer',
                display:'flex', alignItems:'center', gap:13, background:s.bg, border:s.border, color:s.color,
                opacity: s.op||1, fontFamily:N, fontWeight:700, fontSize:14, transition:'all .15s',
              }}>
                <div style={{
                  width:22, height:22, borderRadius:'50%', flexShrink:0,
                  border:`2px solid ${s.color}`, background: s.dot?s.color:'transparent',
                  display:'flex', alignItems:'center', justifyContent:'center',
                }}>
                  {s.ic==='check' && <window.LucideIcon name="check" size={11} style={{ color:'#fff' }}/>}
                  {s.ic==='x' && <window.LucideIcon name="x" size={11} style={{ color:'#fff' }}/>}
                  {s.dot && !s.ic && <div style={{ width:7, height:7, borderRadius:'50%', background:'#fff' }}/>}
                </div>
                <span style={{ fontWeight:800, fontSize:13, flexShrink:0 }}>{o.L}.</span>
                <span>{o.t}</span>
              </div>
            );
          })}
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:14 }}>
          <HintBtn tier={2} dark={dark}/>
          <span style={{ fontSize:11, color:dark?'#64748B':'#94A3B8', fontFamily:N }}>Toets A–D of 1–4 · Enter</span>
        </div>
        <div style={{ marginTop:12 }}>
          <CTA label={state==='selecting'?'Controleer antwoord':'Volgende vraag'} kind={state==='correct'?'success':'primary'} dark={dark}/>
        </div>
        {state==='wrong' && (
          <div style={{ marginTop:14 }}>
            <Feedback kind="wrong" text="Helaas, niet correct" sub={<>Het juiste antwoord is <strong style={{color:'#16A34A'}}>C. Het omzetten van lichtenergie in chemische energie</strong>.</>} explanation="Fotosynthese zet lichtenergie om in chemische energie (glucose). Dit gebeurt in chloroplasten met behulp van chlorofyl." dark={dark}/>
          </div>
        )}
        {state==='correct' && (<div style={{ marginTop:14 }}><Feedback kind="correct" text="Goed!" sub="+15 punten · streak 4×" dark={dark}/></div>)}
      </QCard>
    </div>
  );
}
window.P_MC = P_MC;

/* 3. MATCHING (tap-to-pair, not drag) */
function P_Matching({ dark }) {
  const rows = [
    { l:'Mitochondrie', r:'Energieproductie', m:true, c:'#3B82F6' },
    { l:'Ribosoom',     r:'Eiwitsynthese',    m:true, c:'#16A34A' },
    { l:'Chloroplast',  r:'Fotosynthese',     m:false, sel:true },
    { l:'Celkern',      r:'DNA-opslag',       m:false },
  ];
  const left = rows;
  const right = [rows[3], rows[0], rows[2], rows[1]];
  const tile = (it, side) => ({
    padding:'13px 16px', borderRadius:10, fontFamily:N, fontWeight:700, fontSize:14, textAlign:'center', cursor:'pointer',
    background: it.m? hexA(it.c,0.12) : it.sel? hexA('#0096C7',0.10) : (dark?'#0F172A':'#FFFFFF'),
    border: it.m? `2px solid ${it.c}` : it.sel? '2px solid #0096C7' : `2px solid ${dark?'#1E293B':'#E2E8F0'}`,
    color: it.m? it.c : it.sel? '#0096C7' : (dark?'#F1F5F9':'#0F172A'),
    opacity: it.m ? 0.7 : 1, transition:'all .15s',
  });
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood="focused"/>
      <QCard qtype="MATCHING" dark={dark} maxW={780}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A' }}>Koppel het organel aan de functie</div>
        <Toelichting dark={dark}>biologie · cellen · 4 paren</Toelichting>
        <div style={{ textAlign:'center', margin:'14px 0 16px', fontSize:12, fontWeight:700, color:dark?'#94A3B8':'#64748B', fontFamily:N }}>2 van 4 gekoppeld · 50%</div>
        <div style={{ display:'grid', gridTemplateColumns:'1fr auto 1fr', gap:14, alignItems:'start' }}>
          <div>
            <div style={{ fontSize:11, fontWeight:700, color:dark?'#94A3B8':'#64748B', fontFamily:N, marginBottom:8, textAlign:'center', textTransform:'uppercase', letterSpacing:0.5 }}>Tik links…</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {left.map((it, i) => (<div key={i} style={tile(it,'L')}>{it.m && <window.LucideIcon name="check" size={11} style={{ marginRight:4, verticalAlign:'middle' }}/>}{it.l}</div>))}
            </div>
          </div>
          <div style={{ paddingTop:36, color:dark?'#475569':'#CBD5E1' }}>
            <window.LucideIcon name="link-2" size={20}/>
          </div>
          <div>
            <div style={{ fontSize:11, fontWeight:700, color:dark?'#94A3B8':'#64748B', fontFamily:N, marginBottom:8, textAlign:'center', textTransform:'uppercase', letterSpacing:0.5 }}>…en dan rechts</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {right.map((it, i) => (<div key={i} style={tile(it,'R')}>{it.m && <window.LucideIcon name="check" size={11} style={{ marginRight:4, verticalAlign:'middle' }}/>}{it.r}</div>))}
            </div>
          </div>
        </div>
      </QCard>
    </div>
  );
}
window.P_Matching = P_Matching;

/* 4. ORDERING */
function P_Ordering({ dark, state='ordering' }) {
  const items = [
    { p:1, t:'DNA wordt gekopieerd (replicatie)', ok:true },
    { p:2, t:'Chromosomen lijnen op in het midden', ok:true },
    { p:3, t:'Celmembraan deelt de cel in tweeën', ok:false },
    { p:4, t:'Chromosomen worden naar de polen getrokken', ok:false },
  ];
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood={state==='answered'?'thinking':'neutral'}/>
      <QCard qtype="ORDERING" dark={dark} maxW={680}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A' }}>Zet de stappen van celdeling in de juiste volgorde</div>
        <Toelichting dark={dark}>biologie · sleep of gebruik ↑↓ pijltjes</Toelichting>
        <div style={{ display:'flex', flexDirection:'column', gap:8, marginTop:16 }}>
          {items.map((it, i) => {
            const s = state==='answered'
              ? (it.ok ? { bg: hexA('#16A34A',0.10), b:'#16A34A', c:'#16A34A' } : { bg: hexA('#DC2626',0.08), b:'#DC2626', c:'#DC2626' })
              : { bg: dark?'#0F172A':'#FFFFFF', b: dark?'#1E293B':'#E2E8F0', c: dark?'#F1F5F9':'#0F172A' };
            return (
              <div key={i} style={{
                borderRadius:10, padding:'12px 16px', display:'flex', alignItems:'center', gap:12,
                background:s.bg, border:`2px solid ${s.b}`, color:s.c, fontFamily:N, fontWeight:700, fontSize:14,
                cursor: state==='answered' ? 'default':'grab',
              }}>
                {state!=='answered' && <window.LucideIcon name="grip-vertical" size={15} style={{ color: dark?'#64748B':'#94A3B8' }}/>}
                <div style={{
                  width:26, height:26, borderRadius:'50%', flexShrink:0,
                  background: state==='answered' ? (it.ok?'#16A34A':'#DC2626') : (dark?'#1E293B':'#F1F5F9'),
                  color: state==='answered' ? '#fff' : (dark?'#94A3B8':'#64748B'),
                  display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:800,
                }}>
                  {state==='answered' ? (it.ok?<window.LucideIcon name="check" size={11}/>:<window.LucideIcon name="x" size={11}/>) : it.p}
                </div>
                <span>{it.t}</span>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop:16 }}>
          <CTA label={state==='answered'?'Volgende vraag':'Controleer volgorde'} kind="primary" dark={dark}/>
        </div>
        {state==='answered' && (<div style={{ marginTop:14 }}><Feedback kind="partial" text="Bijna goed!" sub="2 van 4 op de juiste plek (50%)" explanation="Chromosomen worden eerst naar de polen getrokken (anafase) — pas daarna deelt het celmembraan." dark={dark}/></div>)}
      </QCard>
    </div>
  );
}
window.P_Ordering = P_Ordering;

/* 5. FILL_BLANK */
function P_FillBlank({ dark, state='input' }) {
  const blank = (val, ok=null) => (
    <span style={{
      display:'inline-block', minWidth:120, padding:'4px 10px', margin:'0 3px',
      borderBottom:`2px ${ok===null?'dashed':'solid'} ${ok===true?'#16A34A':ok===false?'#DC2626':(dark?'#475569':'#CBD5E1')}`,
      background: ok===true?hexA('#16A34A',0.08):ok===false?hexA('#DC2626',0.08):(dark?'#0F172A':'#F8FAFC'),
      color: ok===true?'#16A34A':ok===false?'#DC2626':(dark?'#F1F5F9':'#0F172A'),
      fontWeight:700, fontFamily:N, borderRadius:4, textAlign:'center',
    }}>{val||' '}</span>
  );
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood={state==='partial'?'thinking':'neutral'}/>
      <QCard qtype="FILL_BLANK" dark={dark} maxW={680}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A' }}>Vul de werkwoordsvormen in</div>
        <Toelichting dark={dark}>Nederlands · vervoeging · hij/zij · tegenwoordige tijd</Toelichting>
        <div style={{ marginTop:18, fontFamily:N, fontSize:16, lineHeight:2.2, color:dark?'#F1F5F9':'#0F172A' }}>
          {state==='partial' ? <>Hij {blank('loopt', true)} naar school en zij {blank('vind', false)} dat leuk.</> : <>Hij {blank('')} naar school (lopen) en zij {blank('')} dat leuk (vinden).</>}
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginTop:18 }}>
          <HintBtn tier={1} dark={dark}/>
          <CTA label={state==='partial'?'Volgende vraag':'Controleer'} kind="primary" full={false} dark={dark}/>
        </div>
        {state==='partial' && (<div style={{ marginTop:14 }}><Feedback kind="partial" text="Bijna goed — 1 van 2 (50%)" sub={<>Het juiste antwoord op de tweede plek is <strong style={{color:'#16A34A'}}>vindt</strong> (stam + t bij hij/zij/het).</>} dark={dark}/></div>)}
      </QCard>
    </div>
  );
}
window.P_FillBlank = P_FillBlank;

/* 6. CONTEXTUAL */
function P_Contextual({ dark }) {
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood="thinking"/>
      <QCard qtype="CONTEXTUAL" dark={dark} maxW={760}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A', marginBottom:4 }}>Wie is de hoofdpersoon van het verhaal?</div>
        <Toelichting dark={dark}>Nederlands · leesvaardigheid · open antwoord</Toelichting>
        <div style={{
          marginTop:14, padding:'14px 16px', borderRadius:10,
          background: dark?'rgba(79,70,229,0.10)':'rgba(79,70,229,0.06)',
          border:`1px solid ${hexA('#4F46E5',0.20)}`,
          fontFamily:N, fontSize:13.5, lineHeight:1.65, color: dark?'#CBD5E1':'#334155',
          maxHeight:180, overflow:'auto',
        }}>
          Anna keek door het raam naar de regen. Ze had geen zin om naar buiten te gaan, maar haar broer Tim wachtte al een uur. <span style={{ background: hexA('#4F46E5',0.15), padding:'1px 4px', borderRadius:3, color:'#4F46E5', fontWeight:700 }}>Anna</span> trok haar jas aan en stapte naar buiten. De druppels prikten op haar wangen. "Eindelijk," zei Tim met een grijns…
        </div>
        <div style={{ marginTop:14, position:'relative' }}>
          <input readOnly value="Anna" style={{
            width:'100%', padding:'12px 16px', borderRadius:10,
            border:'2px solid #4F46E5', background: hexA('#4F46E5',0.06),
            fontFamily:N, fontSize:14, fontWeight:700, color:'#4F46E5', outline:'none', boxSizing:'border-box',
          }}/>
          <span style={{ position:'absolute', right:14, top:'50%', transform:'translateY(-50%)', fontSize:11, fontWeight:800, color:'#4F46E5', fontFamily:N, display:'inline-flex', gap:4, alignItems:'center' }}>
            <window.LucideIcon name="loader-2" size={12}/> Pulse controleert…
          </span>
        </div>
        <div style={{ marginTop:14 }}>
          <Feedback kind="correct" text="Goed!" sub="Pulse herkende ook de gemarkeerde naam in de tekst." dark={dark}/>
        </div>
      </QCard>
    </div>
  );
}
window.P_Contextual = P_Contextual;

/* 7. IMAGE_BASED — single-pin V1 (10th qtype, backend may not support yet) */
function P_Image({ dark }) {
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood="excited"/>
      <QCard qtype="IMAGE_BASED" dark={dark} maxW={680}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A' }}>Klik op de mitochondrie</div>
        <Toelichting dark={dark}>biologie · cel-anatomie · enkele tap</Toelichting>
        <div style={{
          marginTop:14, height:300, borderRadius:10, position:'relative', overflow:'hidden',
          background: dark
            ? 'radial-gradient(circle at 30% 40%, #1E293B, #0A0F1E)'
            : 'radial-gradient(circle at 30% 40%, #DBEAFE, #F0FDF4)',
          border:`1px solid ${dark?'#1E293B':'#E2E8F0'}`,
          cursor:'crosshair',
        }}>
          {/* Cell illustration placeholder */}
          <svg width="100%" height="100%" viewBox="0 0 600 300" style={{ position:'absolute', inset:0 }}>
            <ellipse cx="300" cy="150" rx="240" ry="120" fill={hexA('#16A34A',0.18)} stroke={hexA('#16A34A',0.4)} strokeWidth="2"/>
            <circle cx="300" cy="150" r="48" fill={hexA('#7C3AED',0.30)} stroke="#7C3AED" strokeWidth="1.5"/>
            <ellipse cx="195" cy="170" rx="36" ry="20" fill={hexA('#EA580C',0.30)} stroke="#EA580C" strokeWidth="1.5"/>
            <ellipse cx="410" cy="120" rx="32" ry="18" fill={hexA('#EA580C',0.30)} stroke="#EA580C" strokeWidth="1.5"/>
            <circle cx="380" cy="200" r="14" fill={hexA('#0096C7',0.30)} stroke="#0096C7" strokeWidth="1.5"/>
            <circle cx="220" cy="100" r="10" fill={hexA('#0096C7',0.30)} stroke="#0096C7" strokeWidth="1.5"/>
          </svg>
          {/* Pin */}
          <div style={{
            position:'absolute', left:'31.5%', top:'56%',
            width:32, height:32, borderRadius:'50% 50% 50% 0',
            background:'#0D9488', transform:'translate(-50%,-100%) rotate(-45deg)',
            display:'grid', placeItems:'center', boxShadow:'0 4px 12px rgba(13,148,136,0.5)',
          }}>
            <window.LucideIcon name="check" size={14} style={{ color:'#fff', transform:'rotate(45deg)' }}/>
          </div>
          <div style={{
            position:'absolute', bottom:10, left:10, padding:'4px 10px', borderRadius:6,
            background:'rgba(0,0,0,0.6)', color:'#fff', fontSize:11, fontFamily:N, fontWeight:700,
          }}>1 pin geplaatst · klik opnieuw om te verzetten</div>
        </div>
        <div style={{ marginTop:14 }}>
          <CTA label="Bevestig pin" kind="primary" dark={dark} icon="check"/>
        </div>
      </QCard>
    </div>
  );
}
window.P_Image = P_Image;

/* 8. TABLE_FILL */
function P_TableFill({ dark }) {
  const rows = [
    ['H₂O', 'Water',     'vloeistof', true],
    ['NaCl','Keukenzout','vaste stof', true],
    ['CO₂', '?',         'gas',        false],
    ['O₂',  'Zuurstof',  '?',          false],
  ];
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood="focused"/>
      <QCard qtype="TABLE_FILL" dark={dark} maxW={680}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A' }}>Vul de tabel aan</div>
        <Toelichting dark={dark}>scheikunde · benamingen + fasen bij kamertemperatuur</Toelichting>
        <table style={{ width:'100%', borderCollapse:'separate', borderSpacing:0, marginTop:18, fontFamily:N }}>
          <thead>
            <tr>
              {['Formule','Naam','Fase'].map(h => (
                <th key={h} style={{ textAlign:'left', padding:'10px 12px', fontSize:12, fontWeight:800, color:dark?'#94A3B8':'#64748B', borderBottom:`1px solid ${dark?'#1E293B':'#E2E8F0'}` }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i}>
                {r.slice(0,3).map((c, j) => {
                  const editable = c==='?';
                  return (
                    <td key={j} style={{ padding:6, borderBottom:`1px solid ${dark?'#1E293B':'#F1F5F9'}` }}>
                      {editable ? (
                        <input readOnly placeholder="…" style={{
                          width:'100%', padding:'8px 10px', borderRadius:6,
                          border:`2px dashed ${dark?'#475569':'#CBD5E1'}`,
                          background: dark?'#0F172A':'#FFFBEB',
                          color: dark?'#F1F5F9':'#0F172A', fontFamily:N, fontSize:13, fontWeight:700, outline:'none',
                        }}/>
                      ) : (
                        <span style={{ padding:'8px 10px', display:'block', fontSize:13, fontWeight:700, color:dark?'#F1F5F9':'#0F172A' }}>{c}</span>
                      )}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ marginTop:16 }}>
          <CTA label="Controleer tabel" kind="primary" dark={dark}/>
        </div>
      </QCard>
    </div>
  );
}
window.P_TableFill = P_TableFill;

/* 9. MULTI_FIELD */
function P_MultiField({ dark }) {
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood="focused"/>
      <QCard qtype="MULTI_FIELD" dark={dark} maxW={680}>
        <div style={{ fontFamily:N, fontWeight:800, fontSize:16, color:dark?'#F1F5F9':'#0F172A' }}>Beschrijf de Slag bij Nieuwpoort</div>
        <Toelichting dark={dark}>geschiedenis · Tachtigjarige Oorlog · 4 velden</Toelichting>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, marginTop:18 }}>
          {[
            { l:'Jaartal',     val:'1600',           ok:true },
            { l:'Aanvoerder',  val:'Maurits',        ok:true },
            { l:'Tegenstander',val:'',                ok:null, ph:'…' },
            { l:'Uitkomst',    val:'overwinning',    ok:false },
          ].map((f, i) => {
            const bd = f.ok===true?'#16A34A':f.ok===false?'#DC2626':(dark?'#1E293B':'#E2E8F0');
            const bg = f.ok===true?hexA('#16A34A',0.06):f.ok===false?hexA('#DC2626',0.06):(dark?'#0F172A':'#F8FAFC');
            return (
              <div key={i}>
                <div style={{ fontSize:11, fontWeight:800, color:dark?'#94A3B8':'#64748B', fontFamily:N, marginBottom:4, textTransform:'uppercase', letterSpacing:0.4 }}>{f.l}</div>
                <input readOnly value={f.val} placeholder={f.ph} style={{
                  width:'100%', padding:'10px 12px', borderRadius:8,
                  border:`2px solid ${bd}`, background: bg,
                  fontFamily:N, fontSize:13, fontWeight:700,
                  color: f.ok===true?'#16A34A':f.ok===false?'#DC2626':(dark?'#F1F5F9':'#0F172A'),
                  outline:'none', boxSizing:'border-box',
                }}/>
                {f.ok===false && <div style={{ fontSize:11, fontFamily:N, color:'#DC2626', marginTop:3 }}>✗ Juist: <strong style={{color:'#16A34A'}}>Spaanse leger</strong></div>}
              </div>
            );
          })}
        </div>
        <div style={{ marginTop:14 }}>
          <Feedback kind="partial" text="2 van 4 goed — 50%" sub="Tegenstander overgeslagen, uitkomst onnauwkeurig." dark={dark}/>
        </div>
      </QCard>
    </div>
  );
}
window.P_MultiField = P_MultiField;

/* ── FEYNMAN — dual-rubric (Volledigheid + Duidelijkheid + 4 sub-elementen) ── */
function P_Feynman({ dark, state='evaluating' }) {
  const completeness = 78;
  const clarity = 84;
  return (
    <div style={{ flex:1, padding:'20px 24px 28px', display:'flex', flexDirection:'column', alignItems:'center', gap:14, overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <Pulse size={68} mood={state==='evaluating'?'thinking':'happy'}/>
      <QCard qtype="CONTEXTUAL" dark={dark} maxW={760}>
        <div style={{
          padding:'12px 14px', borderRadius:10, marginBottom:14,
          background: hexA('#0096C7',0.08), border:`1px solid ${hexA('#0096C7',0.25)}`,
          fontFamily:N, fontSize:13, fontWeight:700, color:'#0096C7',
        }}>
          Leg dit uit alsof je het aan een 10-jarige vertelt:
          <div style={{ fontFamily:F, fontSize:18, color:dark?'#F1F5F9':'#0F172A', marginTop:4 }}>Fotosynthese</div>
        </div>
        <textarea readOnly rows={4} value="Planten eten zonlicht en water. Met die mix maken ze suiker, en de zuurstof die overblijft ademen wij in. Dat gebeurt vooral in de bladeren, in groene puntjes die chloroplasten heten." style={{
          width:'100%', padding:'12px 14px', borderRadius:10,
          border:`2px solid ${dark?'#1E293B':'#E2E8F0'}`,
          background: dark?'#0F172A':'#FFFFFF',
          fontFamily:N, fontSize:13.5, color:dark?'#F1F5F9':'#0F172A', resize:'none', outline:'none', boxSizing:'border-box',
        }}/>
        {state==='result' && (
          <div style={{ marginTop:16, display:'flex', flexDirection:'column', gap:14 }}>
            {/* Two score pills side-by-side */}
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
              <ScorePill label="Volledigheid" score={completeness} dark={dark}/>
              <ScorePill label="Duidelijkheid" score={clarity} dark={dark}/>
            </div>
            {/* Summary */}
            <div style={{
              padding:'10px 14px', borderRadius:10, fontFamily:N, fontSize:13, lineHeight:1.5,
              background: hexA('#0096C7',0.08), border:`1px solid ${hexA('#0096C7',0.20)}`,
              color: dark?'#F1F5F9':'#0F172A',
            }}>
              <strong style={{ color:'#0096C7' }}>Samenvatting · </strong>
              Sterke metafoor en goed kerngedeelte. Mist nog de rol van CO₂ en de chemische omzetting expliciet. Geslaagd ✓
            </div>
            {/* Strengths + gaps */}
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
              <BulletList kind="strengths" items={['Heldere "zonlicht eten"-metafoor','Noemt chloroplasten + zuurstof voor mens']} dark={dark}/>
              <BulletList kind="gaps" items={['CO₂ ontbreekt als input','"Suiker maken" mag chemischer (glucose)']} dark={dark}/>
            </div>
            {/* Tip */}
            <div style={{
              padding:'10px 14px', borderRadius:10, fontFamily:N, fontSize:12.5,
              background: hexA('#D97706',0.08), border:`1px solid ${hexA('#D97706',0.20)}`,
              color: dark?'#FDE68A':'#92400E', display:'flex', gap:8, alignItems:'flex-start',
            }}>
              <span>💡</span><span><strong>Tip · </strong>Probeer "ingrediënten" en "recept" als kapstok — dan komen CO₂ + H₂O + licht logisch samen.</span>
            </div>
          </div>
        )}
        {state==='evaluating' && (
          <div style={{ marginTop:14, padding:'10px 14px', borderRadius:10, background:dark?'rgba(0,150,199,0.10)':hexA('#0096C7',0.06), border:`1px solid ${hexA('#0096C7',0.20)}`, fontFamily:N, fontSize:13, fontWeight:700, color:'#0096C7', display:'flex', gap:8, alignItems:'center' }}>
            <window.LucideIcon name="loader-2" size={14}/> Pulse leest je uitleg en evalueert volledigheid + duidelijkheid…
          </div>
        )}
      </QCard>
    </div>
  );
}
window.P_Feynman = P_Feynman;

function ScorePill({ label, score, dark }) {
  const passed = score>=70;
  const c = passed ? '#16A34A' : '#D97706';
  return (
    <div style={{
      padding:'12px 14px', borderRadius:12, fontFamily:N,
      background: hexA(c,0.08), border:`1.5px solid ${hexA(c,0.30)}`,
    }}>
      <div style={{ fontSize:11, fontWeight:800, color:c, textTransform:'uppercase', letterSpacing:0.6 }}>{label}</div>
      <div style={{ display:'flex', alignItems:'baseline', gap:6, marginTop:4 }}>
        <span style={{ fontFamily:F, fontSize:30, color:c, lineHeight:1 }}>{score}</span>
        <span style={{ fontSize:13, fontWeight:700, color:c }}>/100</span>
        {passed && <span style={{ marginLeft:'auto', fontSize:10, fontWeight:800, color:'#16A34A', display:'inline-flex', gap:3, alignItems:'center' }}><window.LucideIcon name="check" size={11}/> Geslaagd</span>}
      </div>
      <div style={{ height:5, borderRadius:3, background: hexA(c,0.18), marginTop:8, overflow:'hidden' }}>
        <div style={{ height:'100%', width:`${score}%`, background:c, borderRadius:3 }}/>
      </div>
    </div>
  );
}

function BulletList({ kind, items, dark }) {
  const c = kind==='strengths' ? '#16A34A' : '#D97706';
  const ic = kind==='strengths' ? 'check' : 'arrow-right';
  const lab = kind==='strengths' ? '✓ Sterk' : '→ Verbeter';
  return (
    <div>
      <div style={{ fontSize:11, fontWeight:800, color:c, textTransform:'uppercase', letterSpacing:0.6, marginBottom:6, fontFamily:N }}>{lab}</div>
      <ul style={{ margin:0, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:6 }}>
        {items.map((t, i) => (
          <li key={i} style={{ display:'flex', gap:7, fontFamily:N, fontSize:12.5, lineHeight:1.45, color: dark?'#CBD5E1':'#334155' }}>
            <window.LucideIcon name={ic} size={12} style={{ color:c, flexShrink:0, marginTop:3 }}/>
            <span>{t}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* ── EXAMENSIM PAUSE — vraag-overzicht-grid (skip + flag) ── */
function ExamensimPause({ dark=true }) {
  // 40 questions: status mix
  const statuses = [];
  for (let i=1;i<=40;i++) {
    let s = 'empty';
    if (i<=18) s = 'answered';
    if ([7, 13, 22, 31].includes(i)) s = 'flagged';
    if (i===19) s = 'current';
    statuses.push({ n:i, s });
  }
  const swatch = (st) => {
    if (st==='answered') return { bg:'#0096C7', fg:'#fff', b:'#0096C7' };
    if (st==='flagged')  return { bg: hexA('#EA580C',0.20), fg:'#EA580C', b:'#EA580C' };
    if (st==='current')  return { bg: hexA('#FFD000',0.30), fg:'#92400E', b:'#FFD000' };
    return { bg:'transparent', fg: dark?'#94A3B8':'#64748B', b: dark?'#475569':'#CBD5E1' };
  };
  return (
    <div style={{ flex:1, padding:'24px 28px', overflow:'auto', background: dark?'#0A0F1E':'#F8FAFC' }}>
      <div style={{ maxWidth:760, margin:'0 auto' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:18 }}>
          <div>
            <div style={{ fontFamily:F, fontSize:24, color:dark?'#F1F5F9':'#0F172A' }}>Pauze · Examensim</div>
            <div style={{ fontFamily:N, fontSize:13, color:dark?'#94A3B8':'#64748B', marginTop:2 }}>Klik een vraag om er naartoe te springen. Tijd loopt door.</div>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 12px', borderRadius:999, background: hexA('#DC2626',0.10), border:`1px solid ${hexA('#DC2626',0.30)}`, color:'#DC2626', fontFamily:'monospace', fontSize:13, fontWeight:800 }}>
            <window.LucideIcon name="clock" size={13}/> 47:23
          </div>
        </div>
        {/* Legenda */}
        <div style={{ display:'flex', gap:14, marginBottom:16, fontFamily:N, fontSize:12, color:dark?'#94A3B8':'#64748B' }}>
          {[['Beantwoord','answered'],['Leeg','empty'],['Gevlagd','flagged'],['Huidig','current']].map(([l,k])=>{
            const sw = swatch(k);
            return <span key={k} style={{ display:'inline-flex', gap:6, alignItems:'center' }}>
              <span style={{ width:14, height:14, borderRadius:4, background:sw.bg, border:`1.5px solid ${sw.b}` }}/>
              {l}
            </span>;
          })}
        </div>
        {/* Grid */}
        <div style={{
          padding:18, borderRadius:14,
          background: dark?'#1A2235':'#FFFFFF', border:`1px solid ${dark?'#1E293B':'#E2E8F0'}`,
          display:'grid', gridTemplateColumns:'repeat(10, 1fr)', gap:8,
        }}>
          {statuses.map(({n,s})=>{
            const sw = swatch(s);
            return (
              <button key={n} style={{
                aspectRatio:'1', borderRadius:8, cursor:'pointer',
                background: sw.bg, color: sw.fg, border:`1.5px solid ${sw.b}`,
                fontFamily:N, fontSize:13, fontWeight:800,
                position:'relative',
              }}>
                {n}
                {s==='flagged' && <window.LucideIcon name="flag" size={9} style={{ position:'absolute', top:3, right:3, color:'#EA580C' }} fill="#EA580C"/>}
              </button>
            );
          })}
        </div>
        <div style={{ display:'flex', gap:10, marginTop:20, justifyContent:'center' }}>
          <CTA label="Hervat" kind="primary" full={false} dark={dark} icon="play"/>
          <CTA label="Inleveren" kind="secondary" full={false} dark={dark} icon="check"/>
        </div>
      </div>
    </div>
  );
}
window.ExamensimPause = ExamensimPause;