// Home page — reworked with deck content: real metrics, 7 dimensions,
// moat, why now, roadmap preview, contact CTA.

const HomeHero = () => (
  <section style={{position:'relative', paddingTop:200, paddingBottom:140, overflow:'hidden', background:'#02040D', color:'#E2E8F0'}}>
    <HeroBackground/>

    <div className="container" style={{position:'relative', zIndex:2}}>
      <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:64, alignItems:'center'}}>
        <div>
          <div style={{display:'inline-flex', alignItems:'center', gap:10, padding:'7px 14px', borderRadius:999, background:'rgba(59,130,246,0.1)', border:'1px solid rgba(96,165,250,0.3)', color:'#93C5FD', fontSize:11, letterSpacing:'0.15em', fontWeight:700, textTransform:'uppercase', fontFamily:'var(--font-mono)'}}>
            <span style={{width:6, height:6, borderRadius:999, background:'#4ADE80', boxShadow:'0 0 8px #4ADE80'}}/>
            Substrate v2.2 · Phase 1 in progress
          </div>
          <h1 className="display" style={{marginTop:28, marginBottom:28, color:'#F8FAFC'}}>
            <span style={{display:'block'}}>Your competitors see data.</span>
            <span style={{display:'block', background:'linear-gradient(90deg, #93C5FD 0%, #60A5FA 50%, #3B82F6 100%)', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'}}>We see patterns.</span>
          </h1>
          <p style={{fontSize:19, lineHeight:1.55, color:'#CBD5E1', marginBottom:40, maxWidth:560}}>
            FPDS — the Federal Procurement Decision Substrate — transforms 20 years of federal award activity into structured, decision-ready intelligence with calibrated evidence, full traceability, and ICD&nbsp;203 tradecraft standards.
          </p>
          <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
            <a href="#/architecture" style={{display:'inline-flex', alignItems:'center', gap:10, padding:'14px 24px', background:'#F8FAFC', color:'#02040D', borderRadius:10, textDecoration:'none', fontWeight:600, fontSize:14.5, transition:'all 0.2s'}} onMouseEnter={e=>{e.currentTarget.style.background='#93C5FD'; e.currentTarget.style.transform='translateY(-1px)';}} onMouseLeave={e=>{e.currentTarget.style.background='#F8FAFC'; e.currentTarget.style.transform='translateY(0)';}}>
              See the architecture <Icon name="arrow" size={14}/>
            </a>
            <a href="#/case-studies" style={{display:'inline-flex', alignItems:'center', gap:10, padding:'14px 24px', background:'rgba(255,255,255,0.04)', color:'#E2E8F0', border:'1px solid rgba(148,163,184,0.25)', borderRadius:10, textDecoration:'none', fontWeight:600, fontSize:14.5, transition:'all 0.2s'}} onMouseEnter={e=>{e.currentTarget.style.background='rgba(255,255,255,0.08)'; e.currentTarget.style.borderColor='rgba(148,163,184,0.5)';}} onMouseLeave={e=>{e.currentTarget.style.background='rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor='rgba(148,163,184,0.25)';}}>
              <Icon name="book" size={14}/> View sample brief
            </a>
          </div>
          <div style={{marginTop:56, paddingTop:32, borderTop:'1px solid rgba(148,163,184,0.15)', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:24}}>
            {[
              {n:'12.6M', l:'AWARDS'},
              {n:'7.7M', l:'OPPORTUNITIES'},
              {n:'219K', l:'AGENCY PAGES'},
              {n:'400K', l:'CO. GRAPH'},
            ].map((s,i)=>(
              <div key={i}>
                <div className="mono-num" style={{fontSize:26, fontWeight:800, color:'#F8FAFC', letterSpacing:'-0.01em'}}>{s.n}</div>
                <div className="mono-label" style={{marginTop:4, fontSize:9, color:'#64748B', letterSpacing:'0.2em'}}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <HeroClaimCard/>
      </div>
    </div>
  </section>
);

// The hero visual — a real FPDS claim with evidence tiers.
const HeroClaimCard = () => (
  <div style={{position:'relative'}}>
    <div style={{position:'absolute', top:-18, left:-18, right:-18, bottom:-18, background:'rgba(0,0,128,0.04)', borderRadius:28, filter:'blur(24px)'}}/>
    <div className="terminal-shell" style={{position:'relative'}}>
      <div className="terminal-bar">
        <span className="terminal-dot" style={{background:'#EF4444'}}/>
        <span className="terminal-dot" style={{background:'#EAB308'}}/>
        <span className="terminal-dot" style={{background:'#22C55E'}}/>
        <span className="terminal-title">claim_confidence_score · dhs_s&t · fy26q3</span>
      </div>
      <div style={{padding:'24px 26px', color:'#CBD5E1', fontSize:12.5, lineHeight:1.6}}>
        <div style={{display:'flex', gap:8, alignItems:'center', marginBottom:12}}>
          <span style={{color:'#60A5FA', fontSize:10, letterSpacing:'0.25em'}}>CLAIM · 01</span>
        </div>
        <div style={{color:'#E2E8F0', fontSize:14, lineHeight:1.55, marginBottom:24, fontFamily:'var(--font-sans)'}}>
          "AI/ML procurement in DHS S&T is structurally shifting from demo-stage pilots to operational integration contracts."
        </div>
        <div style={{display:'flex', flexDirection:'column', gap:8, marginBottom:22}}>
          {[
            {src:'USASpending', tier:'TIER 1', ok:true, note:'127 awards, FY21–FY25, +840% YoY in mod values'},
            {src:'GAO-24-107', tier:'TIER 1', ok:true, note:'Recommended integration path, adopted Jun 2024'},
            {src:'Agency forecast', tier:'TIER 2', ok:true, note:'3 of 4 published forecasts show continuation'},
            {src:'Congressional', tier:'TIER 1', ok:true, note:'FY26 markup preserves program line item'},
          ].map((r,i)=>(
            <div key={i} style={{display:'grid', gridTemplateColumns:'16px 130px 52px 1fr', gap:10, alignItems:'center', fontSize:11}}>
              <span style={{color:'#4ADE80'}}>✓</span>
              <span style={{color:'#E2E8F0', fontWeight:500}}>{r.src}</span>
              <span style={{fontSize:9, padding:'2px 6px', background:'rgba(96,165,250,0.14)', color:'#60A5FA', borderRadius:4, letterSpacing:'0.15em', fontWeight:700, textAlign:'center'}}>{r.tier}</span>
              <span style={{color:'#94A3B8', fontSize:11}}>{r.note}</span>
            </div>
          ))}
        </div>
        <div style={{padding:'14px 16px', background:'linear-gradient(90deg, rgba(0,0,128,0.6), rgba(59,130,246,0.35))', borderRadius:10, border:'1px solid rgba(59,130,246,0.3)'}}>
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:6}}>
            <span style={{color:'#CBD5E1', fontSize:10, letterSpacing:'0.2em'}}>CONVERGENCE</span>
            <span style={{color:'#fff', fontSize:22, fontWeight:700, fontFamily:'var(--font-mono)'}}>0.91 · <span style={{color:'#93C5FD', fontSize:11, letterSpacing:'0.2em'}}>HIGH</span></span>
          </div>
          <div style={{height:4, background:'rgba(255,255,255,0.15)', borderRadius:999}}>
            <div style={{height:'100%', width:'91%', background:'#93C5FD', borderRadius:999}}/>
          </div>
        </div>
      </div>
    </div>
    {/* Floating stat */}
    <div style={{position:'absolute', top:-20, right:-20, background:'rgba(255,255,255,0.9)', backdropFilter:'blur(10px)', border:'1px solid var(--slate-200)', borderRadius:16, padding:'14px 18px', boxShadow:'0 20px 50px -12px rgba(0,0,128,0.25)'}}>
      <div style={{display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:40, height:40, borderRadius:10, background:'#DCFCE7', color:'#16A34A', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Icon name="trend" size={18}/>
        </div>
        <div>
          <div className="mono-label" style={{fontSize:9, color:'#000080'}}>PATTERN SIGNAL</div>
          <div style={{fontSize:14, fontWeight:700, color:'var(--slate-900)'}}>Convergence detected</div>
        </div>
      </div>
    </div>
  </div>
);

// Problem section — three cards: Label Trap, Silo Blindness, Shift Delay.
const HomeProblem = () => (
  <Section id="problem" tint grid>
    <div style={{display:'flex', flexDirection:'column', gap:16, maxWidth:780, marginBottom:64}}>
      <div className="reveal"><Eyebrow>The Problem</Eyebrow></div>
      <h2 className="h2-display reveal delay-1">
        Procurement decisions are made with <span className="accent">incomplete context</span>.
      </h2>
      <p className="lede reveal delay-2">
        The information needed exists entirely in the public domain. It lives in disconnected systems that were never designed to talk to each other. The humans who synthesize it well are rare, expensive, and retiring.
      </p>
    </div>

    <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}}>
      {[
        {n:'01', title:'The Label Trap', body:'NAICS codes and set-aside categories describe bureaucracy, not work. Two programs under the same code can be entirely different businesses.'},
        {n:'02', title:'The Silo Blindness', body:'USASpending, SAM.gov, GAO, OIG, agency forecasts, budget justifications — each in its own format, its own cadence, never cross-referenced.'},
        {n:'03', title:'The Shift Delay', body:'By the time a shift shows up in awards, the decision was made 18 months earlier in a budget document nobody read.'},
      ].map((p,i) => (
        <div key={i} className={`reveal delay-${i+1} tech-border`} style={{background:'#fff', borderRadius:16, padding:'32px 28px', position:'relative'}}>
          <div className="mono-label" style={{color:'#000080', marginBottom:16}}>{p.n}</div>
          <h3 style={{fontSize:22, fontWeight:800, letterSpacing:'-0.01em', margin:'0 0 12px'}}>{p.title}</h3>
          <p style={{fontSize:14.5, lineHeight:1.6, color:'var(--slate-600)', margin:0}}>{p.body}</p>
        </div>
      ))}
    </div>
  </Section>
);

window.HomeHero = HomeHero;
window.HomeProblem = HomeProblem;
