// ExecuJet ME — content + shared components

const FACILITIES = {
  dwc: {
    slug: 'dubai-south',
    name: 'Dubai South',
    longName: 'Al Maktoum International Airport',
    iata: 'DWC',
    icao: 'OMDW',
    phone: '+971 4 601 6453',
    phoneTel: '+97146016453',
    emailFlag: 'email — to confirm',
    address: 'Al Maktoum International Airport, PO Box 32072, Dubai',
    poBox: 'PO Box 32072, Dubai',
    hours: '24 h',
    isbah: 'IS-BAH Stage 2',
    coord: '24.8750556° N, 55.1564167° E',
    opened: '10 Dec 2024',
    area: '15,000',
    levels: '3',
    hangar: '7,000',
    hero: 'media/dwc-terminal-exterior-dusk.webp',
    altHero: 'media/dwc-fbo-hero.webp',
    teaser: 'Our 2024 flagship — 15,000 m² over three levels at the Mohammed Bin Rashid Aerospace Hub.',
  },
  dxb: {
    slug: 'dubai-international',
    name: 'Dubai International',
    longName: 'Dubai International Airport',
    iata: 'DXB',
    icao: 'OMDB',
    phone: '+971 4 601 6363',
    phoneTel: '+97146016363',
    email: 'fbo.omdb@execujet-me.com',
    address: 'Dubai International Airport Free Zone, PO Box 32072, Dubai',
    poBox: 'PO Box 32072, Dubai',
    hours: '24 h',
    isbah: 'IS-BAH Stage 2',
    coord: '25.2528° N, 55.3645° E',
    opened: 'Entirely redesigned',
    area: '7,000',
    lounges: '6',
    hero: 'media/dxb-fbo-hero.webp',
    altHero: 'media/dxb-apron-jet-dusk.webp',
    teaser: 'The original FBO, entirely redesigned — six exclusive lounges, 7,000 m² of hangarage and ramp.',
  },
};

const NAV_ITEMS = [
  { key: 'home', label: 'Home' },
  { key: 'fbo', label: 'FBO', dd: [
    { key: 'fbo-dwc', label: 'Dubai South', meta: 'DWC · OMDW', chip: 'Flagship' },
    { key: 'fbo-dxb', label: 'Dubai International', meta: 'DXB · OMDB', chip: 'Since 1999' },
  ]},
  { key: 'charter', label: 'Charter' },
  { key: 'management', label: 'Management' },
  { key: 'mro', label: 'MRO' },
  { key: 'about', label: 'About' },
  { key: 'contact', label: 'Contact' },
];

// ============ Top bar ============
function TopBar({ lang, onLang }){
  return (
    <div className="topbar">
      <div className="wrap topbar-inner">
        <div className="topbar-cols">
          <span><span className="pulse" /> Both FBOs · Open 24 h</span>
          <span className="sep">/</span>
          <span>Dubai · UAE</span>
          <span className="sep">/</span>
          <span>Switchboard <a href="tel:+97146016300" className="mono" style={{marginLeft:6}}>+971 4 601 6300</a></span>
        </div>
        <div className="topbar-cols">
          <span style={{color:'#6B7480'}}>Part of <span style={{color:'#C6CCD2'}}>Luxaviation Group</span></span>
          <span className="sep">/</span>
          <div className="lang-switch">
            {['EN','AR','RU','ZH'].map((l,i,a)=>(
              <React.Fragment key={l}>
                <button onClick={()=>onLang(l)} className={lang===l ? 'active' : ''}>{l}</button>
                {i<a.length-1 && <span className="sep">·</span>}
              </React.Fragment>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ Navbar ============
function Navbar({ page, goto }){
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="brand" onClick={()=>goto('home')} style={{cursor:'pointer'}}>
          <img src="media/logo-execujet-white.svg" alt="ExecuJet" className="brand-mark" />
          <span className="brand-tag">Middle East</span>
        </div>
        <div className="nav-links">
          {NAV_ITEMS.map(item => {
            const active = page === item.key || (item.dd && item.dd.find(d=>d.key===page));
            if (item.dd){
              return (
                <div key={item.key} className={`nav-link has-dd ${active?'active':''}`} >
                  {item.label}<span className="chev">▾</span>
                  <div className="dropdown">
                    {item.dd.map(d => (
                      <a key={d.key} onClick={()=>goto(d.key)}>
                        <div className="label">
                          <span>{d.label}</span>
                          <span className="iata-chip">{d.meta}</span>
                        </div>
                        <div className="meta">— {d.chip}</div>
                      </a>
                    ))}
                  </div>
                </div>
              );
            }
            return (
              <a key={item.key} className={`nav-link ${active?'active':''}`} onClick={()=>goto(item.key)}>
                {item.label}
              </a>
            );
          })}
        </div>
        <div className="nav-right">
          <a className="btn btn-ghost" onClick={()=>goto('contact')}>Call &nbsp;<span className="mono">+971 4 601 6300</span></a>
          <a className="btn btn-cta" onClick={()=>goto('contact')}>Handling Request <span className="arrow">→</span></a>
        </div>
      </div>
    </nav>
  );
}

// ============ Sticky CTA bar ============
function StickyBar({ goto }){
  return (
    <div className="sticky-bar">
      <a className="b" onClick={()=>goto('contact')}><span className="dot" />Online · 24 h</a>
      <a className="b" onClick={()=>goto('charter')}>Charter Enquiry</a>
      <a className="b primary" onClick={()=>goto('contact')}>Handling Request →</a>
    </div>
  );
}

// ============ Footer ============
function Footer({ goto }){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="lockup">
              <img src="media/logo-execujet-white.svg" alt="ExecuJet" />
              <span className="tag">Middle East</span>
            </div>
            <p>Dubai's private-aviation gateway — two FBOs, 24-hour ground handling, charter and aircraft management. In the region since 1999.</p>
            <div className="lux">Part of the Luxaviation Group</div>
          </div>

          <div>
            <h5>Facilities</h5>
            <div className="fac">
              <div className="code">DXB · OMDB</div>
              <div className="nm">Dubai International FBO</div>
              <div className="tel"><a href="tel:+97146016363">+971 4 601 6363</a></div>
            </div>
            <div className="fac">
              <div className="code">DWC · OMDW</div>
              <div className="nm">Dubai South — flagship</div>
              <div className="tel"><a href="tel:+97146016453">+971 4 601 6453</a></div>
            </div>
          </div>

          <div>
            <h5>Services</h5>
            <ul>
              <li><a onClick={()=>goto('fbo-dxb')}>FBO &amp; VIP Ground Handling</a></li>
              <li><a onClick={()=>goto('charter')}>Aircraft Charter</a></li>
              <li><a onClick={()=>goto('management')}>Aircraft Management</a></li>
              <li><a onClick={()=>goto('mro')}>Maintenance &amp; MRO ↗</a></li>
              <li><a onClick={()=>goto('contact')}>Handling Request</a></li>
            </ul>
          </div>

          <div>
            <h5>Company</h5>
            <ul>
              <li><a onClick={()=>goto('about')}>About — since 1999</a></li>
              <li><a onClick={()=>goto('about')}>Leadership</a></li>
              <li><a onClick={()=>goto('about')}>Accreditations</a></li>
              <li><a onClick={()=>goto('contact')}>Contact &amp; map</a></li>
              <li><a href="https://execujet.com" target="_blank" rel="noopener">execujet.com (global) ↗</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bot">
          <span>© 2026 ExecuJet Middle East · Trade licence — to confirm</span>
          <div className="links">
            <a>Privacy</a>
            <a>Terms</a>
            <a>Cookies</a>
            <a>Sitemap</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ============ Section head (shared) ============
function SectionHead({ num, eyebrow, title, desc, dark }){
  return (
    <div className="section-head">
      <div>
        <div className="num">{num} &nbsp;/&nbsp; {eyebrow}</div>
        <h2 dangerouslySetInnerHTML={{__html: title}} />
      </div>
      {desc && <div className="desc">{desc}</div>}
    </div>
  );
}

// ============ Enquiry form ============
function EnquiryForm({ variant = 'handling', dark = true }){
  const [v, setV] = React.useState(variant);
  const variants = [
    { k: 'handling', label: 'Handling request' },
    { k: 'charter', label: 'Charter enquiry' },
    { k: 'management', label: 'Aircraft management' },
    { k: 'mro', label: 'MRO enquiry' },
  ];
  return (
    <div className="form-wrap">
      <div className="pill-row">
        {variants.map(x => (
          <button key={x.k} className={`pill ${v===x.k?'active':''}`} onClick={()=>setV(x.k)}>{x.label}</button>
        ))}
      </div>
      <div className="form-grid">
        <div className="field">
          <label>Name</label>
          <input placeholder="Capt. / Mr / Ms — full name" />
        </div>
        <div className="field">
          <label>Company / Operator</label>
          <input placeholder="Flight department or charter broker" />
        </div>
        <div className="field">
          <label>Email</label>
          <input type="email" placeholder="ops@yourdomain.com" />
        </div>
        <div className="field">
          <label>Phone</label>
          <input placeholder="+971 ··· ···· ····" />
        </div>
        <div className="field">
          <label>Aircraft type / registration</label>
          <input placeholder="e.g. Global 7500 · A6-XXX" />
        </div>
        <div className="field">
          <label>Facility</label>
          <select defaultValue="dwc">
            <option value="dwc">Dubai South — DWC / OMDW</option>
            <option value="dxb">Dubai International — DXB / OMDB</option>
            <option value="either">Either / advise</option>
          </select>
          <span className="chev">▾</span>
        </div>
        <div className="field">
          <label>Arrival date</label>
          <input type="text" placeholder="DD MMM YYYY · UTC" />
        </div>
        <div className="field">
          <label>Departure date</label>
          <input type="text" placeholder="DD MMM YYYY · UTC" />
        </div>
        <div className="field full">
          <label>Message</label>
          <textarea rows="3" placeholder="Aircraft route, pax / crew counts, ground transport, catering, hangarage, anything else we should know."></textarea>
        </div>
      </div>
      <div className="submit-row">
        <div className="legal">We respond to handling requests 24/7. No prices listed — every quotation is bespoke.</div>
        <button className="btn btn-cta">Send request <span className="arrow">→</span></button>
      </div>
    </div>
  );
}

// expose to other babel scripts
Object.assign(window, { TopBar, Navbar, StickyBar, Footer, SectionHead, EnquiryForm, FACILITIES, NAV_ITEMS });