/* ──────────────────────────────────────────────────────────
   wizard-v15.jsx — DS-conform sidebar + polished R2 states
   ────────────────────────────────────────────────────────── */
const Fw15 = "'Fredoka One', cursive";
const Nw15 = "'Nunito', sans-serif";
const hex15 = (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})`; };

const PILLAR = {
  leren:   '#0096C7',
  oefenen: '#16A34A',
  plannen: '#F59E0B',
};
const PRIMARY = '#0096C7';

/* ── DS-canonical collapsed sidebar (60px) ── */
function DSSidebarCollapsed({ active = 'maker' }) {
  const items = [
    { id:'dashboard', label:'Dashboard',  icon:'layout-grid',     pillar:null },
    { id:'leren',     label:'Leren',      icon:'graduation-cap',  pillar:'leren' },
    { id:'oefenen',   label:'Oefenen',    icon:'target',          pillar:'oefenen' },
    { id:'plannen',   label:'Plannen',    icon:'calendar',        pillar:'plannen' },
    { id:'maker',     label:'Quiz maken', icon:'wand-2',          pillar:null },
    { id:'ranglijst', label:'Ranglijst',  icon:'trophy',          pillar:null },
    { id:'winkel',    label:'Winkel',     icon:'store',           pillar:null },
  ];
  return (
    <aside style={{
      width:60, flexShrink:0, height:'100%', background:'#FFFFFF',
      borderRight:'1px solid #E2E8F0', display:'flex', flexDirection:'column',
      alignItems:'center', padding:'14px 0',
    }}>
      {/* Mini SnapSnel-lockup (S-mark) */}
      <div style={{
        width:36, height:36, borderRadius:10, marginBottom:18,
        background: PRIMARY, display:'flex', alignItems:'center', justifyContent:'center',
        fontFamily:Fw15, fontSize:18, color:'#fff', letterSpacing:-0.5,
      }}>S</div>
      <nav style={{ display:'flex', flexDirection:'column', gap:4, width:'100%', alignItems:'center' }}>
        {items.map(it => {
          const isActive = it.id === active;
          const color = it.pillar ? PILLAR[it.pillar] : PRIMARY;
          return (
            <button key={it.id} title={it.label} style={{
              width:40, height:40, borderRadius:10, border:'none',
              background: isActive ? hex15(color, 0.12) : 'transparent',
              color: isActive ? color : '#94A3B8',
              cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
              position:'relative',
            }}>
              <window.LucideIcon name={it.icon} size={18}/>
              {isActive && (
                <span style={{
                  position:'absolute', right:-1, top:'50%', transform:'translateY(-50%)',
                  width:3, height:18, borderRadius:'2px 0 0 2px', background:color,
                }}/>
              )}
            </button>
          );
        })}
      </nav>
    </aside>
  );
}

/* ── Polished mode-card (gradient + inner-shadow on selected) ── */
function ModeCardV15({ label, color, credits, selected, recommended, sub, icon }) {
  const grad = selected
    ? `linear-gradient(135deg, ${hex15(color,0.10)} 0%, transparent 70%)`
    : `linear-gradient(135deg, ${hex15(color,0.04)} 0%, transparent 60%)`;
  return (
    <div style={{
      padding:'14px 14px 12px', borderRadius:12, position:'relative',
      background:`${grad}, #FFFFFF`,
      border: selected ? `2px solid ${color}` : '1px solid #E2E8F0',
      boxShadow: selected ? `inset 0 0 0 1px ${hex15(color,0.20)}` : '0 1px 2px rgba(15,23,42,0.04)',
      cursor:'pointer', minWidth:0,
    }}>
      {recommended && (
        <span style={{
          position:'absolute', top:-9, left:14, padding:'2px 8px', borderRadius:999,
          background:'#FEF3C7', color:'#92400E', fontFamily:Nw15, 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 }}>
        <window.LucideIcon name={icon} size={15} style={{ color }}/>
        <span style={{ fontFamily:Nw15, fontSize:13.5, fontWeight:800, color:'#0F172A' }}>{label}</span>
        <span style={{ marginLeft:'auto', fontFamily:Nw15, fontSize:11, fontWeight:700, color, background:hex15(color,0.10), padding:'2px 7px', borderRadius:999 }}>
          {credits} credit{credits>1?'s':''}
        </span>
      </div>
      <div style={{ fontFamily:Nw15, fontSize:11.5, color:'#64748B', lineHeight:1.4 }}>{sub}</div>
    </div>
  );
}

/* ── Pulse chat-frame (260px, slimmer next to sidebar) ── */
function PulseFrame15({ mood='curious', eyeAnimation='blink', messages=[] }) {
  return (
    <div style={{
      width:260, background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:12,
      display:'flex', flexDirection:'column', overflow:'hidden',
      boxShadow:'0 1px 2px rgba(15,23,42,0.04)', alignSelf:'flex-start',
    }}>
      <div style={{ padding:'12px 14px 8px', borderBottom:'1px solid #F1F5F9', display:'flex', alignItems:'center', gap:8 }}>
        <window.PulseMascot variant="strike" mood={mood} size="sm" eyeAnimation={eyeAnimation}/>
        <div>
          <div style={{ fontFamily:Fw15, fontSize:13, color:'#0F172A' }}>Pulse</div>
          <div style={{ fontFamily:Nw15, fontSize:10, color:'#16A34A', fontWeight:700, display:'flex', alignItems:'center', gap:4 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'#16A34A' }}/>online
          </div>
        </div>
      </div>
      <div style={{ padding:'12px 12px 14px', display:'flex', flexDirection:'column', gap:8 }}>
        {messages.map((m, i) => (
          <div key={i} style={{
            background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:'10px 10px 10px 4px',
            padding:'8px 10px', fontFamily:Nw15, fontSize:12, color:'#334155', lineHeight:1.5,
          }}>{m}</div>
        ))}
      </div>
    </div>
  );
}

/* ── Cost-bar ── */
function CostBar15({ mode='quiz', cost=1, count=12, ready=true }) {
  const m = { quiz:{label:'Quiz', color:PRIMARY}, 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:Nw15, fontSize:12.5, fontWeight:700, color:'#64748B' }}>Kost</span>
        <span style={{ fontFamily:Fw15, fontSize:18, color:m.color }}>{cost}</span>
        <span style={{ fontFamily:Nw15, fontSize:11.5, color:'#64748B' }}>credit{cost>1?'s':''}</span>
      </div>
      <div style={{ width:1, height:22, background:'#E2E8F0' }}/>
      <div style={{ fontFamily:Nw15, 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:Nw15, fontSize:13, fontWeight:800,
      }}>
        <window.LucideIcon name="zap" size={14}/> Maak {count} vragen
      </button>
    </div>
  );
}

/* ── Frame wrapper (1280×720 with DS sidebar + topbar) ── */
function V15Frame({ label, sub, children }) {
  return (
    <div style={{
      width:1280, height:720, background:'#F8FAFC', display:'flex', flexDirection:'column',
      borderRadius:14, overflow:'hidden', border:'1px solid #CBD5E1',
      fontFamily:Nw15,
    }}>
      {/* Mini topbar showing context */}
      <div style={{ padding:'10px 18px', background:'#FFFFFF', borderBottom:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:10 }}>
        <span style={{ fontFamily:Nw15, fontSize:11, color:'#64748B', fontWeight:700, padding:'3px 9px', background:'#F1F5F9', borderRadius:6 }}>snapsnel.nl/maak</span>
        <span style={{ fontFamily:Nw15, fontSize:12, color:'#0F172A', fontWeight:700 }}>{label}</span>
        {sub && <span style={{ fontFamily:Nw15, fontSize:11, color:'#94A3B8', fontWeight:600 }}>· {sub}</span>}
      </div>
      <div style={{ flex:1, display:'flex', overflow:'hidden' }}>
        <DSSidebarCollapsed active="maker"/>
        {children}
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 01-V15 · Phase 1 default — DS sidebar + Pulse-frame + 3 regions
   ────────────────────────────────────────────────────────── */
function W_V15_Phase1Default() {
  return (
    <V15Frame label="Phase 1 default" sub="DS-sidebar collapsed (60px) · active=maker · Pulse-frame anchor · 3 regio's tegelijk">
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
        <div style={{ flex:1, display:'flex', gap:16, padding:'16px 20px', overflow:'auto' }}>
          <PulseFrame15
            mood="happy"
            eyeAnimation="lookAround"
            messages={[
              "Hé! Wat ga je vandaag oefenen?",
              "Tip: kies eerst je modus — dan zie ik direct hoeveel credits 't kost.",
            ]}
          />
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:16, minWidth:0 }}>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                <span style={{ fontFamily:Fw15, fontSize:15, color:'#0F172A' }}>1 · Modus</span>
                <span style={{ fontFamily:Nw15, fontSize:10.5, color:'#64748B', fontWeight:700 }}>Bepaalt diepgang &amp; credits</span>
              </div>
              <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:12 }}>
                <ModeCardV15 label="Quiz" icon="zap" color={PRIMARY} credits={1} selected recommended sub="Dagelijks oefenen, 5 min."/>
                <ModeCardV15 label="Oefentoets" icon="graduation-cap" color="#16A34A" credits={2} sub="Voor de toets, 20 min."/>
                <ModeCardV15 label="Examensim" icon="shield" color="#023E8A" credits={3} sub="Examen-realisme, 90 min."/>
              </div>
            </div>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                <span style={{ fontFamily:Fw15, fontSize:15, color:'#0F172A' }}>2 · Bron</span>
                <span style={{ fontFamily:Nw15, fontSize:10.5, color:'#64748B', fontWeight:700 }}>Foto, PDF of plak tekst</span>
              </div>
              <div style={{
                padding:'24px 16px', borderRadius:12, background:'#FFFFFF',
                border:'1.5px dashed #CBD5E1', textAlign:'center', position:'relative',
              }}>
                {/* Ghost illustration */}
                <div style={{ display:'flex', justifyContent:'center', marginBottom:10, opacity:0.55 }}>
                  <svg width="64" height="48" viewBox="0 0 64 48" fill="none">
                    <rect x="6" y="8" width="32" height="38" rx="3" stroke="#CBD5E1" strokeWidth="1.5" fill="#F8FAFC"/>
                    <line x1="12" y1="18" x2="32" y2="18" stroke="#CBD5E1" strokeWidth="1.2"/>
                    <line x1="12" y1="24" x2="28" y2="24" stroke="#CBD5E1" strokeWidth="1.2"/>
                    <line x1="12" y1="30" x2="30" y2="30" stroke="#CBD5E1" strokeWidth="1.2"/>
                    <rect x="22" y="2" width="36" height="36" rx="3" fill="#FFFFFF" stroke="#CBD5E1" strokeWidth="1.5" transform="rotate(8 40 20)"/>
                  </svg>
                </div>
                <div style={{ display:'flex', justifyContent:'center', gap:8, marginBottom:8 }}>
                  <button style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'8px 14px', borderRadius:10, background:PRIMARY, border:'none', color:'#fff', fontFamily:Nw15, 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:Nw15, 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:Nw15, fontSize:12, fontWeight:800, cursor:'pointer' }}>
                    <window.LucideIcon name="type" size={13}/> Plak tekst
                  </button>
                </div>
                <div style={{ fontFamily:Nw15, fontSize:11.5, color:'#94A3B8' }}>… of sleep een bestand in dit vak</div>
              </div>
            </div>
            <div>
              <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
                <span style={{ fontFamily:Fw15, fontSize:15, color:'#0F172A' }}>3 · Scope</span>
                <span style={{ fontFamily:Nw15, fontSize:10.5, color:'#64748B', fontWeight:700 }}>Aantal &amp; types</span>
              </div>
              <div style={{ display:'flex', gap:12 }}>
                <div style={{ flex:1, padding:'12px 16px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:12 }}>
                  <div style={{ fontFamily:Nw15, 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:Fw15, fontSize:18, color:PRIMARY, minWidth:24, textAlign:'right' }}>12</span>
                  </div>
                </div>
                <div style={{ flex:1, padding:'12px 16px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:12 }}>
                  <div style={{ fontFamily:Nw15, fontSize:11, color:'#64748B', fontWeight:700, marginBottom:6 }}>Types</div>
                  <div style={{ display:'flex', alignItems:'center', gap:6, fontFamily:Nw15, fontSize:11.5, color:'#0F172A', fontWeight:700 }}>
                    <window.LucideIcon name="sparkles" size={12} style={{ color:'#D97706' }}/>
                    Pulse kiest slim
                    <span style={{ marginLeft:'auto', fontFamily:Nw15, fontSize:10.5, color:'#64748B', fontWeight:700, cursor:'pointer' }}>aanpassen ↓</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <CostBar15 mode="quiz" cost={1} count={12} ready={false}/>
      </div>
    </V15Frame>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 02-V15 · Multi-chapter PDF — TypeConflictBanner INLINE in keuze-zone
   ────────────────────────────────────────────────────────── */
function W_V15_Phase1MultiChapter() {
  return (
    <V15Frame label="Phase 1 — multi-chapter PDF" sub="SectionsSummary in Bron-regio · TypeConflict INLINE bij selectie (verplaatst van chat-frame)">
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
        <div style={{ flex:1, display:'flex', gap:16, padding:'16px 20px', overflow:'auto' }}>
          <PulseFrame15
            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.",
              "💡 Minder hoofdstukken = scherpere vragen.",
            ]}
          />
          <div style={{ flex:1, display:'flex', flexDirection:'column', gap:14, minWidth:0 }}>
            <div style={{ display:'flex', alignItems:'center', gap:10 }}>
              <span style={{ fontFamily:Nw15, fontSize:11, color:'#64748B', fontWeight:700 }}>1 · Modus</span>
              <span style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'5px 10px', borderRadius:999, background:hex15(PRIMARY,0.10), color:PRIMARY, fontFamily:Nw15, fontSize:11.5, fontWeight:800, border:'1px solid '+hex15(PRIMARY,0.28) }}>
                <window.LucideIcon name="zap" size={12}/> Quiz · 1 credit
              </span>
              <span style={{ marginLeft:'auto', fontFamily:Nw15, fontSize:11, color:PRIMARY, fontWeight:700, cursor:'pointer' }}>wijzigen</span>
            </div>
            <div>
              <div style={{ fontFamily:Fw15, fontSize:14, color:'#0F172A', marginBottom:8 }}>2 · Bron</div>
              <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                <div style={{ padding:'10px 14px', borderRadius:10, background:'#FFFFFF', border:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:12 }}>
                  <div style={{ width:32, height:40, background:'#FEE2E2', border:'1px solid #FCA5A5', borderRadius:6, display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <window.LucideIcon name="file-text" size={16} style={{ color:'#DC2626' }}/>
                  </div>
                  <div style={{ flex:1 }}>
                    <div style={{ fontFamily:Nw15, fontSize:12.5, fontWeight:800, color:'#0F172A' }}>Biologie_H3_celdeling.pdf</div>
                    <div style={{ fontFamily:Nw15, fontSize:11, color:'#64748B', fontWeight:600 }}>28 pagina's · 4 hoofdstukken gedetecteerd</div>
                  </div>
                  <button style={{ padding:'6px 10px', borderRadius:8, border:'1px solid #E2E8F0', background:'#fff', fontFamily:Nw15, fontSize:11, fontWeight:700, color:'#64748B', cursor:'pointer' }}>Vervangen</button>
                </div>
                {/* Sections selector */}
                <div style={{ background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:12, padding:'12px 14px' }}>
                  <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
                    <span style={{ fontFamily:Nw15, fontSize:12, fontWeight:800, color:'#0F172A' }}>Welke hoofdstukken?</span>
                    <span style={{ fontFamily:Nw15, fontSize:10, fontWeight:700, color:PRIMARY, background:hex15(PRIMARY, 0.10), padding:'2px 7px', borderRadius:999 }}>Snapsnelds 1:1</span>
                    <div style={{ marginLeft:'auto', display:'flex', gap:6, fontFamily:Nw15, fontSize:11 }}>
                      <button style={{ background:'transparent', border:'none', fontWeight:700, color:PRIMARY, cursor:'pointer' }}>Alles</button>
                      <span style={{ color:'#CBD5E1' }}>·</span>
                      <button style={{ background:'transparent', border:'none', fontWeight:700, color:PRIMARY, cursor:'pointer' }}>Geen</button>
                    </div>
                  </div>
                  <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                    {[
                      { name:'§3.1 · Mitose en celcyclus', count:4, sel:true },
                      { name:'§3.2 · Meiose', count:5, sel:true },
                      { name:'§3.3 · DNA-replicatie', count:3, sel:false },
                      { name:'§3.4 · Foutgevolgen (mutaties)', count:4, sel:false },
                    ].map(it => (
                      <div key={it.name} style={{
                        display:'flex', alignItems:'center', gap:10, padding:'8px 10px', borderRadius:8,
                        border: it.sel ? '2px solid '+hex15('#3B82F6',0.4) : '1.5px solid #E2E8F0',
                        background: it.sel ? hex15('#3B82F6',0.04) : 'transparent',
                      }}>
                        <div style={{
                          width:16, height:16, borderRadius:4,
                          background: it.sel ? '#3B82F6' : 'transparent', border: it.sel?'none':'2px solid #CBD5E1',
                          display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0,
                        }}>{it.sel && <window.LucideIcon name="check" size={11} style={{ color:'#fff' }}/>}</div>
                        <span style={{ fontFamily:Nw15, fontSize:12, fontWeight:700, color:'#0F172A', flex:1 }}>{it.name}</span>
                        <span style={{ fontFamily:Nw15, fontSize:11, color:'#64748B', fontWeight:600 }}>~{it.count} vragen</span>
                      </div>
                    ))}
                  </div>
                  {/* INLINE TypeConflict — verplaatst naar keuze-zone (v15) */}
                  <div style={{
                    marginTop:10, padding:'10px 12px', background:hex15('#F59E0B',0.06),
                    border:'1.5px solid '+hex15('#F59E0B',0.28), borderRadius:10,
                    display:'flex', alignItems:'flex-start', gap:8,
                  }}>
                    <window.LucideIcon name="alert-triangle" size={14} style={{ color:'#D97706', flexShrink:0, marginTop:2 }}/>
                    <div style={{ flex:1 }}>
                      <div style={{ fontFamily:Nw15, fontSize:12, fontWeight:800, color:'#0F172A', marginBottom:2 }}>Andere types gedetecteerd</div>
                      <div style={{ fontFamily:Nw15, fontSize:11, color:'#475569', lineHeight:1.4, marginBottom:6 }}>
                        §3.2 bevat veel <b>koppelvragen</b> — wil je die toevoegen?
                      </div>
                      <div style={{ display:'flex', gap:6 }}>
                        <button style={{ padding:'4px 10px', borderRadius:6, background:PRIMARY, color:'#fff', border:'none', fontFamily:Nw15, fontSize:10.5, fontWeight:800, cursor:'pointer' }}>Ja, voeg toe</button>
                        <button style={{ padding:'4px 10px', borderRadius:6, background:'transparent', color:'#64748B', border:'1px solid #E2E8F0', fontFamily:Nw15, fontSize:10.5, fontWeight:800, cursor:'pointer' }}>Nee, alleen meerkeuze</button>
                      </div>
                    </div>
                  </div>
                  <div style={{ marginTop:10, paddingTop:10, borderTop:'1px solid #F1F5F9', fontFamily:Nw15, fontSize:11, color:'#64748B' }}>
                    2/4 geselecteerd · <b style={{ color:'#0F172A' }}>~9 vragen</b>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <CostBar15 mode="quiz" cost={1} count={9} ready={true}/>
      </div>
    </V15Frame>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 03-V15 · Phase 2 LIST-MODE met first-time tooltip
   ────────────────────────────────────────────────────────── */
function W_V15_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' },
    { 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' },
    { 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' },
    { 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' },
    { i:12, type:'Multiple choice', tColor:'#16A34A', q:'Wat is een gevolg van een non-disjunctie?', status:'ok' },
  ];
  const reviewCount = 4;
  return (
    <V15Frame label="Phase 2 default — Lijst-modus" sub="Snapsnelds-stijl lijst · status alleen op review-kaarten · first-time tooltip → Focus">
      <div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden' }}>
        <div style={{ padding:'14px 22px 12px', background:'#FFFFFF', borderBottom:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:14 }}>
          <div>
            <div style={{ fontFamily:Fw15, fontSize:18, color:'#0F172A' }}>Celdeling — 12 vragen</div>
            <div style={{ fontFamily:Nw15, fontSize:11.5, color:'#64748B', fontWeight:600, marginTop:2 }}>
              Biologie · HAVO 4 · {reviewCount} kaarten hebben aandacht nodig
            </div>
          </div>
          <div style={{ flex:1 }}/>
          <div style={{ display:'flex', background:'#F1F5F9', borderRadius:10, padding:3, position:'relative' }}>
            <button style={{ padding:'6px 12px', borderRadius:8, background:'#fff', border:'none', boxShadow:'0 1px 2px rgba(0,0,0,0.06)', fontFamily:Nw15, 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:Nw15, 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>
            {/* first-time tooltip */}
            <div style={{
              position:'absolute', top:'calc(100% + 8px)', right:0,
              padding:'8px 12px', borderRadius:10, background:'#0F172A', color:'#fff',
              fontFamily:Nw15, fontSize:11, fontWeight:700, whiteSpace:'nowrap',
              boxShadow:'0 4px 12px rgba(0,0,0,0.15)',
            }}>
              💡 Klik op een vraag voor focus-modus
              <div style={{ position:'absolute', top:-5, right:38, width:10, height:10, background:'#0F172A', transform:'rotate(45deg)' }}/>
            </div>
          </div>
        </div>
        <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:Fw15, 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:hex15(it.tColor, 0.10), color:it.tColor, fontFamily:Nw15, fontSize:10.5, fontWeight:800 }}>
                {it.type}
              </span>
              <span style={{ flex:1, fontFamily:Nw15, 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:hex15('#F59E0B',0.10), color:'#D97706',
                  fontFamily:Nw15, fontSize:10.5, fontWeight:800, border:'1px solid '+hex15('#F59E0B',0.30),
                }}>
                  <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>
        <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:Nw15, 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:Nw15, fontSize:12, fontWeight:800, color:'#0F172A', cursor:'pointer' }}>
            Quiz-info &amp; privacy
          </button>
          <div style={{ flex:1 }}/>
          <span style={{ fontFamily:Nw15, 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:Nw15, fontSize:13, fontWeight:800, cursor:'pointer', display:'inline-flex', alignItems:'center', gap:8 }}>
            <window.LucideIcon name="play" size={14}/> Opslaan &amp; spelen
          </button>
        </div>
      </div>
    </V15Frame>
  );
}

Object.assign(window, {
  W_V15_Phase1Default,
  W_V15_Phase1MultiChapter,
  W_V15_Phase2List,
});