/* Key insight — single dominant stat (primary), three-column, or bar variant */
const KeyInsight = ({ setRoute }) => {
  const t = useTweaks();
  const summary = window.KESTREL_SUMMARY;
  const total = summary?.meta?.total_passages ?? 0;
  const pct = summary?.global?.label_pct || {};
  const tPct = +(pct.positive  ?? 0).toFixed(2);
  const aPct = +(pct.ambiguous ?? 0).toFixed(2);
  const nPct = +(pct.negative  ?? 0).toFixed(2);
  const fmtTotal = total.toLocaleString();

  if (t.keyInsightStyle === 'three-column') {
    return (
      <section className="section">
        <div className="site-wrap">
          <EyebrowRow label="Key finding"/>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:0,borderTop:'1px solid var(--line)'}}>
            {[
              {v:`${tPct}%`, tone:'var(--class-true)',  l:'qualify as true shared value', note:'Measurable, tied to core operations, causal link between firm and community value.'},
              {v:`${aPct}%`, tone:'var(--class-ambig)', l:'ambiguous disclosures',        note:'Directionally plausible, but lack evidence, specificity, or explicit linkage.'},
              {v:`${nPct}%`, tone:'var(--class-none)',  l:'no measurable value',          note:'Narrative, policy, or compliance framing without operational outcome data.'},
            ].map((s,i)=>(
              <div key={i} style={{
                padding:'56px 40px 56px 0',
                paddingLeft:i===0?0:40,
                borderRight:i<2?'1px solid var(--line)':'none',
                borderBottom:'1px solid var(--line)',
              }}>
                <div className="metric-lg" style={{color:s.tone,fontSize:72,lineHeight:'76px'}}>{s.v}</div>
                <div style={{fontSize:17,fontWeight:500,color:'var(--ink)',marginTop:16,letterSpacing:'-0.01em'}}>{s.l}</div>
                <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)',marginTop:10,maxWidth:320}}>{s.note}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  if (t.keyInsightStyle === 'bar') {
    return (
      <section className="section">
        <div className="site-wrap">
          <EyebrowRow label="Key finding"/>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1.2fr',gap:96,alignItems:'center'}}>
            <h2 style={{maxWidth:440}}>Of {fmtTotal} passages across the industry, only a sliver qualifies as shared value.</h2>
            <div>
              <StackedBar t={Math.max(tPct, 0.6)} a={aPct} n={nPct} height={28}/>
              <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:16,marginTop:20}}>
                {[
                  {v:`${tPct}%`, k:'True shared value',   tone:'var(--class-true)'},
                  {v:`${aPct}%`, k:'Ambiguous',           tone:'var(--class-ambig)'},
                  {v:`${nPct}%`, k:'No measurable value', tone:'var(--class-none)'},
                ].map(r=>(
                  <div key={r.k}>
                    <div style={{display:'flex',alignItems:'center',gap:6}}>
                      <span style={{width:8,height:8,background:r.tone,borderRadius:2}}/>
                      <span className="eyebrow">{r.k}</span>
                    </div>
                    <div className="tabular" style={{fontSize:40,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.025em',marginTop:8}}>{r.v}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // single-stat (default)
  const headlineVal = tPct.toFixed(tPct < 1 ? 2 : 1);
  return (
    <section className="section">
      <div className="site-wrap">
        <EyebrowRow label="Key finding"/>

        {/* Dominant stat + tagline, on one row, no wrap. */}
        <div style={{display:'grid',gridTemplateColumns:'auto 1fr',gap:56,alignItems:'center',marginTop:8}}>
          <div style={{
            fontSize:200,lineHeight:1,fontWeight:600,letterSpacing:'-0.04em',
            color:'var(--moss)',fontFamily:'var(--font-sans)',fontVariantNumeric:'tabular-nums',
            whiteSpace:'nowrap',
          }}>
            {headlineVal}<span style={{fontSize:100,verticalAlign:'top',lineHeight:1,marginLeft:4}}>%</span>
          </div>
          <div className="serif-moment" style={{fontSize:40,lineHeight:'48px',color:'var(--ink)',maxWidth:520}}>
            of {fmtTotal} passages qualify as true shared value.
          </div>
        </div>

        {/* Divider + the other two brackets, full-width */}
        <div style={{marginTop:72,display:'grid',gridTemplateColumns:'1fr 1fr',gap:64,borderTop:'1px solid var(--line)'}}>
          <div style={{paddingTop:28,paddingBottom:28,paddingRight:48,borderRight:'1px solid var(--line)'}}>
            <div className="eyebrow" style={{color:'var(--class-ambig)'}}>Ambiguous</div>
            <div className="tabular" style={{fontSize:56,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.03em',marginTop:10}}>{aPct.toFixed(1)}%</div>
            <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)',marginTop:10,maxWidth:420}}>Directionally plausible but lacking evidence or specificity.</p>
          </div>
          <div style={{paddingTop:28,paddingBottom:28,paddingLeft:16}}>
            <div className="eyebrow" style={{color:'var(--ink-3)'}}>No measurable value</div>
            <div className="tabular" style={{fontSize:56,fontWeight:600,color:'var(--ink-2)',letterSpacing:'-0.03em',marginTop:10}}>{nPct.toFixed(1)}%</div>
            <p style={{fontSize:14,lineHeight:'22px',color:'var(--ink-2)',marginTop:10,maxWidth:420}}>Narrative framing without supporting outcome data.</p>
          </div>
        </div>

      </div>
    </section>
  );
};
window.KeyInsight = KeyInsight;