function Partners(){
  const tiers = [
    { label:'PRINCIPAL HOST', count:1, names:['Ministry of Energy & Mines'], h:88 },
    { label:'PLATINUM PARTNERS', count:3, names:['ALNAFT','SONATRACH','National Energy Council'], h:64 },
    { label:'GOLD PARTNERS', count:5, names:['Operator A','Operator B','Service Co.','Tech Partner','Drilling Co.'], h:52 },
    { label:'SUPPORTING', count:8, names:['Partner','Partner','Partner','Partner','Partner','Partner','Partner','Partner'], h:40 },
  ];
  return (
    <section id="partners" style={{background:'var(--paper)'}}>
      <div className="shell">
        <div className="sec-head">
          <div className="num">05 / Partners</div>
          <h2 className="title">Convened with<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>industry leadership.</em>
          </h2>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:32}}>
          {tiers.map(t=>(
            <div key={t.label} style={{
              display:'grid', gridTemplateColumns:'200px 1fr', gap:32,
              alignItems:'center', paddingBottom:24, borderBottom:'1px solid var(--rule)',
            }} className="tier-row">
              <div>
                <div className="kicker">{t.label}</div>
                <div className="title" style={{fontSize:14, marginTop:6, color:'var(--ink-3)'}}>
                  {t.count} {t.count===1 ? 'organisation' : 'organisations'}
                </div>
              </div>
              <div style={{display:'grid', gridTemplateColumns:`repeat(${Math.min(t.count, 4)}, 1fr)`, gap:12}} className="tier-logos">
                {t.names.slice(0, Math.min(t.count, 4)).map((n,i)=>(
                  <div key={i} style={{
                    height:t.h, border:'1px solid var(--rule)',
                    background:'var(--bone)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.14em',
                    color:'var(--ink-4)', textTransform:'uppercase',
                    backgroundImage:'repeating-linear-gradient(135deg, transparent 0 12px, rgba(21,17,11,.025) 12px 13px)',
                  }}>
                    {n}
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{marginTop:48, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:20}}>
          <p style={{fontSize:14, color:'var(--ink-3)', maxWidth:480}}>
            Partnership opportunities for the inaugural edition close 31 December 2026.
            Tiered packages available for sponsors, exhibitors, and supporting organisations.
          </p>
          <a href="#contact" className="btn ghost">
            Request partnership prospectus <span className="arrow">→</span>
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width:900px){
          .tier-row{grid-template-columns:1fr !important; gap:16px !important}
          .tier-logos{grid-template-columns:repeat(2,1fr) !important}
        }
      `}</style>
    </section>
  );
}

window.Partners = Partners;