// ExecuJet ME — pages

function HomePage({ goto }){
  return (
    <React.Fragment>
      {/* HERO */}
      <section className="hero">
        <div className="hero-bg" style={{backgroundImage: 'url(media/dwc-terminal-exterior-dusk.webp)'}} />
        <div className="hero-inner">
          <div className="hero-meta">
            <span className="gold">/01</span>
            <span className="vbar" />
            <span>Dubai</span>
            <span className="vbar" />
            <span>DWC · OMDW</span>
            <span className="vbar" />
            <span>DXB · OMDB</span>
            <span className="vbar" />
            <span>24 H · IS-BAH STAGE 2</span>
          </div>
          <div className="hero-body">
            <h1>
              Dubai's <span className="ital">private-aviation</span><br />
              gateway.
            </h1>
            <p className="hero-sub">
              Two Dubai FBOs, 24-hour VIP ground handling, charter and aircraft management —
              trusted in the region since 1999, part of the Luxaviation Group.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-cta" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
              <a className="btn btn-ghost" onClick={()=>goto('fbo')}>Explore our Dubai FBOs</a>
            </div>
          </div>
          <div className="hero-footrow">
            <div className="hero-fact"><strong>1999</strong>In the region since</div>
            <div className="hero-fact"><strong>2</strong>Dubai FBOs · DXB &amp; DWC</div>
            <div className="hero-fact"><strong>15,000<em> m²</em></strong>Dubai South terminal · 3 levels</div>
            <div className="hero-fact"><strong>10 Dec 2024</strong>Flagship opening at Dubai South</div>
          </div>
        </div>
      </section>

      {/* TRUST TICKER */}
      <div className="trust">
        <div className="wrap trust-inner">
          <span className="trust-item"><span className="num">1999</span><span className="sep">/</span>In the region since</span>
          <span className="trust-item"><span className="num">2</span><span className="sep">/</span>Dubai FBOs</span>
          <span className="trust-item"><span className="num">IS-BAH</span><span className="sep">/</span>Stage 2 accredited</span>
          <span className="trust-item"><span className="num">2024</span><span className="sep">/</span>Dubai South flagship</span>
          <span className="trust-item"><span className="num">Luxaviation</span><span className="sep">/</span>Group member</span>
        </div>
      </div>

      {/* FACILITIES */}
      <section className="section">
        <div className="wrap">
          <SectionHead
            num="/02"
            eyebrow="Two terminals, one standard"
            title={`Two private-jet<br/>FBOs in <span class="ital">Dubai</span>.`}
            desc="A redesigned flagship at Dubai International and a 2024 ground-up build at Dubai South. Both 24 hours. Both IS-BAH Stage 2. Both crewed by the same team — operating in Dubai since 1999."
          />
          <div className="facilities">
            <FacilityCard fac={FACILITIES.dwc} feature goto={goto} />
            <FacilityCard fac={FACILITIES.dxb} goto={goto} />
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section mist tight">
        <div className="wrap">
          <SectionHead
            num="/03"
            eyebrow="Capabilities"
            title={`Four services, <span class="ital">one</span> point of contact.`}
            desc="Every aircraft movement is owned end-to-end by a named ExecuJet Middle East coordinator — no broker churn, one signed permit, one invoice."
          />
          <div className="services">
            <Service n="01" title="FBO & VIP Ground Handling" desc="VIP, diplomatic and corporate flight coordination at DXB and DWC — permits, customs, transport, concierge. Open 24 h." onClick={()=>goto('fbo')} />
            <Service n="02" title="Aircraft Charter" desc="Operated under our UAE Air Operator Certificate (held since 2000) and EASA approval (2008). Bespoke quotation only." onClick={()=>goto('charter')} />
            <Service n="03" title="Aircraft Management" desc="End-to-end management for owners — crewing, maintenance oversight, compliance, optional charter revenue under our AOC." onClick={()=>goto('management')} />
            <Service n="04" title="Maintenance & MRO" sister desc="Delivered by our sister brand ExecuJet MRO Services Middle East — a distinct entity at Dubai South. AOG support available." onClick={()=>goto('mro')} />
          </div>
        </div>
      </section>

      {/* HERITAGE STRIP */}
      <section className="section">
        <div className="wrap heritage">
          <div className="img" style={{backgroundImage:'url(media/history-1999-middle-east.webp)'}} />
          <div className="copy">
            <div className="eyebrow">/04 <span className="dot" /> Heritage</div>
            <h2>
              In the region <span className="ital">since 1999.</span>
            </h2>
            <p>
              The first independent business-aviation company cleared to operate charter
              flights from the UAE. Our UAE Air Operator Certificate followed in 2000;
              EASA approval in 2008. In 2015 ExecuJet joined the Luxaviation Group.
            </p>
            <div className="timeline">
              <div className="t"><div className="yr">1999</div><div className="lab">Established<br/>in the UAE</div></div>
              <div className="t"><div className="yr">2000</div><div className="lab">UAE AOC<br/>granted</div></div>
              <div className="t"><div className="yr">2015</div><div className="lab">Joined<br/>Luxaviation Group</div></div>
              <div className="t"><div className="yr">2024</div><div className="lab">Dubai South<br/>flagship opens</div></div>
            </div>
            <a className="btn btn-line" onClick={()=>goto('about')}>The full story <span className="arrow">→</span></a>
          </div>
        </div>
      </section>

      {/* AIN ACCOLADE */}
      <section className="locator">
        <div className="wrap locator-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>/05 <span className="dot" /> Locator</div>
            <h2>One operator. <span className="ital">Two pins.</span></h2>
            <p className="desc">Both terminals are 30–45 minutes from one another and from Downtown Dubai. Choose the FBO that fits your trip; we coordinate the rest.</p>
            <div className="locator-list">
              <div className="locator-row" onClick={()=>goto('fbo-dwc')}>
                <span className="code">DWC · OMDW</span>
                <span className="name">Dubai South — flagship<span>Al Maktoum · MBRAH · opened 10 Dec 2024</span></span>
                <span className="arrow">→</span>
              </div>
              <div className="locator-row" onClick={()=>goto('fbo-dxb')}>
                <span className="code">DXB · OMDB</span>
                <span className="name">Dubai International<span>Redesigned FBO · six exclusive lounges</span></span>
                <span className="arrow">→</span>
              </div>
            </div>
            <div style={{marginTop:36, paddingTop:24, borderTop:'1px solid var(--line2)', display:'flex', gap:24, alignItems:'center'}}>
              <div style={{fontFamily:'var(--font-display)', fontWeight:300, fontSize:48, letterSpacing:'-0.02em', color:'#fff'}}>4.36</div>
              <div>
                <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--gold)', marginBottom:6}}>2025 AIN FBO Survey</div>
                <div style={{fontSize:14, color:'rgba(255,255,255,0.7)', lineHeight:1.5}}>Overall score, Dubai International. An industry survey result — issuer: Aviation International News.</div>
              </div>
            </div>
          </div>
          <div className="map-mock">
            <div className="map-grid-bg" />
            <div className="map-coast" />
            {/* DXB pin top right */}
            <div className="pin" style={{top:'28%', right:'18%'}}>
              <div className="dot" />
              <div className="lab"><strong>DXB</strong>25.25, 55.36</div>
            </div>
            {/* DWC pin bottom left */}
            <div className="pin" style={{bottom:'30%', left:'24%'}}>
              <div className="dot" />
              <div className="lab"><strong>DWC</strong>24.87, 55.15</div>
            </div>
            {/* Downtown reference */}
            <div style={{position:'absolute', top:'42%', right:'32%', fontFamily:'var(--font-mono)', fontSize:9, letterSpacing:'0.16em', color:'var(--muted-2)'}}>
              <div style={{width:6, height:6, border:'1px solid var(--muted-2)', borderRadius:'50%', display:'inline-block', marginRight:6}}></div>
              DOWNTOWN
            </div>
            {/* coast hairline */}
            <svg viewBox="0 0 400 400" style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.4}}>
              <path d="M 400 60 Q 320 80, 280 140 T 220 220 T 140 280 T 60 360 L 0 400 L 400 400 Z"
                fill="rgba(21,68,95,0.25)" stroke="rgba(194,160,90,0.4)" strokeWidth="0.5" strokeDasharray="2,4" />
            </svg>
            {/* compass */}
            <div style={{position:'absolute', top:20, right:20, fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.18em', color:'var(--muted-2)'}}>
              N ↑ &nbsp; 1:50k
            </div>
            <div style={{position:'absolute', bottom:20, left:20, fontFamily:'var(--font-mono)', fontSize:10, letterSpacing:'0.18em', color:'var(--muted-2)'}}>
              DUBAI · UAE
            </div>
          </div>
        </div>
      </section>

      {/* CLOSING */}
      <section className="closing" style={{backgroundImage:'url(media/dxb-apron-jet-dusk.webp)'}}>
        <div className="wrap closing-inner">
          <div className="eyebrow">/06 <span className="dot" /> When to call us</div>
          <h2>From taxi-in to <span className="ital">wheels-up,</span><br/>privacy is paramount.</h2>
          <p className="quote">"You are the priority — concierge, customs, fuel, hangarage and the precise minute on the next slot. We answer the phone, 24 hours."</p>
          <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
            <a className="btn btn-cta" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
            <a className="btn btn-ghost" onClick={()=>goto('charter')}>Charter &amp; service enquiry</a>
            <a className="btn btn-ghost" href="tel:+97146016300">Call &nbsp;<span className="mono">+971 4 601 6300</span></a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function FacilityCard({ fac, feature, goto }){
  return (
    <div className={`facility ${feature?'':'compact'}`}>
      <div className="img" style={{backgroundImage:`url(${fac.hero})`}}>
        <div className="img-overlay">
          <div>
            <div style={{fontSize:11, letterSpacing:'0.2em', textTransform:'uppercase', color:'rgba(255,255,255,0.7)', marginBottom:4}}>{fac.longName}</div>
            <div style={{fontFamily:'var(--font-display)', fontSize:30, fontWeight:300, letterSpacing:'-0.02em'}}>{feature ? 'Dubai South' : 'Dubai International'}</div>
          </div>
          <div className="iata">{fac.iata} <em>·</em> {fac.icao}</div>
        </div>
      </div>
      <div className="body">
        <div className="label">{feature ? '/ Flagship · Opened 10 Dec 2024' : '/ Original FBO · Entirely redesigned'}</div>
        <h3>
          {feature
            ? <React.Fragment>Our 2024 <span className="italic-serif">flagship</span> at the Mohammed Bin Rashid Aerospace Hub.</React.Fragment>
            : <React.Fragment>The redesigned VIP FBO at <span className="italic-serif">Dubai International.</span></React.Fragment>}
        </h3>
        <p className="desc">{fac.teaser}</p>
        <div className="stats">
          {feature ? (
            <React.Fragment>
              <div><div className="stat-num">15,000 <span style={{fontSize:14, color:'var(--muted)'}}>m²</span></div><div className="stat-lab">Terminal · 3 levels</div></div>
              <div><div className="stat-num">7,000 <span style={{fontSize:14, color:'var(--muted)'}}>m²</span></div><div className="stat-lab">Air-conditioned hangar</div></div>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <div><div className="stat-num">6</div><div className="stat-lab">Exclusive lounges</div></div>
              <div><div className="stat-num">&gt; 7,000 <span style={{fontSize:14, color:'var(--muted)'}}>m²</span></div><div className="stat-lab">Hangarage &amp; ramp</div></div>
            </React.Fragment>
          )}
        </div>
        <div className="cta-row">
          <span className="flag"><span className="bullet" />{fac.isbah} · {fac.hours}</span>
          <a className="open-link" onClick={()=>goto(feature?'fbo-dwc':'fbo-dxb')}>Open facility <span className="arrow">→</span></a>
        </div>
      </div>
    </div>
  );
}

function Service({ n, title, desc, onClick, sister }){
  return (
    <div className={`service ${sister?'sister':''}`} onClick={onClick}>
      <div className="num">{n}</div>
      <h4>{title}</h4>
      <p>{desc}</p>
      <div className="more">Read more <span style={{fontSize:10}}>→</span></div>
    </div>
  );
}

Object.assign(window, { HomePage });