/* Hero, Trust, Services, GTMx, Network, White Glove, Charter, Footer */

const { useState: useStateS, useEffect: useEffectS, useMemo: useMemoS, useRef: useRefS } = React;

// ------------------------- Hero
function Hero({ copy, locale, heroVariant, onQuote, onAccount }) {
  // Cycle stages of the 4 sample missions every 2.4s to feel live
  const [tick, setTick] = useStateS(0);
  useEffectS(() => {
    const id = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(id);
  }, []);
  const stages = ["airborne", "permit", "taxi", "ground"];
  return (
    <section className={cx("hero", heroVariant === "type" && "typographic")}>
      <div className="hero-bg" />
      <div className="hero-grid-overlay" />
      <div className="wrap hero-inner">
        <div>
          <div className="eyebrow" style={{ color: heroVariant === "type" ? "var(--muted)" : "rgba(255,255,255,0.55)", marginBottom: 22 }}>
            {copy.hero.eyebrow}
          </div>
          <h1 className="display">
            {copy.hero.title_a}{" "}
            <em>{copy.hero.title_em}</em>{" "}
            {copy.hero.title_b}
          </h1>
          <p className="lede">{copy.hero.lede}</p>
          <div className="hero-ctas">
            <button className="btn primary lg" onClick={onQuote}>
              {copy.cta.quote}<Arrow />
            </button>
            <button className="btn ghost lg" onClick={onAccount}
              style={{ color: heroVariant === "type" ? "var(--ink)" : "#fff",
                       borderColor: heroVariant === "type" ? "var(--line-2)" : "rgba(255,255,255,0.3)" }}>
              {copy.cta.account}
            </button>
          </div>
          <div className="hero-meta">
            {copy.hero.meta.map((m, i) => (
              <div className="item" key={i}>
                <div className="eyebrow">{m.l}</div>
                <div className="value">{m.v}</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="ops-panel">
            <header>
              <h4>{copy.ops.live} · Dubai OCC</h4>
              <span className="tag mono">{new Date().toISOString().slice(11, 19)}Z</span>
            </header>
            <div>
              {HERO_MISSIONS.map((m, i) => {
                const stageIdx = (stages.indexOf(m.stage) + Math.floor(tick / (i + 1))) % stages.length;
                const stage = stages[stageIdx];
                const labels = { airborne: "Airborne", permit: "Permit", taxi: "Taxi-out", ground: "On-ground" };
                return (
                  <div className="mission" key={i}>
                    <span className="reg">{m.route[0]}</span>
                    <span className="route">
                      {m.route[1]} <span className="arr">→</span> {m.route[2]}
                    </span>
                    <span className={cx("stage", stage)}>{labels[stage]}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------- Trust strip
function TrustStrip({ copy }) {
  return (
    <section className="trust">
      <div className="wrap trust-row">
        {copy.trust.map((t, i) => (
          <div className="trust-item" key={i}>
            <div className="v">{t.v}</div>
            <div className="l">{t.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ------------------------- Services
function Services({ copy, locale, onQuote }) {
  return (
    <section className="block" id="services">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">{copy.services.eyebrow}</div>
            <h2 className="display">{copy.services.title}</h2>
          </div>
          <div className="meta">
            <p>{copy.services.meta_p1}</p>
            <p>{copy.services.meta_p2}</p>
            <button className="btn link" onClick={onQuote}>
              {copy.cta.quote}<Arrow />
            </button>
          </div>
        </div>
        <div className="services-grid">
          {SERVICES.map((s, i) => (
            <article
              key={s.id}
              className={cx("svc", s.feature && "feature")}
              onClick={onQuote}
            >
              {s.feature ? (
                <>
                  <div className="img" style={{ backgroundImage: `url(${s.img})` }} />
                  <div className="body">
                    <div className="num">{String(i + 1).padStart(2, "0")} / 08</div>
                    <h3>{locale === "ar" ? s.name_ar : s.name_en}</h3>
                    <p className="desc">{locale === "ar" ? s.desc_ar : s.desc_en}</p>
                    <span className="open">{copy.cta.quote}<Arrow /></span>
                  </div>
                </>
              ) : (
                <>
                  <div className="num">{String(i + 1).padStart(2, "0")} / 08</div>
                  <h3>{locale === "ar" ? s.name_ar : s.name_en}</h3>
                  <p className="desc">{locale === "ar" ? s.desc_ar : s.desc_en}</p>
                  <span className="open">{copy.cta.quote}<Arrow /></span>
                </>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------------------------- GTMx
function GTMx({ copy, locale, onDemo }) {
  const [activeFeature, setActiveFeature] = useStateS(0);
  const [activeMission, setActiveMission] = useStateS(0);
  // Auto-advance the active feature so the panel feels alive on first view
  useEffectS(() => {
    const id = setInterval(() => {
      setActiveFeature(a => (a + 1) % GTMX_FEATURES.length);
    }, 4200);
    return () => clearInterval(id);
  }, []);

  const m = GTMX_MISSIONS[activeMission];
  const stageLabel = { airborne: "Airborne", permit: "Permit", taxi: "Taxi-out", ground: "On-ground" };

  return (
    <section className="gtmx block" id="technology">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ color: "var(--uas-violet-soft)" }}>{copy.gtmx.eyebrow}</div>
            <h2 className="display">{copy.gtmx.title}</h2>
          </div>
          <div className="meta">
            <p>{copy.gtmx.meta_p}</p>
            <button className="btn primary" onClick={onDemo} style={{ marginTop: 8 }}>
              {copy.cta.demo}<Arrow />
            </button>
          </div>
        </div>

        <div className="gtmx-frame">
          <div className="gtmx-feature-list">
            {GTMX_FEATURES.map((f, i) => (
              <div
                key={f.id}
                className={cx("gtmx-feature", i === activeFeature && "active")}
                onClick={() => setActiveFeature(i)}
              >
                <div className="ix">{f.ix}</div>
                <div>
                  <h4>{locale === "ar" ? f.name_ar : f.name_en}</h4>
                  <p>{locale === "ar" ? f.desc_ar : f.desc_en}</p>
                </div>
                <div className="chev">→</div>
              </div>
            ))}
          </div>

          <div className="gtmx-screen" role="figure" aria-label="GTMx live dashboard preview">
            <div className="bar">
              <span className="dot" /><span className="dot" /><span className="dot" />
              <span className="url mono">gtmx.uas.aero/ops/dubai</span>
              <span style={{ marginInlineStart: "auto", display: "inline-flex", alignItems: "center", gap: 8 }}>
                <span className="dot" style={{ background: "var(--ok)", boxShadow: "0 0 0 4px rgba(31,138,91,0.2)" }} />
                <span className="mono" style={{ fontSize: 10, color: "rgba(255,255,255,0.55)" }}>LIVE</span>
              </span>
            </div>
            <div className="gtmx-screen-body">
              <div className="row">
                <div className="gtmx-stat"><div className="l">Active missions</div><div className="v accent">14</div></div>
                <div className="gtmx-stat"><div className="l">Permits open</div><div className="v">3</div></div>
                <div className="gtmx-stat"><div className="l">Fuel uplifts today</div><div className="v">28</div></div>
                <div className="gtmx-stat"><div className="l">Stations active</div><div className="v">19</div></div>
              </div>

              <div className="gtmx-mission-list">
                {GTMX_MISSIONS.map((mm, i) => (
                  <div
                    key={mm.mid}
                    className={cx("gtmx-mission", i === activeMission && "selected")}
                    onClick={() => setActiveMission(i)}
                  >
                    <div className="mid">{mm.mid}</div>
                    <div className="route">{mm.route}</div>
                    <div className="reg">{mm.reg}</div>
                    <div className="time">{mm.time}</div>
                    <div className={cx("stage", mm.stage)}>{stageLabel[mm.stage]}</div>
                  </div>
                ))}
              </div>

              <div className="gtmx-detail">
                <div><div className="l">Crew on board</div><div className="v">{m.crew}</div></div>
                <div><div className="l">Fuel</div><div className="v">{m.fuel}</div></div>
                <div><div className="l">ETA</div><div className="v">{m.eta}</div></div>
                <div style={{ gridColumn: "span 3", paddingTop: 8, borderTop: "1px solid var(--line-dk)" }}>
                  <div className="l">Permits</div><div className="v" style={{ fontSize: 13, fontFamily: "'JetBrains Mono', monospace" }}>{m.permits}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------- Network (editorial — no fake map)
const HQ_DATA = [
  {
    id: "dxb", iata: "DXB · OMDB",
    city_en: "Dubai", city_ar: "دبي",
    country_en: "United Arab Emirates", country_ar: "الإمارات العربية المتحدة",
    img: "media/hq-uas-new-sign.webp",
    role_en: "Group HQ · MENA",
    role_ar: "المقر الرئيسي · الشرق الأوسط",
    addr_en: "UAS Building, DAFZA — P.O. Box 54482",
    addr_ar: "مبنى UAS، منطقة دبي الحرة — ص.ب ٥٤٤٨٢",
    ops_en: "24/7 Operations Control Centre",
    ops_ar: "مركز عمليات على مدار الساعة",
    line: "+971 4 299 6633",
    region: "mena",
  },
  {
    id: "iah", iata: "IAH · KIAH",
    city_en: "Houston", city_ar: "هيوستن",
    country_en: "United States", country_ar: "الولايات المتحدة",
    img: "media/office-houston.webp",
    role_en: "Americas continental HQ",
    role_ar: "المقر القاري للأمريكتين",
    addr_en: "Texas, USA — Americas regional operations",
    addr_ar: "تكساس، الولايات المتحدة — عمليات الأمريكتين",
    ops_en: "Americas desk · live OCC handover",
    ops_ar: "مكتب الأمريكتين · تسليم مباشر للعمليات",
    region: "ams",
  },
  {
    id: "jnb", iata: "JNB · FAOR",
    city_en: "Johannesburg", city_ar: "جوهانسبرغ",
    country_en: "South Africa", country_ar: "جنوب أفريقيا",
    img: "media/ops-africa-training.webp",
    role_en: "Africa continental HQ",
    role_ar: "المقر القاري لأفريقيا",
    addr_en: "Johannesburg — Sub-Saharan desk",
    addr_ar: "جوهانسبرغ — مكتب جنوب الصحراء",
    ops_en: "Continental ground network · CAASA member",
    ops_ar: "شبكة المناولة القارية · عضو CAASA",
    region: "afr",
  },
  {
    id: "hkg", iata: "HKG · VHHH",
    city_en: "Hong Kong", city_ar: "هونغ كونغ",
    country_en: "Hong Kong SAR", country_ar: "هونغ كونغ",
    img: "media/ground-ops-hong-kong.webp",
    role_en: "Asia-Pacific continental HQ",
    role_ar: "المقر القاري لآسيا والمحيط الهادئ",
    addr_en: "Hong Kong — Greater-China + APAC desk",
    addr_ar: "هونغ كونغ — مكتب الصين الكبرى وآسيا والمحيط الهادئ",
    ops_en: "APAC desk · AsBAA member",
    ops_ar: "مكتب آسيا والمحيط الهادئ · عضو AsBAA",
    region: "apac",
  },
];

const REGIONAL_OFFICES = [
  { iata: "LOS",  city_en: "Lagos",     city_ar: "لاغوس",     country_en: "Nigeria",  country_ar: "نيجيريا" },
  { iata: "NBO",  city_en: "Nairobi",   city_ar: "نيروبي",    country_en: "Kenya",    country_ar: "كينيا" },
  { iata: "PEK",  city_en: "Beijing",   city_ar: "بكين",      country_en: "China",    country_ar: "الصين" },
  { iata: "DEL",  city_en: "New Delhi", city_ar: "نيودلهي",   country_en: "India",    country_ar: "الهند" },
];

const STATION_LOCATIONS = [
  { iata: "LHR", city_en: "London",       city_ar: "لندن",       cn_en: "UK",          cn_ar: "المملكة المتحدة" },
  { iata: "CDG", city_en: "Paris",        city_ar: "باريس",      cn_en: "France",      cn_ar: "فرنسا" },
  { iata: "FRA", city_en: "Frankfurt",    city_ar: "فرانكفورت",  cn_en: "Germany",     cn_ar: "ألمانيا" },
  { iata: "ZRH", city_en: "Zurich",       city_ar: "زيورخ",      cn_en: "Switzerland", cn_ar: "سويسرا" },
  { iata: "VIE", city_en: "Vienna",       city_ar: "فيينا",      cn_en: "Austria",     cn_ar: "النمسا" },
  { iata: "IST", city_en: "Istanbul",     city_ar: "إسطنبول",    cn_en: "Türkiye",     cn_ar: "تركيا" },
  { iata: "DOH", city_en: "Doha",         city_ar: "الدوحة",     cn_en: "Qatar",       cn_ar: "قطر" },
  { iata: "RUH", city_en: "Riyadh",       city_ar: "الرياض",     cn_en: "Saudi Arabia",cn_ar: "السعودية" },
  { iata: "JED", city_en: "Jeddah",       city_ar: "جدة",        cn_en: "Saudi Arabia",cn_ar: "السعودية" },
  { iata: "CAI", city_en: "Cairo",        city_ar: "القاهرة",    cn_en: "Egypt",       cn_ar: "مصر" },
  { iata: "AMM", city_en: "Amman",        city_ar: "عمّان",      cn_en: "Jordan",      cn_ar: "الأردن" },
  { iata: "TLV", city_en: "Tel Aviv",     city_ar: "تل أبيب",    cn_en: "Israel",      cn_ar: "إسرائيل" },
  { iata: "JFK", city_en: "New York",     city_ar: "نيويورك",    cn_en: "USA",         cn_ar: "الولايات المتحدة" },
  { iata: "YYZ", city_en: "Toronto",      city_ar: "تورنتو",     cn_en: "Canada",      cn_ar: "كندا" },
  { iata: "MIA", city_en: "Miami",        city_ar: "ميامي",      cn_en: "USA",         cn_ar: "الولايات المتحدة" },
  { iata: "GRU", city_en: "São Paulo",    city_ar: "ساو باولو",  cn_en: "Brazil",      cn_ar: "البرازيل" },
  { iata: "SCL", city_en: "Santiago",     city_ar: "سانتياغو",   cn_en: "Chile",       cn_ar: "تشيلي" },
  { iata: "SIN", city_en: "Singapore",    city_ar: "سنغافورة",   cn_en: "Singapore",   cn_ar: "سنغافورة" },
  { iata: "BKK", city_en: "Bangkok",      city_ar: "بانكوك",     cn_en: "Thailand",    cn_ar: "تايلاند" },
  { iata: "NRT", city_en: "Tokyo",        city_ar: "طوكيو",      cn_en: "Japan",       cn_ar: "اليابان" },
  { iata: "SYD", city_en: "Sydney",       city_ar: "سيدني",      cn_en: "Australia",   cn_ar: "أستراليا" },
  { iata: "CPT", city_en: "Cape Town",    city_ar: "كيب تاون",   cn_en: "S. Africa",   cn_ar: "جنوب أفريقيا" },
  { iata: "MPM", city_en: "Maputo",       city_ar: "مابوتو",     cn_en: "Mozambique",  cn_ar: "موزمبيق" },
  { iata: "ACC", city_en: "Accra",        city_ar: "أكرا",       cn_en: "Ghana",       cn_ar: "غانا" },
];

const NET_REGIONS = [
  { id: "all",  label_en: "All regions",     label_ar: "كل المناطق" },
  { id: "mena", label_en: "Middle East",     label_ar: "الشرق الأوسط" },
  { id: "ams",  label_en: "Americas",        label_ar: "الأمريكتان" },
  { id: "afr",  label_en: "Africa",          label_ar: "أفريقيا" },
  { id: "apac", label_en: "Asia-Pacific",    label_ar: "آسيا والمحيط الهادئ" },
];

function NetworkMap({ copy, locale, onQuote }) {
  const [region, setRegion] = useStateS("all");

  const hqs = region === "all" ? HQ_DATA : HQ_DATA.filter(h => h.region === region);
  const counts = {
    all: HQ_DATA.length,
    mena: HQ_DATA.filter(h => h.region === "mena").length,
    ams: HQ_DATA.filter(h => h.region === "ams").length,
    afr: HQ_DATA.filter(h => h.region === "afr").length,
    apac: HQ_DATA.filter(h => h.region === "apac").length,
  };

  return (
    <section className="block network" id="network">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow">{copy.network.eyebrow}</div>
            <h2 className="display">{copy.network.title}</h2>
          </div>
          <div className="meta">
            <p>{copy.network.meta_p}</p>
            <p style={{ marginTop: 12, color: "var(--muted)", fontSize: 13.5 }}>
              {locale === "ar"
                ? "أربعة مقرات قارية، أربعة مكاتب إقليمية، ومدراء محطات معتمدون عبر شبكة عالمية."
                : "Four continental HQs, four regional offices, and accredited station managers across a worldwide network."}
            </p>
          </div>
        </div>

        <div className="region-tabs">
          {NET_REGIONS.map(r => (
            <button
              key={r.id}
              className={cx(region === r.id && "active")}
              onClick={() => setRegion(r.id)}
            >
              {locale === "ar" ? r.label_ar : r.label_en}
              {r.id !== "all" && <span className="count">{counts[r.id]}</span>}
            </button>
          ))}
        </div>

        <div className="hq-grid">
          {hqs.map(h => (
            <article className="hq-card" key={h.id}>
              <div className="img" style={{ backgroundImage: `url(${h.img})` }}>
                <div className="iata mono">{h.iata}</div>
              </div>
              <div className="body">
                <div>
                  <div className="role">{locale === "ar" ? h.role_ar : h.role_en}</div>
                  <h3 className="city">{locale === "ar" ? h.city_ar : h.city_en}</h3>
                  <div className="country">{locale === "ar" ? h.country_ar : h.country_en}</div>
                </div>
                <div className="ops-line">
                  <span className="label">{locale === "ar" ? "العمليات" : "Operations"}</span>
                  {locale === "ar" ? h.ops_ar : h.ops_en}
                  {h.addr_en && (
                    <div style={{ marginTop: 10, color: "var(--muted)", fontSize: 13 }}>
                      {locale === "ar" ? h.addr_ar : h.addr_en}
                    </div>
                  )}
                  {h.line && (
                    <div className="v mono" style={{ marginTop: 8, color: "var(--uas-violet)" }}>{h.line}</div>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>

        <div className="regional-strip">
          <div className="label-col">
            <div className="eyebrow">{locale === "ar" ? "المكاتب الإقليمية" : "Regional offices"}</div>
            <div className="h">
              {locale === "ar"
                ? "أربعة مكاتب تربط القارات."
                : "Four regional offices connecting the continents."}
            </div>
          </div>
          <div className="list">
            {REGIONAL_OFFICES.map(o => (
              <div className="item" key={o.iata}>
                <div className="iata">{o.iata}</div>
                <div className="city">{locale === "ar" ? o.city_ar : o.city_en}</div>
                <div className="country">{locale === "ar" ? o.country_ar : o.country_en}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="stations">
          <div className="stations-head">
            <div>
              <div className="eyebrow">{locale === "ar" ? "مدراء المحطات" : "Station managers"}</div>
              <h4>{locale === "ar"
                ? "حضور موثّق في أكثر من ٣٠ دولة — تنسيق محلي على المدرج."
                : "Verified presence in 30+ countries — local desk coordination on the ramp."}
              </h4>
            </div>
            <div className="count">30<span className="plus">+</span></div>
          </div>

          <div className="stations-grid">
            {STATION_LOCATIONS.map(s => (
              <div className="station-tile" key={s.iata}>
                <div className="code">{s.iata}</div>
                <div className="city">{locale === "ar" ? s.city_ar : s.city_en}</div>
                <div className="country">{locale === "ar" ? s.cn_ar : s.cn_en}</div>
              </div>
            ))}
          </div>

          <div className="stations-foot">
            <span>
              {locale === "ar"
                ? "قائمة جزئية. تُؤكَّد المحطات النشطة لكل مهمة عبر العمليات."
                : "Selected list. Active stations confirmed per mission via Ops."}
            </span>
            <button className="btn primary" onClick={onQuote}>
              {copy.cta.quote}<Arrow />
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------- White Glove
function WhiteGlove({ copy, locale }) {
  return (
    <section className="block whiteglove" id="about">
      <div className="wrap wg-grid">
        <div>
          <div className="eyebrow">{copy.wg.eyebrow}</div>
          <h2 className="wg-quote">
            {copy.wg.quote_a}
            <em>{copy.wg.quote_em}</em>
            {copy.wg.quote_b}
          </h2>
          <div className="wg-attr">
            <img src="media/leader-omar-hosari-ceo.webp" alt="" />
            <div>
              <div className="name">{copy.wg.attr_name}</div>
              <div className="role">{copy.wg.attr_role}</div>
            </div>
          </div>
        </div>
        <div className="wg-img" style={{ backgroundImage: "url(media/ops-control-centre.webp)" }}>
          <div className="badge">{locale === "ar" ? "العمليات ٢٤/٧" : "Ops · 24/7"}</div>
        </div>
      </div>
    </section>
  );
}

// ------------------------- Charter
function Charter({ copy, locale, onQuote }) {
  const [from, setFrom] = useStateS("DXB");
  const [to, setTo] = useStateS("LFPB");
  const [date, setDate] = useStateS("2026-06-04");
  const [pax, setPax] = useStateS("6");
  const swap = () => { setFrom(to); setTo(from); };

  return (
    <section className="block charter" id="charter">
      <div className="charter-bg" />
      <div className="wrap charter-grid">
        <div>
          <div className="eyebrow" style={{ color: "rgba(255,255,255,0.55)" }}>{copy.charter.eyebrow}</div>
          <h2 className="display">{copy.charter.title}</h2>
          <p className="lede" style={{ marginTop: 24, color: "rgba(255,255,255,0.78)", fontSize: 17, maxWidth: "50ch" }}>
            {copy.charter.lede}
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
            <button className="btn primary" onClick={onQuote}>{copy.cta.quote}<Arrow /></button>
            <button className="btn ghost"
              style={{ borderColor: "rgba(255,255,255,0.25)", color: "#fff" }}>
              {locale === "ar" ? "رحلات فارغة" : "View empty legs"}<Arrow />
            </button>
          </div>
        </div>

        <div className="quote-card">
          <h4>{copy.charter.quote_card_h}</h4>
          <div className="sub">{copy.charter.quote_card_sub}</div>

          <div className="swap">
            <div>
              <label>{locale === "ar" ? "من" : "From"}</label>
              <input value={from} onChange={e => setFrom(e.target.value)} placeholder="DXB" />
            </div>
            <button className="swap-btn" onClick={swap} aria-label="Swap">⇄</button>
            <div>
              <label>{locale === "ar" ? "إلى" : "To"}</label>
              <input value={to} onChange={e => setTo(e.target.value)} placeholder="LFPB" />
            </div>
          </div>

          <div className="field">
            <div>
              <label>{locale === "ar" ? "التاريخ" : "Departure"}</label>
              <input type="date" value={date} onChange={e => setDate(e.target.value)} />
            </div>
            <div>
              <label>{locale === "ar" ? "الركاب" : "Passengers"}</label>
              <input type="number" min="1" value={pax} onChange={e => setPax(e.target.value)} />
            </div>
          </div>

          <div className="field full">
            <div>
              <label>{locale === "ar" ? "الفئة" : "Aircraft class"}</label>
              <select>
                <option>{locale === "ar" ? "طائرة كبيرة" : "Heavy jet"}</option>
                <option>{locale === "ar" ? "طائرة متوسطة" : "Mid-size jet"}</option>
                <option>{locale === "ar" ? "طائرة فائقة بعيدة المدى" : "Ultra-long-range"}</option>
              </select>
            </div>
          </div>

          <button className="btn primary lg" style={{ width: "100%", justifyContent: "center", marginTop: 8 }} onClick={onQuote}>
            {locale === "ar" ? "احسب العرض" : "Source aircraft"}<Arrow />
          </button>

          <div className="mono" style={{ fontSize: 10, letterSpacing: "0.1em", color: "rgba(255,255,255,0.45)", marginTop: 16, textTransform: "uppercase" }}>
            {locale === "ar" ? "بدون أسعار معلنة — عرض مفصّل لكل مهمة" : "No published rates — bespoke per mission"}
          </div>
        </div>
      </div>
    </section>
  );
}

// ------------------------- Footer
function SiteFooter({ copy, locale }) {
  return (
    <footer className="site">
      <div className="wrap">
        <div className="footer-grid">
          <div>
            <Logo inverted height={28} />
            <p style={{ marginTop: 22, color: "rgba(255,255,255,0.6)", fontSize: 13.5, maxWidth: "30ch" }}>
              {locale === "ar"
                ? "United Aviation Services FZCO. مبنى UAS، منطقة دبي الحرة، ص.ب ٥٤٤٨٢، دبي."
                : "United Aviation Services FZCO. UAS Building, DAFZA, P.O. Box 54482, Dubai."}
            </p>
            <div className="mono" style={{ marginTop: 18, fontSize: 11.5, color: "#fff" }}>
              +971 4 299 6633
            </div>
            <div className="mono" style={{ fontSize: 11.5, color: "rgba(255,255,255,0.7)" }}>
              info@uas.aero
            </div>
          </div>
          <div>
            <h6>{copy.nav.services}</h6>
            <ul>
              <li><a href="#services">Trip Support</a></li>
              <li><a href="#services">Flight Planning</a></li>
              <li><a href="#services">Permits</a></li>
              <li><a href="#services">Ground Handling</a></li>
              <li><a href="#services">Fuel</a></li>
              <li><a href="#services">Catering & Crew</a></li>
            </ul>
          </div>
          <div>
            <h6>{copy.nav.technology} & {copy.nav.charter}</h6>
            <ul>
              <li><a href="#technology">GTMx Platform</a></li>
              <li><a href="#technology">Open an Account</a></li>
              <li><a href="#charter">Private Jet Charter</a></li>
              <li><a href="#charter">Empty Legs</a></li>
            </ul>
          </div>
          <div>
            <h6>{copy.nav.network}</h6>
            <ul>
              <li><a href="#network">Dubai (HQ)</a></li>
              <li><a href="#network">Houston</a></li>
              <li><a href="#network">Johannesburg</a></li>
              <li><a href="#network">Hong Kong</a></li>
              <li><a href="#network">30+ countries</a></li>
            </ul>
          </div>
          <div>
            <h6>{locale === "ar" ? "العضويات والجوائز" : "Memberships & awards"}</h6>
            <ul>
              <li>NBAA · EBAA · MEBAA</li>
              <li>AsBAA · CAASA · ACA</li>
              <li>2024 Service Leader of the Year</li>
              <li>Ground Support Worldwide</li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 United Aviation Services FZCO. 25 years · 2000 — 2025.</div>
          <div>EN · العربية · РУ · 中文</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, TrustStrip, Services, GTMx, NetworkMap, WhiteGlove, Charter, SiteFooter });