// Methodology page — 7 dimensions deep + confidence tiers + ICD 203.

const MethHero = () => (
  <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>Methodology · Tradecraft</Chip>
      <h1 className="display" style={{marginTop:22, marginBottom:24, maxWidth:1000}}>
        Intelligence is not a dashboard. <span className="accent">It is a substrate.</span>
      </h1>
      <p className="lede" style={{maxWidth:760, fontSize:22}}>
        We calibrate to ICD 203 — the intelligence community's directive on analytic standards. Every claim carries a reliability tier, an evidence chain, and a confidence score. Convergence is arithmetic, not opinion.
      </p>
    </div>
  </section>
);

const MethDimensions = () => (
  <Section tint>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow>The Seven Dimensions</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>Every question breaks into <span className="accent">seven lenses</span>.</h2>
    </div>
    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
      {[
        {n:'01', icon:'shieldCheck', title:'Political durability', body:'Is the money real across administrations? We trace the line from authorization through appropriation through execution, and flag items that survive party changes versus items that evaporate.'},
        {n:'02', icon:'flag', title:'Oversight signals', body:'GAO and OIG findings as leading indicators. Recommendations that get adopted become programs. Recommendations that get ignored become reorganizations.'},
        {n:'03', icon:'trend', title:'Forward intent', body:'Agency forecasts and how they change over time. A forecast that moves is more informative than one that stays still — we track the diff.'},
        {n:'04', icon:'target', title:'Market demand', body:'Solicitation language vs. stated strategic intent. When an RFP reads different from the strategy document, that gap is the actual opportunity.'},
        {n:'05', icon:'database', title:'Execution reality', body:'Who won, how much, every mod since. Award day is just the start — the modifications tell you whether the program is healthy or failing.'},
        {n:'06', icon:'layers', title:'Vehicle mechanics', body:'Contract vehicle lifecycles and access windows. Vehicles have predictable recompete rhythms; most capture teams miss them by six months.'},
        {n:'07', icon:'people', title:'The human network', body:'127,000 contracting officers. Tenure, topic specialization, behavioral patterns. The same RFP from a specialist KO means something different than the same RFP from a generalist.'},
      ].map((d,i)=>(
        <div key={d.n} className={`reveal delay-${(i%3)+1}`} style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:14, padding:'28px 28px'}}>
          <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:14}}>
            <div style={{width:40, height:40, borderRadius:10, background:'#EFF6FF', color:'#000080', display:'flex', alignItems:'center', justifyContent:'center', flex:'none'}}>
              <Icon name={d.icon} size={18}/>
            </div>
            <div className="mono-label" style={{fontSize:9, marginLeft:'auto'}}>DIMENSION {d.n}</div>
          </div>
          <h3 style={{fontSize:18, fontWeight:700, margin:'0 0 10px', letterSpacing:'-0.01em'}}>{d.title}</h3>
          <p style={{fontSize:13.5, lineHeight:1.55, color:'var(--slate-600)', margin:0}}>{d.body}</p>
        </div>
      ))}
    </div>
  </Section>
);

const ConfidenceLadder = () => (
  <Section>
    <div style={{maxWidth:820, marginBottom:48}}>
      <div className="reveal"><Eyebrow>Confidence Framework</Eyebrow></div>
      <h2 className="h2-display reveal delay-1" style={{marginTop:14}}>"High" means something <span className="accent">specific and reproducible</span>.</h2>
      <p className="lede reveal delay-2" style={{marginTop:18}}>Convergence scores run 0.00–1.00. The band they fall in is not marketing — it's an arithmetic output of how much independent evidence agrees.</p>
    </div>
    <div className="reveal delay-3" style={{background:'#fff', border:'1px solid var(--slate-200)', borderRadius:16, overflow:'hidden'}}>
      {[
        {band:'HIGH', range:'0.80 – 1.00', color:'#16A34A', body:'Three or more independent Tier-1 sources agree, no contradictory Tier-1 signal. Backtest-validated at >85% directional accuracy.'},
        {band:'MODERATE', range:'0.55 – 0.79', color:'#60A5FA', body:'Two independent sources agree, or one Tier-1 plus corroborating Tier-2. Divergent Tier-2 signals acknowledged.'},
        {band:'LOW', range:'0.30 – 0.54', color:'#FBBF24', body:'Single-source claim or Tier-2 majority with Tier-1 gap. Flagged for analyst review before external use.'},
        {band:'INCONCLUSIVE', range:'0.00 – 0.29', color:'#EF4444', body:'Evidence contradicts itself or is insufficient. Not issued as a claim — issued as a research question.'},
      ].map((t,i)=>(
        <div key={t.band} style={{display:'grid', gridTemplateColumns:'160px 160px 1fr', gap:32, alignItems:'center', padding:'24px 32px', borderTop:i>0?'1px solid var(--slate-100)':'none'}}>
          <div style={{display:'flex', alignItems:'center', gap:10}}>
            <div style={{width:10, height:10, borderRadius:999, background:t.color}}/>
            <div className="mono-label" style={{color:t.color, fontSize:11, fontWeight:700}}>{t.band}</div>
          </div>
          <div className="mono-num" style={{fontSize:18, fontWeight:700, color:'var(--slate-900)'}}>{t.range}</div>
          <p style={{fontSize:14, color:'var(--slate-600)', lineHeight:1.55, margin:0}}>{t.body}</p>
        </div>
      ))}
    </div>
  </Section>
);

const ICDCallout = () => (
  <Section dark>
    <div style={{maxWidth:860, textAlign:'center', margin:'0 auto'}}>
      <Eyebrow dark>ICD 203 · Analytic Tradecraft</Eyebrow>
      <h2 className="h2-display dark" style={{marginTop:18, marginBottom:24}}>Calibrated against the <span className="accent">bar the IC holds itself to</span>.</h2>
      <p className="lede dark" style={{margin:'0 auto', color:'#BFDBFE'}}>ICD 203 requires analytic products to use consistent vocabulary, distinguish evidence from judgment, express uncertainty calibratedly, and maintain source traceability. We treat those as product requirements, not editorial norms.</p>
    </div>
  </Section>
);

window.MethHero = MethHero;
window.MethDimensions = MethDimensions;
window.ConfidenceLadder = ConfidenceLadder;
window.ICDCallout = ICDCallout;