/* Coverage — all companies. Style: logo-cells / wordmarks / list */
const Coverage = ({ setRoute }) => {
  const t = useTweaks();

  if (t.coverageStyle === 'list') {
    return (
      <section className="section alt">
        <div className="site-wrap">
          <EyebrowRow label="Coverage"/>
          <h2 style={{maxWidth:800}}>Every major mining disclosure. One consistent standard.</h2>
          <div style={{marginTop:56,columnCount:3,columnGap:48}}>
            {COMPANIES.map(c => (
              <div key={c.id} style={{breakInside:'avoid',display:'flex',justifyContent:'space-between',padding:'14px 0',borderTop:'1px solid var(--line)',cursor:'pointer'}}
                onClick={()=>setRoute({page:'company',id:c.id})}>
                <span style={{fontSize:14,color:'var(--ink)',fontWeight:500}}>{c.name}</span>
                <span style={{fontSize:12,color:'var(--ink-3)'}} className="tabular">{c.country}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  if (t.coverageStyle === 'wordmarks') {
    return (
      <section className="section alt">
        <div className="site-wrap">
          <EyebrowRow label="Coverage"/>
          <h2 style={{maxWidth:800}}>Every major mining disclosure. One consistent standard.</h2>
          <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',marginTop:48,border:'1px solid var(--line)',borderRadius:12,overflow:'hidden',background:'var(--canvas)'}}>
            {COMPANIES.map((c,i)=>(
              <div key={c.id} className="logo-cell"
                onClick={()=>setRoute({page:'company',id:c.id})}
                style={{
                  borderRight:(i%5!==4)?'1px solid var(--line)':'none',
                  borderBottom:(i<20)?'1px solid var(--line)':'none',
                  fontFamily:'var(--font-sans)',fontWeight:600,fontSize:14,
                  letterSpacing:'-0.01em',textAlign:'center',
                }}>
                {c.name}
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // logo-cells (default)
  return (
    <section className="section alt">
      <div className="site-wrap">
        <EyebrowRow label="Coverage"/>
        <h2 style={{maxWidth:800}}>Every major mining disclosure. One consistent standard.</h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(5,1fr)',marginTop:48,border:'1px solid var(--line)',borderRadius:12,overflow:'hidden',background:'var(--canvas)'}}>
          {COMPANIES.map((c,i)=>(
            <div key={c.id} className="logo-cell"
              onClick={()=>setRoute({page:'company',id:c.id})}
              title={c.name}
              style={{
                borderRight:((i%5)!==4)?'1px solid var(--line)':'none',
                borderBottom:(i < COMPANIES.length - (COMPANIES.length % 5 || 5))?'1px solid var(--line)':'none',
                ['--logo-delay']: `${i * 40}ms`,
              }}>
              <CompanyLogo id={c.id}/>
            </div>
          ))}
        </div>
        <p className="annotation" style={{marginTop:32,color:'var(--ink-3)',fontSize:14,fontFamily:'var(--font-sans)'}}>
          Click any company for its full scorecard.
        </p>
      </div>
    </section>
  );
};
window.Coverage = Coverage;