/* wizard.jsx — Brief 05 Ronde 1: AI Wizard sleutel-states (free design, no Snapsnelds reference) */
const { useState: useStateW } = React;

/* ── Local helpers (Browser frame is reused from qweb-v3.jsx via window.Browser) ── */
const Fw = "'Fredoka One', cursive";
const Nw = "'Nunito', sans-serif";
const hexAw = (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})`; };

/* Modus-chrome */
const MODE = {
  quiz:      { label: 'Quiz',         credits: 1, max: 15, color: '#0096C7', icon: 'zap',         tag: 'Dagelijks · 5 min' },
  oefentoets:{ label: 'Oefentoets',   credits: 2, max: 30, color: '#16A34A', icon: 'graduation-cap', tag: 'Voor de toets · 20 min' },
  examensim: { label: 'Examensim',    credits: 3, max: 80, color: '#023E8A', icon: 'shield',      tag: 'Examen-realisme · 90 min' },
};

/* Reuse QTYPE from qweb-v3.jsx (window.QTYPE) but list the 9 here for selection-grid */
const QT_LIST = [
  ['TERM_DEFINITION','Begrippen','book-open','#2563EB','term'],
  ['MULTIPLE_CHOICE','Multiple choice','check-square','#16A34A','mc'],
  ['CONTEXTUAL','Context','file-text','#4F46E5','context'],
  ['FILL_BLANK','Invulvelden','pen-tool','#EA580C','fill'],
  ['MATCHING','Koppelen','link-2','#DB2777','match'],
  ['ORDERING','Volgorde','list-ordered','#0891B2','order'],
  ['IMAGE_BASED','Afbeelding','image','#0D9488','img'],
  ['TABLE_FILL','Tabel','table-2','#7C3AED','tab'],
  ['MULTI_FIELD','Multi-veld','clipboard-list','#D97706','mf'],
];

/* ── Tiny atoms ── */
function Tag({ color, icon, children, soft=true, size=11 }) {
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:5, padding:'4px 9px',
      borderRadius:999, fontSize:size, fontWeight:800, fontFamily:Nw,
      letterSpacing:0.2, color:color,
      background: soft ? hexAw(color,0.10) : color,
      border: `1px solid ${hexAw(color, soft?0.28:0)}`,
    }}>
      {icon && <window.LucideIcon name={icon} size={size+1}/>} {children}
    </span>
  );
}

function Btn({ kind='primary', icon, iconR, children, size='md', style, color }) {
  const sizes = {
    sm: { padding:'6px 12px', fontSize:12 },
    md: { padding:'10px 16px', fontSize:13 },
    lg: { padding:'13px 22px', fontSize:14 },
  };
  const c = color || '#0096C7';
  const kinds = {
    primary: { background:c, color:'#fff', border:'1px solid transparent' },
    ghost:   { background:'transparent', color:'#0F172A', border:'1px solid #E2E8F0' },
    soft:    { background:hexAw(c,0.10), color:c, border:`1px solid ${hexAw(c,0.28)}` },
    danger:  { background:'transparent', color:'#DC2626', border:'1px solid '+hexAw('#DC2626',0.30) },
  };
  return (
    <button style={{
      display:'inline-flex', alignItems:'center', gap:8, fontFamily:Nw, fontWeight:800,
      borderRadius:10, cursor:'pointer', whiteSpace:'nowrap',
      ...sizes[size], ...kinds[kind], ...style,
    }}>
      {icon && <window.LucideIcon name={icon} size={size==='lg'?17:14}/>}
      <span>{children}</span>
      {iconR && <window.LucideIcon name={iconR} size={size==='lg'?17:14}/>}
    </button>
  );
}

/* ── Credits chip (top-right of canvas, persistent) ── */
function CreditsChip({ value=12, max=15 }) {
  const low = value < 3;
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px',
      background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:999,
      fontFamily:Nw, boxShadow:'0 1px 3px rgba(0,0,0,0.06)',
    }}>
      <window.LucideIcon name="sparkles" size={14} style={{color:'#D97706'}}/>
      <span style={{ fontSize:12.5, fontWeight:800, color:low?'#DC2626':'#0F172A' }}>{value}</span>
      <span style={{ fontSize:11.5, fontWeight:700, color:'#64748B' }}>/ {max} credits</span>
    </div>
  );
}

/* ── Pulse coach card (right-rail) ── */
function PulseCoach({ mood='curious', variant='strike', title, body, hint, eyeAnimation='blink' }) {
  return (
    <div style={{
      width: 288, background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:14, padding:'18px 18px 16px',
      display:'flex', flexDirection:'column', gap:10,
      boxShadow:'0 1px 3px rgba(0,0,0,0.06)',
    }}>
      <div style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
        <window.PulseMascot variant={variant} mood={mood} size="md" eyeAnimation={eyeAnimation}/>
        <div style={{ flex:1, minWidth:0, paddingTop:4 }}>
          <div style={{ fontFamily:Fw, fontSize:18, color:'#0F172A', lineHeight:1.15 }}>{title}</div>
          {body && <div style={{ fontFamily:Nw, fontSize:13, color:'#475569', marginTop:6, lineHeight:1.45 }}>{body}</div>}
        </div>
      </div>
      {hint && (
        <div style={{
          fontFamily:Nw, fontSize:12, color:'#64748B', padding:'8px 10px',
          background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:8, lineHeight:1.45,
        }}>
          <window.LucideIcon name="info" size={12} style={{verticalAlign:'-2px', marginRight:6, color:'#94A3B8'}}/>
          {hint}
        </div>
      )}
    </div>
  );
}

/* ── Mode card (Quiz / Oefentoets / Examensim) ── */
function ModeCard({ mode, selected, locked }) {
  const m = MODE[mode];
  return (
    <div style={{
      flex:1, padding:'18px 18px 16px',
      background: selected ? hexAw(m.color, 0.06) : '#FFFFFF',
      border: selected ? `2px solid ${m.color}` : '1px solid #E2E8F0',
      borderRadius:14, position:'relative', cursor: locked?'not-allowed':'pointer',
      opacity: locked ? 0.6 : 1,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
        <div style={{
          width:36, height:36, borderRadius:10, background: hexAw(m.color, 0.14),
          color: m.color, display:'grid', placeItems:'center',
        }}>
          <window.LucideIcon name={m.icon} size={20}/>
        </div>
        <div style={{ fontFamily:Fw, fontSize:20, color:'#0F172A' }}>{m.label}</div>
        {locked && <div style={{ marginLeft:'auto' }}><window.LucideIcon name="lock" size={14} style={{color:'#94A3B8'}}/></div>}
      </div>
      <div style={{ fontFamily:Nw, fontSize:12.5, color:'#64748B', fontWeight:600, marginBottom:14 }}>{m.tag}</div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', paddingTop:12, borderTop:'1px dashed #E2E8F0' }}>
        <div style={{ display:'flex', alignItems:'center', gap:5 }}>
          {Array.from({length:3}).map((_,i)=>(
            <window.LucideIcon key={i} name="sparkles" size={13}
              style={{ color: i < m.credits ? '#D97706' : '#E2E8F0' }} fill={i < m.credits ? '#D97706' : 'none'}/>
          ))}
          <span style={{ fontFamily:Nw, fontSize:11.5, fontWeight:800, color:'#0F172A', marginLeft:4 }}>
            {m.credits} credit{m.credits>1?'s':''}
          </span>
        </div>
        <span style={{ fontFamily:Nw, fontSize:11.5, fontWeight:700, color:'#64748B' }}>max {m.max} vragen</span>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 01 — Phase 1 default: Mode + Source + Scope on one canvas
   ────────────────────────────────────────────────────────── */
function W_Phase1Default() {
  return (
    <window.Browser url="snapsnel.nl/maak/wizard" label="01 · Phase 1 — Eén canvas, geen volgschermen"
      sub="Mode (Quiz/Oefentoets/Examensim), bron, en scope op één scherm. Pulse zit rechts als coach, niet als blokker. Cost-bar onderaan toont impact in real-time.">
      <Phase1Body />
    </window.Browser>
  );
}

function Phase1Body({ selectedMode='quiz', sourceTab='foto', sourceState='empty' }) {
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC' }}>
      {/* Main column */}
      <div style={{ flex:1, padding:'24px 28px 0', overflow:'auto', display:'flex', flexDirection:'column', gap:18 }}>
        {/* Header row */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:11, letterSpacing:1.5, textTransform:'uppercase', color:'#64748B', fontWeight:800, fontFamily:Nw }}>Quiz maken</div>
            <h1 style={{ fontFamily:Fw, fontSize:32, margin:'4px 0 0', color:'#0F172A', lineHeight:1.1 }}>Wat ga je oefenen?</h1>
          </div>
          <CreditsChip value={12} max={15}/>
        </div>

        {/* Section 1 — modus */}
        <Section step="1" title="Modus" sub="Bepaalt hoe lang & hoe diep">
          <div style={{ display:'flex', gap:10 }}>
            <ModeCard mode="quiz" selected={selectedMode==='quiz'}/>
            <ModeCard mode="oefentoets" selected={selectedMode==='oefentoets'} locked={false}/>
            <ModeCard mode="examensim" selected={selectedMode==='examensim'} locked={true}/>
          </div>
        </Section>

        {/* Section 2 — bron (Foto / PDF / Tekst) */}
        <Section step="2" title="Bron" sub="Foto, PDF, of plak je tekst">
          <SourceTabs active={sourceTab}/>
          <SourcePanel tab={sourceTab} state={sourceState}/>
        </Section>

        {/* Section 3 — scope */}
        <Section step="3" title="Scope" sub="Vak · niveau · aantal vragen">
          <ScopeRow/>
        </Section>

        {/* Spacer for sticky footer */}
        <div style={{ height:88 }}/>
      </div>

      {/* Right rail */}
      <div style={{ width: 320, padding:'24px 22px 0', borderLeft:'1px solid #E2E8F0', background:'#FFFFFF', display:'flex', flexDirection:'column', gap:14 }}>
        <PulseCoach
          variant="strike" mood="curious" eyeAnimation="lookAround"
          title="Wat heb je voor me?"
          body="Gooi een foto van je schrift, een PDF, of plak tekst. Ik maak er vragen van — jij keurt ze."
          hint="Tip: een rustige scan-foto werkt beter dan een schuine snel-foto."
        />
        <div style={{
          padding:14, background:'#F8FAFC', border:'1px dashed #E2E8F0', borderRadius:12, fontFamily:Nw,
        }}>
          <div style={{ fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.6, textTransform:'uppercase', marginBottom:8 }}>Privacy</div>
          <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:12.5, color:'#0F172A', fontWeight:700 }}>
            <window.LucideIcon name="lock" size={13} style={{color:'#16A34A'}}/>
            Privé — alleen jij ziet 'm
          </div>
          <div style={{ fontSize:11.5, color:'#64748B', marginTop:6, lineHeight:1.45 }}>
            Publiek delen kan na het keuren — verdient extra Snaps.
          </div>
        </div>
      </div>

      {/* Sticky cost-bar footer (overlaps both columns) */}
      <CostBar mode={selectedMode} count={10} hasInput={false}/>
    </div>
  );
}

/* ── Step section header ── */
function Section({ step, title, sub, children }) {
  return (
    <div>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
        <div style={{
          width:24, height:24, borderRadius:12, background:'#0F172A', color:'#fff',
          display:'grid', placeItems:'center', fontFamily:Nw, fontWeight:900, fontSize:12,
        }}>{step}</div>
        <div style={{ fontFamily:Nw, fontWeight:800, fontSize:15, color:'#0F172A' }}>{title}</div>
        <div style={{ fontFamily:Nw, fontSize:12.5, color:'#64748B', fontWeight:600 }}>· {sub}</div>
      </div>
      {children}
    </div>
  );
}

/* ── Source tabs (Foto / PDF / Tekst) ── */
function SourceTabs({ active='foto' }) {
  const tabs = [
    { id:'foto', icon:'camera', label:'Foto', sub:'jpg/png · tot 10 MB' },
    { id:'pdf',  icon:'file-text', label:'PDF',  sub:'tot 50 pagina\'s' },
    { id:'text', icon:'type', label:'Tekst plakken', sub:'tot 8000 tekens' },
  ];
  return (
    <div style={{ display:'flex', gap:8, marginBottom:12 }}>
      {tabs.map(t => {
        const sel = t.id === active;
        return (
          <div key={t.id} style={{
            flex:1, padding:'10px 12px', borderRadius:10, cursor:'pointer',
            background: sel ? '#FFFFFF' : '#F1F5F9',
            border: `1px solid ${sel ? '#0096C7' : '#E2E8F0'}`,
            display:'flex', alignItems:'center', gap:10,
          }}>
            <window.LucideIcon name={t.icon} size={16} style={{ color: sel ? '#0096C7' : '#64748B' }}/>
            <div>
              <div style={{ fontFamily:Nw, fontWeight:800, fontSize:13, color: sel ? '#0F172A' : '#475569' }}>{t.label}</div>
              <div style={{ fontFamily:Nw, fontSize:11, color:'#94A3B8', fontWeight:600 }}>{t.sub}</div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

/* ── Source panel (drop-zone or preview) ── */
function SourcePanel({ tab='foto', state='empty' }) {
  if (tab === 'foto' && state === 'empty') {
    return (
      <div style={{
        height:180, borderRadius:12, background:'#FFFFFF',
        border:'2px dashed #CBD5E1', display:'flex', alignItems:'center', justifyContent:'center', gap:32,
      }}>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
          <div style={{ width:44, height:44, borderRadius:12, background:hexAw('#0096C7',0.10), color:'#0096C7', display:'grid', placeItems:'center' }}>
            <window.LucideIcon name="camera" size={22}/>
          </div>
          <Btn icon="camera" size="md">Maak foto</Btn>
          <span style={{ fontFamily:Nw, fontSize:11, color:'#94A3B8', fontWeight:700 }}>met je telefoon</span>
        </div>
        <div style={{ width:1, height:80, background:'#E2E8F0' }}/>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:8 }}>
          <div style={{ width:44, height:44, borderRadius:12, background:'#F1F5F9', color:'#64748B', display:'grid', placeItems:'center' }}>
            <window.LucideIcon name="upload" size={22}/>
          </div>
          <Btn icon="upload" size="md" kind="ghost">Sleep hierheen</Btn>
          <span style={{ fontFamily:Nw, fontSize:11, color:'#94A3B8', fontWeight:700 }}>of klik om te kiezen</span>
        </div>
      </div>
    );
  }
  if (tab === 'foto' && state === 'preview') {
    return (
      <div style={{
        padding:14, borderRadius:12, background:'#FFFFFF', border:'1px solid #E2E8F0',
        display:'flex', gap:14,
      }}>
        <FakeNotePhoto/>
        <div style={{ flex:1, display:'flex', flexDirection:'column', gap:8 }}>
          <div style={{ display:'flex', alignItems:'center', gap:8 }}>
            <window.LucideIcon name="check-circle-2" size={16} style={{color:'#16A34A'}}/>
            <span style={{ fontFamily:Nw, fontWeight:800, fontSize:13.5, color:'#0F172A' }}>schrift_bio_h3.jpg</span>
            <span style={{ fontFamily:Nw, fontSize:11.5, color:'#94A3B8', fontWeight:700 }}>· 2.4 MB</span>
          </div>
          <div style={{ fontFamily:Nw, fontSize:12.5, color:'#475569', lineHeight:1.5 }}>
            Tekst herkend: <b>~480 woorden</b> · onderwerp lijkt op <b>celdeling</b>.
          </div>
          <div style={{ display:'flex', gap:8, marginTop:'auto' }}>
            <Btn kind="ghost" size="sm" icon="rotate-ccw">Andere foto</Btn>
            <Btn kind="ghost" size="sm" icon="crop">Bijsnijden</Btn>
          </div>
        </div>
      </div>
    );
  }
  return null;
}

/* ── Fake hand-written note photo placeholder ── */
function FakeNotePhoto() {
  return (
    <div style={{
      width:140, height:120, borderRadius:10, overflow:'hidden', position:'relative',
      background:'linear-gradient(135deg,#FEF3C7,#FDE68A)', flexShrink:0,
      boxShadow:'0 1px 4px rgba(0,0,0,0.08)',
    }}>
      <div style={{ position:'absolute', inset:'12px 14px', display:'flex', flexDirection:'column', gap:6 }}>
        {[100,80,90,70,55,85,60].map((w,i) => (
          <div key={i} style={{ height:3, width:`${w}%`, background:'#92400E', opacity:0.5, borderRadius:2 }}/>
        ))}
      </div>
      <div style={{ position:'absolute', top:8, right:10, fontFamily:Fw, fontSize:11, color:'#92400E', opacity:0.6 }}>H3</div>
    </div>
  );
}

/* ── Scope row: vak · niveau · aantal vragen ── */
function ScopeRow({ vak='Biologie', vakColor='#16A34A', niveau='HAVO 4', count=10, mode='quiz' }) {
  const max = MODE[mode].max;
  return (
    <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
      <Field label="Vak">
        <FieldChip color={vakColor} icon="leaf">{vak}</FieldChip>
      </Field>
      <Field label="Niveau">
        <FieldChip>{niveau}</FieldChip>
      </Field>
      <Field label={`Aantal vragen — max ${max}`} grow>
        <CountSlider value={count} max={max}/>
      </Field>
      <Field label="Vraagtypen">
        <FieldChip icon="sparkles" color="#7C3AED">Pulse kiest slim</FieldChip>
      </Field>
    </div>
  );
}

function Field({ label, grow, children }) {
  return (
    <div style={{ flex: grow ? 1 : '0 0 auto', minWidth:160, display:'flex', flexDirection:'column', gap:6 }}>
      <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase' }}>{label}</div>
      {children}
    </div>
  );
}
function FieldChip({ children, color='#0F172A', icon }) {
  return (
    <div style={{
      padding:'9px 12px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:10,
      display:'flex', alignItems:'center', gap:8, fontFamily:Nw, fontSize:13, fontWeight:700, color:'#0F172A', cursor:'pointer',
    }}>
      {icon && <window.LucideIcon name={icon} size={14} style={{color}}/>}
      <span>{children}</span>
      <window.LucideIcon name="chevron-down" size={14} style={{ marginLeft:'auto', color:'#94A3B8' }}/>
    </div>
  );
}
function CountSlider({ value=10, max=15 }) {
  const pct = (value/max)*100;
  return (
    <div style={{ padding:'8px 12px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:10, display:'flex', alignItems:'center', gap:12 }}>
      <span style={{ fontFamily:Fw, fontSize:18, color:'#0096C7', minWidth:24 }}>{value}</span>
      <div style={{ flex:1, height:6, borderRadius:3, background:'#F1F5F9', position:'relative' }}>
        <div style={{ position:'absolute', inset:'0 auto 0 0', width:`${pct}%`, background:'linear-gradient(90deg,#0096C7,#00B4D8)', borderRadius:3 }}/>
        <div style={{ position:'absolute', top:-4, left:`calc(${pct}% - 7px)`, width:14, height:14, borderRadius:7, background:'#FFFFFF', border:'2px solid #0096C7', boxShadow:'0 1px 3px rgba(0,0,0,0.10)' }}/>
      </div>
      <span style={{ fontFamily:Nw, fontSize:11, fontWeight:700, color:'#94A3B8' }}>/ {max}</span>
    </div>
  );
}

/* ── Sticky cost-bar (bottom) ── */
function CostBar({ mode='quiz', count=10, hasInput=false, ready=true }) {
  const m = MODE[mode];
  return (
    <div style={{
      position:'absolute', left:0, right:0, bottom:0, padding:'14px 28px',
      background:'rgba(255,255,255,0.96)', backdropFilter:'blur(8px)', borderTop:'1px solid #E2E8F0',
      display:'flex', alignItems:'center', gap:14,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:10 }}>
        <Tag color={m.color} icon={m.icon}>{m.label}</Tag>
        <span style={{ fontFamily:Nw, fontSize:12.5, color:'#475569', fontWeight:700 }}>{count} vragen</span>
      </div>
      <div style={{ width:1, height:24, background:'#E2E8F0' }}/>
      <div style={{ display:'flex', alignItems:'center', gap:6 }}>
        <window.LucideIcon name="sparkles" size={14} style={{color:'#D97706'}}/>
        <span style={{ fontFamily:Fw, fontSize:18, color:'#0F172A' }}>{m.credits}</span>
        <span style={{ fontFamily:Nw, fontSize:12, fontWeight:700, color:'#64748B' }}>credit{m.credits>1?'s':''} · houd je {12 - m.credits} over</span>
      </div>
      <div style={{ flex:1 }}/>
      <Btn kind="ghost" size="md">Annuleer</Btn>
      <Btn size="lg" iconR="arrow-right" color={m.color}
        style={{ opacity: ready ? 1 : 0.45, cursor: ready ? 'pointer' : 'not-allowed' }}>
        Maak {count} vragen
      </Btn>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 02 — Phase 1 with foto-preview filled
   ────────────────────────────────────────────────────────── */
function W_Phase1Filled() {
  return (
    <window.Browser url="snapsnel.nl/maak/wizard" label="02 · Foto herkend → klaar voor generate"
      sub="Foto-preview met OCR-feedback (woordcount + onderwerp-detectie). Pulse bevestigt waar 't over gaat. Cost-bar wordt actief.">
      <Phase1FilledBody/>
    </window.Browser>
  );
}
function Phase1FilledBody() {
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC' }}>
      <div style={{ flex:1, padding:'24px 28px 0', overflow:'auto', display:'flex', flexDirection:'column', gap:18 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div>
            <div style={{ fontSize:11, letterSpacing:1.5, textTransform:'uppercase', color:'#64748B', fontWeight:800, fontFamily:Nw }}>Quiz maken</div>
            <h1 style={{ fontFamily:Fw, fontSize:32, margin:'4px 0 0', color:'#0F172A', lineHeight:1.1 }}>Wat ga je oefenen?</h1>
          </div>
          <CreditsChip value={12} max={15}/>
        </div>
        <Section step="1" title="Modus" sub="Bepaalt hoe lang & hoe diep">
          <div style={{ display:'flex', gap:10 }}>
            <ModeCard mode="quiz" selected/>
            <ModeCard mode="oefentoets"/>
            <ModeCard mode="examensim" locked/>
          </div>
        </Section>
        <Section step="2" title="Bron" sub="Foto · biologie schrift">
          <SourceTabs active="foto"/>
          <SourcePanel tab="foto" state="preview"/>
        </Section>
        <Section step="3" title="Scope" sub="Vak · niveau · aantal vragen">
          <ScopeRow count={12}/>
        </Section>
        <div style={{ height:88 }}/>
      </div>
      <div style={{ width:320, padding:'24px 22px 0', borderLeft:'1px solid #E2E8F0', background:'#FFFFFF', display:'flex', flexDirection:'column', gap:14 }}>
        <PulseCoach
          variant="strike" mood="thinking" eyeAnimation="peekUp"
          title="Celdeling, denk ik?"
          body="Ik herken termen als mitose en cytokinese. Klopt het? Dan ga ik er vragen van maken."
          hint="Niet wat je verwacht? Pas het vak aan rechtsonder bij Scope."
        />
        <div style={{
          padding:14, background:hexAw('#16A34A',0.06), border:'1px solid '+hexAw('#16A34A',0.20),
          borderRadius:12, fontFamily:Nw,
        }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, fontSize:12.5, color:'#16A34A', fontWeight:800 }}>
            <window.LucideIcon name="check-circle-2" size={14}/>
            Eigen materiaal — OK
          </div>
          <div style={{ fontSize:11.5, color:'#475569', marginTop:6, lineHeight:1.45 }}>
            Geen uitgevers-content gedetecteerd. Je mag dit straks publiek delen.
          </div>
        </div>
      </div>
      <CostBar mode="quiz" count={12} hasInput ready/>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 03 — Low credits paywall (modus-keuze valt op Examensim)
   ────────────────────────────────────────────────────────── */
function W_LowCredits() {
  return (
    <window.Browser url="snapsnel.nl/maak/wizard" label="03 · Te weinig credits → soft paywall"
      sub="Geen frustrerende grijs-modal. Alternatief (Quiz=1) prominent, upgrade-pad helder, geen FOMO-timer.">
      <LowCreditsBody/>
    </window.Browser>
  );
}
function LowCreditsBody() {
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC', position:'relative' }}>
      <div style={{ flex:1, padding:'24px 28px 0', display:'flex', flexDirection:'column', gap:18, opacity:0.45, pointerEvents:'none' }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <h1 style={{ fontFamily:Fw, fontSize:32, margin:0, color:'#0F172A' }}>Wat ga je oefenen?</h1>
          <CreditsChip value={2} max={15}/>
        </div>
        <Section step="1" title="Modus" sub="">
          <div style={{ display:'flex', gap:10 }}>
            <ModeCard mode="quiz"/>
            <ModeCard mode="oefentoets" selected/>
            <ModeCard mode="examensim" locked/>
          </div>
        </Section>
      </div>
      {/* Soft paywall sheet — appears bottom-right, NOT modal */}
      <div style={{
        position:'absolute', right:24, bottom:24, width:420, padding:'20px 22px',
        background:'#FFFFFF', borderRadius:16, border:'1px solid #E2E8F0',
        boxShadow:'0 16px 48px rgba(0,0,0,0.18)', display:'flex', flexDirection:'column', gap:14,
      }}>
        <div style={{ display:'flex', alignItems:'flex-start', gap:12 }}>
          <window.PulseMascot variant="strike" mood="encouraging-warm" size="md"/>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:Fw, fontSize:20, color:'#0F172A', lineHeight:1.15 }}>2 credits is net te weinig</div>
            <div style={{ fontFamily:Nw, fontSize:13, color:'#475569', marginTop:6, lineHeight:1.45 }}>
              Een Oefentoets kost 2, en je hebt er 2 — maar daarna ben je leeg. Wil je dat zo?
            </div>
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
          <SwapOption icon="zap" color="#0096C7" title="Maak een Quiz (1 credit)" sub="Korte versie — houd je 1 over voor morgen" primary/>
          <SwapOption icon="trending-up" color="#D97706" title="Krijg 30 credits per maand" sub="Premium · €4,99 — onbeperkt voelt rustiger"/>
          <SwapOption icon="clock" color="#64748B" title="Wacht — morgen krijg je er 1 gratis" sub="Free-tier reset · 03:00 vannacht"/>
        </div>
      </div>
    </div>
  );
}
function SwapOption({ icon, color, title, sub, primary }) {
  return (
    <div style={{
      padding:'12px 14px', borderRadius:12, cursor:'pointer',
      background: primary ? hexAw(color,0.08) : '#F8FAFC',
      border: `1px solid ${primary ? hexAw(color,0.30) : '#E2E8F0'}`,
      display:'flex', alignItems:'center', gap:12,
    }}>
      <div style={{ width:32, height:32, borderRadius:9, background:hexAw(color,0.14), color, display:'grid', placeItems:'center', flexShrink:0 }}>
        <window.LucideIcon name={icon} size={16}/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontFamily:Nw, fontWeight:800, fontSize:13, color:'#0F172A' }}>{title}</div>
        <div style={{ fontFamily:Nw, fontSize:11.5, color:'#64748B', marginTop:1 }}>{sub}</div>
      </div>
      <window.LucideIcon name="chevron-right" size={16} style={{ color:'#94A3B8' }}/>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 04 — Generation in progress (4-phase narrative)
   ────────────────────────────────────────────────────────── */
function W_Generating() {
  return (
    <window.Browser url="snapsnel.nl/maak/genereer" label="04 · ~30 sec wachten — verhalend, niet ‘AI is working’"
      sub="4 fases (Lezen→Begrijpen→Vragen maken→Controleren) met Pulse encouraging-warm. Cancel altijd binnen handbereik, refund expliciet beloofd.">
      <GenBody/>
    </window.Browser>
  );
}
function GenBody() {
  const phases = [
    { label:'Lezen',           done:true,  hint:'480 woorden' },
    { label:'Begrijpen',       done:true,  hint:'Onderwerp: celdeling' },
    { label:'Vragen maken',    active:true,hint:'7 / 12 klaar' },
    { label:'Controleren',     done:false, hint:'' },
  ];
  return (
    <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', background:'#F8FAFC', position:'relative' }}>
      <div style={{ width:560, padding:'40px 36px 32px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 4px 12px rgba(0,0,0,0.06)' }}>
        <div style={{ display:'flex', flexDirection:'column', alignItems:'center', gap:14 }}>
          <window.PulseMascot variant="strike" mood="encouraging-warm" size="xl" eyeAnimation="lookAround"/>
          <div style={{ fontFamily:Fw, fontSize:26, color:'#0F172A', textAlign:'center' }}>Vragen aan het maken…</div>
          <div style={{ fontFamily:Nw, fontSize:14, color:'#475569', textAlign:'center', maxWidth:380, lineHeight:1.5 }}>
            Ik ben halverwege — nog ongeveer 12 seconden.
          </div>
        </div>
        {/* Phase strip */}
        <div style={{ marginTop:28, display:'flex', alignItems:'center', gap:10 }}>
          {phases.map((p, i) => (
            <React.Fragment key={i}>
              <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6 }}>
                <div style={{
                  width:30, height:30, borderRadius:15,
                  background: p.done ? '#16A34A' : (p.active ? '#0096C7' : '#F1F5F9'),
                  color: p.done || p.active ? '#fff' : '#94A3B8',
                  display:'grid', placeItems:'center',
                  ...(p.active ? { boxShadow:'0 0 0 6px '+hexAw('#0096C7',0.15) } : {}),
                }}>
                  {p.done
                    ? <window.LucideIcon name="check" size={15}/>
                    : (p.active ? <div style={{ width:8, height:8, borderRadius:4, background:'#fff' }}/> : <span style={{fontFamily:Nw, fontSize:11, fontWeight:900}}>{i+1}</span>)
                  }
                </div>
                <div style={{ fontFamily:Nw, fontSize:11.5, fontWeight: p.active ? 800 : 700, color: p.active ? '#0096C7' : (p.done ? '#16A34A' : '#94A3B8') }}>{p.label}</div>
                {p.hint && <div style={{ fontFamily:Nw, fontSize:10.5, color:'#94A3B8', fontWeight:700 }}>{p.hint}</div>}
              </div>
              {i<phases.length-1 && <div style={{ width:24, height:2, background: p.done ? '#16A34A' : '#E2E8F0', borderRadius:1, marginTop:-22 }}/>}
            </React.Fragment>
          ))}
        </div>
        {/* Progress bar */}
        <div style={{ marginTop:24, height:6, borderRadius:3, background:'#F1F5F9', overflow:'hidden' }}>
          <div style={{ height:'100%', width:'58%', background:'linear-gradient(90deg,#0096C7,#16A34A)' }}/>
        </div>
        {/* Cancel + refund-promise */}
        <div style={{ marginTop:20, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ fontFamily:Nw, fontSize:11.5, color:'#64748B', display:'flex', alignItems:'center', gap:6 }}>
            <window.LucideIcon name="shield-check" size={13} style={{color:'#16A34A'}}/>
            Annuleer = credit terug. Geen risico.
          </div>
          <Btn kind="danger" size="sm" icon="x">Annuleer</Btn>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 05 — Cancel-confirm (subtle inline, refund visible)
   ────────────────────────────────────────────────────────── */
function W_CancelRefund() {
  return (
    <window.Browser url="snapsnel.nl/maak/genereer" label="05 · Annuleer halverwege — refund-confirmatie"
      sub="Pulse blijft warm. Letterlijke uitleg: ‘Je verliest niets’. Halverwege gegenereerde vragen worden weggegooid (ook expliciet benoemd).">
      <CancelBody/>
    </window.Browser>
  );
}
function CancelBody() {
  return (
    <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', background:'#F8FAFC' }}>
      <div style={{ width:480, padding:'32px 32px 28px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 16px 48px rgba(0,0,0,0.18)' }}>
        <div style={{ display:'flex', alignItems:'flex-start', gap:14 }}>
          <window.PulseMascot variant="strike" mood="encouraging-warm" size="lg"/>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:Fw, fontSize:22, color:'#0F172A', lineHeight:1.15 }}>Stoppen — zeker weten?</div>
            <div style={{ fontFamily:Nw, fontSize:13.5, color:'#475569', marginTop:8, lineHeight:1.5 }}>
              Geen probleem. Ik gooi de 7 vragen die ik al heb weg, en je krijgt je credit terug.
            </div>
          </div>
        </div>
        <div style={{ marginTop:18, padding:14, background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:12, display:'flex', flexDirection:'column', gap:8 }}>
          <RefundRow icon="sparkles" color="#16A34A" label="Credit terug" value="+1"/>
          <RefundRow icon="trash-2" color="#94A3B8" label="Vragen tot nu toe" value="weg"/>
          <RefundRow icon="image" color="#94A3B8" label="Je foto blijft" value="bewaard — geen re-upload nodig"/>
        </div>
        <div style={{ marginTop:18, display:'flex', gap:10, justifyContent:'flex-end' }}>
          <Btn kind="ghost" size="md">Doorgaan met maken</Btn>
          <Btn size="md" color="#DC2626" style={{ background:'#DC2626' }}>Stop & geef credit terug</Btn>
        </div>
      </div>
    </div>
  );
}
function RefundRow({ icon, color, label, value }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
      <window.LucideIcon name={icon} size={14} style={{color}}/>
      <span style={{ fontFamily:Nw, fontSize:12.5, color:'#475569', fontWeight:700 }}>{label}</span>
      <span style={{ flex:1 }}/>
      <span style={{ fontFamily:Nw, fontSize:12.5, color:'#0F172A', fontWeight:800 }}>{value}</span>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 06 — Phase 2 review default — card-stack with peek
   ────────────────────────────────────────────────────────── */
function FAKE_QUESTIONS() {
  return [
    { i:1,  status:'auto',   qtype:'TERM_DEFINITION', conf:0.92, q:'Wat is mitose?',                                                              a:'Een vorm van celdeling waarbij…' },
    { i:2,  status:'auto',   qtype:'MULTIPLE_CHOICE', conf:0.88, q:'In welke fase splitst de cel zich fysiek?',                                   a:'Cytokinese' },
    { i:3,  status:'review', qtype:'CONTEXTUAL',      conf:0.71, q:'Een onderzoeker observeert een cel met chromatiden in het midden. Welke fase?', a:'Metafase' },
    { i:4,  status:'auto',   qtype:'FILL_BLANK',      conf:0.90, q:'In de ___ verdwijnt de kernmembraan.',                                        a:'profase' },
    { i:5,  status:'review', qtype:'ORDERING',        conf:0.66, q:'Zet de fasen op volgorde.',                                                   a:'profase → metafase → anafase → telofase' },
    { i:6,  status:'user',   qtype:'TERM_DEFINITION', conf:0.95, q:'Wat zijn chromatiden?',                                                       a:'De twee identieke helften van een chromosoom.' },
    { i:7,  status:'auto',   qtype:'MULTIPLE_CHOICE', conf:0.86, q:'Wat doet de mitotische spoel?',                                               a:'Trekt chromatiden uit elkaar' },
    { i:8,  status:'reject', qtype:'CONTEXTUAL',      conf:0.42, q:'Hoeveel cellen na 4 delingen?',                                               a:'16 (verwijderd — te makkelijk)' },
    { i:9,  status:'auto',   qtype:'MATCHING',        conf:0.89, q:'Koppel fase aan beschrijving.',                                               a:'4 koppels' },
    { i:10, status:'review', qtype:'TABLE_FILL',      conf:0.68, q:'Vul de tabel in: per fase 1 kenmerk.',                                        a:'4 rijen' },
    { i:11, status:'auto',   qtype:'TERM_DEFINITION', conf:0.91, q:'Wat is interfase?',                                                          a:'De fase tussen delingen.' },
    { i:12, status:'auto',   qtype:'IMAGE_BASED',     conf:0.84, q:'Welke fase laat dit beeld zien?',                                            a:'Anafase' },
  ];
}

const APP_STATUS = {
  auto:   { label: 'Klaar',         color: '#16A34A', icon: 'check-circle-2' },
  review: { label: 'Even checken',  color: '#EA580C', icon: 'eye' },
  user:   { label: 'Door jou OK',   color: '#0096C7', icon: 'thumbs-up' },
  reject: { label: 'Verwijderd',    color: '#94A3B8', icon: 'x-circle' },
};

function W_Phase2Default() {
  return (
    <window.Browser url="snapsnel.nl/maak/12-vragen-celdeling" label="06 · Phase 2 — Stack-view met peek"
      sub="Eén vraag staat centraal, de volgende & vorige zitten als peek-cards rechts/links. Auto-keurt = groen rand, review = oranje. Bulk-acties in de footer-strip.">
      <Phase2Body initialFocus={3}/>
    </window.Browser>
  );
}
function Phase2Body({ initialFocus=3 }) {
  const qs = FAKE_QUESTIONS();
  const focus = qs[initialFocus];
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC', flexDirection:'column' }}>
      {/* Top bar */}
      <Phase2Header total={qs.length} statuses={qs}/>
      {/* Stack viewer */}
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', padding:'12px 0 0' }}>
        {/* prev peek */}
        <div style={{ position:'absolute', left:32, top:'50%', transform:'translateY(-50%) scale(0.85)', opacity:0.55 }}>
          <QuestionPeek q={qs[initialFocus-1]} side="left"/>
        </div>
        {/* focus card */}
        <QuestionFocus q={focus}/>
        {/* next peek */}
        <div style={{ position:'absolute', right:32, top:'50%', transform:'translateY(-50%) scale(0.85)', opacity:0.55 }}>
          <QuestionPeek q={qs[initialFocus+1]} side="right"/>
        </div>
      </div>
      {/* Bulk action footer */}
      <Phase2Footer qs={qs} focusIdx={initialFocus}/>
    </div>
  );
}

function Phase2Header({ total, statuses }) {
  const counts = statuses.reduce((acc, q) => { acc[q.status] = (acc[q.status]||0)+1; return acc; }, {});
  return (
    <div style={{ padding:'14px 24px 12px', background:'#FFFFFF', borderBottom:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:14 }}>
      <div>
        <div style={{ fontFamily:Fw, fontSize:18, color:'#0F172A' }}>Celdeling — 12 vragen</div>
        <div style={{ fontFamily:Nw, fontSize:11.5, color:'#64748B', fontWeight:600, marginTop:2 }}>Biologie · HAVO 4 · Quiz · privé</div>
      </div>
      <div style={{ flex:1 }}/>
      {/* Status mini-strip */}
      <div style={{ display:'flex', gap:6 }}>
        {Object.entries(APP_STATUS).map(([k, v]) => (
          <Tag key={k} color={v.color} icon={v.icon}>{counts[k]||0} {v.label.toLowerCase()}</Tag>
        ))}
      </div>
      <div style={{ width:1, height:28, background:'#E2E8F0' }}/>
      {/* Progress dots representing 12 questions */}
      <ProgressDots qs={statuses}/>
    </div>
  );
}

function ProgressDots({ qs }) {
  return (
    <div style={{ display:'flex', gap:3 }}>
      {qs.map((q, i) => (
        <div key={i} style={{
          width:10, height:18, borderRadius:3,
          background: APP_STATUS[q.status].color,
          opacity: q.status === 'auto' ? 0.55 : 1,
        }}/>
      ))}
    </div>
  );
}

/* ── Question focus card (large, centered) ── */
function QuestionFocus({ q }) {
  const t = window.QTYPE[q.qtype];
  const s = APP_STATUS[q.status];
  return (
    <div style={{
      width: 540, padding:'22px 24px 20px', background:'#FFFFFF',
      borderRadius:16, border:`1px solid ${hexAw(s.color, 0.3)}`,
      borderLeft:`4px solid ${s.color}`,
      boxShadow:'0 12px 32px rgba(15,23,42,0.10)',
      display:'flex', flexDirection:'column', gap:14, position:'relative', zIndex:2,
    }}>
      {/* Top row */}
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ fontFamily:Fw, fontSize:14, color:'#94A3B8' }}>{q.i} / 12</span>
        <Tag color={t.color} icon={t.icon}>{t.label}</Tag>
        <div style={{ flex:1 }}/>
        <Tag color={s.color} icon={s.icon}>{s.label}</Tag>
      </div>
      {/* Question */}
      <div style={{ fontFamily:Fw, fontSize:24, color:'#0F172A', lineHeight:1.2 }}>{q.q}</div>
      {/* Answer / preview */}
      <div style={{ padding:'12px 14px', background:'#F8FAFC', borderRadius:10, border:'1px solid #E2E8F0' }}>
        <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:4 }}>Goed antwoord</div>
        <div style={{ fontFamily:Nw, fontSize:14, color:'#0F172A', fontWeight:700 }}>{q.a}</div>
      </div>
      {/* Confidence reason (only if review) */}
      {q.status === 'review' && (
        <div style={{
          padding:'10px 12px', background:hexAw('#EA580C', 0.06),
          border:`1px solid ${hexAw('#EA580C',0.20)}`, borderRadius:10,
          display:'flex', gap:10, alignItems:'flex-start',
        }}>
          <window.LucideIcon name="alert-triangle" size={14} style={{color:'#EA580C', marginTop:2}}/>
          <div style={{ fontFamily:Nw, fontSize:12, color:'#9A3412', lineHeight:1.5 }}>
            <b style={{ fontWeight:800 }}>Twijfel ({Math.round(q.conf*100)}%):</b> de fase-naam staat in je tekst, maar niet woordelijk gekoppeld aan deze beschrijving. Lees 'm even.
          </div>
        </div>
      )}
      {/* Action row */}
      <div style={{ display:'flex', gap:8, marginTop:4 }}>
        <Btn kind="primary" icon="check" color="#16A34A" style={{ background:'#16A34A' }}>Keur goed</Btn>
        <Btn kind="ghost" icon="pencil">Bewerken</Btn>
        <Btn kind="ghost" icon="refresh-cw">Opnieuw</Btn>
        <div style={{ flex:1 }}/>
        <Btn kind="danger" size="md" icon="trash-2">Weg</Btn>
      </div>
    </div>
  );
}

/* ── Peek card (small, faded) ── */
function QuestionPeek({ q, side }) {
  if (!q) return null;
  const t = window.QTYPE[q.qtype];
  const s = APP_STATUS[q.status];
  return (
    <div style={{
      width: 240, padding:'16px 16px 14px', background:'#FFFFFF',
      borderRadius:14, border:`1px solid ${hexAw(s.color, 0.3)}`,
      borderLeft:`4px solid ${s.color}`,
      boxShadow:'0 4px 12px rgba(15,23,42,0.06)',
      display:'flex', flexDirection:'column', gap:10,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:6 }}>
        <span style={{ fontFamily:Fw, fontSize:12, color:'#94A3B8' }}>{q.i} / 12</span>
        <Tag color={t.color} icon={t.icon} size={10}>{t.label}</Tag>
      </div>
      <div style={{ fontFamily:Nw, fontSize:13, fontWeight:800, color:'#0F172A', lineHeight:1.35,
        display:'-webkit-box', WebkitLineClamp:3, WebkitBoxOrient:'vertical', overflow:'hidden' }}>{q.q}</div>
      <div style={{ display:'flex', alignItems:'center', gap:6, marginTop:'auto' }}>
        <window.LucideIcon name={side==='left'?'chevron-left':'chevron-right'} size={12} style={{color:'#94A3B8'}}/>
        <span style={{ fontFamily:Nw, fontSize:11, color:'#94A3B8', fontWeight:700 }}>{side==='left'?'vorige':'volgende'}</span>
      </div>
    </div>
  );
}

/* ── Footer with bulk actions + save CTA ── */
function Phase2Footer({ qs, focusIdx }) {
  const reviewCount = qs.filter(q=>q.status==='review').length;
  return (
    <div style={{
      padding:'14px 24px', background:'#FFFFFF', borderTop:'1px solid #E2E8F0',
      display:'flex', alignItems:'center', gap:14,
    }}>
      <Btn kind="ghost" size="sm" icon="check-check">Keur alle 'klaar' goed</Btn>
      {reviewCount > 0 && (
        <Btn kind="soft" color="#EA580C" size="sm" icon="eye">Loop {reviewCount} review-vragen door</Btn>
      )}
      <Btn kind="ghost" size="sm" icon="settings-2">Quiz-info & privacy</Btn>
      <div style={{ flex:1 }}/>
      <span style={{ fontFamily:Nw, fontSize:12.5, color:'#475569', fontWeight:700 }}>{focusIdx+1} / 12 in beeld</span>
      <Btn size="lg" color="#0096C7" iconR="play">Opslaan & spelen</Btn>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 07 — Phase 2 inline edit (no full-screen modal!)
   ────────────────────────────────────────────────────────── */
function W_Phase2Edit() {
  return (
    <window.Browser url="snapsnel.nl/maak/12-vragen-celdeling#vraag-3" label="07 · Inline edit — context blijft zichtbaar"
      sub="In plaats van full-screen modal: focus-card morpht naar edit-mode. Peek-cards blijven zichtbaar — context (vorige/volgende) gaat niet verloren.">
      <Phase2EditBody/>
    </window.Browser>
  );
}
function Phase2EditBody() {
  const qs = FAKE_QUESTIONS();
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC', flexDirection:'column' }}>
      <Phase2Header total={qs.length} statuses={qs}/>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', padding:'12px 0 0' }}>
        <div style={{ position:'absolute', left:32, top:'50%', transform:'translateY(-50%) scale(0.85)', opacity:0.35 }}>
          <QuestionPeek q={qs[2]} side="left"/>
        </div>
        <QuestionEditCard q={qs[3]}/>
        <div style={{ position:'absolute', right:32, top:'50%', transform:'translateY(-50%) scale(0.85)', opacity:0.35 }}>
          <QuestionPeek q={qs[4]} side="right"/>
        </div>
      </div>
      <Phase2Footer qs={qs} focusIdx={3}/>
    </div>
  );
}
function QuestionEditCard({ q }) {
  const t = window.QTYPE[q.qtype];
  return (
    <div style={{
      width: 580, padding:'22px 24px 20px', background:'#FFFFFF',
      borderRadius:16, border:`2px solid #0096C7`,
      boxShadow:'0 12px 32px rgba(15,23,42,0.10)',
      display:'flex', flexDirection:'column', gap:14, position:'relative', zIndex:2,
    }}>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ fontFamily:Fw, fontSize:14, color:'#94A3B8' }}>{q.i} / 12</span>
        <Tag color={t.color} icon={t.icon}>{t.label}</Tag>
        <div style={{ flex:1 }}/>
        <Tag color="#0096C7" icon="pencil">Bewerken</Tag>
      </div>
      {/* Editable question */}
      <div>
        <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:6 }}>Vraag</div>
        <div style={{
          padding:'12px 14px', borderRadius:10, border:'2px solid #0096C7',
          fontFamily:Fw, fontSize:20, color:'#0F172A', lineHeight:1.25, background:'#F8FAFC',
        }}>
          Een onderzoeker observeert een cel met chromatiden in het midden van de cel. In welke fase bevindt deze zich?<span style={{display:'inline-block', width:1, height:18, background:'#0096C7', verticalAlign:-2, marginLeft:2, animation:'blink 1s infinite'}}/>
        </div>
      </div>
      {/* Editable answer */}
      <div>
        <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:6 }}>Goed antwoord</div>
        <div style={{
          padding:'10px 12px', borderRadius:10, border:'1px solid #E2E8F0',
          fontFamily:Nw, fontSize:14, color:'#0F172A', fontWeight:700,
        }}>Metafase</div>
      </div>
      {/* Action row */}
      <div style={{ display:'flex', gap:8, marginTop:4 }}>
        <Btn kind="primary" icon="check" color="#16A34A" style={{ background:'#16A34A' }}>Opslaan</Btn>
        <Btn kind="ghost">Annuleer</Btn>
        <div style={{ flex:1 }}/>
        <span style={{ fontFamily:Nw, fontSize:11.5, color:'#94A3B8', fontWeight:700, alignSelf:'center' }}>
          <window.LucideIcon name="keyboard" size={12} style={{verticalAlign:-2, marginRight:4}}/>
          Esc om te annuleren · ⌘S om op te slaan
        </span>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 08 — Regenerate single question with cost preview
   ────────────────────────────────────────────────────────── */
function W_Regenerate() {
  return (
    <window.Browser url="snapsnel.nl/maak/12-vragen-celdeling#vraag-3" label="08 · Re-generate — eerste 2 gratis, daarna 0,5 credit"
      sub="Geen counter-anxiety: ‘gratis’ stond op groen, daarna soft amber-disclaimer. Niet als modal — als inline confirm boven de vraag.">
      <RegenBody/>
    </window.Browser>
  );
}
function RegenBody() {
  const qs = FAKE_QUESTIONS();
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC', flexDirection:'column' }}>
      <Phase2Header total={qs.length} statuses={qs}/>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', position:'relative', padding:'12px 0 0', flexDirection:'column', gap:14 }}>
        {/* inline confirm bubble */}
        <div style={{
          width:540, padding:'12px 16px', background:'#FFFFFF', borderRadius:12,
          border:'1px solid '+hexAw('#16A34A',0.30), display:'flex', alignItems:'center', gap:12,
        }}>
          <window.LucideIcon name="refresh-cw" size={18} style={{color:'#16A34A'}}/>
          <div style={{ flex:1 }}>
            <div style={{ fontFamily:Nw, fontSize:13, fontWeight:800, color:'#0F172A' }}>Nieuwe versie van vraag 3 maken?</div>
            <div style={{ fontFamily:Nw, fontSize:11.5, color:'#64748B', marginTop:2 }}>
              <b style={{ color:'#16A34A' }}>Gratis</b> — je hebt nog 2 gratis re-generates op deze quiz.
            </div>
          </div>
          <Btn kind="ghost" size="sm">Niet nu</Btn>
          <Btn size="sm" icon="refresh-cw" color="#16A34A" style={{ background:'#16A34A' }}>Doe maar</Btn>
        </div>
        <QuestionFocus q={qs[3]}/>
      </div>
      <Phase2Footer qs={qs} focusIdx={3}/>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 09 — Quiz-meta + privacy toggle (publish flow)
   ────────────────────────────────────────────────────────── */
function W_PublishToggle() {
  return (
    <window.Browser url="snapsnel.nl/maak/12-vragen-celdeling/info" label="09 · Quiz-info + publiek/privé — geen overweldigende modal"
      sub="Side-sheet i.p.v. fullscreen modal. Privé blijft default. Nudge richting publiek = ‘+10 Snaps als 5 anderen het spelen’ — niet ‘deel ons platform’.">
      <PublishBody/>
    </window.Browser>
  );
}
function PublishBody() {
  const qs = FAKE_QUESTIONS();
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC', flexDirection:'column', position:'relative' }}>
      <Phase2Header total={qs.length} statuses={qs}/>
      <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', opacity:0.35, pointerEvents:'none' }}>
        <QuestionFocus q={qs[0]}/>
      </div>
      <Phase2Footer qs={qs} focusIdx={0}/>
      {/* Side-sheet */}
      <div style={{
        position:'absolute', right:0, top:0, bottom:0, width:420,
        background:'#FFFFFF', borderLeft:'1px solid #E2E8F0',
        boxShadow:'-12px 0 32px rgba(0,0,0,0.10)',
        display:'flex', flexDirection:'column', overflow:'hidden',
      }}>
        <div style={{ padding:'18px 22px', borderBottom:'1px solid #E2E8F0', display:'flex', alignItems:'center', gap:10 }}>
          <window.LucideIcon name="settings-2" size={18} style={{color:'#0096C7'}}/>
          <div style={{ fontFamily:Fw, fontSize:18, color:'#0F172A' }}>Quiz-info</div>
          <div style={{ flex:1 }}/>
          <window.LucideIcon name="x" size={16} style={{color:'#94A3B8'}}/>
        </div>
        <div style={{ flex:1, padding:'18px 22px', display:'flex', flexDirection:'column', gap:16, overflow:'auto' }}>
          {/* Title */}
          <div>
            <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:6 }}>Titel</div>
            <div style={{ padding:'10px 12px', borderRadius:10, border:'1px solid #E2E8F0', fontFamily:Nw, fontSize:14, fontWeight:700, color:'#0F172A' }}>
              Celdeling — Bio H3
            </div>
          </div>
          {/* Description */}
          <div>
            <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:6 }}>Beschrijving (optioneel)</div>
            <div style={{ padding:'10px 12px', minHeight:60, borderRadius:10, border:'1px solid #E2E8F0', fontFamily:Nw, fontSize:13, color:'#94A3B8' }}>
              Korte uitleg waar dit over gaat…
            </div>
          </div>
          {/* Privacy toggle */}
          <div>
            <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:8 }}>Wie mag dit zien?</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              <PrivacyOption icon="lock" color="#16A34A" title="Privé" sub="Alleen jij. Default." selected/>
              <PrivacyOption icon="users" color="#7C3AED" title="Publiek" sub="Iedereen mag spelen · +10 Snaps zodra 5 anderen 'm spelen"/>
            </div>
          </div>
          {/* Copyright disclaimer (collapsed) */}
          <div style={{
            padding:'12px 14px', background:'#F8FAFC', border:'1px solid #E2E8F0', borderRadius:10,
            display:'flex', gap:10,
          }}>
            <window.LucideIcon name="info" size={14} style={{color:'#94A3B8', marginTop:2}}/>
            <div style={{ fontFamily:Nw, fontSize:11.5, color:'#475569', lineHeight:1.5 }}>
              Publiek delen mag alleen als de bron <b>jouw eigen</b> aantekeningen zijn, geen scans uit een methode-boek. <span style={{color:'#0096C7', fontWeight:800}}>Lees voorwaarden →</span>
            </div>
          </div>
        </div>
        <div style={{ padding:'14px 22px', borderTop:'1px solid #E2E8F0', display:'flex', gap:8 }}>
          <Btn kind="ghost" size="md">Annuleer</Btn>
          <div style={{ flex:1 }}/>
          <Btn size="md" color="#0096C7" icon="check">Opslaan</Btn>
        </div>
      </div>
    </div>
  );
}
function PrivacyOption({ icon, color, title, sub, selected }) {
  return (
    <div style={{
      padding:'12px 14px', borderRadius:12,
      background: selected ? hexAw(color,0.06) : '#F8FAFC',
      border: `1px solid ${selected ? hexAw(color,0.30) : '#E2E8F0'}`,
      display:'flex', alignItems:'center', gap:12,
    }}>
      <div style={{ width:32, height:32, borderRadius:9, background:hexAw(color,0.14), color, display:'grid', placeItems:'center' }}>
        <window.LucideIcon name={icon} size={16}/>
      </div>
      <div style={{ flex:1, minWidth:0 }}>
        <div style={{ fontFamily:Nw, fontWeight:800, fontSize:13, color:'#0F172A' }}>{title}</div>
        <div style={{ fontFamily:Nw, fontSize:11.5, color:'#64748B', marginTop:1, lineHeight:1.4 }}>{sub}</div>
      </div>
      <div style={{
        width:18, height:18, borderRadius:9,
        border: selected ? `5px solid ${color}` : `2px solid #CBD5E1`, background:'#fff',
      }}/>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 10 — Save & celebrate (mini, not full-screen)
   ────────────────────────────────────────────────────────── */
function W_SaveCelebrate() {
  return (
    <window.Browser url="snapsnel.nl/quiz/celdeling-h3" label="10 · Opslaan-confirmatie — proportioneel"
      sub="Geen confetti-explosie (dat is voor een gespeelde quiz). Wel kort vier-moment: ‘klaar’, +Snaps, en speel-CTA.">
      <SaveBody/>
    </window.Browser>
  );
}
function SaveBody() {
  return (
    <div style={{ flex:1, display:'flex', alignItems:'center', justifyContent:'center', background:'#F8FAFC' }}>
      <div style={{ width:520, padding:'36px 36px 28px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:18, boxShadow:'0 12px 32px rgba(15,23,42,0.10)', display:'flex', flexDirection:'column', alignItems:'center', gap:14 }}>
        <window.PulseMascot variant="strike" mood="proud" size="xl" eyeAnimation="lookAround"/>
        <div style={{ fontFamily:Fw, fontSize:28, color:'#0F172A', textAlign:'center' }}>Klaar — gaan we 'm spelen?</div>
        <div style={{ fontFamily:Nw, fontSize:14, color:'#475569', textAlign:'center', maxWidth:380, lineHeight:1.5 }}>
          11 vragen opgeslagen, 1 verwijderd. Privé. Je vindt 'm terug onder Mijn quizzen.
        </div>
        {/* Snaps award */}
        <div style={{
          padding:'10px 16px', borderRadius:999, background:hexAw('#D97706',0.10), border:'1px solid '+hexAw('#D97706',0.30),
          display:'flex', alignItems:'center', gap:8,
        }}>
          <window.LucideIcon name="sparkles" size={14} style={{color:'#D97706'}} fill="#D97706"/>
          <span style={{ fontFamily:Fw, fontSize:18, color:'#D97706' }}>+5</span>
          <span style={{ fontFamily:Nw, fontSize:12, fontWeight:800, color:'#92400E' }}>Snaps voor het maken</span>
        </div>
        <div style={{ display:'flex', gap:8, marginTop:8 }}>
          <Btn kind="ghost" size="md" icon="library">Naar mijn quizzen</Btn>
          <Btn size="lg" color="#0096C7" iconR="play">Speel nu</Btn>
        </div>
      </div>
    </div>
  );
}

/* ──────────────────────────────────────────────────────────
   STATE 11 — Foto-flashcards short-flow
   ────────────────────────────────────────────────────────── */
function W_FotoFlashcards() {
  return (
    <window.Browser url="snapsnel.nl/maak/foto-flashcards" label="11 · Foto-flashcards — verkorte single-phase"
      sub="Aparte entry-point: 1 foto in, flashcards uit. Geen mode-keuze, geen scope-helpers. Voor wie even snel begrippen wil drillen.">
      <FotoFlashBody/>
    </window.Browser>
  );
}
function FotoFlashBody() {
  return (
    <div style={{ flex:1, display:'flex', overflow:'hidden', background:'#F8FAFC' }}>
      <div style={{ flex:1, padding:'32px 40px 24px', display:'flex', flexDirection:'column', gap:20 }}>
        <div>
          <div style={{ fontSize:11, letterSpacing:1.5, textTransform:'uppercase', color:'#64748B', fontWeight:800, fontFamily:Nw }}>Foto-flashcards · 30 sec</div>
          <h1 style={{ fontFamily:Fw, fontSize:30, margin:'4px 0 0', color:'#0F172A', lineHeight:1.1 }}>Foto in, kaarten uit.</h1>
          <p style={{ fontFamily:Nw, fontSize:14, color:'#475569', margin:'8px 0 0', maxWidth:420, lineHeight:1.5 }}>
            Voor begrippenlijsten en woordjes. Geen mode-keuze, geen scope. Je krijgt term-en-uitleg-kaartjes.
          </p>
        </div>
        <SourcePanel tab="foto" state="empty"/>
        {/* Sample flashcard preview */}
        <div>
          <div style={{ fontFamily:Nw, fontSize:11, fontWeight:800, color:'#64748B', letterSpacing:0.4, textTransform:'uppercase', marginBottom:10 }}>Voorbeeld output</div>
          <div style={{ display:'flex', gap:10 }}>
            <FlashSample term="Mitose" def="Een vorm van celdeling waarbij…"/>
            <FlashSample term="Cytokinese" def="Het fysiek splitsen van de cel."/>
            <FlashSample term="Profase" def="De eerste fase van mitose."/>
          </div>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:12, marginTop:'auto' }}>
          <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontFamily:Nw, fontSize:12, color:'#64748B', fontWeight:700 }}>
            <window.LucideIcon name="sparkles" size={13} style={{color:'#D97706'}}/>
            Kost 1 credit · max 25 kaarten
          </span>
          <div style={{ flex:1 }}/>
          <Btn size="lg" color="#0096C7" iconR="arrow-right">Maak kaarten</Btn>
        </div>
      </div>
      <div style={{ width:280, padding:'32px 22px', borderLeft:'1px solid #E2E8F0', background:'#FFFFFF' }}>
        <PulseCoach
          variant="strike" mood="cheerful" eyeAnimation="blink"
          title="Korte versie."
          body="Flashcards is een snel-route — 1 foto, klaar. Wil je echte vragen (multiple choice, koppelen)? Pak de gewone wizard."
        />
      </div>
    </div>
  );
}
function FlashSample({ term, def }) {
  return (
    <div style={{
      flex:1, padding:'14px 16px', background:'#FFFFFF', border:'1px solid #E2E8F0', borderRadius:12,
      display:'flex', flexDirection:'column', gap:6, minHeight:90,
    }}>
      <div style={{ fontFamily:Fw, fontSize:16, color:'#0F172A' }}>{term}</div>
      <div style={{ fontFamily:Nw, fontSize:12, color:'#64748B', lineHeight:1.45 }}>{def}</div>
    </div>
  );
}

/* ── Export ── */
Object.assign(window, {
  W_Phase1Default, W_Phase1Filled, W_LowCredits,
  W_Generating, W_CancelRefund,
  W_Phase2Default, W_Phase2Edit, W_Regenerate, W_PublishToggle, W_SaveCelebrate,
  W_FotoFlashcards,
});