/* All main page sections — Hero, Trust, Services, Fleet, Experience, About, Offices, Contact */

const { useState: useStateS, useEffect: useEffectS } = React;

// ============================================================
// HERO
// ============================================================
function Hero({ onCharterClick }) {
  const [now, setNow] = useStateS(new Date());
  useEffectS(() => {
    const t = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(t);
  }, []);

  // Dubai time (UTC+4)
  const dubai = new Date(now.getTime() + (4 * 60 + now.getTimezoneOffset()) * 60000);
  const hh = String(dubai.getUTCHours()).padStart(2, "0");
  const mm = String(dubai.getUTCMinutes()).padStart(2, "0");
  const ss = String(dubai.getUTCSeconds()).padStart(2, "0");

  return (
    <section className="hero" id="top">
      <div className="hero-bg" style={{ backgroundImage: "url(media/hero-slider1.webp)" }} />
      <div className="hero-vignette" />

      <div className="hero-ticker hide-mobile" aria-hidden="true">
        A6 · UAE GCAA REGISTERED <span className="dot">•</span> T7 · SAN MARINO REGISTERED <span className="dot">•</span> GULFSTREAM INDIA SR
      </div>

      <div className="hero-inner">
        <div style={{ display: "flex", flexDirection: "column", gap: 56, marginTop: 120 }}>
          <div className="eyebrow on-dark" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ display: "inline-block", width: 24, height: 1, background: "var(--gold)" }} />
            ONE-STOP-SHOP · INTEGRATED PRIVATE AVIATION · SINCE 2007
          </div>

          <h1 className="h-display hero-headline">
            We manage<br />
            jets <em>as assets.</em><br />
            We fly them<br />
            <em>like sanctuaries.</em>
          </h1>

          <div className="hero-foot">
            <div className="hero-meta">
              <div>
                <span className="label">Managed Fleet</span>
                <span className="value">~25 aircraft · c.2026</span>
              </div>
              <div>
                <span className="label">Registries</span>
                <span className="value">A6 · T7 · India NSOP</span>
              </div>
              <div>
                <span className="label">Dubai HQ</span>
                <span className="value" style={{ fontFamily: "JetBrains Mono, monospace" }}>{hh}:{mm}:{ss}</span>
              </div>
            </div>
            <div style={{ display: "flex", gap: 12 }}>
              <button className="btn btn-gold" onClick={onCharterClick}>
                Request a Charter Quote
                <span className="arrow">→</span>
              </button>
              <a className="btn btn-ghost-dark" href="#services">
                Explore Services
              </a>
            </div>
          </div>
        </div>
      </div>

      <div className="hero-scroll" aria-hidden="true">
        <span className="hero-scroll-line" />
        Scroll
      </div>
    </section>
  );
}

// ============================================================
// TRUST STRIP
// ============================================================
function TrustStrip() {
  const items = [
    { num: "2007", label: "Founded · Dubai" },
    { num: "~25", label: "Managed Aircraft (c.2026)" },
    { num: "A6 · T7", label: "Dual Registries · India NSOP" },
    { num: "G·SR", label: "Gulfstream India Sales Rep" },
    { num: "AAA·2024", label: "Aircraft Mgmt Service Provider of the Year" },
  ];
  return (
    <section className="trust-strip">
      <div className="shell">
        <div className="trust-row">
          {items.map((it, i) => (
            <div key={i} className="trust-item">
              <span className="num">{it.num}</span>
              <span>{it.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// SERVICES
// ============================================================
function Services({ onCharterClick }) {
  const services = [
    {
      n: "01",
      title: "Aircraft Management",
      blurb: "Asset-management of an owner's jet — operations, crew, maintenance oversight, AOC compliance. Charter-to-offset-cost. Our signature line.",
      cta: "Management Enquiry",
      href: "#mgmt",
    },
    {
      n: "02",
      title: "Private Jet Charter",
      blurb: "On-demand charter across a managed fleet of Gulfstream, Bombardier Global, Embraer Legacy, Airbus ACJ and BBJ. Bespoke quote, no price list.",
      cta: "Request a Charter Quote",
      href: "#charter",
      isCharter: true,
    },
    {
      n: "03",
      title: "Aircraft Sales",
      blurb: "New and pre-owned acquisition and brokerage. Gulfstream International Sales Representative for India.",
      cta: "Sales Enquiry",
      href: "#sales",
    },
    {
      n: "04",
      title: "CAMO",
      blurb: "Continuing Airworthiness Management — airworthiness, maintenance planning, records and regulatory compliance for managed and third-party aircraft.",
      cta: "CAMO Enquiry",
      href: "#camo",
    },
  ];

  return (
    <section className="section section-paper" id="services">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow on-light">[ 01 / Services ]</span>
            <h2 className="h-section">
              Four pillars,<br />
              one <em className="serif-i" style={{ color: "var(--gold-deep)" }}>operator.</em>
            </h2>
          </div>
          <div className="right">
            <p className="lede">
              Built on a distinctive asset-management approach to private aviation — managing owners' aircraft as performing assets, while delivering charter, sales and continuing airworthiness under one roof.
            </p>
          </div>
        </div>
      </div>

      <div className="shell-wide">
        <div className="services-grid">
          {services.map((s, i) => (
            <div
              key={i}
              className="service-card"
              onClick={s.isCharter ? onCharterClick : undefined}
              role={s.isCharter ? "button" : undefined}
              tabIndex={s.isCharter ? 0 : undefined}
            >
              <span className="num">{s.n}</span>
              <h3 className="h-card">{s.title}</h3>
              <p className="body-sm" style={{ marginTop: 12 }}>{s.blurb}</p>
              <div className="foot">
                <span className="caps">{s.cta}</span>
                <span style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12 }}>→</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FLEET (interactive switcher)
// ============================================================
const FLEET = [
  {
    id: "g650",
    name: "Gulfstream G650",
    family: "Ultra-Long-Range",
    img: "media/fleet-gulfstream-g650-exterior.webp",
    cabin: "Large Cabin",
    range: "Intercontinental",
    config: "Up to 14 seats *",
    note: "Indicative · per-tail varies",
  },
  {
    id: "global7500",
    name: "Bombardier Global 7500",
    family: "Ultra-Long-Range",
    img: "media/fleet-global-7500-managed.webp",
    cabin: "Four living zones *",
    range: "Intercontinental",
    config: "Up to 19 seats *",
    note: "Indicative · per-tail varies",
  },
  {
    id: "global6000",
    name: "Bombardier Global 6000",
    family: "Long-Range",
    img: "media/fleet-global-6000-exterior-1.webp",
    cabin: "Large Cabin",
    range: "Long-Range",
    config: "Up to 14 seats *",
    note: "Indicative · per-tail varies",
  },
  {
    id: "g600",
    name: "Gulfstream G600",
    family: "Long-Range",
    img: "media/fleet-gulfstream-g600-exterior-1.webp",
    cabin: "Large Cabin",
    range: "Long-Range",
    config: "Up to 13 seats *",
    note: "Indicative · per-tail varies",
  },
  {
    id: "legacy650",
    name: "Embraer Legacy 650",
    family: "Super-Midsize",
    img: "media/fleet-legacy-650-empire-livery.webp",
    cabin: "Three-Cabin",
    range: "Super-Midsize",
    config: "Up to 14 seats *",
    note: "Indicative · per-tail varies",
  },
  {
    id: "bbj",
    name: "Boeing Business Jet",
    family: "Airliner-Class",
    img: "media/fleet-boeing-business-jet-bbj.webp",
    cabin: "Airliner Cabin",
    range: "Global",
    config: "VIP configuration",
    note: "Indicative · per-tail varies",
  },
];

function Fleet() {
  const [active, setActive] = useStateS(0);
  const a = FLEET[active];
  return (
    <section className="section section-dark" id="fleet">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow on-dark">[ 02 / Fleet ]</span>
            <h2 className="h-section" style={{ color: "var(--paper)" }}>
              A rotating pool<br />
              of <em className="serif-i" style={{ color: "var(--gold)" }}>large-cabin</em> jets.
            </h2>
          </div>
          <div className="right">
            <p className="lede" style={{ color: "rgba(247,248,250,0.65)" }}>
              We operate one of the region's largest managed fleets — Gulfstream, Bombardier Global, Embraer Legacy, Airbus ACJ and BBJ. Roughly one-third is available for on-demand charter. Live roster and per-tail specifications confirmed at quote.
            </p>
          </div>
        </div>

        <div className="fleet-stage">
          <div className="fleet-list" role="tablist" aria-label="Aircraft families">
            {FLEET.map((f, i) => (
              <button
                key={f.id}
                className={"fleet-item" + (i === active ? " is-active" : "")}
                onClick={() => setActive(i)}
                role="tab"
                aria-selected={i === active}
              >
                <span className="ix">0{i + 1}</span>
                <span className="name">{f.name}</span>
                <span className="arr">→</span>
              </button>
            ))}
          </div>
          <div className="fleet-stage-right">
            <div className="fleet-image" style={{ backgroundImage: `url(${a.img})` }}>
              <div className="tail">{a.family} · Empire Managed</div>
            </div>
            <div className="fleet-meta">
              <div className="cell">
                <div className="label">Class</div>
                <div className="val">{a.cabin}</div>
              </div>
              <div className="cell">
                <div className="label">Range</div>
                <div className="val">{a.range}</div>
              </div>
              <div className="cell">
                <div className="label">Capacity</div>
                <div className="val">{a.config}</div>
              </div>
              <div className="cell">
                <div className="label">Note</div>
                <div className="val" style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(247,248,250,0.55)" }}>
                  {a.note}
                </div>
              </div>
            </div>
          </div>
        </div>

        <p className="body-sm" style={{ marginTop: 24, color: "rgba(247,248,250,0.5)", fontFamily: "JetBrains Mono, monospace", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase" }}>
          * Capacity figures indicative — managed fleets rotate; per-tail configuration confirmed at quote.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// PHOTO PLATE (full-bleed punctuation)
// ============================================================
function Plate({ src, meta, gold, height = "64vh" }) {
  return (
    <section className="plate" style={{ backgroundImage: `url(${src})`, height }}>
      <div className="plate-meta">
        {meta} {gold && <span className="gold">· {gold}</span>}
      </div>
    </section>
  );
}

// ============================================================
// EXPERIENCE / ROUTE IDEAS
// ============================================================
function Experience() {
  const tiles = [
    { img: "media/experience-laucala-island-1.webp", place: "Laucala Island", meta: "Fiji · 16h 50m", cls: "exp-tile" },
    { img: "media/experience-maldives-resort.webp", place: "Maldives Atolls", meta: "Malé · 4h 25m", cls: "exp-tile" },
    { img: "media/experience-private-island.webp", place: "Private Islands", meta: "Indian Ocean · bespoke", cls: "exp-tile" },
    { img: "media/experience-hideaway-beach-resort.webp", place: "Hideaway Beach", meta: "Dhonakulhi · 4h 30m", cls: "exp-tile" },
    { img: "media/experience-luxury-lifestyle-1.webp", place: "St. Moritz", meta: "Engadin · 6h 20m", cls: "exp-tile" },
    { img: "media/experience-laucala-island-2.webp", place: "South Pacific Charter", meta: "Multi-leg · bespoke", cls: "exp-tile" },
  ];
  // Grid template via inline grid spans
  const spans = [
    { c: "1 / span 5", r: "1 / span 2" },
    { c: "6 / span 4", r: "1 / span 1" },
    { c: "10 / span 3", r: "1 / span 2" },
    { c: "6 / span 4", r: "2 / span 1" },
    { c: "1 / span 6", r: "3 / span 2" },
    { c: "7 / span 6", r: "3 / span 2" },
  ];
  return (
    <section className="section section-paper" id="experience">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow on-light">[ 03 / Experience ]</span>
            <h2 className="h-section">
              Route ideas, <em className="serif-i" style={{ color: "var(--gold-deep)" }}>concierge</em> in detail.
            </h2>
          </div>
          <div className="right">
            <p className="lede">
              From Dubai to Laucala, Malé to the Mediterranean — every leg is paired with VIP ground, lifestyle programming and discretion. Inspiration, not an itinerary.
            </p>
          </div>
        </div>

        <div className="exp-grid">
          {tiles.map((t, i) => (
            <div
              key={i}
              className={t.cls}
              style={{ backgroundImage: `url(${t.img})`, gridColumn: spans[i].c, gridRow: spans[i].r }}
            >
              <div className="caption">
                <div className="place">{t.place}</div>
                <div className="meta">{t.meta}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// ABOUT — narrative + awards + leadership
// ============================================================
function About() {
  const awards = [
    { year: "2024", name: "Aircraft Management Service Provider of the Year", issuer: "Aviation Achievement Awards (AAA)" },
    { year: "2023", name: "Business Aviation Operator of the Year", issuer: "Aviator Middle East Awards" },
    { year: "2022", name: "Outstanding Contribution to Business Aviation", issuer: "MEA Business Aviation Achievement (Paras Dhamecha)" },
    { year: "2020", name: "Business Aviation Operator of the Year", issuer: "Aviation Business Middle East" },
    { year: "2015–17", name: "Aircraft Management Service Provider of the Year", issuer: "Aviation Achievement Awards" },
  ];
  const leaders = [
    { name: "Paras P. Dhamecha", role: "Founder & Managing Director", img: "media/team-paras-dhamecha-founder-md.webp" },
    { name: "Steve Hartley", role: "Executive Director · Co-founder", img: null, placeholder: "Portrait · client to supply" },
    { name: "Paul van der Blom", role: "Head of Aircraft Management", img: null, placeholder: "Portrait · appointed May 2026" },
  ];

  return (
    <section className="section section-paper" id="about">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow on-light">[ 04 / About ]</span>
            <h2 className="h-section">
              Since 2007,<br />
              <em className="serif-i" style={{ color: "var(--gold-deep)" }}>from Dubai.</em>
            </h2>
          </div>
          <div className="right">
            <p className="lede">
              Founded in 2007 with two managed jets — a Dassault Falcon 900EX EASy and a Hawker 850XP — Empire was the first private aviation operator to obtain an AOC from the UAE GCAA. Today the firm holds dual A6/T7 registries plus India NSOP via EAMSPL Bangalore, and serves as Gulfstream's Sales Representative for India.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start", marginBottom: 96 }}>
          <div>
            <img
              src="media/history-2007-first-aoc.webp"
              alt="2007 — first AOC issued by UAE GCAA"
              style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", background: "var(--mist)" }}
            />
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", fontFamily: "JetBrains Mono, monospace", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--muted-2)" }}>
              <span>2007 · First AOC</span>
              <span style={{ color: "var(--gold-deep)" }}>Dubai · GCAA A6</span>
            </div>
          </div>
          <div>
            <p className="about-pull">
              "A distinctive <em>asset-management</em> approach to private aviation — operating owners' jets as performing assets, with safety and discretion first."
            </p>
            <div className="mt-32" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
              <div>
                <div className="caps" style={{ color: "var(--gold-deep)", marginBottom: 8 }}>Registries</div>
                <div className="body" style={{ fontSize: 14.5 }}>UAE GCAA (A6)<br/>San Marino CAA (T7)<br/>India NSOP via EAMSPL</div>
              </div>
              <div>
                <div className="caps" style={{ color: "var(--gold-deep)", marginBottom: 8 }}>Footprint</div>
                <div className="body" style={{ fontSize: 14.5 }}>UAE · India · USA · San Marino · Nigeria · Egypt · Indonesia</div>
              </div>
            </div>
          </div>
        </div>

        {/* Leadership */}
        <div style={{ marginBottom: 96 }}>
          <div className="caps" style={{ color: "var(--gold-deep)", marginBottom: 24 }}>Leadership</div>
          <div className="leadership">
            {leaders.map((l, i) => (
              <div className="leader-card" key={i}>
                {l.img ? (
                  <div className="leader-photo" style={{ backgroundImage: `url(${l.img})` }} />
                ) : (
                  <div className="leader-photo placeholder">
                    <span>{l.placeholder}</span>
                  </div>
                )}
                <div className="name">{l.name}</div>
                <div className="role">{l.role}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Awards */}
        <div>
          <div className="caps" style={{ color: "var(--gold-deep)", marginBottom: 24 }}>Recognition</div>
          <div className="awards-list">
            {awards.map((a, i) => (
              <div className="award-row" key={i}>
                <div className="year">{a.year}</div>
                <div className="award-name">{a.name}</div>
                <div className="issuer">{a.issuer}</div>
                <div className="badge">— Verified</div>
              </div>
            ))}
          </div>
          <div className="caps" style={{ color: "var(--muted-2)", marginTop: 16, fontSize: 10.5 }}>
            Award wording shown verified at issuer. Logos withheld pending usage rights.
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// OFFICES + MBRAH
// ============================================================
function Offices() {
  const countries = ["UAE · HQ", "San Marino", "India", "USA", "Nigeria", "Egypt", "Indonesia"];
  return (
    <section className="section section-mist" id="offices">
      <div className="shell">
        <div className="sec-head">
          <div className="left">
            <span className="eyebrow on-light">[ 05 / Global Offices ]</span>
            <h2 className="h-section">
              Two hubs, <em className="serif-i" style={{ color: "var(--gold-deep)" }}>seven</em> footprints.
            </h2>
          </div>
          <div className="right">
            <p className="lede">
              Headquartered at Dubai Airport Free Zone with a CAA-licensed office in San Marino, supported by an expanding presence across the Middle East, India, Africa, the Americas and Southeast Asia.
            </p>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <div className="office-card">
            <div className="tag">DUBAI HQ · GCAA A6</div>
            <h3 className="h-card">Dubai Headquarters</h3>
            <address>
              Unit F-06, Dubai Airport Free Zone (DAFZ)<br />
              P.O. Box 293827, Dubai<br />
              United Arab Emirates
            </address>
            <div className="lines">
              <div className="line"><span className="k">Tel</span><a className="v" href="tel:+97142998444">+971 4 299 8444</a></div>
              <div className="line"><span className="k">Charter</span><a className="v" href="tel:+971565091116">+971 56 509 1116</a></div>
              <div className="line"><span className="k">Email</span><a className="v" href="mailto:info@empire.aero">info@empire.aero</a></div>
              <div className="line"><span className="k">Charter</span><a className="v" href="mailto:charter@empire.aero">charter@empire.aero</a></div>
            </div>
          </div>

          <div className="office-card">
            <div className="tag">SAN MARINO · CAA T7</div>
            <h3 className="h-card">San Marino Office</h3>
            <address>
              Empire Aviation San Marino S.R.L.<br />
              Via Consiglio dei Sessanta 99<br />
              47891 Dogana, Republic of San Marino
            </address>
            <div className="lines">
              <div className="line"><span className="k">Tel</span><a className="v" href="tel:+39549970913">+39 549 970913</a></div>
              <div className="line"><span className="k">Ops</span><a className="v" href="mailto:smops@empire.aero">smops@empire.aero</a></div>
              <div className="line"><span className="k">Registry</span><span className="v" style={{ fontFamily: "JetBrains Mono, monospace", fontSize: 13 }}>T7 prefix · San Marino CAA</span></div>
            </div>
          </div>
        </div>

        <div className="footprint-chips">
          {countries.map((c, i) => (
            <span className={"chip" + (c.includes("HQ") || c === "San Marino" ? " is-hq" : "")} key={i}>
              {c}
            </span>
          ))}
        </div>

        <div className="mbrah" style={{ marginTop: 48 }}>
          <div>
            <span className="eyebrow on-dark">FLAGSHIP · H2 2026</span>
            <h3 className="h-card">MBRAH at Dubai South</h3>
            <p className="body-sm">
              A multi-purpose business-aviation facility adjacent to the VIP Terminal — designed to house Empire's managed fleet plus third-party aircraft, with integrated maintenance and concierge services. Currently in development.
            </p>
            <div style={{ marginTop: 16, fontFamily: "JetBrains Mono, monospace", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(247,248,250,0.5)" }}>
              Source · Aviation Week / Business Airport International (2026)
            </div>
          </div>
          <div className="mbrah-placeholder">
            Render · client to supply
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CONTACT / CTA
// ============================================================
function Contact({ onCharterClick }) {
  return (
    <section className="contact-block" id="contact">
      <div className="contact-grid">
        <div>
          <span className="eyebrow on-light">[ 06 / Begin ]</span>
          <h2 className="h-section" style={{ marginTop: 24, maxWidth: "14ch" }}>
            Speak with a <em className="serif-i" style={{ color: "var(--gold-deep)" }}>real</em> operator.
          </h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: "44ch" }}>
            Every enquiry routes directly to our Dubai operations desk. No call centres, no automated qualification — a member of our team responds personally within the hour during business operations.
          </p>
          <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 12, fontFamily: "JetBrains Mono, monospace", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--muted)" }}>
            <div>– Charter quote · Avinode-backed</div>
            <div>– Management enquiry · asset advisory</div>
            <div>– Sales / acquisition · Gulfstream India SR</div>
            <div>– CAMO · continuing airworthiness</div>
          </div>
        </div>

        <div className="contact-cta">
          <span className="eyebrow on-dark">DIRECT LINES</span>
          <h3 className="h-section" style={{ marginTop: 16 }}>
            Bespoke,<br />
            <em>not booked.</em>
          </h3>
          <div className="contact-list">
            <div className="row">
              <span className="k">Charter</span>
              <a className="v" href="#charter" onClick={(e) => { e.preventDefault(); onCharterClick(); }}>
                Open Quote Flow →
              </a>
            </div>
            <div className="row">
              <span className="k">Dubai</span>
              <a className="v is-mono" href="tel:+97142998444">+971 4 299 8444</a>
            </div>
            <div className="row">
              <span className="k">Mobile</span>
              <a className="v is-mono" href="tel:+971565091116">+971 56 509 1116</a>
            </div>
            <div className="row">
              <span className="k">Email</span>
              <a className="v" href="mailto:info@empire.aero">info@empire.aero</a>
            </div>
            <div className="row">
              <span className="k">San Marino</span>
              <a className="v is-mono" href="tel:+39549970913">+39 549 970913</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, TrustStrip, Services, Fleet, Plate, Experience, About, Offices, Contact });