function Venue(){
  return (
    <section id="venue">
      <div className="shell">
        <div className="sec-head">
          <div className="num">06 / Venue</div>
          <h2 className="title">Algiers,<br/>
            <em style={{fontStyle:'italic', color:'var(--ember)'}}>on the bay.</em>
          </h2>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:48}} className="venue-grid">
          {/* Map plate */}
          <div style={{
            position:'relative', aspectRatio:'4/3',
            border:'1px solid var(--ink)', overflow:'hidden',
            background:'var(--sand)',
          }}>
            <MapPlate/>
            <div style={{
              position:'absolute', left:24, bottom:24, right:24,
              display:'flex', justifyContent:'space-between', alignItems:'flex-end', gap:16,
            }}>
              <div style={{
                background:'var(--bone)', padding:'14px 18px', border:'1px solid var(--ink)', maxWidth:300,
              }}>
                <div className="kicker" style={{marginBottom:6}}>HOST VENUE</div>
                <div style={{fontFamily:'var(--serif)', fontSize:18, lineHeight:1.2}}>
                  Sheraton Club des Pins<br/>Resort · Algiers
                </div>
              </div>
              <div className="kicker" style={{
                background:'var(--ink)', color:'var(--bone)', padding:'8px 12px',
              }}>
                36.7283° N · 2.9089° E
              </div>
            </div>
          </div>

          {/* Details column */}
          <div style={{display:'flex', flexDirection:'column', gap:0}}>
            {[
              ['Travel', 'Houari Boumediene International Airport (ALG) · 35 km · direct routes from Paris, London, Frankfurt, Istanbul, Doha, Cairo.'],
              ['Stay', 'Discounted room block secured on-property at the Sheraton Club des Pins. Overflow rates available at neighbouring resort hotels along the Pins Maritimes coastline.'],
              ['Visa', 'Conference visa support letter issued at registration. Algeria offers e-visa to delegates from 60+ countries.'],
              ['Language', 'All plenary sessions delivered with simultaneous interpretation in English, French and Arabic.'],
            ].map(([h,c],i)=>(
              <div key={h} style={{
                padding:'24px 0', borderTop:'1px solid var(--rule)',
                borderBottom: i===3 ? '1px solid var(--rule)' : 'none',
                display:'grid', gridTemplateColumns:'120px 1fr', gap:24,
              }}>
                <div className="kicker" style={{paddingTop:4}}>{h.toUpperCase()}</div>
                <p style={{fontSize:15, color:'var(--ink-2)', lineHeight:1.5}}>{c}</p>
              </div>
            ))}
            <a href="https://maps.app.goo.gl/X2yZ8usHgmYhexmB7" target="_blank" rel="noopener" className="btn ghost" style={{marginTop:32, alignSelf:'flex-start'}}>
              Open in Google Maps <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>

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

function MapPlate(){
  // Stylised bathymetric/topographic plate of Algiers bay area — abstract.
  return (
    <svg viewBox="0 0 600 450" style={{width:'100%',height:'100%'}} preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(21,17,11,.06)" strokeWidth="1"/>
        </pattern>
      </defs>
      <rect width="600" height="450" fill="var(--sand)"/>
      {/* sea (top portion) */}
      <rect width="600" height="180" fill="#D9CDB3"/>
      <rect width="600" height="180" fill="url(#hatch)"/>
      {/* contour curves of bay */}
      {[0,1,2,3,4,5,6].map(i=>(
        <path key={i}
          d={`M 0 ${190 + i*22} Q 150 ${170 + i*20} 300 ${200 + i*22} T 600 ${185 + i*22}`}
          fill="none" stroke="rgba(21,17,11,.18)" strokeWidth=".75"/>
      ))}
      {/* topo lines on land */}
      {[0,1,2,3].map(i=>(
        <path key={i}
          d={`M ${100 + i*20} 450 Q ${250 + i*15} ${350 - i*20} ${500 - i*30} 450`}
          fill="none" stroke="rgba(21,17,11,.14)" strokeWidth=".75"/>
      ))}
      {/* venue marker */}
      <g transform="translate(360 230)">
        <circle r="22" fill="none" stroke="var(--ember)" strokeWidth="1" opacity=".4"/>
        <circle r="12" fill="none" stroke="var(--ember)" strokeWidth="1" opacity=".7"/>
        <circle r="5" fill="var(--ember)"/>
        <line x1="0" y1="0" x2="0" y2="-50" stroke="var(--ember)" strokeWidth="1"/>
        <text x="6" y="-46" fontFamily="var(--mono)" fontSize="9"
              fill="var(--ink)" letterSpacing=".1em">SHERATON</text>
      </g>
      {/* compass */}
      <g transform="translate(540 60)">
        <circle r="22" fill="var(--bone)" stroke="var(--ink)" strokeWidth="1"/>
        <path d="M 0 -16 L 4 0 L 0 16 L -4 0 Z" fill="var(--ink)"/>
        <text y="-26" textAnchor="middle" fontFamily="var(--mono)" fontSize="9" fill="var(--ink)">N</text>
      </g>
      {/* labels */}
      <text x="20" y="40" fontFamily="var(--mono)" fontSize="10" fill="rgba(21,17,11,.55)" letterSpacing=".14em">MEDITERRANEAN SEA</text>
      <text x="20" y="430" fontFamily="var(--mono)" fontSize="10" fill="rgba(21,17,11,.55)" letterSpacing=".14em">ALGIERS · DZ</text>
    </svg>
  );
}

window.Venue = Venue;