// ExecuJet ME — Charter / Management / MRO / About / Contact

// ============ CHARTER ============
function CharterPage({ goto }){
  return (
    <React.Fragment>
      <section className="detail-hero">
        <div className="hero-bg" style={{backgroundImage:'url(media/dwc-terminal-night-x.webp)'}} />
        <div className="detail-hero-inner">
          <div className="crumbs">
            <a onClick={()=>goto('home')}>Home</a><span className="sep">/</span><span className="gold">Charter</span>
          </div>
          <div>
            <div className="iata-row">
              <span className="iata-chip">UAE AOC</span>
              <span className="iata-chip">EASA-APPROVED</span>
              <span className="iata-chip dark">BESPOKE QUOTATION</span>
            </div>
            <h1>Private jet charter<br/>from <span className="ital">Dubai.</span></h1>
            <p className="sub">ExecuJet Middle East holds a UAE Air Operator Certificate granted in 2000 and EASA approval since 2008. Charter departures from our Dubai base, anywhere our managed fleet can reach.</p>
          </div>
          <div style={{display:'flex', gap:14, marginTop:32, flexWrap:'wrap'}}>
            <a className="btn btn-cta" onClick={()=>{const el = document.getElementById('charter-enquire'); el && el.scrollIntoView && el.scrollIntoView({behavior:'smooth', block:'start'});}}>Charter Enquiry <span className="arrow">→</span></a>
            <a className="btn btn-ghost" href="tel:+97146016300">Call &nbsp;<span className="mono">+971 4 601 6300</span></a>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <SectionHead
            num="/01"
            eyebrow="Operating certificates"
            title={`Engineering-grade<br/><span class="ital">authority</span> to operate.`}
            desc="Both certificates are held by the Dubai entity — not a subcontracted operator. Every flight departs under our certification, with our captains, and our maintenance oversight."
            dark
          />
          <div className="charter-spec">
            <div className="c">
              <div className="yr">2000<span className="ital"></span></div>
              <div className="h">UAE Air Operator Certificate</div>
              <div className="b">Granted by the UAE General Civil Aviation Authority. The original commercial-charter authorisation underpinning every ExecuJet ME flight.</div>
            </div>
            <div className="c">
              <div className="yr">2008<span className="ital"></span></div>
              <div className="h">EASA Approval</div>
              <div className="b">European-airspace approval lets us operate charter into and out of the EASA member states under a single safety framework.</div>
            </div>
            <div className="c">
              <div className="yr">III<span className="ital"></span></div>
              <div className="h">IS-BAO Stage</div>
              <div className="b">Operationally accredited at IS-BAO Stage III — the highest tier of the IBAC business-aviation operating standard.</div>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap split">
          <div className="left">
            <div className="eyebrow">/02 <span className="dot" /> The fleet</div>
            <h3>A managed fleet of <span className="ital">large-cabin</span> business jets.</h3>
            <p style={{fontSize:15, lineHeight:1.7, color:'var(--muted)', marginTop:20, maxWidth:420}}>Specific aircraft, registrations and seat counts are confirmed per quotation — every charter is bespoke. We do not publish a public fleet list to protect owner privacy.</p>
          </div>
          <div>
            <ul className="serv-list">
              <li><span className="n">/01</span><span className="t">Large-cabin and ultra-long-range jets for transcontinental sectors</span></li>
              <li><span className="n">/02</span><span className="t">Heavy and super-mid for regional Middle-East &amp; Indian-subcontinent legs</span></li>
              <li><span className="n">/03</span><span className="t">VIP-configured cabins · galley · seated and reclining sleep</span></li>
              <li><span className="n">/04</span><span className="t">UAE-based crew · LCC + heavy maintenance handled by ExecuJet MRO Services ME</span></li>
              <li><span className="n">/05</span><span className="t">Specific tail numbers, ranges &amp; pricing confirmed by quotation</span></li>
            </ul>
          </div>
        </div>
      </section>

      <section className="enquiry" id="charter-enquire">
        <div className="enquiry-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>/03 <span className="dot" /> Charter enquiry</div>
            <h2>Tell us where you'd <span className="ital">like to go.</span></h2>
            <p className="desc">Date, route, passenger count — we'll quote bespoke within hours. Discretion guaranteed; quotations are by direct relationship, never by broker auction.</p>
            <div style={{marginTop:32, paddingTop:24, borderTop:'1px solid var(--line2)'}}>
              <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--gold)', marginBottom:8}}>No prices listed</div>
              <p style={{fontSize:13, color:'rgba(255,255,255,0.7)', lineHeight:1.6, margin:0, maxWidth:380}}>Bespoke quotation only. Charter price varies by sector, aircraft, slot timing, ground costs and crew duty — we will not give you a wrong number.</p>
            </div>
          </div>
          <EnquiryForm variant="charter" />
        </div>
      </section>
    </React.Fragment>
  );
}

// ============ MANAGEMENT ============
function ManagementPage({ goto }){
  return (
    <React.Fragment>
      <section className="compact-hero">
        <div className="wrap">
          <div className="eyebrow">/ Aircraft Management &nbsp;<span className="dot" /> &nbsp;Owners</div>
          <h1>Aircraft management <span className="ital">for owners.</span></h1>
          <p className="sub">End-to-end management of owners' aircraft — crewing, maintenance oversight, regulatory compliance, and optional charter revenue under our AOC. Backed by Luxaviation Group's global scale, delivered by Dubai-based people.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="services" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
            <Service n="01" title="Crewing &amp; rostering" desc="Type-rated captains and FOs, cabin crew where required, scheduled rest, EASA &amp; UAE GCAA compliance." onClick={()=>{}} />
            <Service n="02" title="Maintenance oversight" desc="LCC + heavy maintenance coordinated with ExecuJet MRO Services ME at Dubai South — single point of accountability." onClick={()=>{}} />
            <Service n="03" title="Regulatory compliance" desc="Continuing Airworthiness Management Organisation function · CAMO+ where applicable · airworthiness reviews." onClick={()=>{}} />
            <Service n="04" title="Trip planning &amp; permits" desc="Slots, overflights, ground handling, fuel uplift — coordinated by the same team that staffs our two FBOs." onClick={()=>{}} />
            <Service n="05" title="Optional charter revenue" desc="Owners may elect to offer their aircraft for revenue charter under our UAE AOC, with full schedule control retained." onClick={()=>{}} />
            <Service n="06" title="Quarterly owner reports" desc="Single accounting view across crew, fuel, maintenance reserve, charter revenue. Plain English, on time." onClick={()=>{}} />
          </div>
        </div>
      </section>

      <section className="enquiry">
        <div className="enquiry-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>/02 <span className="dot" /> Management enquiry</div>
            <h2>Talk to us about <span className="ital">your aircraft.</span></h2>
            <p className="desc">Initial conversations are always confidential and obligation-free. Tell us the aircraft type, intended utilisation and any current operator relationship — we'll come back with a transition path.</p>
          </div>
          <EnquiryForm variant="management" />
        </div>
      </section>
    </React.Fragment>
  );
}

// ============ MRO (sister brand callout) ============
function MroPage({ goto }){
  return (
    <React.Fragment>
      <section className="detail-hero">
        <div className="hero-bg" style={{backgroundImage:'url(media/mro-dwc-hangar-jets.webp)'}} />
        <div className="detail-hero-inner">
          <div className="crumbs">
            <a onClick={()=>goto('home')}>Home</a><span className="sep">/</span><span className="gold">MRO</span>
          </div>
          <div>
            <div className="iata-row">
              <span className="iata-chip">SISTER BRAND</span>
              <span className="iata-chip dark">GCAA · EASA · FAA</span>
              <span className="iata-chip dark">DUBAI SOUTH</span>
            </div>
            <h1>Aircraft maintenance in Dubai<br/>— by <span className="ital">ExecuJet MRO Services<br/>Middle East.</span></h1>
            <p className="sub">Maintenance is delivered by our sister company, ExecuJet MRO Services Middle East — a distinct entity operating from a dedicated facility at Dubai South.</p>
          </div>
          <div style={{display:'flex', gap:14, marginTop:32, flexWrap:'wrap'}}>
            <a className="btn btn-cta" href="https://execujet-mro.com" target="_blank" rel="noopener">Visit execujet-mro.com <span className="arrow">↗</span></a>
            <a className="btn btn-ghost" onClick={()=>goto('contact')}>MRO Enquiry</a>
          </div>
        </div>
      </section>

      <div className="statbar">
        <div className="wrap"><div className="statbar-inner">
          <div className="s"><div className="num">2006</div><div className="lab">Maintenance at DXB since</div></div>
          <div className="s"><div className="num">2023</div><div className="lab">Relocated to DWC</div></div>
          <div className="s"><div className="num">~20</div><div className="lab">Regulatory approvals</div></div>
          <div className="s"><div className="num">18–24</div><div className="lab">Jets in new facility</div></div>
          <div className="s"><div className="num">20<span className="u">yrs</span></div><div className="lab">ME operations</div></div>
        </div></div>
      </div>

      <section className="section">
        <div className="wrap">
          <div className="callout">
            <div>
              <div className="tag">/ Separate entity — note the relationship</div>
              <h3>A <span className="ital">distinct</span> company.<br/>A common standard.</h3>
              <p>ExecuJet MRO Services Middle East is a sister brand — not the same legal entity as ExecuJet Middle East FBO &amp; Charter. The two work alongside each other in Dubai but are operated, certified and invoiced separately.</p>
              <div className="note">execujet-mro.com — visit the dedicated site</div>
            </div>
            <div>
              <ul className="serv-list dark">
                <li><span className="n">/01</span><span className="t">Factory-owned Dassault Falcon MRO — 7X / 8X / 2000LXS, newly 6X</span></li>
                <li><span className="n">/02</span><span className="t">Authorised Embraer service centre</span></li>
                <li><span className="n">/03</span><span className="t">EASA-certified line &amp; base maintenance on Bombardier Global 7500</span></li>
                <li><span className="n">/04</span><span className="t">Airframe · engine · avionics · cabin refurbishment / completions</span></li>
                <li><span className="n">/05</span><span className="t">AOG support · 24-hour response</span></li>
                <li><span className="n">/06</span><span className="t">GCAA · EASA · FAA approvals</span></li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section mist tight">
        <div className="wrap">
          <SectionHead
            num="/02"
            eyebrow="The hangar"
            title={`Eighteen to twenty-four<br/><span class="ital">jets</span> under one roof.`}
            desc="A purpose-built bay at Dubai South — opened 2023 — housing the MRO operation alongside our flagship FBO."
          />
          <div className="spaces">
            <Space cls="feat" img="media/mro-dwc-hangar-jets.webp" name="Hangar Floor" meta="DWC · INTERIOR" small="Falcon · Global · Embraer" />
            <Space cls="sq"   img="media/mro-dwc-hangar-exterior.webp" name="Exterior" meta="DWC · DAYLIGHT" small="MRO Services entrance" />
            <Space cls="sq"   img="media/mro-dwc-hangar-bay.webp" name="Bay" meta="DWC · DEEP MAINT." small="Heavy-check positions" />
            <Space cls="sq"   img="media/mro-dwc-hangar-doors.webp" name="Doors" meta="DWC · OPEN" small="Wide-span roll-out" />
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

// ============ ABOUT ============
function AboutPage({ goto }){
  return (
    <React.Fragment>
      <section className="compact-hero">
        <div className="wrap">
          <div className="eyebrow">/ About &nbsp;<span className="dot" /> &nbsp;Dubai · since 1999</div>
          <h1>In the region <span className="ital">since 1999.</span></h1>
          <p className="sub">ExecuJet Middle East was the first independent business-aviation company cleared to operate charter flights from the UAE. UAE Air Operator Certificate, 2000. EASA approval, 2008. Joined the Luxaviation Group, 2015.</p>
        </div>
      </section>

      <section className="section tight">
        <div className="wrap">
          <div className="eyebrow">/01 <span className="dot" /> Timeline</div>
          <h2 style={{fontFamily:'var(--font-display)', fontWeight:300, fontSize:'clamp(36px, 4.4vw, 56px)', letterSpacing:'-0.03em', lineHeight:1.02, margin:'16px 0 0'}}>From a Johannesburg founding to a <span className="italic-serif">Dubai flagship.</span></h2>
          <div className="tl">
            <div className="e"><div className="yr">1991</div><div className="lab">ExecuJet founded in Johannesburg, South Africa.</div></div>
            <div className="e"><div className="yr">1999</div><div className="lab">Established in the Middle East — first independent business-aviation operator in the UAE.</div></div>
            <div className="e"><div className="yr">2000</div><div className="lab">UAE Air Operator Certificate (AOC) granted by the GCAA.</div></div>
            <div className="e"><div className="yr">2008</div><div className="lab">EASA approval to operate into European airspace.</div></div>
            <div className="e"><div className="yr">2013</div><div className="lab">Riyadh joint venture with NAS Holding established. <em style={{display:'block', color:'var(--muted-2)', fontSize:11, marginTop:4, letterSpacing:'0.16em', textTransform:'uppercase'}}>(Not the Luxaviation date)</em></div></div>
            <div className="e"><div className="yr">2015</div><div className="lab">ExecuJet Aviation Group joins the Luxaviation Group.</div></div>
            <div className="e"><div className="yr">2023</div><div className="lab">Sister-brand ExecuJet MRO Services ME relocates its main base to Dubai South.</div></div>
            <div className="e"><div className="yr">2024</div><div className="lab">Dubai South flagship terminal opens — 10 December 2024.</div></div>
          </div>
        </div>
      </section>

      <section className="section deep">
        <div className="wrap">
          <SectionHead
            num="/02"
            eyebrow="Leadership"
            title={`The people <span class="ital">behind</span><br/>every movement.`}
            desc="A small, named team in Dubai. The same handler you spoke to on your last arrival is on your next departure."
            dark
          />
          <div className="leaders">
            <Leader name="Hadi Mouawad" title="Cofounder · Executive Director" />
            <Leader name="Dumani Ndebele" title="Regional FBO Director" portrait="media/team-dumani-ndebele.webp" />
            <Leader name="Ali Bacha" title="Customer Relations Manager · Dubai" />
          </div>
          <div style={{marginTop:32, padding:'20px 28px', border:'1px dashed var(--line2)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--muted-2)'}}>
            Portraits for Mouawad &amp; Bacha — to be supplied by the client. Initial-monogram placeholders shown until then.
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <SectionHead
            num="/03"
            eyebrow="Accreditations & accolades"
            title={`Verified <span class="ital">trust signals.</span>`}
            desc="Name, issuer, year. Logos appear once the rights letter is on file — no badge soup without permission."
          />
          <div className="awards" style={{marginBottom:32}}>
            <Award yr="2025" nm="AIN FBO Survey — DXB" issuer="Aviation Intl. News · 4.36 overall" />
            <Award yr="2025" nm="AIN FBO Survey — DXB" issuer="Passenger Amenities · 4.50" />
            <Award yr="—" nm="Best Middle East & African FBO" issuer="Professional Pilot · category to confirm" />
            <Award yr="—" nm="Best Handler — Middle East" issuer="UAS Awards · category to confirm" />
            <Award yr="2025" nm="Forbes ME — Top 100 Travel & Tourism Leaders" issuer="Forbes Middle East · for Hadi Mouawad" />
            <Award yr="—" nm="IS-BAH Stage 2 — both FBOs" issuer="IBAC · facility accreditation" />
            <Award yr="—" nm="IS-BAO Stage III — operations" issuer="IBAC · operator accreditation" />
            <Award yr="—" nm="UAE AOC · EASA approval" issuer="GCAA (2000) · EASA (2008)" />
          </div>
          <div style={{display:'flex', alignItems:'center', gap:24, padding:'24px 0', borderTop:'1px solid var(--line)'}}>
            <div style={{width:8, height:8, background:'var(--gold)'}} />
            <p style={{margin:0, fontSize:13, color:'var(--muted)', maxWidth:680, lineHeight:1.6}}>
              The 2025 AIN FBO Survey score (4.36 overall) is an industry-survey result published by Aviation International News. We display it as an attributed accolade — not as a consumer star rating, and not encoded as a Schema.org <span className="mono">aggregateRating</span>.
            </p>
          </div>
        </div>
      </section>

      <section className="closing" style={{backgroundImage:'url(media/dwc-terminal-night-x.webp)', padding:'120px 0'}}>
        <div className="wrap closing-inner">
          <div className="eyebrow">/ Luxaviation Group</div>
          <h2 style={{fontSize:'clamp(36px, 4.6vw, 60px)'}}>A Dubai operator with <span className="ital">global scale.</span></h2>
          <p className="quote" style={{fontSize:18}}>Part of the Luxaviation Group — one of the world's largest privately-held business-aviation companies. Dubai-based people, group-scale infrastructure.</p>
          <a className="btn btn-cta" onClick={()=>goto('contact')}>Talk to us <span className="arrow">→</span></a>
        </div>
      </section>
    </React.Fragment>
  );
}

function Leader({ name, title, portrait }){
  const initials = name.split(' ').map(p=>p[0]).slice(0,2).join('');
  return (
    <div className="leader">
      {portrait ? (
        <div className="portrait" style={{backgroundImage:`url(${portrait})`}} />
      ) : (
        <div className="portrait placeholder">
          <div className="ph-init">{initials}</div>
          <div className="ph-note">Portrait — client to supply</div>
        </div>
      )}
      <div className="info">
        <div className="nm">{name}</div>
        <div className="ti">{title}</div>
      </div>
    </div>
  );
}

function Award({ yr, nm, issuer }){
  return (
    <div className="award">
      <div className="yr">{yr}</div>
      <div className="nm">{nm}</div>
      <div className="is">{issuer}</div>
    </div>
  );
}

// ============ CONTACT ============
function ContactPage({ goto }){
  return (
    <React.Fragment>
      <section className="compact-hero">
        <div className="wrap">
          <div className="eyebrow">/ Contact &nbsp;<span className="dot" /> &nbsp;Two FBOs · 24 h</div>
          <h1>Contact <span className="ital">ExecuJet</span> Middle East.</h1>
          <p className="sub">Both facilities are open 24 hours, every day. Pick the right one for your trip — or call the general switchboard and we'll route you.</p>
        </div>
      </section>

      <section className="section tight">
        <div className="wrap">
          <div className="contact-page-grid">
            <ContactCard fac={FACILITIES.dwc} flagship goto={goto} />
            <ContactCard fac={FACILITIES.dxb} goto={goto} />
          </div>
          <div style={{display:'flex', gap:24, padding:'24px 32px', background:'#fff', border:'1px solid var(--line)'}}>
            <div style={{flex:1}}>
              <div style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>General switchboard</div>
              <a href="tel:+97146016300" className="mono" style={{fontSize:22, color:'var(--ink)', borderBottom:'1px solid var(--line)'}}>+971 4 601 6300</a>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>Email domain</div>
              <span className="mono" style={{fontSize:22, color:'var(--ink)'}}>@execujet-me.com</span>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>Postal</div>
              <span style={{fontSize:15, color:'var(--ink)'}}>PO Box 32072, Dubai, UAE</span>
            </div>
            <div style={{flex:1}}>
              <div style={{fontSize:11, letterSpacing:'0.22em', textTransform:'uppercase', color:'var(--muted)', marginBottom:8}}>WhatsApp</div>
              <span style={{fontSize:13, color:'var(--muted-2)', fontStyle:'italic'}}>to confirm — not published until verified</span>
            </div>
          </div>
        </div>
      </section>

      <section className="enquiry">
        <div className="enquiry-grid">
          <div>
            <div className="eyebrow" style={{color:'var(--gold)'}}>/ Send a request</div>
            <h2>One form. <span className="ital">Any service.</span></h2>
            <p className="desc">Tell us what you need — handling, charter, management, MRO. The form pre-files to the right desk; a named coordinator will reply.</p>
            <div style={{marginTop:32, paddingTop:24, borderTop:'1px solid var(--line2)'}}>
              <div style={{fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--gold)', marginBottom:14}}>What we never do</div>
              <ul style={{listStyle:'none', padding:0, margin:0, fontSize:13, color:'rgba(255,255,255,0.7)', lineHeight:1.7}}>
                <li>· List prices online. Every trip is bespoke.</li>
                <li>· Sell on data. Enquiries stay private.</li>
                <li>· Broker your charter — direct relationship only.</li>
              </ul>
            </div>
          </div>
          <EnquiryForm variant="handling" />
        </div>
      </section>
    </React.Fragment>
  );
}

function ContactCard({ fac, flagship, goto }){
  return (
    <div className={`contact-card ${flagship?'dark':''}`}>
      <div className="eyebrow" style={{color: flagship?'var(--gold)':'var(--muted)'}}>
        / {fac.iata} · {fac.icao} {flagship && <span style={{marginLeft:8, padding:'3px 8px', border:'1px solid var(--gold)', color:'var(--gold)', fontSize:9}}>FLAGSHIP</span>}
      </div>
      <h3 style={{fontFamily:'var(--font-display)', fontWeight:300, fontSize:32, letterSpacing:'-0.02em', margin:'4px 0 8px', color: flagship?'#fff':'var(--ink)'}}>
        {fac.iata==='DWC' ? 'Dubai South' : 'Dubai International'}
      </h3>
      <div style={{fontSize:13, color: flagship?'rgba(255,255,255,0.6)':'var(--muted)', marginBottom:16, letterSpacing:'0.02em'}}>{fac.longName}</div>
      <div className="row"><div className="lab">Phone</div><div className="val"><a className="mono" href={`tel:${fac.phoneTel}`}>{fac.phone}</a></div></div>
      <div className="row"><div className="lab">Email</div><div className="val">{fac.email ? <a className="mono" href={`mailto:${fac.email}`}>{fac.email}</a> : <span className="flagged">{fac.emailFlag}</span>}</div></div>
      <div className="row"><div className="lab">Address</div><div className="val">{fac.address}</div></div>
      <div className="row"><div className="lab">Coords</div><div className="val"><span className="mono">{fac.coord}</span></div></div>
      <div className="row"><div className="lab">Hours</div><div className="val">24 h · IS-BAH Stage 2</div></div>
      <div className="ctas">
        <a className="btn btn-cta" onClick={()=>goto(fac.iata==='DWC'?'fbo-dwc':'fbo-dxb')}>Open facility <span className="arrow">→</span></a>
        <a className={`btn ${flagship?'btn-ghost':'btn-line'}`} href={`tel:${fac.phoneTel}`}>Call</a>
      </div>
    </div>
  );
}

Object.assign(window, { CharterPage, ManagementPage, MroPage, AboutPage, ContactPage });