// Seven dimensions of evidence — the core methodology frame.

const DIMENSIONS = [
  { n:'01', icon:'shieldCheck', title:'Political durability',    sub:'Is the money real across administrations?' },
  { n:'02', icon:'flag',        title:'Oversight signals',       sub:'GAO and OIG findings as leading indicators.' },
  { n:'03', icon:'trend',       title:'Forward intent',          sub:'Agency forecasts and how they change over time.' },
  { n:'04', icon:'target',      title:'Market demand',           sub:'Solicitation language vs. stated strategic intent.' },
  { n:'05', icon:'database',    title:'Execution reality',       sub:'Who won, how much, every mod since.' },
  { n:'06', icon:'layers',      title:'Vehicle mechanics',       sub:'Contract vehicle lifecycles and access windows.' },
  { n:'07', icon:'people',      title:'The human network',       sub:'127,000 contracting officers — tenure, specialization, behavior.' },
];

const HomeSolution = () => (
  <Section id="solution">
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:72, alignItems:'start', marginBottom:72}}>
      <div style={{display:'flex', flexDirection:'column', gap:16}}>
        <div className="reveal"><Eyebrow>The Method</Eyebrow></div>
        <h2 className="h2-display reveal delay-1">
          Seven dimensions of evidence, <span className="accent">converging into one score</span>.
        </h2>
      </div>
      <div className="reveal delay-2">
        <p className="lede">
          The output isn't a dashboard. It's a convergence score with full evidence traceability, calibrated against <strong style={{color:'var(--slate-900)'}}>ICD 203</strong> — the intelligence community's directive on analytic standards. That's the bar we hold ourselves to.
        </p>
        <a href="#/methodology" className="body-link" style={{marginTop:20, display:'inline-flex', alignItems:'center', gap:6, fontSize:14}}>
          Full methodology <Icon name="arrow" size={14}/>
        </a>
      </div>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16}}>
      {DIMENSIONS.map((d,i)=>(
        <div key={d.n} className={`reveal delay-${(i%4)+1}`} style={{
          background:'#fff', border:'1px solid var(--slate-200)', borderRadius:14,
          padding:'24px 22px', position:'relative', transition:'all 0.3s cubic-bezier(0.33,1,0.68,1)',
          gridColumn: i === 6 ? 'span 1' : 'auto',
        }}
        onMouseEnter={e=>{e.currentTarget.style.transform='translateY(-4px)';e.currentTarget.style.borderColor='#000080';e.currentTarget.style.boxShadow='0 20px 40px -16px rgba(0,0,128,0.2)';}}
        onMouseLeave={e=>{e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.borderColor='var(--slate-200)';e.currentTarget.style.boxShadow='none';}}
        >
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:20}}>
            <div style={{width:40, height:40, borderRadius:10, background:'#EFF6FF', color:'#000080', display:'flex', alignItems:'center', justifyContent:'center'}}>
              <Icon name={d.icon} size={18}/>
            </div>
            <span className="mono-num" style={{fontSize:12, color:'#94A3B8', fontWeight:700}}>{d.n}</span>
          </div>
          <h4 style={{fontSize:16, fontWeight:700, margin:'0 0 8px', letterSpacing:'-0.01em'}}>{d.title}</h4>
          <p style={{fontSize:13, lineHeight:1.5, color:'var(--slate-500)', margin:0}}>{d.sub}</p>
        </div>
      ))}
      {/* Last cell: convergence node */}
      <div className="reveal delay-4" style={{background:'#000080', borderRadius:14, padding:'24px 22px', color:'#fff', display:'flex', flexDirection:'column', justifyContent:'space-between', minHeight:180}}>
        <div>
          <div className="mono-label" style={{color:'#93C5FD', fontSize:9, marginBottom:18}}>OUTPUT</div>
          <div style={{fontSize:36, fontWeight:800, letterSpacing:'-0.02em'}}>Convergence<br/>Score</div>
        </div>
        <div style={{fontSize:12, color:'#BFDBFE', lineHeight:1.5}}>
          Arithmetic of independent evidence agreement. Not opinion.
        </div>
      </div>
    </div>
  </Section>
);

// Moat section — dark. 3 layers of defensibility.
const HomeMoat = () => (
  <Section id="moat" dark grid>
    <div style={{position:'absolute', top:'-20%', left:'60%', width:600, height:600, background:'#1E3A8A', borderRadius:'50%', filter:'blur(140px)', opacity:0.3}}/>

    <div style={{maxWidth:820, marginBottom:64}}>
      <div className="reveal"><Eyebrow dark>Defensibility</Eyebrow></div>
      <h2 className="h2-display dark reveal delay-1" style={{marginTop:14, marginBottom:20}}>
        The moat compounds with <span className="accent">every engagement</span>.
      </h2>
      <p className="lede dark reveal delay-2">
        Three layers of defensibility. By the time a competitor reaches Layer 2, our Layer 3 has accumulated another year of calibration data.
      </p>
    </div>

    <div style={{display:'flex', flexDirection:'column', gap:14}}>
      {[
        {tag:'12–18 MONTHS TO COPY', tagColor:'#FBBF24', num:'01', title:'Cross-source alignment',
         body:'Topic taxonomy across three corpora and 35 departments, running on a shared Qwen3-8B embedding space. Difficult, but not structurally defensible.'},
        {tag:'HARD TO REPLICATE', tagColor:'#60A5FA', num:'02', title:'Temporal dynamics',
         body:'20 years of lifecycle modeling and anomaly detection across 10 signal classes. The historical data is public; the aligned temporal representation is not.'},
        {tag:'CANNOT REPLICATE', tagColor:'#4ADE80', num:'03', title:'Calibrated evidence weights',
         body:'Empirically validated reliability tiers earned from producing real intelligence at real scale. A late entrant cannot reconstruct them — they are made of time.'},
      ].map((l,i)=>(
        <div key={l.num} className={`reveal delay-${i+1}`} style={{
          background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)',
          borderLeft:`3px solid ${l.tagColor}`, borderRadius:12, padding:'26px 32px',
          display:'grid', gridTemplateColumns:'180px 1fr 80px', gap:32, alignItems:'center',
          transition:'all 0.3s',
        }}
        onMouseEnter={e=>e.currentTarget.style.background='rgba(255,255,255,0.05)'}
        onMouseLeave={e=>e.currentTarget.style.background='rgba(255,255,255,0.03)'}
        >
          <span className="mono-label" style={{color:l.tagColor, fontSize:10}}>{l.tag}</span>
          <div>
            <h4 style={{color:'#fff', fontSize:20, fontWeight:700, margin:'0 0 6px'}}>Layer {l.num.slice(1)} — {l.title}</h4>
            <p style={{color:'#94A3B8', fontSize:14, lineHeight:1.55, margin:0}}>{l.body}</p>
          </div>
          <div className="mono-num" style={{fontSize:48, fontWeight:800, color:'rgba(255,255,255,0.06)', textAlign:'right', letterSpacing:'-0.03em'}}>{l.num}</div>
        </div>
      ))}
    </div>
  </Section>
);

// Why now — three forces, dark continuation.
const HomeWhyNow = () => (
  <Section id="why-now" dark>
    <div style={{maxWidth:820, marginBottom:64}}>
      <div className="reveal"><Eyebrow dark>Why Now</Eyebrow></div>
      <h2 className="h2-display dark reveal delay-1" style={{marginTop:14}}>
        Procurement reform is creating <span className="accent">agency and contractor demand right now</span>.
      </h2>
      <p className="lede dark reveal delay-2" style={{marginTop:20}}>
        The window is open for a narrow stretch. Federal buyers are being forced to show their work, and contractor platforms are being pushed to explain why their recommendations are right.
      </p>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:20}}>
      {[
        {tag:'POLICY', title:'Reform EOs need evidence', body:'"Show me where procurement is working" is an audit question agencies cannot answer with existing tooling. They need an external evidence substrate.'},
        {tag:'MARKET', title:'GovCon AI is commoditizing', body:'Proposal-writing and opportunity-alert tools are racing to the bottom. Platforms need an intelligence layer they can\'t build but can resell.'},
        {tag:'TALENT', title:'The analysts are retiring', body:'Senior capture and BD analysts — the humans who synthesized this today — are aging out of the market faster than they\'re replaced.'},
      ].map((c,i)=>(
        <div key={c.tag} className={`reveal delay-${i+1}`} style={{background:'rgba(255,255,255,0.03)', border:'1px solid rgba(255,255,255,0.08)', borderRadius:12, padding:'28px 28px', transition:'border-color 0.3s'}}
          onMouseEnter={e=>e.currentTarget.style.borderColor='rgba(96,165,250,0.4)'}
          onMouseLeave={e=>e.currentTarget.style.borderColor='rgba(255,255,255,0.08)'}>
          <div className="mono-label" style={{color:'#60A5FA', fontSize:10, marginBottom:16}}>{c.tag}</div>
          <h4 style={{color:'#fff', fontSize:20, fontWeight:700, margin:'0 0 12px'}}>{c.title}</h4>
          <p style={{color:'#94A3B8', fontSize:14, lineHeight:1.55, margin:0}}>{c.body}</p>
        </div>
      ))}
    </div>
  </Section>
);

window.HomeSolution = HomeSolution;
window.HomeMoat = HomeMoat;
window.HomeWhyNow = HomeWhyNow;