// Architecture page continued — system block diagram, corpora cards, roadmap.

const SystemDiagram = () => (
  <Section tint grid>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow>System Architecture</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Services, stores, models.</h2>
      <p className="lede reveal delay-2" style={{marginTop:18}}>Dual-storage design: model binaries on high-bandwidth network volume, queryable metadata in Supabase. Every training artifact follows a formal schema contract.</p>
    </div>
    <div className="reveal delay-3" style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:20, padding:'44px 40px'}}>
      <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, marginBottom:36}}>
        <BlockGroup title="Sources" tag="INGRESS" items={['USASpending API','SAM.gov CSV','Agency web crawl','GAO / OIG findings','Forecast feeds']}/>
        <BlockGroup title="Compute" tag="MODEL TRAINING" items={['RunPod · NVIDIA A40','BERTopic V2.2','Qwen3-8B embeddings','Aho-Corasick cleaner','Semantic merger']} accent/>
        <BlockGroup title="Serving" tag="EGRESS" items={['REST API · JSON','MCP endpoints','White-label UI','Blind Spot Report','Validation deliverable']}/>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
        <BlockGroup title="Model storage" tag="NETWORK VOLUME" items={['/workspace/models/{dept}/','awards · sam · web · merged','model.safetensors','metadata.json','evaluation.json']} mono/>
        <BlockGroup title="Queryable store" tag="SUPABASE v2" items={['model_metadata','topic_labels','pipeline_version','department_code','coherence · diversity']} mono/>
      </div>
      <div style={{marginTop:32, padding:'16px 20px', background:'var(--slate-50)', borderRadius:10, fontFamily:'var(--font-mono)', fontSize:12, color:'var(--slate-600)', border:'1px solid var(--slate-200)'}}>
        <strong style={{color:'var(--slate-900)'}}>Model ID format:</strong> v{'{version}'}-{'{dept}'}-{'{corpus}'}-{'{YYYYMMDD}'}
        <span style={{marginLeft:14, color:'var(--slate-400)'}}>→ e.g. v2.2-068-merged-20260415</span>
      </div>
    </div>
  </Section>
);

const BlockGroup = ({ title, tag, items, accent, mono }) => (
  <div style={{border:`1px solid ${accent?'#000080':'var(--slate-200)'}`, borderRadius:14, padding:'22px 20px', background:accent?'rgba(0,0,128,0.02)':'#fff'}}>
    <div className="mono-label" style={{fontSize:9, color:accent?'#000080':'var(--slate-500)', marginBottom:10}}>{tag}</div>
    <h4 style={{fontSize:16, fontWeight:700, margin:'0 0 14px', color:'var(--slate-900)'}}>{title}</h4>
    <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:8}}>
      {items.map(it=>(
        <li key={it} style={{fontSize:12.5, color:'var(--slate-600)', fontFamily:mono?'var(--font-mono)':'inherit', display:'flex', alignItems:'center', gap:8}}>
          <span style={{width:4, height:4, borderRadius:999, background:accent?'#000080':'var(--slate-400)', flex:'none'}}/>
          {it}
        </li>
      ))}
    </ul>
  </div>
);

const Corpora = () => (
  <Section>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow>Data Substrate</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Three corpora. <span className="accent">One aligned space.</span></h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
      {[
        {tag:'AWARDS', n:'12.6M', src:'USASpending', body:'Prime contract awards and modifications. The execution reality layer — who won, how much, every mod since.', years:'2005–present', fmt:'CSV · schema v22'},
        {tag:'OPPORTUNITIES', n:'7.7M', src:'SAM.gov', body:'Active and historical solicitations, amendments, sources-sought, RFIs. The forward-intent layer in the contractor language.', years:'2010–present', fmt:'API · normalized'},
        {tag:'AGENCY WEB', n:'219K', src:'Agency sites', body:'Program descriptions, technical documents, budget narratives. The strategic-intent layer in agency language.', years:'Crawl · continuous', fmt:'HTML · extracted'},
      ].map((c,i)=>(
        <div key={c.tag} className={`reveal delay-${i+1}`} style={{border:'1px solid var(--slate-200)', borderRadius:16, padding:'32px 28px', background:'#fff', display:'flex', flexDirection:'column', gap:14}}>
          <div className="mono-label" style={{color:'#000080', fontSize:10}}>{c.tag}</div>
          <div className="mono-num" style={{fontSize:44, fontWeight:800, color:'var(--slate-900)', letterSpacing:'-0.03em', lineHeight:1}}>{c.n}</div>
          <div style={{fontSize:13, fontWeight:600, color:'var(--slate-700)'}}>{c.src}</div>
          <p style={{fontSize:13.5, lineHeight:1.55, color:'var(--slate-600)', margin:0}}>{c.body}</p>
          <div style={{marginTop:'auto', paddingTop:16, borderTop:'1px dashed var(--slate-200)', display:'flex', justifyContent:'space-between', fontFamily:'var(--font-mono)', fontSize:10.5, color:'var(--slate-500)'}}>
            <span>{c.years}</span><span>{c.fmt}</span>
          </div>
        </div>
      ))}
    </div>
  </Section>
);

const Roadmap = () => {
  const phases = [
    {n:'0', state:'COMPLETE', color:'#22C55E', title:'Data completion', dates:'Done', body:'79M awards, 7.7M opportunities, 223K pages validated.'},
    {n:'1', state:'IN PROGRESS', color:'#FBBF24', title:'Cross-source alignment', dates:'Q2 2026', body:'Per-corpus topic models, shared Qwen3-8B embedding space.'},
    {n:'2–3', state:'PLANNED', color:'#60A5FA', title:'Temporal dynamics', dates:'Q2–Q3 2026', body:'Lifecycle modeling, anomaly detection, procurement tensor.'},
    {n:'4–5', state:'PLANNED', color:'#60A5FA', title:'Evidence integrity', dates:'Q3 2026', body:'Convergence scoring, survival model, backtest validation.'},
    {n:'6–7', state:'PLANNED', color:'#60A5FA', title:'Launch & partnerships', dates:'Q3–Q4 2026', body:'Knowledge graph enrichment, report engine, first licensing deals.'},
  ];
  return (
    <Section dark grid>
      <div style={{maxWidth:820, marginBottom:48}}>
        <div className="reveal"><Eyebrow dark>Roadmap</Eyebrow></div>
        <h2 className="h2-display dark reveal delay-1" style={{marginTop:14}}>The build finishes in <span className="accent">Q4 2026</span>.</h2>
        <p className="lede dark reveal delay-2" style={{marginTop:18}}>Every phase ships a capability that is independently saleable. Phase 0 is closed. Phase 1 is training right now.</p>
      </div>
      <div className="reveal delay-3" style={{position:'relative', paddingTop:20}}>
        <div style={{position:'absolute', top:40, left:'6%', right:'6%', height:1, background:'rgba(255,255,255,0.12)'}}/>
        <div style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:16}}>
          {phases.map((p,i)=>(
            <div key={p.n} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:12}}>
              <div style={{width:20, height:20, borderRadius:999, background:p.color, border:'3px solid #0B1222', boxShadow:`0 0 0 2px ${p.color}`}}/>
              <div className="mono-label" style={{fontSize:9, color:p.color}}>PHASE {p.n} · {p.state}</div>
              <div style={{background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:12, padding:'20px 18px', width:'100%', textAlign:'center'}}>
                <div style={{color:'#fff', fontWeight:700, fontSize:15, marginBottom:6}}>{p.title}</div>
                <div style={{color:'#64748B', fontSize:11, fontFamily:'var(--font-mono)', marginBottom:10}}>{p.dates}</div>
                <div style={{color:'#94A3B8', fontSize:12, lineHeight:1.5}}>{p.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
};

window.SystemDiagram = SystemDiagram;
window.Corpora = Corpora;
window.Roadmap = Roadmap;