// ExecuJet ME — detail pages

// ============ DWC (Dubai South — flagship) ============
function DwcPage({ goto }){
  const f = FACILITIES.dwc;
  return (
    <React.Fragment>
      <section className="detail-hero">
        <div className="hero-bg" style={{backgroundImage:`url(${f.altHero})`}} />
        <div className="detail-hero-inner">
          <div className="crumbs">
            <a onClick={()=>goto('home')}>Home</a>
            <span className="sep">/</span>
            <a onClick={()=>goto('fbo')}>FBO</a>
            <span className="sep">/</span>
            <span className="gold">Dubai South · DWC</span>
          </div>
          <div>
            <div className="iata-row">
              <span className="iata-chip">DWC</span>
              <span className="iata-chip">OMDW</span>
              <span className="iata-chip dark">IS-BAH Stage 2</span>
              <span className="iata-chip dark">24 H</span>
            </div>
            <h1>The Dubai South<br/>private-jet terminal<br/>— our <span className="ital">2024 flagship.</span></h1>
            <p className="sub">Opened 10 December 2024 at the Mohammed Bin Rashid Aerospace Hub. Fifteen thousand square metres over three levels; a seven-thousand-square-metre air-conditioned hangar; and the Middle East's first airside suite.</p>
          </div>
          <div style={{display:'flex', gap:14, marginTop:32, flexWrap:'wrap'}}>
            <a className="btn btn-cta" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href={`tel:${f.phoneTel}`}>Call &nbsp;<span className="mono">{f.phone}</span></a>
          </div>
        </div>
      </section>

      <div className="statbar">
        <div className="wrap"><div className="statbar-inner">
          <div className="s"><div className="num">15,000<span className="u">m²</span></div><div className="lab">Terminal · 3 levels</div></div>
          <div className="s"><div className="num">7,000<span className="u">m²</span></div><div className="lab">Air-conditioned hangar</div></div>
          <div className="s"><div className="num">IS-BAH</div><div className="lab">Stage 2 accreditation</div></div>
          <div className="s"><div className="num">24<span className="u">h</span></div><div className="lab">Open every day</div></div>
          <div className="s"><div className="num">10·12·24</div><div className="lab">Terminal opening</div></div>
        </div></div>
      </div>

      {/* SPACES */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            num="/01"
            eyebrow="Inside the terminal"
            title={`Named <span class="ital">spaces.</span>`}
            desc="Eight rooms designed for the way private aviation actually moves — from a fast turn to a full-day stop. Curated by Nada Debs and Opera Gallery."
          />
          <div className="spaces">
            <Space cls="feat" img="media/dwc-lounge-art.webp" name={<>Majlis Lounge</>} meta="LEVEL 02 · DESIGN" small={<>by <em className="italic-serif" style={{color:'var(--gold)'}}>Nada Debs</em></>} />
            <Space cls="sq"   img="media/dwc-fbo-hero.webp"  name="Al Samaa Airside Suite" meta="GROUND · WALK-OUT" small="ME's first airside suite" />
            <Space cls="tall" img="media/dwc-suite-358.webp" name="Junior Suites" meta="LEVEL 02 · OVERNIGHT" small="358 · 282 — full bath" />
            <Space cls="sq"   img="media/dwc-execuspa-suite.webp" name={<>ExecuSpa</>} meta="LEVEL 03 · WELLBEING" small={<>by SENSASIA Spas</>} />
            <Space cls="sq"   img="media/dwc-lounge-jet-view.webp" name="Cocktail &amp; Cigar Lounge" meta="LEVEL 02 · RUNWAY VIEWS" small="Direct apron sightlines" />
            <Space cls="wide" img="media/dwc-terminal-slider-4.webp" name="VIP Boardroom" meta="LEVEL 02 · MEETINGS" small="Marble · apron view · 14 pax" />
            <Space cls="wide" img="media/dwc-terminal-slider-8.webp" name="Reception" meta="GROUND · ARRIVALS" small="Three-clock crew desk · concierge" />
          </div>
        </div>
      </section>

      {/* SERVICES + CONTACT */}
      <section className="section deep">
        <div className="wrap split">
          <div className="left">
            <div className="eyebrow" style={{color:'var(--gold)'}}>/02 <span className="dot" /> Services at DWC</div>
            <h3>Everything <span className="ital">private aviation</span> needs, on one ramp.</h3>
          </div>
          <div>
            <ul className="serv-list dark">
              <li><span className="n">/01</span><span className="t">VIP, diplomatic &amp; corporate flight coordination</span></li>
              <li><span className="n">/02</span><span className="t">Customs &amp; immigration assistance · landing &amp; overfly permission handling</span></li>
              <li><span className="n">/03</span><span className="t">Passenger &amp; crew ground transportation · concierge</span></li>
              <li><span className="n">/04</span><span className="t">Aircraft hangarage &amp; ramp parking (7,000 m² air-conditioned hangar)</span></li>
              <li><span className="n">/05</span><span className="t">Commercial-flight transfers · meet-and-assist</span></li>
              <li><span className="n">/06</span><span className="t">Avgas &amp; Jet A1 fuelling · de-icing on request</span></li>
              <li><span className="n">/07</span><span className="t">Crew lounge · kids' entertainment room · Dubai Duty Free outlet</span></li>
              <li><span className="n">/08</span><span className="t">Art collection curated by <em className="italic-serif" style={{color:'var(--gold)'}}>Opera Gallery</em></span></li>
            </ul>
          </div>
        </div>
      </section>

      {/* CONTACT BLOCK */}
      <section className="section mist">
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
          <div className="contact-card">
            <div className="eyebrow">/03 <span className="dot" /> Direct line</div>
            <h3 style={{fontFamily:'var(--font-display)', fontWeight:300, fontSize:36, letterSpacing:'-0.02em', margin:'8px 0 8px'}}>Dubai South FBO</h3>
            <div className="row">
              <div className="lab">Phone</div>
              <div className="val"><a className="mono" href={`tel:${f.phoneTel}`}>{f.phone}</a></div>
            </div>
            <div className="row">
              <div className="lab">Email</div>
              <div className="val flagged">{f.emailFlag}</div>
            </div>
            <div className="row">
              <div className="lab">Address</div>
              <div className="val">{f.address}</div>
            </div>
            <div className="row">
              <div className="lab">Coords</div>
              <div className="val"><span className="mono">{f.coord}</span></div>
            </div>
            <div className="row">
              <div className="lab">Hours</div>
              <div className="val">24 hours, every day · <span style={{color:'var(--gold-2)'}}>IS-BAH Stage 2</span></div>
            </div>
            <div className="ctas">
              <a className="btn btn-ink" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
              <a className="btn btn-line" href={`tel:${f.phoneTel}`}>Call</a>
            </div>
          </div>

          <MiniMap iata="DWC" coord="24.8750556, 55.1564167" />
        </div>
      </section>

      {/* ENQUIRY */}
      <section className="enquiry">
        <div className="enquiry-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>/04 <span className="dot" /> Send a request</div>
            <h2>Tell us when you'd <span className="ital">like to arrive.</span></h2>
            <p className="desc">No prices listed — every quotation is bespoke. We confirm receipt within minutes, and a named coordinator stays with the trip end-to-end.</p>
            <div style={{display:'flex', alignItems:'center', gap:14, paddingTop:24, borderTop:'1px solid var(--line2)'}}>
              <div style={{width:36, height:36, borderRadius:'50%', background:'var(--char)', backgroundImage:'url(media/team-dumani-ndebele.webp)', backgroundSize:'cover'}} />
              <div style={{fontSize:12, lineHeight:1.5, color:'rgba(255,255,255,0.7)'}}>
                <div style={{color:'#fff'}}>Dumani Ndebele</div>
                <div style={{fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--gold)'}}>Regional FBO Director</div>
              </div>
            </div>
          </div>
          <EnquiryForm variant="handling" />
        </div>
      </section>
    </React.Fragment>
  );
}

function Space({ cls, img, name, meta, small }){
  return (
    <div className={`space ${cls}`}>
      <div className="img" style={{backgroundImage:`url(${img})`}} />
      <div className="overlay">
        <div className="name">{name}</div>
        <div className="meta"><span className="gold">{meta}</span> &nbsp;·&nbsp; {small}</div>
      </div>
    </div>
  );
}

function MiniMap({ iata, coord }){
  return (
    <div style={{position:'relative', background:'var(--noir)', minHeight:480, overflow:'hidden'}}>
      <div className="map-grid-bg" />
      <div style={{position:'absolute', top:20, left:20, fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.18em', color:'var(--gold)'}}>
        N ↑ &nbsp; {iata} · DUBAI
      </div>
      <div style={{position:'absolute', bottom:20, left:20, right:20, fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.18em', color:'var(--muted-2)', display:'flex', justifyContent:'space-between'}}>
        <span>{coord}</span>
        <span>1:25k</span>
      </div>
      {/* runway */}
      <div style={{position:'absolute', top:'42%', left:'10%', right:'10%', height:8, background:'rgba(194,160,90,0.5)', borderTop:'1px solid var(--gold)', borderBottom:'1px solid var(--gold)'}}>
        <div style={{position:'absolute', inset:0, display:'flex'}}>
          {[...Array(20)].map((_,i)=>(<div key={i} style={{flex:1, borderRight:'1px dashed rgba(11,15,20,0.3)'}} />))}
        </div>
      </div>
      <div style={{position:'absolute', top:'40%', left:'10%', fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'0.16em', color:'var(--gold)', transform:'translateY(-100%)'}}>RWY 30 / 12 · 4,500 m</div>
      <div className="pin" style={{top:'52%', left:'45%'}}>
        <div className="dot" />
        <div className="lab"><strong>{iata}</strong>ExecuJet FBO</div>
      </div>
    </div>
  );
}

// ============ DXB (Dubai International) ============
function DxbPage({ goto }){
  const f = FACILITIES.dxb;
  return (
    <React.Fragment>
      <section className="detail-hero">
        <div className="hero-bg" style={{backgroundImage:`url(${f.altHero})`}} />
        <div className="detail-hero-inner">
          <div className="crumbs">
            <a onClick={()=>goto('home')}>Home</a>
            <span className="sep">/</span>
            <a onClick={()=>goto('fbo')}>FBO</a>
            <span className="sep">/</span>
            <span className="gold">Dubai International · DXB</span>
          </div>
          <div>
            <div className="iata-row">
              <span className="iata-chip">DXB</span>
              <span className="iata-chip">OMDB</span>
              <span className="iata-chip dark">IS-BAH Stage 2</span>
              <span className="iata-chip dark">24 H</span>
              <span className="iata-chip dark">Since 1999</span>
            </div>
            <h1>VIP FBO &amp; business-jet handling — <span className="ital">Dubai International.</span></h1>
            <p className="sub">The original ExecuJet ME terminal, entirely redesigned. Six exclusive passenger lounges, premium shower facilities, more than 7,000 m² of combined hangarage and ramp parking, open 24 hours.</p>
          </div>
          <div style={{display:'flex', gap:14, marginTop:32, flexWrap:'wrap'}}>
            <a className="btn btn-cta" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href={`tel:${f.phoneTel}`}>Call &nbsp;<span className="mono">{f.phone}</span></a>
          </div>
        </div>
      </section>

      <div className="statbar">
        <div className="wrap"><div className="statbar-inner">
          <div className="s"><div className="num">6</div><div className="lab">Exclusive lounges</div></div>
          <div className="s"><div className="num">&gt; 7,000<span className="u">m²</span></div><div className="lab">Hangarage &amp; ramp</div></div>
          <div className="s"><div className="num">IS-BAH</div><div className="lab">Stage 2</div></div>
          <div className="s"><div className="num">24<span className="u">h</span></div><div className="lab">Open every day</div></div>
          <div className="s"><div className="num">4.36</div><div className="lab">2025 AIN FBO Survey</div></div>
        </div></div>
      </div>

      {/* SPACES */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            num="/01"
            eyebrow="Inside DXB"
            title={`Six exclusive <span class="ital">lounges.</span>`}
            desc="Quiet rooms close to the apron, designed for fast turnarounds and longer overnight stops. Duty-free, canapés on request, premium showers — every detail discreet."
          />
          <div className="spaces">
            <Space cls="feat" img="media/dxb-fbo-header.webp" name="Reception" meta="GROUND · ARRIVALS" small="Concierge desk · three-clock" />
            <Space cls="sq"   img="media/dxb-fbo-reception.webp" name="Passenger Lounge" meta="GROUND · QUIET" small="Six rooms · seated &amp; private" />
            <Space cls="tall" img="media/dxb-fbo-gallery-1.webp" name="VIP Suite" meta="GROUND · DISCREET" small="Owner / charter parties" />
            <Space cls="sq"   img="media/dxb-fbo-canapes.webp" name="Catering" meta="ON DEMAND" small="Canapés · full meals · halal" />
            <Space cls="sq"   img="media/dxb-fbo-boutique.webp" name="Duty Free" meta="ON SITE" small="Dubai Duty Free outlet" />
            <Space cls="wide" img="media/dxb-fbo-gallery-5.webp" name="Lounge" meta="GROUND · DAYTIME" small="Apron sightlines" />
            <Space cls="wide" img="media/dxb-fbo-exterior.webp" name="Exterior" meta="ARRIVALS PORTE" small="Direct-to-aircraft access" />
          </div>
        </div>
      </section>

      <section className="section deep">
        <div className="wrap split">
          <div className="left">
            <div className="eyebrow" style={{color:'var(--gold)'}}>/02 <span className="dot" /> Services at DXB</div>
            <h3>Established <span className="ital">handling</span> at the original Dubai gateway.</h3>
          </div>
          <div>
            <ul className="serv-list dark">
              <li><span className="n">/01</span><span className="t">VIP, diplomatic &amp; corporate flight coordination</span></li>
              <li><span className="n">/02</span><span className="t">Customs &amp; immigration assistance</span></li>
              <li><span className="n">/03</span><span className="t">Landing &amp; overfly permission handling</span></li>
              <li><span className="n">/04</span><span className="t">Passenger &amp; crew ground transportation</span></li>
              <li><span className="n">/05</span><span className="t">Concierge — hotels, dining, dining reservations</span></li>
              <li><span className="n">/06</span><span className="t">Aircraft hangarage &amp; ramp parking — &gt;7,000 m² combined</span></li>
              <li><span className="n">/07</span><span className="t">Commercial-flight transfers</span></li>
              <li><span className="n">/08</span><span className="t">Duty-free shopping on site</span></li>
            </ul>
          </div>
        </div>
      </section>

      <section className="section mist">
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}}>
          <div className="contact-card">
            <div className="eyebrow">/03 <span className="dot" /> Direct line</div>
            <h3 style={{fontFamily:'var(--font-display)', fontWeight:300, fontSize:36, letterSpacing:'-0.02em', margin:'8px 0 8px'}}>Dubai International FBO</h3>
            <div className="row"><div className="lab">Phone</div><div className="val"><a className="mono" href={`tel:${f.phoneTel}`}>{f.phone}</a></div></div>
            <div className="row"><div className="lab">Email</div><div className="val"><a className="mono" href={`mailto:${f.email}`}>{f.email}</a></div></div>
            <div className="row"><div className="lab">Address</div><div className="val">{f.address}</div></div>
            <div className="row"><div className="lab">Coords</div><div className="val"><span className="mono">{f.coord}</span></div></div>
            <div className="row"><div className="lab">Hours</div><div className="val">24 hours, every day · <span style={{color:'var(--gold-2)'}}>IS-BAH Stage 2</span></div></div>
            <div className="ctas">
              <a className="btn btn-ink" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
              <a className="btn btn-line" href={`tel:${f.phoneTel}`}>Call</a>
            </div>
          </div>
          <MiniMap iata="DXB" coord="25.2528, 55.3645" />
        </div>
      </section>

      <section className="enquiry">
        <div className="enquiry-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>/04 <span className="dot" /> Send a request</div>
            <h2>Send a handling request <span className="ital">for DXB.</span></h2>
            <p className="desc">We acknowledge handling requests within minutes — your assigned coordinator stays on the trip end-to-end.</p>
          </div>
          <EnquiryForm variant="handling" />
        </div>
      </section>
    </React.Fragment>
  );
}

// ============ FBO hub ============
function FboHubPage({ goto }){
  return (
    <React.Fragment>
      <section className="compact-hero">
        <div className="wrap">
          <div className="eyebrow">/ FBO &nbsp;<span className="dot" /> &nbsp;Two Dubai terminals</div>
          <h1>Two private-jet <span className="ital">FBOs</span> in Dubai.</h1>
          <p className="sub">Twenty-four-hour VIP handling at both Dubai International (DXB · OMDB) and Dubai South (DWC · OMDW). The same crew, the same standard — IS-BAH Stage 2 across both.</p>
        </div>
      </section>
      <section className="section">
        <div className="wrap">
          <div className="facilities">
            <FacilityCard fac={FACILITIES.dwc} feature goto={goto} />
            <FacilityCard fac={FACILITIES.dxb} goto={goto} />
          </div>
        </div>
      </section>
      <section className="section mist tight">
        <div className="wrap">
          <SectionHead
            num="/03"
            eyebrow="Shared across both"
            title={`One <span class="ital">team,</span> two ramps.`}
            desc="Every movement is coordinated by a named ExecuJet ME handler — no broker churn, no handover gaps between Dubai's two airports."
          />
          <div className="services">
            <Service n="01" title="One coordinator per trip" desc="Named ME team-member from request to wheels-up — across DXB and DWC, customs, permits and ramp." onClick={()=>{}} />
            <Service n="02" title="Cross-airport transfers" desc="If a flight has to switch terminals, we coordinate ground transport and re-clearance end-to-end." onClick={()=>{}} />
            <Service n="03" title="One signed permit" desc="Landing and overfly permissions processed once — not twice — even if the aircraft moves between DXB and DWC." onClick={()=>{}} />
            <Service n="04" title="One invoice" desc="DXB and DWC settle on the same ledger — no fragmented billing between Dubai's two FBOs." onClick={()=>{}} />
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { DwcPage, DxbPage, FboHubPage });