// Shared components: Wordmark, StatusBar, Nav, Footer, AOG banner, helpers
const { useState, useEffect, useRef, useMemo, Fragment } = React;

// ---------- Wordmark (original — not the JA SVG) ----------
function Wordmark({ light = false }) {
  return (
    <a href="#top" className={"wordmark " + (light ? "wordmark-light" : "")} aria-label="Jet Aviation Dubai (prototype)">
      <span className="wordmark-mark" aria-hidden="true"></span>
      <span className="wordmark-name">JET&nbsp;AVIATION</span>
      <span className="wordmark-loc">DUBAI</span>
    </a>
  );
}

// ---------- Live UAE time (Asia/Dubai = UTC+4) ----------
function useDubaiTime() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  // Format as HH:MM:SS in Asia/Dubai
  const dubaiTime = useMemo(() => {
    try {
      return new Intl.DateTimeFormat("en-GB", {
        timeZone: "Asia/Dubai",
        hour: "2-digit", minute: "2-digit", second: "2-digit",
        hour12: false,
      }).format(now);
    } catch (e) { return "—"; }
  }, [now]);
  return dubaiTime;
}

// ---------- Top status bar ----------
function StatusBar({ t, onToggleLocale }) {
  const time = useDubaiTime();
  return (
    <div className="statusbar">
      <div className="statusbar-left">
        <span><span className="dot" aria-hidden="true" /> &nbsp;{t.statusbar.statusVal}</span>
        <span className="sep">/</span>
        <span>{t.statusbar.timeKey} &nbsp; <span style={{color: "#fff"}}>{time}</span></span>
      </div>
      <div className="statusbar-right">
        <a href="#aog">{t.statusbar.aog}</a>
        <span className="sep">/</span>
        <a href="#contact">{t.statusbar.contact}</a>
        <span className="sep">/</span>
        <button
          onClick={onToggleLocale}
          aria-label={t.statusbar.langA11y}
          style={{ color: "rgba(255,255,255,0.92)", fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit", textTransform: "inherit" }}
        >
          {t.statusbar.lang}
        </button>
      </div>
    </div>
  );
}

// ---------- Top nav ----------
function Nav({ t }) {
  return (
    <nav className="nav" id="top">
      <div className="nav-inner">
        <Wordmark />
        <div className="nav-links">
          <a className="nav-link" href="#services">{t.nav.services}</a>
          <a className="nav-link" href="#facilities">{t.nav.facilities}</a>
          <a className="nav-link" href="#maintenance">{t.nav.maintenance}</a>
          <a className="nav-link" href="#about">{t.nav.about}</a>
          <a className="nav-link" href="#contact">{t.nav.contact}</a>
        </div>
        <div className="nav-cta">
          <a className="btn btn-primary btn-sm" href="#pre-arrival">
            {t.nav.cta} <span className="btn-arrow">{t.nav.ctaArrow}</span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ---------- AOG Banner ----------
function AOGBanner({ t }) {
  return (
    <section id="aog" className="aog">
      <div className="aog-inner">
        <div className="aog-badge">
          <span className="aog-pulse" aria-hidden="true" />
          {t.aog.badge}
        </div>
        <p className="aog-text" style={{ margin: 0 }}>
          {t.aog.lead}<strong>{t.aog.leadEm}</strong>{t.aog.tail}
        </p>
        <div className="aog-phone">
          <span className="aog-phone-key">{t.aog.phoneRowKey}</span>
          <a className="aog-phone-val" href="tel:+80053878277">+800 5387 8277</a>
        </div>
        <div className="aog-phone">
          <span className="aog-phone-key">{t.aog.phoneUsKey}</span>
          <a className="aog-phone-val" href="tel:+19173989760">+1 917 398 9760</a>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t }) {
  return (
    <footer className="footer" id="contact">
      <div className="footer-inner">
        <div className="footer-col footer-brand">
          <Wordmark light />
          <p className="lede">{t.footer.lede}</p>
          <div className="footer-parent">{t.footer.parent}</div>
        </div>
        {t.footer.cols.map((c, i) => (
          <div key={i} className="footer-col">
            <h4>{c.title}</h4>
            <ul>
              {c.links.map((l, j) => <li key={j}><a href="#">{l}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="footer-bottom">
        {t.footer.legal.map((l, i) => <span key={i}>{l}</span>)}
      </div>
    </footer>
  );
}

// ---------- Shared small icons (geometric, not iconography slop) ----------
function ArrowGlyph({ rtl = false }) {
  return <span className="arrow" style={{ display: "inline-block", transform: rtl ? "scaleX(-1)" : "none" }}>→</span>;
}

// Expose globally
Object.assign(window, { Wordmark, StatusBar, Nav, AOGBanner, Footer, ArrowGlyph, useDubaiTime });