function About(){
  return (
    <section id="about">
      <div className="shell">
        <div className="sec-head">
          <div className="num">01 / About</div>
          <h2 className="title">A flagship convening for the<br/>
            <em style={{fontStyle:'italic',color:'var(--ember)'}}>next chapter</em> of Algerian hydrocarbons.
          </h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'140px 1fr 1fr', gap:48}} className="about-grid">
          <div/>
          <div style={{fontSize:20, lineHeight:1.45, color:'var(--ink-2)', fontFamily:'var(--serif)', fontWeight:300}}>
            AURAS brings together policymakers, ALNAFT and SONATRACH leadership,
            international operators, service providers, technology leaders, and
            investors — all focused on transforming Algeria's vast unconventional
            resource potential into commercially viable, sustainable production.
          </div>
          <div style={{fontSize:15, lineHeight:1.6, color:'var(--ink-3)'}}>
            <p style={{marginBottom:16}}>
              The summit's center of gravity sits at the intersection of <strong style={{color:'var(--ink)'}}>shale
              gas, tight reservoirs, and the regulatory architecture</strong> required
              to bring them online at scale — across the seven Saharan basins
              that anchor Algeria's upstream future.
            </p>
            <p>
              Two days. Strategy on day one; technology and execution on day two.
              No filler — every session is built around a decision a working
              practitioner needs to make in the next twelve months.
            </p>
          </div>
        </div>

        {/* Quote band */}
        <div style={{
          marginTop:96, padding:'56px 0', borderTop:'1px solid var(--ink)', borderBottom:'1px solid var(--rule)',
          display:'grid', gridTemplateColumns:'140px 1fr', gap:48,
        }} className="quote-band">
          <div className="kicker">FOREWORD</div>
          <div>
            <div className="title" style={{fontSize:34, lineHeight:1.2, fontWeight:300}}>
              "Algeria sits 4<sup style={{fontSize:'.5em',top:'-.6em',position:'relative'}}>th</sup> in the world for
              technically recoverable shale gas, with 891 Tcf unrisked across Silurian and
              Frasnian source rocks. The question facing the industry now is
              <em style={{color:'var(--ember)'}}> execution velocity</em>."
            </div>
            <div style={{marginTop:40, display:'flex', gap:16, alignItems:'center'}}>
              <PortraitPlaceholder/>
              <div style={{display:'flex', flexDirection:'column', gap:6, lineHeight:1.2}}>
                <div style={{fontWeight:500, fontSize:14}}>AURAS Programme Committee</div>
                <div className="kicker">DRAWN FROM ALNAFT · SONATRACH · SPE ALGERIA</div>
              </div>
            </div>
          </div>
        </div>
      </div>

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

function PortraitPlaceholder(){
  return (
    <div style={{
      width:48, height:48, border:'1px solid var(--ink)',
      background:'repeating-linear-gradient(45deg, var(--sand) 0 4px, var(--bone) 4px 8px)',
    }}/>
  );
}

window.About = About;