/* Methodology — AI-enabled Kestrel pipeline, Porter & Kramer framework */
const Methodology = () => {
  const steps = [
    {n:'01', k:'Ingest', v:'Public disclosures — annual reports, sustainability reports, ESG data books. Passages extracted and segmented into discrete units of analysis.'},
    {n:'02', k:'Filter', v:'Rule-based filtering identifies candidate CSV passages. Keyword matching + structural cues narrow the corpus before deeper analysis.'},
    {n:'03', k:'Classify', v:'LLM-assisted adjudication applies the Kestrel rubric to each passage. Ambiguous cases route to secondary review with explicit reasoning.'},
    {n:'04', k:'Aggregate', v:'Passage-level labels roll up into company profiles: % Positive, Ambiguous, Negative, plus distribution of initiative types and CSV pillars.'},
  ];

  const initiativeTypes = [
    { k:'No initiative',    d:'Descriptive or contextual text. No activity claimed.' },
    { k:'Transactional',    d:'One-sided benefit — business OR social, not both.' },
    { k:'Transitional',     d:'Both benefits implied; causal linkage is weak or unverified.' },
    { k:'Transformational', d:'Clear dual benefit with demonstrated, measurable impact.' },
  ];

  return (
    <section className="section alt" id="method">
      <div className="site-wrap">
        <EyebrowRow label="Method"/>
        <h2 style={{maxWidth:820}}>AI-assisted classification, grounded in Porter &amp; Kramer's shared value framework.</h2>
        <p className="lede" style={{marginTop:20,maxWidth:680,color:'var(--ink-2)'}}>
          Kestrel is rule-based and intentionally conservative — we prioritise false negatives over false positives. Only high-confidence, evidence-backed passages qualify as true shared value.
        </p>

        <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:0,marginTop:72,borderTop:'1px solid var(--line)'}}>
          {steps.map((s,i)=>(
            <div key={s.n} style={{
              padding:'40px 28px 40px 0',
              paddingLeft: i===0 ? 0 : 28,
              borderRight:i<3?'1px solid var(--line)':'none',
              position:'relative',
            }}>
              <div className="eyebrow tabular" style={{color:'var(--moss)'}}>{s.n}</div>
              <div style={{fontSize:22,fontWeight:500,color:'var(--ink)',marginTop:12,letterSpacing:'-0.015em'}}>{s.k}</div>
              <p style={{fontSize:13,lineHeight:'22px',color:'var(--ink-2)',marginTop:12}}>{s.v}</p>
              {i<3 && <div style={{position:'absolute',right:-8,top:40,color:'var(--ink-3)',background:'var(--canvas-2)',padding:2}}><Icon name="chevron-right" size={16}/></div>}
            </div>
          ))}
        </div>

        <div style={{marginTop:56,padding:'24px 28px',border:'1px solid var(--line)',borderRadius:12,background:'var(--canvas)',display:'flex',gap:20,alignItems:'center',maxWidth:820}}>
          <div style={{width:36,height:36,borderRadius:999,background:'var(--sage-tint)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--moss-deep)',flexShrink:0}}>
            <Icon name="spark" size={18}/>
          </div>
          <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)'}}>
            <span style={{color:'var(--ink)',fontWeight:500}}>Where AI helps, and where it doesn't.</span> Language models do the heavy lifting on segmentation and contextual adjudication. The classification rubric itself is human-authored, versioned, and applied deterministically &mdash; <em style={{color:'var(--ink)',fontWeight:500,fontStyle:'italic'}}>no model is asked to decide what qualifies as shared value.</em>
          </p>
        </div>

        <div style={{marginTop:96,display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,alignItems:'start'}}>
          <div>
            <div className="eyebrow" style={{marginBottom:16}}>Four CSV criteria</div>
            <div style={{borderTop:'1px solid var(--line)'}}>
              {[
                {k:'Primary label', v:'Positive, Ambiguous, or Negative. Passage-level classification against the full rubric.'},
                {k:'Initiative type', v:'No initiative, Transactional, Transitional, or Transformational.'},
                {k:'CSV pillar', v:'Porter & Kramer: products & markets, value-chain productivity, or local cluster development.'},
                {k:'Remediation flag', v:'Marks activity that is reactive (post-impact compensation) rather than value-creating.'},
              ].map(c=>(
                <div key={c.k} style={{display:'grid',gridTemplateColumns:'180px 1fr',gap:24,padding:'18px 0',borderBottom:'1px solid var(--line)',minHeight:92,alignItems:'flex-start'}}>
                  <div style={{fontSize:14,fontWeight:500,color:'var(--ink)'}}>{c.k}</div>
                  <p style={{fontSize:13,lineHeight:'20px',color:'var(--ink-2)'}}>{c.v}</p>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom:16}}>Initiative type</div>
            <div style={{borderTop:'1px solid var(--line)'}}>
              {initiativeTypes.map((t,i)=>(
                <div key={t.k} style={{display:'grid',gridTemplateColumns:'32px 1fr',gap:20,padding:'18px 0',borderBottom:'1px solid var(--line)',alignItems:'flex-start',minHeight:92}}>
                  <div className="tabular" style={{fontSize:18,fontWeight:600,color:'var(--moss)',letterSpacing:'-0.01em'}}>{String(i+1).padStart(2,'0')}</div>
                  <div>
                    <div style={{fontSize:14,fontWeight:500,color:'var(--ink)'}}>{t.k}</div>
                    <p style={{fontSize:13,lineHeight:'20px',color:'var(--ink-2)',marginTop:4}}>{t.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* ---------- Reliability ---------- */}
        <div style={{marginTop:112,paddingTop:64,borderTop:'1px solid var(--line)'}}>
          <div className="eyebrow" style={{marginBottom:16,color:'var(--moss)'}}>Reliability · Kestrel V2.0</div>
          <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:80,alignItems:'start'}}>
            <div>
              <h3 style={{fontSize:32,lineHeight:'38px',fontWeight:500,letterSpacing:'-0.02em',maxWidth:520}}>
                We ran every passage five times. The labels hold up.
              </h3>
              <p style={{marginTop:20,fontSize:15,lineHeight:'24px',color:'var(--ink-2)',maxWidth:520}}>
                Inter-run agreement was measured with Fleiss' κ across five independent classification runs per passage. Overall agreement is substantial; on the headline question — whether shared value is present at all — it is almost perfect.
              </p>
              <p style={{marginTop:16,fontSize:14,lineHeight:'22px',color:'var(--ink-3)',maxWidth:520}}>
                Initiative type is where we see the most instability: the boundary between <em>Transactional</em> and <em>Transitional</em> is the primary source of disagreement, and those definitions are the top candidates for refinement in V2.1.
              </p>
            </div>

            <div className="kappa-card" style={{display:'flex',flexDirection:'column',gap:0,border:'1px solid var(--line)',borderRadius:12,background:'var(--canvas)',overflow:'hidden'}}>
              {[
                {k:'Primary label (CSV present?)', v:0.822, note:'almost perfect'},
                {k:'Overall (all four dimensions)', v:0.765, note:'substantial'},
                {k:'Initiative type',               v:0.702, note:'substantial'},
              ].map((r,i,arr)=>{
                // bar range is 0.60..1.00 so values scale as (v-0.60)/0.40
                const pct = Math.max(0, Math.min(1, (r.v-0.60)/0.40)) * 100;
                return (
                <div key={r.k} style={{padding:'20px 24px',borderBottom:i<arr.length-1?'1px solid var(--line)':'none'}}>
                  <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
                    <div style={{fontSize:13,fontWeight:500,color:'var(--ink)'}}>{r.k}</div>
                    <div className="tabular" style={{fontSize:11,color:'var(--ink-3)',textTransform:'uppercase',letterSpacing:'0.08em'}}>{r.note}</div>
                  </div>
                  <div style={{display:'flex',alignItems:'center',gap:14}}>
                    <div className="tabular" style={{fontSize:32,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.02em',width:80}}>
                      {r.v.toFixed(3)}
                    </div>
                    <div style={{flex:1,height:6,background:'var(--canvas-3)',borderRadius:3,overflow:'hidden',position:'relative'}}>
                      <div className="kappa-fill" style={{width:`${pct}%`,height:'100%',background:'var(--moss)',transformOrigin:'left',animation:`kappa-grow 900ms ${i*120}ms var(--ease-quiet) both`}}/>
                      {/* Almost-perfect threshold at 0.80 → 50% of [0.60..1.00] */}
                      <div style={{position:'absolute',left:'50%',top:-3,bottom:-3,width:1,background:'var(--line-strong)'}} title="Almost perfect threshold (0.80)"/>
                    </div>
                    <div className="tabular" style={{fontSize:11,color:'var(--ink-3)',width:40,textAlign:'right'}}>κ</div>
                  </div>
                </div>
              );})}
              {/* Scale aligned with bar: 0.60 / 0.80 / 1.00 sit at 0% / 50% / 100% of bar track.
                  Use same flex geometry (number col 80+14, right col 14+40) so gridline positions line up. */}
              <div style={{padding:'12px 24px 16px',background:'var(--canvas-2)',display:'flex',alignItems:'center',gap:14,fontSize:11,color:'var(--ink-3)',textTransform:'uppercase',letterSpacing:'0.08em'}}>
                <div style={{width:80}}/>
                <div style={{flex:1,position:'relative',height:14}}>
                  <div className="tabular" style={{position:'absolute',left:0,top:0,transform:'translateX(-50%)'}}>0.60</div>
                  <div style={{position:'absolute',left:'50%',top:0,transform:'translateX(-50%)',color:'var(--ink-2)'}}>Almost perfect →</div>
                  <div className="tabular" style={{position:'absolute',right:0,top:0,transform:'translateX(50%)'}}>1.00</div>
                </div>
                <div style={{width:40}}/>
              </div>
            </div>
          </div>

          {/* Run-level agreement — Full / Majority */}
          <div style={{marginTop:56,display:'grid',gridTemplateColumns:'1fr 1fr',gap:32}}>
            <div className="stat-card" style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:12,background:'var(--canvas)'}}>
              <div className="eyebrow">Full agreement</div>
              <div style={{fontSize:64,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.03em',lineHeight:'68px',marginTop:8}}>
                <AnimatedNumber value={77.2} decimals={1} suffix=""/><span style={{fontSize:32,color:'var(--ink-3)'}}>%</span>
              </div>
              <p style={{marginTop:12,fontSize:13,lineHeight:'20px',color:'var(--ink-2)',maxWidth:340}}>of passages received the identical label across all five runs (5/5).</p>
            </div>
            <div className="stat-card" style={{padding:'32px 36px',border:'1px solid var(--line)',borderRadius:12,background:'var(--canvas)'}}>
              <div className="eyebrow">Majority agreement</div>
              <div style={{fontSize:64,fontWeight:600,color:'var(--moss-deep)',letterSpacing:'-0.03em',lineHeight:'68px',marginTop:8}}>
                <AnimatedNumber value={99.4} decimals={1} suffix=""/><span style={{fontSize:32,color:'var(--ink-3)'}}>%</span>
              </div>
              <p style={{marginTop:12,fontSize:13,lineHeight:'20px',color:'var(--ink-2)',maxWidth:340}}>received the same label in at least 3 of 5 runs — a clear majority for nearly every passage.</p>
            </div>
          </div>

          {/* Human agreement — mirrors the κ card: copy left, metric card right */}
          <div style={{marginTop:72,paddingTop:48,borderTop:'1px dashed var(--line)'}}>
            <div className="eyebrow" style={{marginBottom:16,color:'var(--moss)'}}>Human agreement</div>
            <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:80,alignItems:'start'}}>
              <div>
                <h3 style={{fontSize:32,lineHeight:'38px',fontWeight:500,letterSpacing:'-0.02em',maxWidth:520}}>
                  Kestrel agrees with human raters 74% of the time.
                </h3>
                <p style={{marginTop:20,fontSize:15,lineHeight:'24px',color:'var(--ink-2)',maxWidth:520}}>
                  On a held-out sample, V2.0&rsquo;s classifications matched expert human labels in roughly three of every four passages. The remaining gap concentrates at the same boundaries that drive run-to-run disagreement.
                </p>
                <p style={{marginTop:16,fontSize:14,lineHeight:'22px',color:'var(--ink-2)',maxWidth:520,padding:'14px 16px',background:'var(--sage-tint)',borderLeft:'3px solid var(--moss)',borderRadius:'0 6px 6px 0'}}>
                  <span style={{color:'var(--ink)',fontWeight:500}}>Humans will quickly become the limiting factor.</span> Raters routinely infer beyond what the report actually discloses and lean generous &mdash; awarding shared value where the evidence in front of them doesn&rsquo;t support it.
                </p>
                <p style={{marginTop:16,fontSize:14,lineHeight:'22px',color:'var(--ink-3)',maxWidth:520}}>
                  <span style={{color:'var(--ink)',fontWeight:500}}>V3.0 will aim to increase this value</span> &mdash; with a refined rubric around <em>Transactional</em> vs. <em>Transitional</em> and a larger adjudicated training set.
                </p>
              </div>

              <div style={{display:'flex',flexDirection:'column',gap:0,border:'1px solid var(--line)',borderRadius:12,background:'var(--canvas)',overflow:'hidden'}}>
                {[
                  {k:'Kestrel V2.0 · today',    v:0.74, tone:'var(--ink)',       note:'baseline'},
                  {k:'Kestrel V3.0 · target',   v:0.85, tone:'var(--moss-deep)', note:'targeted', dashed:true},
                ].map((r,i,arr)=>(
                  <div key={r.k} style={{padding:'20px 24px',borderBottom:i<arr.length-1?'1px solid var(--line)':'none'}}>
                    <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline',marginBottom:10}}>
                      <div style={{fontSize:13,fontWeight:500,color:'var(--ink)'}}>{r.k}</div>
                      <div className="tabular" style={{fontSize:11,color:'var(--ink-3)',textTransform:'uppercase',letterSpacing:'0.08em'}}>{r.note}</div>
                    </div>
                    <div style={{display:'flex',alignItems:'center',gap:14}}>
                      <div className="tabular" style={{fontSize:32,fontWeight:600,color:r.tone,letterSpacing:'-0.02em',width:80}}>
                        {Math.round(r.v*100)}<span style={{fontSize:18,color:'var(--ink-3)'}}>%</span>
                      </div>
                      <div style={{flex:1,height:6,background:'var(--canvas-3)',borderRadius:3,overflow:'hidden',position:'relative'}}>
                        <div style={{width:`${r.v*100}%`,height:'100%',background:r.tone,opacity:r.dashed?0.5:1,animation:`kappa-grow 900ms ${i*120}ms var(--ease-quiet) both`,transformOrigin:'left'}}/>
                      </div>
                      <div className="tabular" style={{fontSize:11,color:'var(--ink-3)',width:40,textAlign:'right'}}>agree</div>
                    </div>
                  </div>
                ))}
                <div style={{padding:'12px 24px 16px',background:'var(--canvas-2)',display:'flex',alignItems:'center',gap:14,fontSize:11,color:'var(--ink-3)',textTransform:'uppercase',letterSpacing:'0.08em'}}>
                  <div style={{width:80}}/>
                  <div style={{flex:1,position:'relative',height:14}}>
                    <div className="tabular" style={{position:'absolute',left:0,top:0,transform:'translateX(-50%)'}}>0%</div>
                    <div style={{position:'absolute',left:'74%',top:0,transform:'translateX(-50%)',color:'var(--ink-2)'}}>V2.0</div>
                    <div className="tabular" style={{position:'absolute',right:0,top:0,transform:'translateX(50%)'}}>100%</div>
                  </div>
                  <div style={{width:40}}/>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style={{marginTop:64,fontSize:12,lineHeight:'20px',color:'var(--ink-3)',maxWidth:720}}>
          <div style={{marginBottom:6}}>Framework inspired by Porter, M. E. &amp; Kramer, M. R. (2011). &ldquo;Creating Shared Value.&rdquo; <em>Harvard Business Review</em>.</div>
          <div>Reliability measured with Fleiss&rsquo; κ across five independent runs per passage. Fleiss, J. L. (1971). &ldquo;Measuring nominal scale agreement among many raters.&rdquo; <em>Psychological Bulletin</em>, 76(5), 378&ndash;382. <a href="https://psycnet.apa.org/doiLanding?doi=10.1037%2Fh0031619" target="_blank" rel="noopener" style={{color:'var(--ink-2)'}}>doi:10.1037/h0031619</a>.</div>
        </div>
      </div>
    </section>
  );
};
window.Methodology = Methodology;
