/* UI primitives + helpers */

const { useState, useEffect, useMemo, useRef } = React;

function cx(...xs) { return xs.filter(Boolean).join(' '); }

// Right-arrow glyph (rotates for RTL automatically)
function Arrow({ size = 12, className = "" }) {
  return (
    <svg
      className={cx("arrow", className)}
      width={size} height={size} viewBox="0 0 12 12" fill="none"
      style={{ transform: document?.documentElement?.dir === "rtl" ? "scaleX(-1)" : "none" }}
    >
      <path d="M1 6h10M7 2l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square" />
    </svg>
  );
}

function Logo({ inverted = false, height = 28 }) {
  // Inline original UAS-letter wordmark + brand circle mark (recreated, not copying any
  // copyrighted commercial font outline). Brand violet sampled from the official favicon.
  const ink = inverted ? "#FFFFFF" : "#0B0E14";
  return (
    <a href="#top" className="logo" aria-label="UAS — home" style={{ display: "inline-flex", alignItems: "center", gap: 12 }}>
      <svg width={height} height={height} viewBox="0 0 64 64" aria-hidden="true">
        <circle cx="32" cy="32" r="32" fill="#55148E" />
        <g fill="#FFFFFF">
          {/* Rising arrow */}
          <path d="M50 16 L50 46 L43.5 38 L31 33.5 L40 31 Z" />
          <path d="M13 50 C 23 39 36 35 47 36.5 L 45 39.5 C 35 38.5 24 42.5 16 51 Z" />
        </g>
      </svg>
      <span
        className="display"
        style={{
          fontSize: height * 0.78,
          letterSpacing: -0.04 * height + "px",
          fontWeight: 600,
          color: ink,
          lineHeight: 1,
          marginInlineStart: 2,
        }}
      >UAS</span>
      <span
        style={{
          paddingInlineStart: 12,
          marginInlineStart: 8,
          borderInlineStart: `1px solid ${inverted ? "rgba(255,255,255,0.2)" : "var(--line)"}`,
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 9.5,
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: inverted ? "rgba(255,255,255,0.7)" : "var(--muted)",
          lineHeight: 1.2,
          display: "none",
        }}
        className="logo-sub"
      >
        International<br />Trip Support
      </span>
    </a>
  );
}

function OpsChip({ label }) {
  return (
    <button className="ops-chip" aria-label="Ops 24/7">
      <span className="dot" />
      <span>{label}</span>
      <span style={{ opacity: 0.4, marginInlineStart: 6 }}>+971 4 299 6633</span>
    </button>
  );
}

function LocaleToggle({ locale, setLocale }) {
  return (
    <div className="locale-toggle" role="group" aria-label="Locale">
      <button
        className={cx(locale === "en" && "active")}
        onClick={() => setLocale("en")}
      >EN</button>
      <button
        className={cx(locale === "ar" && "active")}
        onClick={() => setLocale("ar")}
      >ع</button>
    </div>
  );
}

function TopBar({ locale, setLocale, copy, onQuote, onAccount }) {
  return (
    <header className="topbar" id="top">
      <div className="wrap topbar-row">
        <Logo />
        <nav className="primary" aria-label="Primary">
          <a href="#services">{copy.nav.services}</a>
          <a href="#technology">{copy.nav.technology}</a>
          <a href="#network">{copy.nav.network}</a>
          <a href="#charter">{copy.nav.charter}</a>
          <a href="#about">{copy.nav.about}</a>
        </nav>
        <div className="spacer" />
        <OpsChip label={copy.cta.ops} />
        <LocaleToggle locale={locale} setLocale={setLocale} />
        <button className="btn ghost" onClick={onAccount} style={{ display: "none" }}>{copy.cta.account}</button>
        <button className="btn primary" onClick={onQuote}>
          {copy.cta.quote}<Arrow />
        </button>
      </div>
    </header>
  );
}

Object.assign(window, { cx, Arrow, Logo, OpsChip, LocaleToggle, TopBar });