/* global React */
(function(){

/* ───── FOUNDER ───── */
function FounderSection({ i }){
  return (
    <section id="about" className="founder">
      <div className="container founder__grid">
        <div className="founder__photo">
          <img src="media/founder.webp" alt="Adel Mardini, Founder & CEO of Jetex" />
          <div className="founder__cap mono">ADEL MARDINI · FOUNDER & CEO</div>
        </div>
        <div className="founder__body">
          <div className="shead">
            <div className="shead__row">
              <span className="shead__eyebrow mono">04</span>
              <h2 className="shead__title">{i.sections.founder}</h2>
            </div>
          </div>
          <p className="founder__lede">
            Jetex was founded at the Dubai Airshow in November 2005 by Adel Mardini —
            a story that begins driving an airport shuttle in Damascus and now spans
            more than fifty network locations, on every populated continent.
          </p>
          <blockquote className="founder__quote">
            <span className="mark">“</span>
            We don’t provide one piece of private aviation. We provide it all —
            anywhere in the world, seamlessly.
          </blockquote>
          <div className="founder__meta">
            <Beat k="Founded" v="November 2005, Dubai" />
            <Beat k="Team" v="Over 1,000 worldwide (2025)" />
            <Beat k="Headquarters" v="Dubai International Airport (DXB)" />
            <Beat k="Flagship FBO" v="Dubai South / Al Maktoum (DWC)" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Beat({k,v}){
  return (
    <div className="beat">
      <div className="beat__k mono">{k}</div>
      <div className="beat__v">{v}</div>
    </div>
  );
}

/* ───── AWARDS ───── */
function AwardsStrip({ i }){
  const D = window.JETEX_DATA;
  return (
    <section className="awards">
      <div className="container">
        <div className="shead shead--light">
          <div className="shead__row">
            <span className="shead__eyebrow mono">05</span>
            <h2 className="shead__title">{i.sections.awards}</h2>
          </div>
          <div className="shead__sub mono">World Travel Awards · attributed</div>
        </div>
        <div className="awards__grid">
          {D.awards.map((a,idx)=>(
            <div className="award" key={idx}>
              <div className="award__year mono">{a.year}</div>
              <div className="award__title">{a.title}</div>
              <div className="award__issuer mono">{a.issuer}</div>
            </div>
          ))}
        </div>
        <div className="awards__certs">
          <span className="mono">CERTIFICATIONS</span>
          <span className="awards__cert">IS-BAH Stage 2</span>
          <span className="awards__cert">NATA Safety 1st</span>
          <span className="awards__note mono">Only FBO in MENA with both.</span>
        </div>
      </div>
    </section>
  );
}

/* ───── CONTACT ───── */
function ContactSection({ i, onQuote }){
  return (
    <section id="contact" className="contact">
      <div className="container">
        <div className="shead shead--light">
          <div className="shead__row">
            <span className="shead__eyebrow mono">06</span>
            <h2 className="shead__title">{i.sections.contact}</h2>
          </div>
          <div className="shead__sub mono">Two Dubai locations — not merged. 24 / 7.</div>
        </div>
        <div className="contact__grid">
          <ContactCard
            tag="GLOBAL HEADQUARTERS"
            city="Dubai International (DXB)"
            address="06EA, Dubai International Airport, P.O. Box 54698, Dubai, UAE"
            phone="+971 4 212 4000"
            email="fltops@jetex.com"
            coords="N25°15.2′ E055°21.9′"
            role="Headquarters · Flight operations"
            onQuote={onQuote}
            i={i}
          />
          <ContactCard
            tag="FLAGSHIP FBO TERMINAL"
            city="Dubai South — Al Maktoum (DWC)"
            address="Jetex FBO Terminal, Dubai South, Dubai, UAE"
            phone="+971 4 212 4900 · 4950"
            email="fbo-dwc@jetex.com"
            coords="N24°55.1′ E055°10.5′"
            role="FBO · IS-BAH Stage 2 · NATA Safety 1st"
            onQuote={onQuote}
            i={i}
          />
        </div>
      </div>
    </section>
  );
}

function ContactCard({ tag, city, address, phone, email, coords, role, onQuote, i }){
  return (
    <div className="ccard">
      <div className="ccard__tag mono"><span className="dot"/> {tag}</div>
      <div className="ccard__city">{city}</div>
      <div className="ccard__role mono">{role}</div>
      <div className="ccard__addr">{address}</div>
      <div className="ccard__rows">
        <CcRow k="Phone" v={<a href={'tel:'+phone.replace(/[\s·]/g,'')}>{phone}</a>}/>
        <CcRow k="Email" v={<a href={'mailto:'+email}>{email}</a>}/>
        <CcRow k="Coords" v={<span className="mono">{coords}</span>}/>
      </div>
      <div className="ccard__ctas">
        <button className="btn btn--solid btn--sm" onClick={onQuote}>{i.quote} <window.JetexUI1.Arrow/></button>
        <a className="btn btn--ghost btn--sm" href={'tel:'+phone.replace(/[\s·]/g,'')}>{i.call}</a>
      </div>
    </div>
  );
}

function CcRow({k,v}){
  return (
    <div className="ccrow">
      <div className="ccrow__k mono">{k}</div>
      <div className="ccrow__v">{v}</div>
    </div>
  );
}

/* ───── FOOTER ───── */
function Footer({ i }){
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <img src="media/logo-jetex.svg" alt="Jetex" className="footer__logo"/>
          <div className="footer__claim">{i.anywhere}.</div>
        </div>
        <div className="footer__cols">
          <FootCol head="Network" items={['Middle East','Europe','Africa','Asia Pacific','Americas']}/>
          <FootCol head="Services" items={['Private terminals','Charter','Fuel','Ground handling','Trip planning','Concierge','Aircraft sales']}/>
          <FootCol head="Company" items={['About','Founder','Awards','Press','Careers']}/>
          <FootCol head="Connect" items={['Instagram · @jetex','LinkedIn · Jetex','YouTube · Jetex','X · @jetex','TikTok · @jetex']}/>
        </div>
        <div className="footer__bottom mono">
          <span>© 2026 Jetex · Dubai · 06EA Dubai International Airport</span>
          <span>Bespoke quote only · No price lists</span>
        </div>
      </div>
    </footer>
  );
}

function FootCol({head, items}){
  return (
    <div className="footcol">
      <div className="footcol__head mono">{head}</div>
      <ul>
        {items.map((x,k)=> <li key={k}>{x}</li>)}
      </ul>
    </div>
  );
}

/* ───── STICKY CTAs ───── */
function StickyCTAs({ i, onQuote }){
  return (
    <div className="sticky">
      <button className="sticky__btn sticky__btn--quote" onClick={onQuote}>
        {i.quote} <window.JetexUI1.Arrow/>
      </button>
      <a className="sticky__btn sticky__btn--wa" href="https://wa.me/97142124000" target="_blank" rel="noopener">
        <window.JetexUI1.WhatsIcon/> <span>{i.whatsapp}</span>
      </a>
    </div>
  );
}

window.JetexUI3 = { FounderSection, AwardsStrip, ContactSection, Footer, StickyCTAs };
})();