// Compact, characterful mini-mocks — one per feature section. CSS-var themed.

const C = { ai:'#EC4899', product:'#8B5CF6', investing:'#34D399', football:'#60A5FA', research:'#F97316', writing:'#FBBF24' };
const fv = {
  frame: { position:'relative', borderRadius:'var(--radius-lg)', border:'0.5px solid var(--border)', background:'var(--surface-1)', boxShadow:'var(--shadow-card)', overflow:'hidden', padding:18 },
  tile: { background:'var(--surface-2)', border:'0.5px solid var(--border)', borderRadius:12, padding:12 },
  label: { fontFamily:"'Geist Mono', monospace", fontSize:9.5, letterSpacing:'.13em', color:'var(--text-mute)' },
  mono: { fontFamily:"'Geist Mono', monospace" },
};

// 1 — CAPTURE & AUTO-ORGANISE: a post fans out into category chips
function VisCapture() {
  return (
    <div style={fv.frame}>
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        <div style={{ ...fv.tile, display:'flex', gap:10, alignItems:'flex-start' }}>
          <Avatar initials="AK" grad="linear-gradient(135deg,#EC4899,#8B5CF6)" size={26} />
          <div style={{ flex:1 }}>
            <div style={{ fontSize:12.5, fontWeight:600 }}>Andrej K. <span style={{ color:'var(--text-mute)', fontWeight:400 }}>@karpathy</span></div>
            <div style={{ fontSize:12, color:'var(--text-dim)', marginTop:3, lineHeight:1.45 }}>The most underrated skill in 2026 is writing a crisp eval…</div>
          </div>
          <span style={{ color:'var(--magenta)' }}><IcoBookmark /></span>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap:8, justifyContent:'center', color:'var(--text-mute)' }}>
          <span style={fv.label}>AI SORTS</span>
          <IcoArrowDown size={14} />
        </div>
        <div style={{ display:'flex', gap:8, flexWrap:'wrap', justifyContent:'center' }}>
          {[['ai',true],['product',false],['research',false],['investing',false]].map(([c,on],i)=>(
            <span key={i} style={{ display:'inline-flex', alignItems:'center', gap:7, fontSize:12, padding:'7px 12px', borderRadius:999,
              border:`0.5px solid ${on ? C[c] : 'var(--border)'}`, background: on ? 'linear-gradient(135deg, rgba(236,72,153,0.12), rgba(139,92,246,0.12))' : 'var(--surface-2)',
              color: on ? 'var(--text)' : 'var(--text-mute)', fontWeight: on ? 600 : 400 }}>
              <i style={{ width:7, height:7, borderRadius:2, background:C[c], display:'inline-block' }} />#{c}{on && <span style={{ fontSize:10, color:'var(--text-mute)', fontFamily:"'Geist Mono',monospace" }}>0.96</span>}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}
const IcoBookmark = ({size=16}) => <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M6 4h12v17l-6-4-6 4z"/></svg>;

// 2 — TRIAGE: inbox rows with confidence bars + operator search
function VisTriage() {
  const rows = [
    ['Dr. Patel', 'RP', 'linear-gradient(135deg,#F97316,#EC4899)', 0.58, 'research'],
    ['June Ito', 'JI', 'linear-gradient(135deg,#FBBF24,#F97316)', 0.49, 'writing'],
  ];
  return (
    <div style={fv.frame}>
      <div style={{ display:'flex', alignItems:'center', gap:8, background:'var(--surface-2)', border:'0.5px solid var(--border)', borderRadius:10, padding:'9px 12px', marginBottom:12 }}>
        <IcoSearch size={14} />
        <span style={{ fontSize:12.5, color:'var(--text-dim)' }}><span style={{ ...fv.mono, color:'var(--magenta)' }}>from:</span>karpathy <span style={{ ...fv.mono, color:'var(--purple)' }}>has:video</span> <span style={{ ...fv.mono, color:'var(--emerald)' }}>is:starred</span></span>
      </div>
      <div style={{ ...fv.label, marginBottom:8 }}>INBOX · 2 NEED A GLANCE</div>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {rows.map(([name,ini,grad,conf,cat],i)=>(
          <div key={i} style={{ ...fv.tile, display:'flex', alignItems:'center', gap:11 }}>
            <Avatar initials={ini} grad={grad} size={26} />
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:12, fontWeight:600 }}>{name}</div>
              <div style={{ display:'flex', alignItems:'center', gap:7, marginTop:5 }}>
                <div style={{ flex:1, height:5, borderRadius:999, background:'var(--surface-3)', overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${conf*100}%`, background:'var(--orange)', borderRadius:999 }} />
                </div>
                <span style={{ ...fv.mono, fontSize:10, color:'var(--text-mute)' }}>{conf.toFixed(2)}</span>
              </div>
            </div>
            <div style={{ display:'flex', gap:5 }}>
              <span style={{ width:26, height:26, borderRadius:7, display:'grid', placeItems:'center', border:'0.5px solid var(--border)', color:'var(--text-mute)' }}>✕</span>
              <span style={{ width:26, height:26, borderRadius:7, display:'grid', placeItems:'center', background:'var(--grad)', color:'#fff' }}><IcoCheck size={13}/></span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// 3 — ACT: Actions working set (3/5) + AI Council + Done
function VisAct() {
  return (
    <div style={fv.frame}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
        <span style={{ display:'inline-flex', alignItems:'center', gap:7, fontSize:13, fontWeight:600 }}><IcoBolt size={15}/> Actions</span>
        <span style={{ fontSize:10.5, fontWeight:600, color:'#fff', background:'var(--grad)', padding:'2px 9px', borderRadius:999, ...fv.mono }}>3 / 5</span>
      </div>
      <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
        {[['Ship eval harness','ai'],['DM Marina re: bridge round','investing']].map(([t,c],i)=>(
          <div key={i} style={{ ...fv.tile, display:'flex', alignItems:'center', gap:10, fontSize:12.5 }}>
            <i style={{ width:8, height:8, borderRadius:2, background:C[c], display:'inline-block' }} />{t}
          </div>
        ))}
        <div style={{ background:'linear-gradient(135deg, rgba(139,92,246,0.1), rgba(236,72,153,0.1))', border:'0.5px solid rgba(139,92,246,0.25)', borderRadius:10, padding:'11px 12px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, fontSize:10, color:'var(--purple)', marginBottom:5 }}><IcoSparkle size={12}/> <span style={{ ...fv.mono, letterSpacing:'.08em' }}>AI COUNCIL · NEXT STEP</span></div>
          <div style={{ fontSize:12, lineHeight:1.45, color:'var(--text-dim)' }}>Draft a 3-line eval spec and add it to <span style={{ ...fv.mono, color:'var(--magenta)' }}>EVALS.md</span>.</div>
        </div>
        <div style={{ ...fv.tile, display:'flex', alignItems:'center', gap:10, fontSize:12, color:'var(--text-mute)', opacity:.85 }}>
          <span style={{ color:'var(--emerald)' }}><IcoCheck size={14}/></span><s>Read RAG paper</s> <span style={{ marginLeft:'auto', ...fv.mono, fontSize:10 }}>done · "applied to retrieval eval"</span>
        </div>
      </div>
    </div>
  );
}

// 4 — REORGANISE in plain English
function VisReorg() {
  return (
    <div style={fv.frame}>
      <div style={{ ...fv.label, marginBottom:10 }}>AI ORGANISE</div>
      <div style={{ background:'var(--surface-2)', border:'0.5px solid var(--border-strong)', borderRadius:12, padding:'13px 14px', marginBottom:14, position:'relative' }}>
        <div style={{ fontSize:13.5, lineHeight:1.5, color:'var(--text)' }}>
          "Move all my <span style={{ color:C.football, fontWeight:600 }}>Tottenham</span> posts out of <span style={{ ...fv.mono, color:'var(--text-dim)' }}>#football</span> into a new <span style={{ color:C.football, fontWeight:600 }}>#tottenham</span> category."
        </div>
        <div style={{ position:'absolute', right:12, bottom:11, display:'inline-flex', alignItems:'center', gap:6, fontSize:11, color:'#fff', background:'var(--grad)', padding:'5px 11px', borderRadius:8, fontWeight:600 }}><IcoSparkle size={12}/> Run</div>
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:8 }}>
        <span style={{ ...fv.label }}>BATCH · 14 SELECTED</span>
        <div style={{ flex:1, height:1, background:'var(--border)' }} />
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:8 }}>
        {[0,1,2,3].map(i=>(
          <div key={i} style={{ ...fv.tile, display:'flex', alignItems:'center', gap:8, fontSize:11.5, padding:'9px 11px' }}>
            <span style={{ width:15, height:15, borderRadius:5, background:'var(--grad)', display:'grid', placeItems:'center', color:'#fff' }}><IcoCheck size={10}/></span>
            <i style={{ width:6, height:6, borderRadius:2, background:C.football, display:'inline-block' }} /> Spurs post #{i+1}
          </div>
        ))}
      </div>
    </div>
  );
}

// 5 — VAULT: thread + community note + media, kept forever
function VisVault() {
  return (
    <div style={fv.frame}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:12 }}>
        <span style={{ display:'inline-flex', alignItems:'center', gap:7, fontSize:13, fontWeight:600 }}><IcoVault size={15}/> Vault</span>
        <span style={{ display:'inline-flex', alignItems:'center', gap:6, fontSize:10.5, color:'var(--emerald)', ...fv.mono, border:'0.5px solid rgba(52,211,153,0.3)', borderRadius:999, padding:'3px 9px' }}><IcoLock size={11}/> KEPT FOREVER</span>
      </div>
      <div style={{ ...fv.tile, display:'flex', flexDirection:'column', gap:10 }}>
        <div style={{ display:'flex', gap:9, alignItems:'center' }}>
          <Avatar initials="RP" grad="linear-gradient(135deg,#F97316,#EC4899)" size={24} />
          <div style={{ fontSize:12, fontWeight:600 }}>Dr. Patel <span style={{ color:'var(--text-mute)', fontWeight:400 }}>· archived thread · 11 posts</span></div>
        </div>
        <div style={{ height:74, borderRadius:8, background:'linear-gradient(135deg,#241b35,#3a2140)', border:'0.5px solid var(--border)' }} />
        <div style={{ background:'var(--surface-3)', border:'0.5px solid var(--border)', borderRadius:8, padding:'9px 11px' }}>
          <div style={{ ...fv.label, color:'var(--emerald)', marginBottom:4 }}>COMMUNITY NOTE · PRESERVED</div>
          <div style={{ fontSize:11.5, lineHeight:1.45, color:'var(--text-dim)' }}>Readers added context: the benchmark was later revised; original figures shown here.</div>
        </div>
        <div style={{ fontSize:10.5, color:'var(--text-mute)', ...fv.mono }}>Survives even if the original is deleted.</div>
      </div>
    </div>
  );
}

// 6 — INSIGHTS: top voices + topic bars + digest
function VisInsights() {
  const topics = [['ai',82,C.ai],['product',61,C.product],['investing',44,C.investing],['football',30,C.football]];
  return (
    <div style={fv.frame}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
        <div style={fv.tile}>
          <div style={{ ...fv.label, marginBottom:10 }}>TOP VOICES</div>
          <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
            {[['@karpathy','AK','linear-gradient(135deg,#EC4899,#8B5CF6)',312],['@mvez','MV','linear-gradient(135deg,#34D399,#60A5FA)',151],['@fabrizio','FR','linear-gradient(135deg,#60A5FA,#34D399)',96]].map(([h,ini,g,n],i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap:8 }}>
                <Avatar initials={ini} grad={g} size={22} />
                <span style={{ fontSize:11.5, color:'var(--text-dim)' }}>{h}</span>
                <span style={{ marginLeft:'auto', ...fv.mono, fontSize:10.5, color:'var(--text-mute)' }}>{n}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={fv.tile}>
          <div style={{ ...fv.label, marginBottom:10 }}>TOPIC MIX</div>
          <div style={{ display:'flex', flexDirection:'column', gap:9 }}>
            {topics.map(([t,w,col],i)=>(
              <div key={i} style={{ display:'flex', alignItems:'center', gap:8 }}>
                <span style={{ fontSize:10.5, color:'var(--text-dim)', width:58, ...fv.mono }}>#{t}</span>
                <div style={{ flex:1, height:6, borderRadius:999, background:'var(--surface-3)', overflow:'hidden' }}>
                  <div style={{ height:'100%', width:`${w}%`, background:col, borderRadius:999, opacity:.8 }} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <div style={{ marginTop:12, display:'flex', alignItems:'center', gap:10, background:'linear-gradient(135deg, rgba(139,92,246,0.09), rgba(236,72,153,0.09))', border:'0.5px solid rgba(139,92,246,0.2)', borderRadius:10, padding:'10px 12px' }}>
        <span style={{ color:'var(--purple)' }}><IcoSparkle size={14}/></span>
        <span style={{ fontSize:11.5, color:'var(--text-dim)' }}>Weekly digest · <b style={{ color:'var(--text)' }}>3 forgotten gems</b> resurfaced from March</span>
        <span style={{ marginLeft:'auto', ...fv.mono, fontSize:10, color:'var(--text-mute)' }}>MON 8AM</span>
      </div>
    </div>
  );
}

// 7 — EVERYWHERE: mac + iphone + web in sync
function VisEverywhere() {
  return (
    <div style={{ ...fv.frame, display:'flex', alignItems:'flex-end', justifyContent:'center', gap:18, minHeight:200 }}>
      {/* mac */}
      <div style={{ width:180, flexShrink:0 }}>
        <div style={{ height:108, borderRadius:'8px 8px 0 0', background:'var(--surface-2)', border:'0.5px solid var(--border)', borderBottom:'none', padding:8, display:'flex', flexDirection:'column', gap:5 }}>
          <div style={{ display:'flex', gap:4 }}><i style={{ width:5,height:5,borderRadius:'50%',background:'#ff5f56',display:'inline-block' }}/><i style={{ width:5,height:5,borderRadius:'50%',background:'#ffbd2e',display:'inline-block' }}/><i style={{ width:5,height:5,borderRadius:'50%',background:'#27c93f',display:'inline-block' }}/></div>
          <div style={{ display:'flex', gap:5, flex:1 }}>
            <div style={{ width:40, borderRadius:5, background:'var(--surface-3)' }} />
            <div style={{ flex:1, display:'flex', flexDirection:'column', gap:4 }}>
              {[0,1,2].map(i=><div key={i} style={{ height:18, borderRadius:4, background:'var(--surface-3)', borderLeft:`2px solid ${[C.ai,C.product,C.investing][i]}` }}/>)}
            </div>
          </div>
        </div>
        <div style={{ height:7, background:'var(--surface-3)', borderRadius:'0 0 3px 3px', border:'0.5px solid var(--border)' }} />
        <div style={{ textAlign:'center', ...fv.label, marginTop:7 }}>MACOS</div>
      </div>
      {/* phone */}
      <div style={{ width:74, flexShrink:0 }}>
        <div style={{ height:150, borderRadius:14, background:'var(--surface-2)', border:'0.5px solid var(--border-strong)', padding:7, display:'flex', flexDirection:'column', gap:5, boxShadow:'var(--shadow-card)' }}>
          <div style={{ width:24, height:3, borderRadius:999, background:'var(--surface-3)', margin:'0 auto' }} />
          {[C.ai,C.investing,C.product,C.football].map((c,i)=>(
            <div key={i} style={{ height:22, borderRadius:6, background:'var(--surface-3)', borderLeft:`2px solid ${c}` }}/>
          ))}
        </div>
        <div style={{ textAlign:'center', ...fv.label, marginTop:7 }}>IPHONE</div>
      </div>
      {/* sync pill */}
      <div style={{ position:'absolute', top:16, right:16, display:'inline-flex', alignItems:'center', gap:6, fontSize:10, color:'var(--emerald)', ...fv.mono, border:'0.5px solid rgba(52,211,153,0.3)', borderRadius:999, padding:'3px 9px' }}>
        <i style={{ width:6, height:6, borderRadius:'50%', background:'var(--emerald)', display:'inline-block', animation:'blink 2s ease-in-out infinite' }} /> IN SYNC
      </div>
    </div>
  );
}

Object.assign(window, { VisCapture, VisTriage, VisAct, VisReorg, VisVault, VisInsights, VisEverywhere });