function Hero(){
  // Target: 17 March 2027, Algiers.
  const target = React.useMemo(()=> new Date('2027-03-17T09:00:00+01:00'), []);
  const [now, setNow] = React.useState(()=> new Date());
  React.useEffect(()=>{
    const t = setInterval(()=> setNow(new Date()), 1000);
    return ()=> clearInterval(t);
  },[]);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / (1000*60*60*24));
  const h = Math.floor(diff / (1000*60*60)) % 24;
  const m = Math.floor(diff / (1000*60)) % 60;
  const s = Math.floor(diff / 1000) % 60;
  const pad = (n)=> String(n).padStart(2,'0');

  return (
    <section id="top" style={{paddingTop:152, paddingBottom:80, borderTop:'none', overflow:'hidden'}}>
      <div className="shell">
        {/* meta strip */}
        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'center',
          paddingBottom:28, borderBottom:'1px solid var(--ink)', marginBottom:48,
        }}>
          <div className="kicker">EDITION 01 · ALGIERS</div>
          <div className="kicker" style={{display:'flex',gap:24}}>
            <span>36.7538° N</span>
            <span>3.0588° E</span>
            <span style={{color:'var(--ember)'}}>● LIVE COUNTDOWN</span>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:80, alignItems:'end'}}
             className="hero-grid">
          {/* Left: title block */}
          <div>
            <div className="eyebrow" style={{marginBottom:32}}>
              <span className="dot"/>ALGERIA UNCONVENTIONAL RESOURCES ACCELERATION SUMMIT
            </div>
            <h1 className="display" style={{fontSize:'clamp(56px, 9vw, 144px)'}}>
              Unlocking<br/>
              the next <em>era</em><br/>
              of Algerian<br/>
              <span style={{display:'inline-block',position:'relative'}}>
                energy
                <UnderlineSwoop/>
              </span>.
            </h1>
            <p style={{
              marginTop:40, maxWidth:560, fontSize:18, lineHeight:1.5, color:'var(--ink-2)'
            }}>
              An international platform convening ministries, NOCs, IOCs, technology
              leaders and investors to accelerate the exploration and production of
              Algeria's shale gas and tight reservoir potential.
            </p>
            <div style={{display:'flex', gap:16, marginTop:40, flexWrap:'wrap'}}>
              <a href="#register" className="btn">
                Reserve a delegate seat <span className="arrow">→</span>
              </a>
              <a href="#agenda" className="btn ghost">
                View provisional agenda
              </a>
            </div>
          </div>

          {/* Right: countdown + plate */}
          <div style={{display:'flex', flexDirection:'column', gap:24}}>
            <DatePlate/>
            <div style={{
              border:'1px solid var(--ink)', padding:'24px 28px',
              background:'var(--ink)', color:'var(--bone)',
            }}>
              <div className="kicker" style={{color:'rgba(248,244,236,.55)', marginBottom:16}}>
                T-MINUS / TO OPENING
              </div>
              <div style={{
                display:'grid', gridTemplateColumns:'repeat(4,1fr)',
                fontFamily:'var(--mono)', fontVariantNumeric:'tabular-nums',
              }}>
                {[['DAYS', d], ['HRS', pad(h)], ['MIN', pad(m)], ['SEC', pad(s)]].map(([l,v],i)=>(
                  <div key={l} style={{
                    padding: i===0 ? '0 14px 0 0' : '0 14px',
                    borderLeft: i>0 ? '1px solid rgba(248,244,236,.2)' : 'none',
                  }}>
                    <div style={{fontSize:36, fontWeight:300, letterSpacing:'-.02em'}}>{v}</div>
                    <div style={{fontSize:9.5, letterSpacing:'.16em', color:'rgba(248,244,236,.55)', marginTop:4}}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <FactRow/>
          </div>
        </div>

        {/* Stat band at bottom */}
        <div style={{
          marginTop:96, paddingTop:32, borderTop:'1px solid var(--rule)',
          display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:32,
        }} className="stat-band">
          {[
            ['707', 'Tcf', 'Technically recoverable shale gas — 4th globally per EIA assessment'],
            ['1.1', 'MM bbls/day', 'Current Algerian liquids production · 3.6 Tcf/year gas'],
            ['7', 'Basins', 'Ahnet · Illizi · Berkine · Mouydir · Reggane · Timimoun · Tindouf'],
            ['6', 'Opportunity areas', 'Frontier · deep horizons · EOR · shale & tight · G&G · existing'],
          ].map(([big, small, copy], i)=>(
            <div key={i} style={{display:'flex', flexDirection:'column', gap:8}}>
              <div style={{display:'flex', alignItems:'baseline', gap:8}}>
                <span className="title" style={{fontSize:48}}>{big}</span>
                <span className="kicker">{small}</span>
              </div>
              <span style={{fontSize:13, color:'var(--ink-3)', maxWidth:240}}>{copy}</span>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width:1100px){
          .hero-grid{grid-template-columns:1fr !important; gap:56px !important}
          .stat-band{grid-template-columns:repeat(2,1fr) !important}
        }
        @media (max-width:600px){
          .stat-band{grid-template-columns:1fr !important}
        }
      `}</style>
    </section>
  );
}

function UnderlineSwoop(){
  return (
    <svg style={{position:'absolute',left:0,bottom:'-8px',width:'100%',height:18}}
         viewBox="0 0 400 18" preserveAspectRatio="none" aria-hidden="true">
      <path d="M2 14 Q 100 2 200 9 T 398 6" fill="none" stroke="var(--ember)" strokeWidth="3"/>
    </svg>
  );
}

function DatePlate(){
  return (
    <div style={{
      border:'1px solid var(--ink)', padding:'24px 28px',
      display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:20,
      background:'var(--paper)',
    }}>
      <div>
        <div className="kicker" style={{marginBottom:10}}>SAVE THE DATE</div>
        <div className="title" style={{fontSize:42, lineHeight:1}}>
          17—18<br/>
          <span style={{fontStyle:'italic', color:'var(--ember)'}}>March</span>
        </div>
        <div className="kicker" style={{marginTop:10}}>2027 · ALGIERS · DZ</div>
      </div>
      <div style={{textAlign:'right'}}>
        <div className="kicker" style={{marginBottom:10}}>VENUE</div>
        <div style={{fontSize:14, fontWeight:500, lineHeight:1.3}}>
          Sheraton Club des Pins<br/>Resort · Algiers
        </div>
      </div>
    </div>
  );
}

function FactRow(){
  return (
    <div style={{display:'flex', gap:0, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.06em'}}>
      {[
        ['SCALE', '600+ DELEGATES'],
        ['LANG', 'EN / FR / AR'],
        ['STREAM', 'HYBRID'],
      ].map(([l,v],i)=>(
        <div key={l} style={{
          flex:1, padding:'14px 16px',
          borderTop:'1px solid var(--rule)',
          borderBottom:'1px solid var(--rule)',
          borderLeft: i>0 ? '1px solid var(--rule)' : '1px solid var(--rule)',
          borderRight: i===2 ? '1px solid var(--rule)' : 'none',
        }}>
          <div style={{color:'var(--ink-4)', fontSize:9.5, letterSpacing:'.18em', marginBottom:4}}>{l}</div>
          <div style={{color:'var(--ink)', fontWeight:500}}>{v}</div>
        </div>
      ))}
    </div>
  );
}

window.Hero = Hero;