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

/* ───── SERVICES ───── */
function Services({ i, onQuote }){
  const D = window.JETEX_DATA;
  const [hover, setHover] = useState(null);
  return (
    <section id="services" className="section section--paper">
      <div className="container">
        <SectionHead eyebrow="02" title={i.sections.services} sub="One brand. End-to-end." />
        <div className="services">
          {D.services.map((s, idx)=>(
            <article key={s.id}
              className={`scard ${hover===s.id?'is-hover':''}`}
              onMouseEnter={()=>setHover(s.id)}
              onMouseLeave={()=>setHover(null)}>
              <div className="scard__num mono">0{idx+1}</div>
              <div className="scard__media">
                <img src={s.img} alt="" loading="lazy" />
              </div>
              <div className="scard__body">
                <h3 className="scard__title">{s.name}</h3>
                <p className="scard__copy">{s.copy}</p>
                <button className="scard__cta" onClick={()=>onQuote(s)}>
                  <span>{i.quote}</span> <window.JetexUI1.Arrow/>
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── NETWORK ───── */
function NetworkSection({ i, lang, onContactFBO }){
  const D = window.JETEX_DATA;
  const regions = ['All', 'Middle East', 'Europe', 'Africa', 'Asia Pacific', 'Americas'];
  const [region, setRegion] = useState('All');
  const [selected, setSelected] = useState(D.terminals[0].id);
  const filtered = useMemo(()=>
    region==='All' ? D.terminals : D.terminals.filter(t=>t.region===region)
  , [region]);
  const sel = D.terminals.find(t=>t.id===selected) || filtered[0];
  return (
    <section id="network" className="section section--noir">
      <div className="container">
        <SectionHead light eyebrow="03" title={i.sections.network} sub="40+ private terminals · 50+ network locations · 30+ countries" />

        <div className="regions">
          {regions.map(r=>(
            <button key={r} className={`region ${region===r?'is-active':''}`} onClick={()=>setRegion(r)}>
              {r}
              <span className="region__n mono">
                {r==='All' ? D.terminals.length : D.terminals.filter(t=>t.region===r).length}
              </span>
            </button>
          ))}
        </div>

        <div className="netgrid">
          <div className="netgrid__list">
            {filtered.map(t=>(
              <button
                key={t.id}
                className={`tline ${selected===t.id?'is-active':''}`}
                onClick={()=>setSelected(t.id)}>
                <span className="tline__iata mono">{t.iata}</span>
                <span className="tline__city">{t.city}</span>
                <span className="tline__country mono">{t.country}</span>
                <span className="tline__arrow"><window.JetexUI1.Arrow/></span>
              </button>
            ))}
          </div>

          {sel && (
            <div className="tdetail" key={sel.id}>
              <div className="tdetail__media">
                <img src={sel.img} alt={sel.city + ' terminal'} />
                <div className="tdetail__overlay">
                  <span className="mono">{sel.icao} · {sel.iata}</span>
                  <span className="mono">{sel.coords}</span>
                </div>
              </div>
              <div className="tdetail__body">
                <div className="tdetail__top">
                  <div>
                    <div className="tdetail__city">{sel.city}</div>
                    <div className="tdetail__airport">{sel.airport} · {sel.country}</div>
                  </div>
                  <div className="tdetail__status mono">{sel.status}</div>
                </div>
                <p className="tdetail__note">{sel.note}</p>
                {sel.certs.length>0 && (
                  <div className="certs">
                    {sel.certs.map(c=>(
                      <span key={c} className="cert mono"><span className="cert__tick"/> {c}</span>
                    ))}
                  </div>
                )}
                <div className="tdetail__meta">
                  <Meta k="Region" v={sel.region}/>
                  <Meta k="Time zone" v={sel.tz + ' · UTC ' + sel.utc}/>
                  <Meta k="Phone" v={sel.phone}/>
                  <Meta k="Email" v={sel.email}/>
                </div>
                <div className="tdetail__ctas">
                  <button className="btn btn--solid" onClick={()=>onContactFBO(sel)}>Contact this FBO <window.JetexUI1.Arrow/></button>
                  <a className="btn btn--ghost btn--dark" href={'tel:'+(sel.phone||'+97142124000').replace(/\s/g,'')}>{i.call}</a>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Meta({k,v}){
  return (
    <div className="meta">
      <div className="meta__k mono">{k}</div>
      <div className="meta__v">{v}</div>
    </div>
  );
}

/* ───── FEATURED TERMINAL — DUBAI DWC ───── */
function FeaturedTerminal({ i, onContactFBO }){
  return (
    <section id="featured" className="featured">
      <div className="featured__media">
        <img src="media/terminal-dubai-exterior.webp" alt="Dubai DWC flagship terminal at dusk" />
        <div className="featured__veil"/>
      </div>
      <div className="featured__inner">
        <div className="featured__label mono"><span className="dot"/> {i.sections.featured}</div>
        <h2 className="featured__title">Dubai South.<br/>The flagship.</h2>
        <p className="featured__copy">
          The only FBO in MENA certified to both IS-BAH Stage 2 and NATA Safety 1st.
          Curbside to cabin in minutes — 24/7 operations from a purpose-built terminal at Al Maktoum.
        </p>
        <div className="featured__row">
          <Pill mono>DWC · OMDW</Pill>
          <Pill mono>N24°55.1′ E055°10.5′</Pill>
          <Pill>IS-BAH Stage 2</Pill>
          <Pill>NATA Safety 1st</Pill>
        </div>
        <div className="featured__ctas">
          <button className="btn btn--solid" onClick={onContactFBO}>Contact Dubai South <window.JetexUI1.Arrow/></button>
          <a className="btn btn--ghost btn--dark" href="tel:+97142124900">+971 4 212 4900</a>
        </div>
      </div>
    </section>
  );
}

function Pill({children, mono}){
  return <span className={`pill ${mono?'mono':''}`}>{children}</span>;
}

/* ───── SECTION HEAD ───── */
function SectionHead({ eyebrow, title, sub, light }){
  return (
    <div className={`shead ${light?'shead--light':''}`}>
      <div className="shead__row">
        <span className="shead__eyebrow mono">{eyebrow}</span>
        <h2 className="shead__title">{title}</h2>
      </div>
      {sub && <div className="shead__sub mono">{sub}</div>}
    </div>
  );
}

window.JetexUI2 = { Services, NetworkSection, FeaturedTerminal, SectionHead };
})();