// Case Studies / Evidence page — three concrete claim examples with full evidence chains.

const EvidenceHero = () => (
  <section style={{paddingTop:168, paddingBottom:80, background:'#fff', position:'relative', overflow:'hidden'}}>
    <div className="grid-pattern" style={{position:'absolute', inset:0, opacity:0.5}}/>
    <div className="container" style={{position:'relative'}}>
      <Chip>Case Evidence</Chip>
      <h1 className="display" style={{marginTop:22, marginBottom:24, maxWidth:1040}}>
        What a <span className="accent">calibrated claim</span> looks like.
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        Three real outputs from the substrate — anonymized to agency level. Each carries its evidence chain, its tier composition, and its convergence score. These are not summaries. They are the actual deliverable.
      </p>
    </div>
  </section>
);

// One evidence card — claim + sources + convergence.
const EvidenceCard = ({ num, agency, claim, sources, score, band, signal }) => (
  <div className="reveal" style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:20, overflow:'hidden', marginBottom:32}}>
    <div style={{padding:'24px 32px', borderBottom:'1px solid var(--slate-100)', display:'flex', justifyContent:'space-between', alignItems:'center', gap:20, background:'var(--slate-50)'}}>
      <div style={{display:'flex', alignItems:'center', gap:20}}>
        <div className="mono-num" style={{fontSize:24, fontWeight:800, color:'#000080'}}>{num}</div>
        <div>
          <div className="mono-label" style={{fontSize:10, color:'#000080'}}>{agency}</div>
          <div style={{fontSize:13, color:'var(--slate-500)', marginTop:4}}>Signal class: {signal}</div>
        </div>
      </div>
      <div style={{textAlign:'right'}}>
        <div className="mono-label" style={{fontSize:9}}>CONVERGENCE</div>
        <div className="mono-num" style={{fontSize:28, fontWeight:800, color:'var(--slate-900)', marginTop:2}}>
          {score} <span style={{fontSize:12, color:'#000080', fontFamily:'var(--font-sans)', fontWeight:700, letterSpacing:'0.2em'}}>· {band}</span>
        </div>
      </div>
    </div>
    <div style={{padding:'32px 32px 28px'}}>
      <div style={{fontSize:22, fontWeight:700, color:'var(--slate-900)', lineHeight:1.35, letterSpacing:'-0.01em', marginBottom:28, fontStyle:'italic'}}>
        "{claim}"
      </div>
      <div className="mono-label" style={{marginBottom:14}}>EVIDENCE CHAIN · {sources.length} SOURCES</div>
      <div style={{display:'flex', flexDirection:'column', gap:10}}>
        {sources.map((s,i)=>(
          <div key={i} style={{display:'grid', gridTemplateColumns:'24px 180px 72px 72px 1fr', gap:14, alignItems:'center', padding:'12px 16px', background: i%2===0?'var(--slate-50)':'transparent', borderRadius:8, fontSize:13}}>
            <Icon name="check" size={16} style={{color: s.supports ? '#16A34A' : '#EF4444'}}/>
            <span style={{fontWeight:600, color:'var(--slate-900)'}}>{s.name}</span>
            <span style={{fontSize:10, padding:'3px 8px', background: s.tier==='TIER 1' ? 'rgba(0,0,128,0.08)' : 'rgba(100,116,139,0.1)', color: s.tier==='TIER 1' ? '#000080' : 'var(--slate-600)', borderRadius:4, letterSpacing:'0.12em', fontWeight:700, textAlign:'center', fontFamily:'var(--font-mono)'}}>{s.tier}</span>
            <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--slate-500)'}}>{s.weight}</span>
            <span style={{color:'var(--slate-600)', fontSize:13}}>{s.note}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
);

const EvidenceBody = () => (
  <Section tint>
    <EvidenceCard num="01" agency="DHS · S&T DIRECTORATE" signal="Operational AI/ML shift"
      claim="AI/ML procurement in DHS S&T is structurally shifting from demo-stage pilots to operational integration contracts — with FY26 budget authority preserving the transition."
      score="0.91" band="HIGH"
      sources={[
        {name:'USASpending awards', tier:'TIER 1', weight:'w=0.92', note:'127 awards FY21–FY25, +840% YoY in mod values', supports:true},
        {name:'GAO-24-107',         tier:'TIER 1', weight:'w=0.88', note:'Recommended integration path, adopted Jun 2024', supports:true},
        {name:'Agency forecast',    tier:'TIER 2', weight:'w=0.64', note:'3 of 4 published forecasts show continuation', supports:true},
        {name:'Congressional mark', tier:'TIER 1', weight:'w=0.85', note:'FY26 markup preserves program line item', supports:true},
      ]}/>
    <EvidenceCard num="02" agency="DOD · PLATFORM ONE" signal="Vehicle consolidation"
      claim="Software factory contract vehicles are consolidating toward GSA ASTRO, with legacy NAICS-based vehicles showing declining new-award activity over 18 months."
      score="0.74" band="MODERATE"
      sources={[
        {name:'USASpending',        tier:'TIER 1', weight:'w=0.88', note:'ASTRO new awards up 62% YoY, legacy down 31%', supports:true},
        {name:'SAM.gov forecasts',  tier:'TIER 2', weight:'w=0.60', note:'14 of 18 forecasted RFPs route to ASTRO',  supports:true},
        {name:'OIG-24-089',         tier:'TIER 1', weight:'w=0.82', note:'Flagged legacy vehicle pricing inefficiency', supports:true},
        {name:'Industry day notes', tier:'TIER 3', weight:'w=0.30', note:'Primes report continued legacy preference',  supports:false},
      ]}/>
    <EvidenceCard num="03" agency="HHS · ADMINISTRATION FOR CHILDREN AND FAMILIES" signal="Pre-RFP signal · cyber"
      claim="ACF is 4–6 months from releasing a major zero-trust modernization solicitation; vendor positioning window is open now and closes at draft-RFP release."
      score="0.42" band="LOW"
      sources={[
        {name:'Agency web (crawl)', tier:'TIER 2', weight:'w=0.58', note:'3 new ZT architecture pages Q1 2026',       supports:true},
        {name:'Sources-sought',     tier:'TIER 1', weight:'w=0.80', note:'None posted yet',                              supports:false},
        {name:'Budget justification', tier:'TIER 1', weight:'w=0.85', note:'FY26 line includes ZT but amount TBD',     supports:true},
        {name:'KO pattern',         tier:'TIER 2', weight:'w=0.55', note:'Assigned KO has no prior ZT history',          supports:false},
      ]}/>
  </Section>
);

const EvidenceCTA = () => (
  <Section>
    <div style={{maxWidth:780, margin:'0 auto', textAlign:'center'}}>
      <Eyebrow>Request Sample</Eyebrow>
      <h2 className="h2-display" style={{marginTop:14, marginBottom:20}}>The full Blind Spot Report <span className="accent">is 18 claims like these</span>.</h2>
      <p className="lede" style={{margin:'0 auto 32px'}}>We publish a sanitized sample on request — scoped to an agency or program you care about. No NDA; the evidence chain is the pitch.</p>
      <a href="#/contact" className="btn-primary">Request sample brief <Icon name="arrow" size={14}/></a>
    </div>
  </Section>
);

window.EvidenceHero = EvidenceHero;
window.EvidenceBody = EvidenceBody;
window.EvidenceCTA = EvidenceCTA;