function Audience(){
  const groups = [
    ['Government', 'Ministries · regulators · policy', '120+'],
    ['NOCs & IOCs', 'Operators across the value chain', '180+'],
    ['Service & Tech', 'Drilling, completions, digital', '150+'],
    ['Investors', 'Institutional capital · DFIs · funds', '90+'],
    ['Technical', 'Engineers · geoscientists · ops', '200+'],
    ['Academia', 'Research institutions · universities', '60+'],
  ];
  return (
    <section id="audience">
      <div className="shell">
        <div className="sec-head">
          <div className="num">04 / Audience</div>
          <h2 className="title">Who is in<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>the room.</em>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0, borderTop:'1px solid var(--ink)'}}
             className="aud-grid">
          {groups.map(([t,d,n], i)=>{
            const col = i%3, row = Math.floor(i/3);
            return (
              <div key={t} style={{
                padding:'36px 28px 36px 28px',
                paddingLeft: col===0 ? 0 : 28,
                paddingRight: col===2 ? 0 : 28,
                borderRight: col<2 ? '1px solid var(--rule)' : 'none',
                borderBottom: row===0 ? '1px solid var(--rule)' : 'none',
                display:'flex', flexDirection:'column', gap:16,
              }}>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline'}}>
                  <h3 className="title" style={{fontSize:28}}>{t}</h3>
                  <span className="title" style={{fontSize:32, fontWeight:300, color:'var(--ember)', fontStyle:'italic'}}>{n}</span>
                </div>
                <p style={{fontSize:14, color:'var(--ink-3)'}}>{d}</p>
                <div style={{display:'flex',gap:6, marginTop:8}}>
                  {[...Array(8)].map((_,j)=>(
                    <div key={j} style={{
                      flex:1, height:6,
                      background: j < (i+3) ? 'var(--ink)' : 'var(--sand-2)',
                    }}/>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width:900px){
          .aud-grid{grid-template-columns:1fr !important}
          .aud-grid > div{
            border-right:none !important;
            border-bottom:1px solid var(--rule) !important;
            padding:32px 0 !important;
          }
        }
      `}</style>
    </section>
  );
}

window.Audience = Audience;