function Footer(){
  return (
    <footer id="contact" style={{background:'var(--bone)', borderTop:'1px solid var(--ink)'}}>
      <div className="shell" style={{padding:'80px 40px 40px'}}>
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr 1fr 1fr', gap:48}} className="foot-grid">
          <div>
            <div style={{display:'flex',alignItems:'center',gap:14, marginBottom:24}}>
              <Mark/>
              <div style={{display:'flex',flexDirection:'column',lineHeight:1}}>
                <span style={{fontFamily:'var(--serif)',fontSize:24,fontWeight:500,letterSpacing:'-.01em'}}>AURAS</span>
                <span className="kicker" style={{marginTop:4}}>SUMMIT · 2027</span>
              </div>
            </div>
            <p style={{fontSize:14, color:'var(--ink-3)', maxWidth:340, lineHeight:1.5}}>
              Algeria Unconventional Resources Acceleration Summit. The flagship platform
              for accelerating Algeria's unconventional E&P.
            </p>
          </div>
          {[
            ['SUMMIT', [['About','#about'],['Objectives','#objectives'],['Agenda','#agenda'],['Audience','#audience']]],
            ['ENGAGE', [['Register','#register'],['Become a partner','#partners'],['Speaker submission','#'],['Press accreditation','#']]],
            ['CONTACT', [['programme@auras-summit.com','#'],['partnerships@auras-summit.com','#'],['+213 (0) 21 ●●● ●●●','#'],['Algiers, Algeria','#']]],
          ].map(([title, links])=>(
            <div key={title}>
              <div className="kicker" style={{marginBottom:20}}>{title}</div>
              <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:12}}>
                {links.map(([l,h])=>(
                  <li key={l}><a href={h} style={{fontSize:14, color:'var(--ink-2)'}}
                    onMouseEnter={e=>e.currentTarget.style.color='var(--ember)'}
                    onMouseLeave={e=>e.currentTarget.style.color='var(--ink-2)'}>{l}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        {/* Newsletter */}
        <div style={{
          marginTop:80, paddingTop:32, paddingBottom:32,
          borderTop:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)',
          display:'grid', gridTemplateColumns:'1fr auto', gap:32, alignItems:'center',
        }} className="news-row">
          <div>
            <div className="title" style={{fontSize:28, fontWeight:300, marginBottom:6}}>
              Programme updates, in your inbox.
            </div>
            <div style={{fontSize:14, color:'var(--ink-3)'}}>Quarterly briefings until the summit. No marketing.</div>
          </div>
          <form onSubmit={e=>e.preventDefault()} style={{display:'flex', gap:0}} className="news-form">
            <input type="email" placeholder="you@organisation.com"
              style={{
                width:320, height:48, padding:'0 16px',
                border:'1px solid var(--ink)', background:'transparent',
                fontFamily:'var(--sans)', fontSize:14, outline:'none',
              }}/>
            <button type="submit" className="btn" style={{height:48}}>
              Subscribe <span className="arrow">→</span>
            </button>
          </form>
        </div>

        <div style={{
          marginTop:32, display:'flex', justifyContent:'space-between',
          alignItems:'center', flexWrap:'wrap', gap:16,
        }}>
          <div className="kicker" style={{color:'var(--ink-4)'}}>© 2027 AURAS SUMMIT · ALL RIGHTS RESERVED</div>
          <div style={{display:'flex', gap:24}}>
            <a className="kicker" href="#" style={{color:'var(--ink-4)'}}>PRIVACY</a>
            <a className="kicker" href="#" style={{color:'var(--ink-4)'}}>TERMS</a>
            <a className="kicker" href="#" style={{color:'var(--ink-4)'}}>CODE OF CONDUCT</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width:1000px){
          .foot-grid{grid-template-columns:1fr 1fr !important}
          .news-row{grid-template-columns:1fr !important}
          .news-form input{width:100% !important; flex:1}
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;