function Sponsorship(){
  const pillars = [
    ['I', 'Enhance brand identity', 'Position your organisation as a committed partner in Algeria’s unconventional development journey. Gain association with a high-credibility, minister-level international platform.'],
    ['II', 'Maximise visibility', 'Sustained logo placement across the event website, mobile app, email campaigns, printed materials, and onsite branding ensures your name reaches delegates before, during, and after the summit.'],
    ['III', 'Reinforce relationships', 'Algeria’s upstream ecosystem is relationship-driven. AURAS concentrates Ministry officials, ALNAFT, Sonatrach, IOCs, and service companies in one room.'],
    ['IV', 'Demonstrate commitment', 'Sponsorship signals long-term investment in Algeria — not just commercial interest. For companies positioning for licensing rounds or regulatory engagement, that signal has measurable strategic value.'],
  ];

  const tiers = [
    { name:'Platinum', price:'$10,000', regs:6, accent:true },
    { name:'Gold',     price:'$6,000',  regs:4 },
    { name:'Silver',   price:'$2,000',  regs:2 },
  ];

  const rows = [
    ['Acknowledgement in Ministerial Opening remarks', 1,1,0],
    ['Logo on summit banner (main stage backdrop)',    1,1,1],
    ['Logo on all printed materials',                  1,1,1],
    ['Logo in all email broadcast campaigns',          1,1,1],
    ['Logo on event website with link',                1,1,1],
    ['Logo in mobile app communications',              1,1,1],
    ['Sponsored session naming right (Day 2)',         1,0,0],
    ['Insert in delegate pack',                        1,1,0],
    ['Dedicated table display + 2 chairs',             1,1,1],
    ['Pull-up banner in networking area',              1,1,0],
    ['Social media feature post',                      1,1,1],
    ['Speaking slot in Technology Showcase (Day 2)',   1,0,0],
    ['Recognition in closing panel & summit report',   1,1,0],
  ];

  const addons = [
    ['Title sponsorship · Gala Dinner (Day 1 or 2)', 'Exclusive branding at dinner. Opening-remarks acknowledgement. Seat allocation for sponsor team.'],
    ['Title sponsorship · Networking Lunch',         'Logo on lunch tables, menu cards, and digital signage.'],
    ['Lanyard / delegate bag sponsor',                    'Exclusive branding on all delegate lanyards or bags.'],
    ['Workshop sponsor',                                  'Co-branded technical workshop. Speaker slot. Materials distribution.'],
  ];

  return (
    <section id="sponsorship" style={{background:'var(--paper)'}}>
      <div className="shell">
        <div className="sec-head">
          <div className="num">06 / Sponsorship</div>
          <h2 className="title">Shape Algeria’s<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>unconventional future.</em>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'140px 1fr 1fr', gap:48, marginBottom:80}} className="spons-intro">
          <div/>
          <div style={{fontSize:20, lineHeight:1.45, fontFamily:'var(--serif)', fontWeight:300, color:'var(--ink-2)'}}>
            Align your brand with the premier platform accelerating shale gas
            and tight reservoir development across North Africa.
          </div>
          <div style={{fontSize:15, color:'var(--ink-3)', lineHeight:1.6}}>
            <p style={{marginBottom:12}}>AURAS brings together the decision-makers, technical experts, and investors
              who will define Algeria’s unconventional resource trajectory.</p>
            <p>Sponsorship revenue directly supports keeping delegate registration
              fees accessible to engineers and technical professionals — consistent
              with SPE’s mission of technical upskilling.</p>
          </div>
        </div>

        {/* Pillars */}
        <div style={{display:'grid', gridTemplateColumns:'repeat(4,1fr)', borderTop:'1px solid var(--ink)', marginBottom:96}} className="pillar-grid">
          {pillars.map(([n,t,c],i)=>(
            <div key={n} style={{
              padding:'32px 24px 32px 0',
              paddingLeft: i===0 ? 0 : 24,
              borderRight: i<3 ? '1px solid var(--rule)' : 'none',
            }}>
              <div className="title" style={{fontSize:32, fontWeight:300, color:'var(--ember)', fontStyle:'italic', marginBottom:14}}>{n}</div>
              <h3 className="title" style={{fontSize:20, marginBottom:10}}>{t}</h3>
              <p style={{fontSize:14, color:'var(--ink-3)', lineHeight:1.55}}>{c}</p>
            </div>
          ))}
        </div>

        {/* Tier matrix */}
        <div className="kicker" style={{marginBottom:16}}>PACKAGES · FIRST-COME, FIRST-SERVED</div>
        <div style={{border:'1px solid var(--ink)', overflow:'hidden'}}>
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr', background:'var(--ink)', color:'var(--bone)'}} className="tier-head">
            <div style={{padding:'20px 24px'}} className="kicker" >TIER</div>
            {tiers.map(t=>(
              <div key={t.name} style={{
                padding:'20px 16px', borderLeft:'1px solid rgba(248,244,236,.18)',
                background: t.accent ? 'var(--ember)' : 'transparent',
              }}>
                <div className="kicker" style={{color: t.accent ? 'rgba(248,244,236,.7)' : 'rgba(248,244,236,.55)'}}>{t.name.toUpperCase()}</div>
                <div className="title" style={{fontSize:24, fontWeight:300, marginTop:4}}>{t.price}</div>
                <div style={{fontFamily:'var(--mono)', fontSize:11, color: t.accent ? 'rgba(248,244,236,.85)' : 'rgba(248,244,236,.55)', marginTop:4}}>
                  {t.regs} reg{t.regs>1?'s':''}
                </div>
              </div>
            ))}
          </div>
          {rows.map((r,i)=>(
            <div key={i} style={{
              display:'grid', gridTemplateColumns:'1fr 1fr 1fr 1fr',
              borderTop:'1px solid var(--rule)',
              background: i%2 ? 'var(--bone)' : 'var(--paper)',
            }} className="tier-row">
              <div style={{padding:'14px 24px', fontSize:14, color:'var(--ink-2)'}}>{r[0]}</div>
              {r.slice(1).map((v,j)=>(
                <div key={j} style={{
                  padding:'14px 16px', borderLeft:'1px solid var(--rule-2)',
                  fontFamily:'var(--mono)', fontSize:14, textAlign:'center',
                  color: v ? 'var(--ember)' : 'var(--ink-4)',
                }}>
                  {v ? '●' : '—'}
                </div>
              ))}
            </div>
          ))}
        </div>

        {/* Add-ons */}
        <div style={{marginTop:80}}>
          <div className="kicker" style={{marginBottom:24}}>ADD-ON / TITLE OPPORTUNITIES · NEGOTIABLE</div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2,1fr)', gap:0, borderTop:'1px solid var(--ink)'}} className="addon-grid">
            {addons.map(([t,c],i)=>(
              <div key={t} style={{
                padding:'24px 24px 24px 0',
                paddingLeft: i%2 ? 24 : 0,
                borderRight: i%2===0 ? '1px solid var(--rule)' : 'none',
                borderBottom: i<2 ? '1px solid var(--rule)' : 'none',
              }}>
                <h3 className="title" style={{fontSize:20, marginBottom:8}}>{t}</h3>
                <p style={{fontSize:14, color:'var(--ink-3)', lineHeight:1.55}}>{c}</p>
              </div>
            ))}
          </div>
        </div>

        {/* CTA band */}
        <div style={{
          marginTop:80, padding:'48px 40px',
          background:'var(--ink)', color:'var(--bone)',
          display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:48, alignItems:'center',
        }} className="cta-band">
          <div>
            <div className="kicker" style={{color:'rgba(248,244,236,.55)', marginBottom:14}}>SECURE YOUR SPONSORSHIP</div>
            <div className="title" style={{fontSize:36, fontWeight:300, lineHeight:1.15}}>
              Packages are offered first-come,<br/>first-served. <em style={{fontStyle:'italic', color:'var(--ember)'}}>Specific tiers may close early.</em>
            </div>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            <a href="mailto:sponsorship@auras-summit.com" className="btn" style={{background:'var(--ember)', borderColor:'var(--ember)'}}>
              Enquire now <span className="arrow">→</span>
            </a>
            <a href="#" className="btn ghost" style={{color:'var(--bone)', borderColor:'var(--bone)'}}>
              Download sponsorship brochure <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width:1100px){
          .spons-intro{grid-template-columns:1fr !important}
          .pillar-grid{grid-template-columns:repeat(2,1fr) !important}
          .pillar-grid > div:nth-child(2){border-right:none !important}
          .pillar-grid > div:nth-child(3){padding-left:0 !important; border-right:1px solid var(--rule) !important}
          .tier-head, .tier-row{font-size:12px}
          .cta-band{grid-template-columns:1fr !important}
        }
        @media (max-width:700px){
          .pillar-grid{grid-template-columns:1fr !important}
          .pillar-grid > div{border-right:none !important; padding-left:0 !important; border-bottom:1px solid var(--rule)}
          .addon-grid{grid-template-columns:1fr !important}
          .addon-grid > div{border-right:none !important; padding-left:0 !important; border-bottom:1px solid var(--rule)}
        }
      `}</style>
    </section>
  );
}
window.Sponsorship = Sponsorship;