/* Hero with split layout (primary) */
const DashboardPreview = ({ density='summary' }) => {
  const summary = window.KESTREL_SUMMARY;
  const total = summary?.meta?.total_passages ?? 0;
  const pct = summary?.global?.label_pct || {};
  const tPct = +(pct.positive  ?? 0).toFixed(1);
  const aPct = +(pct.ambiguous ?? 0).toFixed(1);
  const nPct = +(pct.negative  ?? 0).toFixed(1);
  const yearRange = summary?.meta?.year_range || [null, null];

  // Avg confidence: weighted across companies
  const avgConf = Math.round(
    (window.COMPANIES || []).reduce((acc, c) => acc + (c.conf * c.n_disc), 0)
      / Math.max(1, (window.COMPANIES || []).reduce((acc, c) => acc + c.n_disc, 0))
  );

  const byYear = summary?.global?.by_year || {};
  const trendYears = Object.keys(byYear).sort();
  const trendPoints = trendYears.map(y => byYear[y].positive_pct || 0);

  const rows = [
    {label:'True shared value',   val:tPct,  tone:'var(--class-true)',  text:`${tPct}%`},
    {label:'Ambiguous',           val:aPct,  tone:'var(--class-ambig)', text:`${aPct}%`},
    {label:'No measurable value', val:nPct,  tone:'var(--class-none)',  text:`${nPct}%`},
  ];
  return (
    <div className="fade-in" style={{
      border:'1px solid var(--line)', borderRadius:14, background:'var(--canvas)',
      padding:24, fontFamily:'var(--font-sans)',
    }}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-start',marginBottom:18}}>
        <div>
          <div className="eyebrow">Aggregate CSV classification</div>
          <div style={{fontSize:15,fontWeight:600,color:'var(--ink)',marginTop:6,letterSpacing:'-0.01em'}}>{total.toLocaleString()} passages</div>
        </div>
        <span className="chip">{yearRange[0] && yearRange[1] ? `${yearRange[0]}–${String(yearRange[1]).slice(-2)}` : '2018–23'}</span>
      </div>

      <div style={{display:'flex',flexDirection:'column',gap:14}}>
        {rows.map(r=>(
          <div key={r.label} style={{display:'flex',alignItems:'center',gap:14}}>
            <div style={{width:160,fontSize:12,color:'var(--ink-2)'}}>{r.label}</div>
            <div style={{flex:1}}>
              <MiniBar value={Math.max(r.val, 0.8)} tone={r.tone}/>
            </div>
            <div className="tabular" style={{width:60,textAlign:'right',fontSize:12,color:'var(--ink-2)'}}>{r.text}</div>
          </div>
        ))}
      </div>

      <div style={{marginTop:24,paddingTop:18,borderTop:'1px solid var(--line)',display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:12}}>
        {[
          {k:'Passages',      v: total.toLocaleString()},
          {k:'Years covered', v: yearRange[0] && yearRange[1] ? `${yearRange[0]}–${String(yearRange[1]).slice(-2)}` : '—'},
          {k:'Avg confidence',v: avgConf || '—'},
        ].map(s=>(
          <div key={s.k}>
            <div className="eyebrow">{s.k}</div>
            <div className="tabular" style={{fontSize:26,fontWeight:600,color:'var(--ink)',letterSpacing:'-0.02em',marginTop:6}}>{s.v}</div>
          </div>
        ))}
      </div>

      {density === 'rich' && trendPoints.length >= 2 && (
        <div style={{marginTop:18,paddingTop:18,borderTop:'1px solid var(--line)'}}>
          <div className="eyebrow" style={{marginBottom:10}}>
            Positive-share trend, {trendYears[0]}–{trendYears[trendYears.length-1]}
          </div>
          <Sparkline points={trendPoints} width={280} height={36}/>
        </div>
      )}
    </div>
  );
};
window.DashboardPreview = DashboardPreview;

const Hero = ({ setRoute }) => {
  const t = useTweaks();

  return (
    <section className="section first">
      <div className="site-wrap">
        <EyebrowRow label="Independent analysis · 2018–2023"/>
        {t.heroLayout === 'split' && (
          <div className="grid-2">
            <div>
              <h1 style={{fontSize:68,lineHeight:'72px',fontWeight:600,letterSpacing:'-0.03em',maxWidth:700}}>
                What mining companies say.<br/>
                <span className="serif-moment" style={{fontSize:68,lineHeight:'72px'}}>What actually creates value.</span>
              </h1>
              <p className="lede" style={{marginTop:28,maxWidth:520}}>
                Independent analysis of shared value across global mining companies. Every claimed initiative scored against strict Creating Shared Value criteria.
              </p>
              <div style={{display:'flex',gap:12,marginTop:40}}>
                <button className="btn btn-primary btn-lg" onClick={()=>setRoute({page:'explore'})}>Explore the data <Icon name="arrow-right" size={16} style={{marginLeft:4}} className="arrow"/></button>
                <button className="btn btn-ghost btn-lg" onClick={()=>setRoute({page:'method'})}>How it works</button>
              </div>
            </div>
            <div>
              <DashboardPreview density={t.dashboardDensity}/>
            </div>
          </div>
        )}

        {t.heroLayout === 'centered' && (
          <div style={{textAlign:'center',maxWidth:880,margin:'0 auto'}}>
            <h1 style={{fontSize:80,lineHeight:'84px',fontWeight:600,letterSpacing:'-0.035em'}}>
              What mining companies say.
              <br/>
              <span className="serif-moment" style={{fontSize:80,lineHeight:'84px'}}>What actually creates value.</span>
            </h1>
            <p className="lede" style={{marginTop:28,maxWidth:640,marginLeft:'auto',marginRight:'auto'}}>
              Independent analysis of shared value across global mining companies.
            </p>
            <div style={{display:'flex',gap:12,marginTop:40,justifyContent:'center'}}>
              <button className="btn btn-primary btn-lg" onClick={()=>setRoute({page:'explore'})}>Explore the data <Icon name="arrow-right" size={16} style={{marginLeft:4}} className="arrow"/></button>
              <button className="btn btn-ghost btn-lg" onClick={()=>setRoute({page:'method'})}>How it works</button>
            </div>
            <div style={{maxWidth:900,margin:'64px auto 0'}}>
              <DashboardPreview density={t.dashboardDensity}/>
            </div>
          </div>
        )}

        {t.heroLayout === 'editorial' && (
          <div style={{maxWidth:1000}}>
            <div className="serif-moment" style={{fontSize:88,lineHeight:'94px',maxWidth:920}}>
              What mining companies say. What actually creates value.
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:80,marginTop:48,alignItems:'flex-end'}}>
              <p className="lede" style={{maxWidth:460}}>
                Independent analysis of shared value across global mining companies. Every claimed initiative scored against strict Creating Shared Value criteria.
              </p>
              <div style={{display:'flex',gap:12}}>
                <button className="btn btn-primary btn-lg" onClick={()=>setRoute({page:'explore'})}>Explore the data <Icon name="arrow-right" size={16} style={{marginLeft:4}} className="arrow"/></button>
                <button className="btn btn-ghost btn-lg" onClick={()=>setRoute({page:'method'})}>How it works</button>
              </div>
            </div>
            <div style={{marginTop:80}}><DashboardPreview density={t.dashboardDensity}/></div>
          </div>
        )}

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