/* ──────────────────────────────────────────────────────────
   wizard-r2.jsx — R2 synthesis-specific states
   Reuses helpers from wizard.jsx via window globals where possible.
   ────────────────────────────────────────────────────────── */

const FwR2 = "'Fredoka One', cursive";
const NwR2 = "'Nunito', sans-serif";
const hexR2 = (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})`; };

/* ── Pulse chat-frame (left rail) — Snapsnelds visual anchor, geen pacing ── */
function PulseChatFrame({ mood='curious', eyeAnimation='blink', messages = [] }) {
  return (
    <div style={{
      width: 280, background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:14,
      display:'flex', flexDirection:'column', overflow:'hidden',
      boxShadow:'0 1px 3px rgba(0,0,0,0.06)', alignSelf:'flex-start',
    }}>
      <div style={{ padding:'14px 16px 10px', borderBottom:'1px solid #F1F5F9', display:'flex', alignItems:'center', gap:10 }}>
        <window.PulseMascot variant="strike" mood={mood} size="sm" eyeAnimation={eyeAnimation}/>
        <div>
          <div style={{ fontFamily:FwR2, fontSize:14, color:'#0F172A' }}>Pulse</div>
          <div style={{ fontFamily:NwR2, fontSize:10.5, color:'#16A34A', fontWeight:700, display:'flex', alignItems:'center', gap:4 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'#16A34A', display:'inline-block' }}/>
            online
          </div>
        </div>
      </div>
      <div style={{ padding:'14px 14px 16px', display:'flex', flexDirection:'column', gap:10 }}>
        {messages.map((m, i) => (
          <div key={i} style={{
            background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:'12px 12px 12px 4px',
            padding:'10px 12px', fontFamily:NwR2, fontSize:12.5, color:'#334155', lineHeight:1.5,
          }}>{m}</div>
        ))}
      </div>
    </div>
  );
}

/* ── Mode-card (compact for chat-frame layout) ── */
function ModeCardR2({ label, color, credits, selected, recommended, sub }) {
  return (
    <div style={{
      padding:'12px 14px', borderRadius:12,
      background: selected ? hexR2(color, 0.06) : '#FFFFFF',
      border: selected ? `2px solid ${color}` : '1.5px solid #E2E8F0',
      cursor:'pointer', position:'relative', minWidth: 0,
    }}>
      {recommended && (
        <span style={{
          position:'absolute', top:-9, left:14, padding:'2px 8px', borderRadius:999,
          background:'#FEF3C7', color:'#92400E', fontFamily:NwR2, fontSize:10, fontWeight:800,
          border:'1px solid #FDE68A', display:'inline-flex', alignItems:'center', gap:3,
        }}>
          <window.LucideIcon name="star" size={9}/> Beste keuze
        </span>
      )}
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:6 }}>
        <span style={{ fontFamily:NwR2, fontSize:13.5, fontWeight:800, color:'#0F172A' }}>{label}</span>
        <span style={{ marginLeft:'auto', fontFamily:NwR2, fontSize:11, fontWeight:700, color, background:hexR2(color,0.10), padding:'2px 7px', borderRadius:999 }}>
          {credits} credit{credits>1?'s':''}
        </span>
      </div>
      <div style={{ fontFamily:NwR2, fontSize:11.5, color:'#64748B', lineHeight:1.4 }}>{sub}</div>
    </div>
  );
}

/* ── Source row (PDF dropped) ── */
function SourceRowPDF({ filename, pages, sections }) {
  return (
    <div style={{
      padding:'12px 14px', borderRadius:12, background:'#FFFFFF',
      border:'1.5px solid #E2E8F0', display:'flex', alignItems:'center', gap:12,
    }}>
      <div style={{ width:36, height:44, background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center' }}>
        <window.LucideIcon name="file-text" size={18} style={{ color:'#DC2626' }}/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontFamily:NwR2, fontSize:13, fontWeight:800, color:'#0F172A' }}>{filename}</div>
        <div style={{ fontFamily:NwR2, fontSize:11.5, color:'#64748B', fontWeight:600 }}>{pages} pagina's · {sections} hoofdstukken gedetecteerd</div>
      </div>
      <button style={{
        padding:'6px 10px', borderRadius:8, border:'1px solid #E2E8F0', background:'#fff',
        fontFamily:NwR2, fontSize:11.5, fontWeight:700, color:'#64748B', cursor:'pointer',
      }}>Vervangen</button>
    </div>
  );
}

/* ── Sections summary (Snapsnelds 1:1, in Bron-region) ── */
function SectionsSelectorR2({ items, selected }) {
  const totalQ = items.filter(i => selected.includes(i.name)).reduce((s,i)=>s+i.count, 0);
  return (
    <div style={{ background:'#FFFFFF', border:'1.5px solid #E2E8F0', borderRadius:12, padding:'14px 16px' }}>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
        <span style={{ fontFamily:NwR2, fontSize:12.5, fontWeight:800, color:'#0F172A' }}>Welke hoofdstukken?</span>
        <span style={{ fontFamily:NwR2, fontSize:10.5, fontWeight:700, color:'#0096C7', background:hexR2('#0096C7', 0.10), padding:'2px 7px', borderRadius:999 }}>Snapsnelds-component (1:1 over)</span>
        <div style={{ marginLeft:'auto', display:'flex', gap:6 }}>
          <button style={{ background:'transparent', border:'none', fontFamily:NwR2, fontSize:11, fontWeight:700, color:'#0096C7', cursor:'pointer' }}>Alles</button>
          <span style={{ color:'#CBD5E1' }}>·</span>
          <button style={{ background:'transparent', border:'none', fontFamily:NwR2, fontSize:11, fontWeight:700, color:'#0096C7', cursor:'pointer' }}>Geen</button>
        </div>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
        {items.map(it => {
          const sel = selected.includes(it.name);
          return (
            <div key={it.name} style={{
              display:'flex', alignItems:'center', gap:10, padding:'9px 12px', borderRadius:8,
              border: sel ? '2px solid '+hexR2('#3B82F6',0.4) : '1.5px solid #E2E8F0',
              background: sel ? hexR2('#3B82F6',0.04) : 'transparent',
            }}>
              <div style={{
                width:16, height:16, borderRadius:4,
                background: sel ? '#3B82F6' : 'transparent', border: sel?'none':'2px solid #CBD5E1',
                display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
              }}>{sel && <window.LucideIcon name="check" size={11} style={{ color:'#fff' }}/>}</div>
              <span style={{ fontFamily:NwR2, fontSize:12.5, fontWeight:700, color:'#0F172A', flex:1 }}>{it.name}</span>
              <span style={{ fontFamily:NwR2, fontSize:11, color:'#64748B', fontWeight:600 }}>~{it.count} vragen</span>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop:10, paddingTop:10, borderTop:'1px solid #F1F5F9', fontFamily:NwR2, fontSize:11.5, color:'#64748B' }}>
        {selected.length}/{items.length} geselecteerd · <b style={{ color:'#0F172A' }}>~{totalQ} vragen</b>
      </div>
    </div>
  );
}

/* ── Cost-bar (sticky bottom) ── */
function CostBar({ mode='quiz', cost=1, count=12, ready=true }) {
  const m = { quiz:{label:'Quiz', color:'#0096C7'}, oefentoets:{label:'Oefentoets', color:'#16A34A'}, examensim:{label:'Examensim', color:'#023E8A'} }[mode];
  return (
    <div style={{
      padding:'12px 18px', background:'#FFFFFF', borderTop:'1px solid #E2E8F0',
      display:'flex', alignItems:'center', gap:14,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <window.LucideIcon name="sparkles" size={14} style={{ color:'#D97706' }}/>
        <span style={{ fontFamily:NwR2, fontSize:12.5, fontWeight:700, color:'#64748B' }}>Kost</span>
        <span style={{ fontFamily:FwR2, fontSize:18, color: m.color }}>{cost}</span>
        <span style={{ fontFamily:NwR2, fontSize:11.5, color:'#64748B' }}>credit{cost>1?'s':''}</span>
      </div>
      <div style={{ width:1, height:22, background:'#E2E8F0' }}/>
      <div style={{ fontFamily:NwR2, fontSize:12.5, color:'#475569' }}>
        <b style={{ color:'#0F172A' }}>{count} vragen</b> · {m.label} · ~30 sec wachttijd
      </div>
      <div style={{ flex:1 }}/>
      <button disabled={!ready} style={{
        display:'inline-flex', alignItems:'center', gap:8, padding:'10px 20px', borderRadius:10,
        background: ready ? m.color : '#CBD5E1', color:'#fff', border:'none', cursor: ready?'pointer':'default',
        fontFamily:NwR2, fontSize:13, fontWeight:800,
      }}>
        <window.LucideIcon name="zap" size={14}/> Maak {count} vragen
      </button>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 01-R2 · Phase 1 default — synthesis: chat-frame links + 3 regio's rechts
   ────────────────────────────────────────────────────────── */
function W_R2_Phase1Default() {
  return (
    <window.Browser url="snapsnel.nl/maak" label="01 · Phase 1 synthese — chat-frame anchor + 3 regio's tegelijk zichtbaar"
      sub="Pulse leeft als visuele context-rail (links). Modus, Bron en Scope zijn naast elkaar; geen wachten op volgende bubble. Cost-bar updates live.">
      <div style={{ flex:1, display:'flex', flexDirection:'column', background:'#F8FAFC', overflow:'hidden' }}>
        <div style={{ flex:1, display:'flex', gap:18, padding:'18px 22px', overflow:'hidden' }}>
          {/* Left: Pulse chat-frame (Snapsnelds visual) */}
          <PulseChatFrame
            mood="curious"
            eyeAnimation="lookAround"
            messages={[
              "Hé! Wat ga je vandaag oefenen?",
              "Tip: kies eerst je modus — dan zie ik direct hoeveel credits 't kost. Geen verrassingen.",
            ]}
          />
          {/* Right: 3 stacked regions (form-rich, no chat-pacing) */}
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:14, minWidth:0 }}>
            {/* Modus */}
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                <span style={{ fontFamily:FwR2, fontSize:15, color:'#0F172A' }}>1 · Modus</span>
                <span style={{ fontFamily:NwR2, fontSize:10.5, color:'#64748B', fontWeight:700 }}>Bepaalt diepgang & credits</span>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:10 }}>
                <ModeCardR2 label="Quiz" color="#0096C7" credits={1} selected recommended sub="Dagelijks oefenen, 5 min."/>
                <ModeCardR2 label="Oefentoets" color="#16A34A" credits={2} sub="Voor de toets, 20 min."/>
                <ModeCardR2 label="Examensim" color="#023E8A" credits={3} sub="Examen-realisme, 90 min."/>
              </div>
            </div>
            {/* Bron */}
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                <span style={{ fontFamily:FwR2, fontSize:15, color:'#0F172A' }}>2 · Bron</span>
                <span style={{ fontFamily:NwR2, fontSize:10.5, color:'#64748B', fontWeight:700 }}>Foto, PDF of plak tekst</span>
              </div>
              <div style={{
                padding:'18px 14px', borderRadius:12, background:'#FFFFFF',
                border:'1.5px dashed #CBD5E1', textAlign:'center',
              }}>
                <div style={{ display:'flex', justifyContent:'center', gap:10, marginBottom:8 }}>
                  <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 14px', borderRadius:10, background:'#0096C7', border:'none', color:'#fff', fontFamily:NwR2, fontSize:12, fontWeight:800, cursor:'pointer' }}>
                    <window.LucideIcon name="camera" size={13}/> Maak foto
                  </button>
                  <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 14px', borderRadius:10, background:'#fff', border:'1.5px solid #E2E8F0', color:'#0F172A', fontFamily:NwR2, fontSize:12, fontWeight:800, cursor:'pointer' }}>
                    <window.LucideIcon name="upload" size={13}/> Upload PDF
                  </button>
                  <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 14px', borderRadius:10, background:'#fff', border:'1.5px solid #E2E8F0', color:'#0F172A', fontFamily:NwR2, fontSize:12, fontWeight:800, cursor:'pointer' }}>
                    <window.LucideIcon name="type" size={13}/> Plak tekst
                  </button>
                </div>
                <div style={{ fontFamily:NwR2, fontSize:11.5, color:'#94A3B8' }}>… of sleep een bestand in dit vak</div>
              </div>
            </div>
            {/* Scope */}
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                <span style={{ fontFamily:FwR2, fontSize:15, color:'#0F172A' }}>3 · Scope</span>
                <span style={{ fontFamily:NwR2, fontSize:10.5, color:'#64748B', fontWeight:700 }}>Aantal & types</span>
              </div>
              <div style={{ display:'flex', gap:10 }}>
                <div style={{ flex:1, padding:'12px 14px', background:'#FFFFFF', border:'1.5px solid #E2E8F0', borderRadius:12 }}>
                  <div style={{ fontFamily:NwR2, fontSize:11, color:'#64748B', fontWeight:700, marginBottom:6 }}>Aantal vragen</div>
                  <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <input type="range" min="5" max="15" defaultValue="12" style={{ flex:1 }}/>
                    <span style={{ fontFamily:FwR2, fontSize:18, color:'#0096C7', minWidth:24, textAlign:'right' }}>12</span>
                  </div>
                </div>
                <div style={{ flex:1, padding:'12px 14px', background:'#FFFFFF', border:'1.5px solid #E2E8F0', borderRadius:12 }}>
                  <div style={{ fontFamily:NwR2, fontSize:11, color:'#64748B', fontWeight:700, marginBottom:6 }}>Types</div>
                  <div style={{ display:'flex', alignItems:'center', gap:6, fontFamily:NwR2, fontSize:11.5, color:'#0F172A', fontWeight:700 }}>
                    <window.LucideIcon name="sparkles" size={12} style={{ color:'#D97706' }}/>
                    Pulse kiest slim
                    <span style={{ marginLeft:'auto', fontFamily:NwR2, fontSize:10.5, color:'#64748B', fontWeight:700, cursor:'pointer' }}>aanpassen ↓</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <CostBar mode="quiz" cost={1} count={12} ready={false}/>
      </div>
    </window.Browser>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 02-R2 · Multi-chapter PDF — Snapsnelds SectionsSummary in Bron-regio
   ────────────────────────────────────────────────────────── */
function W_R2_Phase1MultiChapter() {
  return (
    <window.Browser url="snapsnel.nl/maak" label="02 · PDF met 4 hoofdstukken — Snapsnelds-pattern in onze layout"
      sub="SectionsSummary uit Snapsnelds gaat 1:1 over, maar leeft in de Bron-regio i.p.v. inline in chat. Pulse links bevestigt; cost-bar update live op selectie.">
      <div style={{ flex:1, display:'flex', flexDirection:'column', background:'#F8FAFC', overflow:'hidden' }}>
        <div style={{ flex:1, display:'flex', gap:18, padding:'18px 22px', overflow:'hidden' }}>
          <PulseChatFrame
            mood="happy"
            messages={[
              "Ik vond 4 hoofdstukken in je PDF.",
              "Selecteer wat je wil oefenen — ik haal dáár vragen uit en negeer de rest.",
              "💡 Tip: minder hoofdstukken = scherpere vragen.",
            ]}
          />
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:14, minWidth:0 }}>
            {/* Modus pinned at top, smaller */}
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ fontFamily:NwR2, fontSize:11, color:'#64748B', fontWeight:700 }}>1 · Modus</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'5px 10px', borderRadius:999, background:hexR2('#0096C7',0.10), color:'#0096C7', fontFamily:NwR2, fontSize:11.5, fontWeight:800, border:'1px solid '+hexR2('#0096C7',0.28) }}>
                <window.LucideIcon name="zap" size={12}/> Quiz · 1 credit
              </span>
              <span style={{ marginLeft:'auto', fontFamily:NwR2, fontSize:11, color:'#0096C7', fontWeight:700, cursor:'pointer' }}>wijzigen</span>
            </div>
            {/* Bron */}
            <div>
              <div style={{ fontFamily:FwR2, fontSize:14, color:'#0F172A', marginBottom:8 }}>2 · Bron</div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                <SourceRowPDF filename="Biologie_H3_celdeling.pdf" pages={28} sections={4}/>
                <SectionsSelectorR2
                  items={[
                    { name:'§3.1 · Mitose en celcyclus', count:4 },
                    { name:'§3.2 · Meiose', count:5 },
                    { name:'§3.3 · DNA-replicatie', count:3 },
                    { name:'§3.4 · Foutgevolgen (mutaties)', count:4 },
                  ]}
                  selected={['§3.1 · Mitose en celcyclus', '§3.2 · Meiose']}
                />
              </div>
            </div>
            {/* Type-conflict banner — Snapsnelds component, repositioned */}
            <div style={{
              padding:'12px 14px', background:hexR2('#F59E0B',0.06), border:'1.5px solid '+hexR2('#F59E0B',0.28),
              borderRadius:12, display:'flex', alignItems:'flex-start', gap:10,
            }}>
              <window.LucideIcon name="alert-triangle" size={16} style={{ color:'#D97706', flexShrink:0, marginTop:2 }}/>
              <div style={{ flex:1 }}>
                <div style={{ fontFamily:NwR2, fontSize:12.5, fontWeight:800, color:'#0F172A', marginBottom:3 }}>Andere types gedetecteerd</div>
                <div style={{ fontFamily:NwR2, fontSize:11.5, color:'#475569', lineHeight:1.45, marginBottom:8 }}>
                  §3.2 bevat veel <b>koppelvragen</b> — wil je die toevoegen?
                </div>
                <div style={{ display:'flex', gap:6 }}>
                  <button style={{ padding:'5px 12px', borderRadius:8, background:'#0096C7', color:'#fff', border:'none', fontFamily:NwR2, fontSize:11, fontWeight:800, cursor:'pointer' }}>Ja, voeg toe</button>
                  <button style={{ padding:'5px 12px', borderRadius:8, background:'transparent', color:'#64748B', border:'1px solid #E2E8F0', fontFamily:NwR2, fontSize:11, fontWeight:800, cursor:'pointer' }}>Nee, alleen meerkeuze</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <CostBar mode="quiz" cost={1} count={9} ready={true}/>
      </div>
    </window.Browser>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 03-R2 · Phase 2 LIST-MODE (default)
   Snapsnelds-stijl compacte lijst, status alleen waar nodig.
   ────────────────────────────────────────────────────────── */
function W_R2_Phase2List() {
  const items = [
    { i:1, type:'Begrippen', tColor:'#2563EB', q:'Wat gebeurt er tijdens de S-fase van de celcyclus?', status:'ok' },
    { i:2, type:'Multiple choice', tColor:'#16A34A', q:'Hoeveel chromosomen heeft een menselijke huidcel?', status:'ok' },
    { i:3, type:'Multiple choice', tColor:'#16A34A', q:'Welke fase volgt op de profase?', status:'review', why:'Te makkelijk volgens leerdoel' },
    { i:4, type:'Begrippen', tColor:'#2563EB', q:'Definieer "homologe chromosomen".', status:'ok' },
    { i:5, type:'Invullen', tColor:'#EA580C', q:'In de _______ fase verdubbelt het DNA.', status:'ok' },
    { i:6, type:'Koppelen', tColor:'#DB2777', q:'Koppel celcyclus-fase aan beschrijving.', status:'review', why:'Bevat dubbele juiste antwoorden' },
    { i:7, type:'Multiple choice', tColor:'#16A34A', q:'Wat is het verschil tussen mitose en meiose?', status:'ok' },
    { i:8, type:'Begrippen', tColor:'#2563EB', q:'Wat is "crossing-over"?', status:'ok' },
    { i:9, type:'Invullen', tColor:'#EA580C', q:'Een diploïde cel heeft _____ chromosomensets.', status:'review', why:'Antwoord-veld accepteert alleen "2"' },
    { i:10, type:'Multiple choice', tColor:'#16A34A', q:'Wanneer worden chromatiden gescheiden?', status:'ok' },
    { i:11, type:'Begrippen', tColor:'#2563EB', q:'Definieer "kruislinge bevruchting".', status:'review', why:'Term komt niet voor in geüploade tekst' },
    { i:12, type:'Multiple choice', tColor:'#16A34A', q:'Wat is een gevolg van een non-disjunctie?', status:'ok' },
  ];
  const reviewCount = items.filter(it=>it.status==='review').length;
  return (
    <window.Browser url="snapsnel.nl/maak/12-vragen-celdeling" label="03 · Phase 2 — Lijst-default (synthese)"
      sub="Snapsnelds-stijl lijst voor overview. Status alleen op kaarten die review nodig hebben (4/12). Toggle rechtsboven naar Focus-modus voor inline edit. Confidence-% verborgen in tooltip.">
      <div style={{ flex:1, display:'flex', flexDirection:'column', background:'#F8FAFC', overflow:'hidden' }}>
        {/* Header */}
        <div style={{ padding:'14px 22px 12px', background:'#FFFFFF', borderBottom:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:14 }}>
          <div>
            <div style={{ fontFamily:FwR2, fontSize:18, color:'#0F172A' }}>Celdeling — 12 vragen</div>
            <div style={{ fontFamily:NwR2, fontSize:11.5, color:'#64748B', fontWeight:600, marginTop:2 }}>
              Biologie · HAVO 4 · {reviewCount} kaart{reviewCount!==1?'en':''} hebben aandacht nodig
            </div>
          </div>
          <div style={{ flex:1 }}/>
          {/* View-mode toggle */}
          <div style={{ display:'flex', background:'#F1F5F9', borderRadius:10, padding:3 }}>
            <button style={{ padding:'6px 12px', borderRadius:8, background:'#fff', border:'none', boxShadow:'0 1px 2px rgba(0,0,0,0.06)', fontFamily:NwR2, fontSize:11.5, fontWeight:800, color:'#0F172A', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6 }}>
              <window.LucideIcon name="list" size={13}/> Lijst
            </button>
            <button style={{ padding:'6px 12px', borderRadius:8, background:'transparent', border:'none', fontFamily:NwR2, fontSize:11.5, fontWeight:800, color:'#64748B', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6 }}>
              <window.LucideIcon name="zoom-in" size={13}/> Focus
            </button>
          </div>
        </div>
        {/* List */}
        <div style={{ flex:1, overflowY:'auto', padding:'14px 22px', display:'flex', flexDirection:'column', gap:8 }}>
          {items.map(it => (
            <div key={it.i} style={{
              background:'#FFFFFF', borderRadius:10, padding:'10px 14px 10px 12px',
              borderTop:'1px solid #E2E8F0', borderRight:'1px solid #E2E8F0', borderBottom:'1px solid #E2E8F0',
              borderLeft: '4px solid '+(it.status==='review'?'#F59E0B':'#16A34A'),
              display:'flex', alignItems:'center', gap:12,
            }}>
              <span style={{ fontFamily:FwR2, fontSize:13, color:'#94A3B8', minWidth:24 }}>{String(it.i).padStart(2,'0')}</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:4, padding:'2px 8px', borderRadius:999, background:hexR2(it.tColor, 0.10), color:it.tColor, fontFamily:NwR2, fontSize:10.5, fontWeight:800 }}>
                {it.type}
              </span>
              <span style={{ flex:1, fontFamily:NwR2, fontSize:13, color:'#0F172A', lineHeight:1.4, minWidth:0, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{it.q}</span>
              {it.status==='review' && (
                <span style={{
                  display:'inline-flex', alignItems:'center', gap:4, padding:'3px 9px', borderRadius:999,
                  background:hexR2('#F59E0B',0.10), color:'#D97706',
                  fontFamily:NwR2, fontSize:10.5, fontWeight:800, border:'1px solid '+hexR2('#F59E0B',0.30),
                }} title={it.why}>
                  <window.LucideIcon name="alert-triangle" size={11}/> Review
                </span>
              )}
              <button style={{ padding:'5px 8px', borderRadius:8, background:'transparent', border:'none', color:'#64748B', cursor:'pointer' }}>
                <window.LucideIcon name="more-horizontal" size={15}/>
              </button>
            </div>
          ))}
        </div>
        {/* Footer */}
        <div style={{ padding:'12px 22px', background:'#FFFFFF', borderTop:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:10 }}>
          <button style={{ padding:'8px 14px', borderRadius:10, background:'#fff', border:'1.5px solid #E2E8F0', fontFamily:NwR2, fontSize:12, fontWeight:800, color:'#0F172A', cursor:'pointer', display:'inline-flex', alignItems:'center', gap:6 }}>
            <window.LucideIcon name="zoom-in" size={13}/> Loop {reviewCount} review-kaarten door
          </button>
          <button style={{ padding:'8px 14px', borderRadius:10, background:'#fff', border:'1.5px solid #E2E8F0', fontFamily:NwR2, fontSize:12, fontWeight:800, color:'#0F172A', cursor:'pointer' }}>
            Quiz-info & privacy
          </button>
          <div style={{ flex:1 }}/>
          <span style={{ fontFamily:NwR2, fontSize:11.5, color:'#64748B', fontWeight:700 }}>
            <b style={{ color:'#0F172A' }}>{12-reviewCount}</b> klaar · <b style={{ color:'#D97706' }}>{reviewCount}</b> review
          </span>
          <button style={{ padding:'10px 20px', borderRadius:10, background:'#16A34A', color:'#fff', border:'none', fontFamily:NwR2, fontSize:13, fontWeight:800, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:8 }}>
            <window.LucideIcon name="play" size={14}/> Opslaan & spelen
          </button>
        </div>
      </div>
    </window.Browser>
  );
}

/* ── Export ── */
Object.assign(window, {
  W_R2_Phase1Default,
  W_R2_Phase1MultiChapter,
  W_R2_Phase2List,
});