/* global React */
(function(){
const { useState, useEffect } = React;

/* ───── NAV ───── */
function Nav({ i, lang, setLang, onQuote }){
  const [open, setOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  useEffect(()=>{
    const onScroll = ()=> setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return ()=> window.removeEventListener('scroll', onScroll);
  }, []);
  const langs = [['en','EN'],['ar','العربية'],['ru','RU'],['zh','中文']];
  return (
    <header className={`nav ${scrolled?'nav--scrolled':''}`}>
      <div className="nav__inner">
        <a className="nav__logo" href="#top" aria-label="Jetex home">
          <img src="media/logo-jetex.svg" alt="Jetex" />
        </a>
        <nav className="nav__links" aria-label="Primary">
          <a href="#network">{i.nav.network}</a>
          <a href="#services">{i.nav.services}</a>
          <a href="#charter">{i.nav.charter}</a>
          <a href="#about">{i.nav.about}</a>
          <a href="#contact">{i.nav.contact}</a>
        </nav>
        <div className="nav__tools">
          <div className="lang">
            {langs.map(([k,label])=>(
              <button key={k} className={`lang__btn ${lang===k?'is-active':''}`} onClick={()=>setLang(k)} aria-pressed={lang===k}>{label}</button>
            ))}
          </div>
          <button className="btn btn--ghost btn--sm wa" onClick={()=>window.open('https://wa.me/97142124000','_blank')} title="WhatsApp">
            <WhatsIcon/>
          </button>
          <button className="btn btn--solid btn--sm" onClick={onQuote}>{i.quote} <Arrow/></button>
        </div>
        <button className="nav__hamburger" aria-label="Menu" onClick={()=>setOpen(o=>!o)}>
          <span/><span/><span/>
        </button>
      </div>
      {open && (
        <div className="nav__mobile">
          <a href="#network" onClick={()=>setOpen(false)}>{i.nav.network}</a>
          <a href="#services" onClick={()=>setOpen(false)}>{i.nav.services}</a>
          <a href="#charter" onClick={()=>setOpen(false)}>{i.nav.charter}</a>
          <a href="#about" onClick={()=>setOpen(false)}>{i.nav.about}</a>
          <a href="#contact" onClick={()=>setOpen(false)}>{i.nav.contact}</a>
          <div className="lang lang--mobile">
            {langs.map(([k,label])=>(
              <button key={k} className={`lang__btn ${lang===k?'is-active':''}`} onClick={()=>setLang(k)}>{label}</button>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

/* ───── HERO ───── */
function Hero({ i, lang, onQuote, showTech }){
  const [clock, setClock] = useState('');
  useEffect(()=>{
    const tick = ()=>{
      const d = new Date();
      const fmt = (z)=> d.toLocaleTimeString('en-GB',{ timeZone:z, hour:'2-digit', minute:'2-digit' });
      setClock({
        dxb: fmt('Asia/Dubai'),
        lbg: fmt('Europe/Paris'),
        bqh: fmt('Europe/London'),
        xsp: fmt('Asia/Singapore'),
        sbj: fmt('America/Sao_Paulo'),
      });
    };
    tick();
    const t = setInterval(tick, 30000);
    return ()=> clearInterval(t);
  }, []);
  return (
    <section className="hero" id="top">
      <div className="hero__media">
        <img src="media/hero.webp" alt="" />
        <div className="hero__veil"/>
      </div>
      <div className="hero__grid">
        <div className="hero__main">
          <div className="hero__eyebrow">
            <span className="dot"/> {i.hero.eyebrow}
          </div>
          <h1 className="hero__title" lang={lang}>{i.hero.title}</h1>
          <p className="hero__sub">{i.hero.sub}</p>
          <div className="hero__ctas">
            <button className="btn btn--solid btn--lg" onClick={onQuote}>{i.hero.ctaQuote} <Arrow/></button>
            <a className="btn btn--ghost btn--lg" href="#network">{i.hero.ctaNetwork}</a>
          </div>
        </div>

        {showTech && (
          <aside className="hero__panel" aria-label="Live operations">
            <div className="panel__head">
              <span className="mono">CONCIERGE DESK</span>
              <span className="status"><span className="status__dot"/> ONLINE 24 / 7</span>
            </div>
            <div className="panel__rows">
              {[
                ['DXB / OMDB','Dubai Intl HQ', clock.dxb, '+04:00'],
                ['DWC / OMDW','Al Maktoum FBO', clock.dxb, '+04:00'],
                ['LBG / LFPB','Paris Le Bourget', clock.lbg, '+01:00'],
                ['BQH / EGKB','London Biggin Hill', clock.bqh, '+00:00'],
                ['XSP / WSSL','Singapore Seletar', clock.xsp, '+08:00'],
                ['SBJ / SBJH','São Paulo Catarina', clock.sbj, '−03:00'],
              ].map(([code,name,time,utc])=>(
                <div className="panel__row" key={code}>
                  <span className="mono panel__code">{code}</span>
                  <span className="panel__name">{name}</span>
                  <span className="mono panel__time">{time||'—'}</span>
                  <span className="mono panel__utc">{utc}</span>
                </div>
              ))}
            </div>
            <div className="panel__foot mono">
              SECURE LINE · +971 4 212 4000 · fltops@jetex.com
            </div>
          </aside>
        )}
      </div>

      <div className="hero__bottom">
        <div className="hero__stats">
          <Stat n="2005"  label="Founded" />
          <Stat n="40+"   label="Private terminals" sub="50+ network locations · 2025" />
          <Stat n="1,000+" label="People worldwide" sub="2025" />
          <Stat n="500,000+" label="Passengers carried" sub="2025" />
        </div>
      </div>
    </section>
  );
}

function Stat({n,label,sub}){
  return (
    <div className="stat">
      <div className="stat__n">{n}</div>
      <div className="stat__l">{label}</div>
      {sub && <div className="stat__s mono">{sub}</div>}
    </div>
  );
}

/* ───── OPS TICKER ───── */
function OpsTicker({ i }){
  const cities = [
    'DXB · Dubai International HQ',
    'DWC · Al Maktoum — Dubai South',
    'LBG · Paris Le Bourget',
    'BQH · London Biggin Hill',
    'XSP · Singapore Seletar',
    'RAK · Marrakech Menara',
    'CMN · Casablanca Mohammed V',
    'ABJ · Abidjan Félix-Houphouët',
    'SBJ · São Paulo Catarina — LatAm HQ',
    'LIN · Milan Linate Prime · early 2026',
    'IST · Istanbul · in development',
  ];
  return (
    <section className="ticker" aria-label={i.sections.ops}>
      <div className="ticker__label mono">
        <span className="dot"/> {i.sections.ops}
      </div>
      <div className="ticker__rail">
        <div className="ticker__track">
          {[...cities, ...cities].map((c,k)=>(
            <span key={k} className="ticker__item mono">{c}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.JetexUI1 = { Nav, Hero, OpsTicker };

/* ───── ICONS ───── */
function Arrow(){return <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" strokeLinejoin="miter"/></svg>;}
function WhatsIcon(){return <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"><path d="M20.5 3.5A11.5 11.5 0 0 0 3 19.2L1.5 24l4.9-1.5a11.5 11.5 0 0 0 17.2-9.9c0-3.1-1.2-6-3.4-8.2zM12 22a9.6 9.6 0 0 1-4.9-1.4l-.4-.2-2.9.9.9-2.8-.2-.4A9.6 9.6 0 1 1 12 22zm5.6-7c-.3-.2-1.8-.9-2.1-1s-.5-.2-.7.2-.8 1-.9 1.2-.3.2-.6.1a7.7 7.7 0 0 1-3.8-3.3c-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.6s-.7-1.6-.9-2.2-.5-.5-.7-.5h-.6a1.1 1.1 0 0 0-.8.4 3.3 3.3 0 0 0-1 2.5c0 1.5 1.1 2.9 1.2 3.1s2.1 3.3 5.2 4.6c.7.3 1.3.5 1.7.6a4.1 4.1 0 0 0 1.8.1c.6-.1 1.8-.7 2-1.4s.2-1.3.2-1.4-.3-.2-.6-.4z"/></svg>;}

window.JetexUI1.Arrow = Arrow;
window.JetexUI1.WhatsIcon = WhatsIcon;
})();