function Register(){
  const [tier, setTier] = React.useState('delegate');
  const tiers = {
    delegate: { name:'Delegate', price:'€1,950', meta:'Standard rate · all sessions',
      lines:['Full two-day access','All plenary & breakout sessions','Networking lunches & reception','Conference materials','Post-event communiqué'] },
    industry: { name:'Industry', price:'€2,750', meta:'Operators · service co. · technology',
      lines:['Everything in Delegate','Closed-door industry roundtables','Technical site visit (post-summit)','Curated 1:1 introductions','Priority seating'] },
    investor: { name:'Investor', price:'On request', meta:'Capital · DFIs · institutional',
      lines:['Everything in Industry','Investor-only briefings','Private deal-flow lounge','Bilateral meeting concierge','Closed press dinner'] },
  };
  const active = tiers[tier];

  return (
    <section id="register" style={{background:'var(--ink)', color:'var(--bone)', borderTop:'none'}}>
      <div className="shell">
        <div className="sec-head" style={{borderTop:'none'}}>
          <div className="num" style={{color:'rgba(248,244,236,.55)', borderTop:'1px solid var(--bone)'}}>07 / Register</div>
          <h2 className="title">Reserve<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>your seat.</em>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:64}} className="reg-grid">
          {/* Tier selector + summary */}
          <div>
            <div className="kicker" style={{color:'rgba(248,244,236,.5)', marginBottom:16}}>SELECT TIER</div>
            <div style={{display:'flex', flexDirection:'column', gap:0, borderTop:'1px solid rgba(248,244,236,.18)'}}>
              {Object.entries(tiers).map(([k, t])=>{
                const isActive = k === tier;
                return (
                  <button key={k} onClick={()=>setTier(k)}
                    style={{
                      textAlign:'left', padding:'24px 0',
                      borderBottom:'1px solid rgba(248,244,236,.18)',
                      cursor:'pointer',
                      display:'grid', gridTemplateColumns:'30px 1fr auto', gap:20, alignItems:'center',
                      color: isActive ? 'var(--bone)' : 'rgba(248,244,236,.7)',
                    }}>
                    <span style={{
                      width:14, height:14, border:'1px solid '+(isActive?'var(--ember)':'rgba(248,244,236,.4)'),
                      borderRadius:'50%', position:'relative',
                    }}>
                      {isActive && <span style={{
                        position:'absolute', inset:3, borderRadius:'50%', background:'var(--ember)',
                      }}/>}
                    </span>
                    <div>
                      <div className="title" style={{fontSize:24, fontWeight:300}}>{t.name}</div>
                      <div className="kicker" style={{color:'rgba(248,244,236,.5)', marginTop:4}}>{t.meta}</div>
                    </div>
                    <div style={{
                      fontFamily:'var(--serif)', fontSize:24, fontStyle:'italic',
                      color: isActive ? 'var(--ember)' : 'rgba(248,244,236,.55)',
                    }}>
                      {t.price}
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Active tier detail */}
          <div style={{
            background:'var(--ember)', color:'var(--bone)', padding:'40px 36px',
            display:'flex', flexDirection:'column', justifyContent:'space-between',
          }}>
            <div>
              <div className="kicker" style={{color:'rgba(248,244,236,.7)', marginBottom:20}}>{active.meta.toUpperCase()}</div>
              <div className="title" style={{fontSize:48, fontWeight:300, marginBottom:8}}>{active.name} pass</div>
              <div className="title" style={{fontSize:60, fontStyle:'italic', fontWeight:300}}>{active.price}</div>
              <ul style={{listStyle:'none', marginTop:36, display:'flex', flexDirection:'column', gap:14}}>
                {active.lines.map((l,i)=>(
                  <li key={i} style={{display:'flex', gap:14, fontSize:15, lineHeight:1.4}}>
                    <span style={{fontFamily:'var(--mono)', fontSize:11, paddingTop:4, opacity:.7}}>{String(i+1).padStart(2,'0')}</span>
                    {l}
                  </li>
                ))}
              </ul>
            </div>
            <button style={{
              marginTop:40, alignSelf:'flex-start', height:52, padding:'0 28px',
              background:'var(--ink)', color:'var(--bone)',
              fontWeight:500, fontSize:14, letterSpacing:'.01em',
              display:'inline-flex', alignItems:'center', gap:12,
            }}
            onMouseEnter={e=>e.currentTarget.style.background='#000'}
            onMouseLeave={e=>e.currentTarget.style.background='var(--ink)'}>
              Begin {active.name.toLowerCase()} registration
              <span style={{fontFamily:'var(--mono)'}}>→</span>
            </button>
          </div>
        </div>

        <div style={{
          marginTop:64, paddingTop:32, borderTop:'1px solid rgba(248,244,236,.18)',
          display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:16,
        }}>
          <div className="kicker" style={{color:'rgba(248,244,236,.55)'}}>EARLY-BIRD CLOSES 31 JANUARY 2027 · GROUP RATES AVAILABLE</div>
          <div className="kicker" style={{color:'rgba(248,244,236,.55)'}}>PAYMENT IN EUR · USD · DZD ON INVOICE</div>
        </div>
      </div>

      <style>{`
        @media (max-width:1000px){
          .reg-grid{grid-template-columns:1fr !important; gap:32px !important}
        }
      `}</style>
    </section>
  );
}

window.Register = Register;