// Home page remainder: competitive matrix, offerings, CTA.

const CompetitiveMatrix = () => {
  const rows = [
    {cap:'Cross-dimensional convergence',    g:'—', p:'—', a:'—', w:'—', t:'—', v:'—', f:'✓'},
    {cap:'Temporal lifecycle modeling (20yr)', g:'—', p:'—', a:'—', w:'—', t:'—', v:'—', f:'✓'},
    {cap:'Evidence integrity / traceability',  g:'—', p:'—', a:'—', w:'—', t:'—', v:'—', f:'✓'},
    {cap:'Opportunity discovery',              g:'●', p:'●', a:'—', w:'●', t:'●', v:'—', f:'◐'},
    {cap:'Proposal automation',                g:'●', p:'●', a:'●', w:'—', t:'—', v:'—', f:'—'},
    {cap:'Market intelligence',                g:'◐', p:'◐', a:'—', w:'●', t:'●', v:'●', f:'✓'},
  ];
  const cols = ['GOVDASH','PROCUREMENT SCI.','AUTOGENAI','GOVWIN','GOVTRIBE','GOVINI','FPDS'];
  return (
    <Section id="competitive" tint>
      <div style={{maxWidth:820, marginBottom:56}}>
        <div className="reveal"><Eyebrow>Market & Competition</Eyebrow></div>
        <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Two ecosystems compete on tools. <span className="accent">Neither builds the substrate.</span></h2>
        <p className="lede reveal delay-2" style={{marginTop:18}}>GovCon AI has split into proposal automation and market intelligence. Neither camp is positioned to build what we build — they're the customer, not the competitor.</p>
      </div>
      <div className="reveal delay-3" style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:16, overflow:'hidden'}}>
        <table style={{width:'100%', borderCollapse:'collapse', fontSize:13}}>
          <thead>
            <tr style={{background:'var(--slate-50)'}}>
              <th style={{textAlign:'left', padding:'16px 20px', fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.2em', color:'var(--slate-500)', fontWeight:600}}>CAPABILITY</th>
              {cols.map((c,i)=>(
                <th key={c} style={{textAlign:'center', padding:'16px 12px', fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.2em', color:i===6?'#000080':'var(--slate-500)', fontWeight:i===6?700:600, background:i===6?'#EFF6FF':'transparent', minWidth:70}}>{c}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r,i)=>(
              <tr key={i} style={{borderTop:'1px solid var(--slate-100)'}}>
                <td style={{padding:'18px 20px', fontWeight:500, color:'var(--slate-700)'}}>{r.cap}</td>
                {[r.g,r.p,r.a,r.w,r.t,r.v,r.f].map((v,j)=>(
                  <td key={j} style={{textAlign:'center', padding:'18px 12px', color:v==='✓'?'#16A34A':v==='●'?'var(--slate-400)':v==='◐'?'#FBBF24':'var(--slate-300)', fontWeight:v==='✓'?700:500, fontSize:v==='—'?14:16, background:j===6?'rgba(239,246,255,0.5)':'transparent'}}>{v}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <div style={{display:'flex', gap:20, marginTop:18, fontSize:12, color:'var(--slate-500)', fontFamily:'var(--font-mono)'}}>
        <span><span style={{color:'#16A34A', fontWeight:700}}>✓</span> Native capability</span>
        <span><span style={{color:'var(--slate-400)'}}>●</span> Full feature</span>
        <span><span style={{color:'#FBBF24'}}>◐</span> Partial</span>
        <span><span style={{color:'var(--slate-300)'}}>—</span> Absent</span>
      </div>
    </Section>
  );
};

const HomeOfferings = () => (
  <Section id="offerings">
    <div style={{maxWidth:820, marginBottom:56}}>
      <div className="reveal"><Eyebrow>Offerings</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Three ways to access the substrate.</h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
      {[
        {tag:'PRIMARY', title:'B2B API license', price:'$150K – $400K', unit:'per platform · annual', body:'FPDS endpoints embedded inside GovCon AI platforms. We are the intelligence layer they cannot build themselves.', features:['REST + MCP endpoints','Platform-branded output','Calibrated convergence scoring','Full evidence traceability']},
        {tag:'PARTNERSHIP', title:'White-label substrate', price:'$350K – $750K', unit:'co-branded · annual', body:'Co-branded access to the full FPDS substrate for platforms that want deep integration beyond API calls.', features:['Platform-side taxonomy tuning','Priority roadmap input','Custom convergence weights','Quarterly calibration review']},
        {tag:'VALIDATION', title:'D2C engagement', price:'$40K – $120K', unit:'fixed-scope · 6–10 weeks', body:'Direct-to-customer validation engagements that fund the build and calibrate the substrate at the same time.', features:['Agency or program-level scope','Blind Spot Report deliverable','Evidence chain walkthrough','Calibration feedback loop']},
      ].map((o,i)=>(
        <div key={o.title} className={`reveal delay-${i+1}`} style={{background:i===0?'#000080':'#fff', color:i===0?'#fff':'var(--slate-900)', border:i===0?'none':'1px solid var(--slate-200)', borderRadius:18, padding:'32px 28px', display:'flex', flexDirection:'column', gap:16, position:'relative', overflow:'hidden'}}>
          {i===0 && <div className="grid-pattern-dark" style={{position:'absolute', inset:0, opacity:0.3}}/>}
          <div style={{position:'relative', zIndex:1}}>
            <div className="mono-label" style={{color:i===0?'#93C5FD':'#000080', fontSize:10, marginBottom:16}}>{o.tag}</div>
            <h3 style={{fontSize:26, fontWeight:800, letterSpacing:'-0.02em', margin:'0 0 4px'}}>{o.title}</h3>
            <div style={{display:'flex', alignItems:'baseline', gap:10, marginBottom:14}}>
              <span className="mono-num" style={{fontSize:22, fontWeight:700, color:i===0?'#fff':'var(--slate-900)'}}>{o.price}</span>
            </div>
            <div style={{fontSize:12, color:i===0?'#BFDBFE':'var(--slate-500)', fontFamily:'var(--font-mono)', marginBottom:18, letterSpacing:'0.08em'}}>{o.unit}</div>
            <p style={{fontSize:14, lineHeight:1.55, color:i===0?'#DBEAFE':'var(--slate-600)', margin:'0 0 20px'}}>{o.body}</p>
            <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:10, fontSize:13.5}}>
              {o.features.map(f=>(
                <li key={f} style={{display:'flex', gap:10, alignItems:'start', color:i===0?'#DBEAFE':'var(--slate-700)'}}>
                  <Icon name="check" size={16} style={{color:i===0?'#93C5FD':'#000080', marginTop:1, flex:'none'}}/>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      ))}
    </div>
  </Section>
);

const HomeCTA = () => (
  <section style={{background:'#000080', color:'#fff', padding:'112px 0', position:'relative', overflow:'hidden'}}>
    <div className="grid-pattern-dark" style={{position:'absolute', inset:0, opacity:0.35}}/>
    <div style={{position:'absolute', top:-100, left:'50%', width:800, height:400, background:'rgba(96,165,250,0.2)', filter:'blur(120px)', transform:'translateX(-50%)'}}/>
    <div className="container" style={{position:'relative', textAlign:'center'}}>
      <div className="reveal" style={{display:'inline-flex'}}><Chip dark>Calibrated to ICD 203</Chip></div>
      <h2 className="h2-display dark reveal delay-1" style={{marginTop:24, marginBottom:24, maxWidth:880, marginLeft:'auto', marginRight:'auto'}}>
        The substrate is being built <span className="accent">either way</span>. The question is who's at the table when it starts licensing.
      </h2>
      <p className="lede dark reveal delay-2" style={{margin:'0 auto 40px', color:'#BFDBFE'}}>
        We're talking to platforms, agencies, and primes now. Partnership structure, a technical deep-dive, or a single validation engagement — happy to start wherever you are.
      </p>
      <div className="reveal delay-3" style={{display:'flex', gap:14, justifyContent:'center', flexWrap:'wrap'}}>
        <a href="#/contact" className="btn-ondark">Request a briefing <Icon name="arrow" size={14}/></a>
        <a href="#/architecture" className="btn-ghost-dark">See the architecture</a>
      </div>
    </div>
  </section>
);

window.CompetitiveMatrix = CompetitiveMatrix;
window.HomeOfferings = HomeOfferings;
window.HomeCTA = HomeCTA;