/* Nav, Footer, FAB, Tweaks panel composition */

const { useState, useEffect } = React;

function EmpireMark({ color = "var(--gold)", textColor = "currentColor", height = 28 }) {
  return (
    <svg viewBox="0 0 360 132" height={height} aria-label="Empire Aviation Group" role="img">
      <g fill="none" stroke={color} strokeLinecap="round">
        <path d="M14 30 C 120 30, 210 52, 320 74" strokeWidth="13" />
        <path d="M40 56 C 140 56, 220 70, 318 80" strokeWidth="9" />
        <path d="M70 78 C 150 78, 230 84, 316 86" strokeWidth="6" />
      </g>
      <text x="14" y="120" fill={textColor} fontFamily="Inter, 'Helvetica Neue', Arial, sans-serif" fontSize="22" fontWeight="600" letterSpacing="3.2">EMPIRE AVIATION GROUP</text>
    </svg>
  );
}

function EmpireMarkSmall({ color = "var(--gold)" }) {
  return (
    <svg viewBox="0 0 360 100" height={22} aria-hidden="true">
      <g fill="none" stroke={color} strokeLinecap="round">
        <path d="M14 30 C 120 30, 210 52, 320 74" strokeWidth="14" />
        <path d="M40 56 C 140 56, 220 70, 318 80" strokeWidth="10" />
        <path d="M70 78 C 150 78, 230 84, 316 86" strokeWidth="7" />
      </g>
    </svg>
  );
}

function Navbar({ onCharterClick, locale, setLocale, isLight }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navClasses = ["nav"];
  if (scrolled) navClasses.push("is-scrolled");
  if (isLight && !scrolled) navClasses.push("is-light");

  const textColor = (isLight && !scrolled) ? "var(--ink)" : "var(--paper)";

  return (
    <header className={navClasses.join(" ")}>
      <a className="nav-logo" href="#top" aria-label="Empire Aviation Group — Home">
        <EmpireMarkSmall color="var(--gold)" />
        <span style={{
          fontFamily: "Instrument Serif, serif",
          fontSize: 20,
          letterSpacing: "-0.005em",
          color: textColor,
        }}>
          Empire <span style={{ fontStyle: "italic", opacity: 0.85 }}>Aviation</span>
        </span>
      </a>

      <nav className="nav-links hide-mobile" aria-label="Primary">
        <a href="#services">Services</a>
        <a href="#fleet">Fleet</a>
        <a href="#experience">Experience</a>
        <a href="#about">About</a>
        <a href="#offices">Offices</a>
        <a href="#contact">Contact</a>
      </nav>

      <div className="nav-cta">
        <LocaleToggle locale={locale} setLocale={setLocale} />
        <button className="btn btn-gold" onClick={onCharterClick} style={{ padding: "12px 22px", fontSize: 12 }}>
          Request Quote
          <span className="arrow">→</span>
        </button>
      </div>
    </header>
  );
}

function LocaleToggle({ locale, setLocale }) {
  const codes = ["EN", "AR", "RU", "ZH"];
  // Compact: show only EN ↔ AR toggle, but reveal full set on click? keep simple — segmented.
  return (
    <div className="locale-toggle hide-mobile" role="group" aria-label="Language">
      {codes.map((c, i) => (
        <React.Fragment key={c}>
          {i > 0 && <span className="sep">·</span>}
          <button
            type="button"
            className={locale === c.toLowerCase() ? "active" : ""}
            onClick={() => setLocale(c.toLowerCase())}
            style={{
              background: "none", border: 0, padding: 0,
              fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit",
              color: "inherit", cursor: "pointer",
            }}
            aria-pressed={locale === c.toLowerCase()}
          >
            {c}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

function FAB({ onCharterClick }) {
  return (
    <div className="fab">
      <button onClick={onCharterClick} aria-label="Request a charter quote">
        <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: 4, background: "var(--gold)" }} />
        Quote
      </button>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer" id="footer">
      <div className="footer-grid">
        <div className="footer-col">
          <div style={{ marginBottom: 24 }}>
            <EmpireMarkSmall color="var(--gold)" />
          </div>
          <div className="body-sm" style={{ color: "rgba(247,248,250,0.7)", maxWidth: "38ch", lineHeight: 1.6 }}>
            A Dubai-headquartered global private aviation company, integrating aircraft management, charter, sales and CAMO since 2007.
          </div>
          <div style={{ marginTop: 24, display: "flex", gap: 24, fontFamily: "JetBrains Mono, monospace", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(247,248,250,0.5)" }}>
            <a href="https://www.instagram.com/empireaviationgroup" target="_blank" rel="noopener">Instagram</a>
            <a href="https://www.linkedin.com/company/empire-aviation-group" target="_blank" rel="noopener">LinkedIn</a>
          </div>
        </div>

        <div className="footer-col">
          <h4>Services</h4>
          <ul>
            <li><a href="#services">Aircraft Management</a></li>
            <li><a href="#services">Private Jet Charter</a></li>
            <li><a href="#services">Aircraft Sales</a></li>
            <li><a href="#services">CAMO</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Company</h4>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#fleet">Fleet</a></li>
            <li><a href="#about">Leadership</a></li>
            <li><a href="#about">Awards</a></li>
            <li><a href="#offices">Global Offices</a></li>
          </ul>
        </div>

        <div className="footer-col">
          <h4>Contact</h4>
          <ul>
            <li><a href="tel:+97142998444">+971 4 299 8444</a></li>
            <li><a href="mailto:info@empire.aero">info@empire.aero</a></li>
            <li><a href="mailto:charter@empire.aero">charter@empire.aero</a></li>
            <li style={{ marginTop: 16 }}>
              <span style={{ display: "block", fontSize: 11.5, opacity: 0.55, lineHeight: 1.5 }}>
                Unit F-06, Dubai Airport Free Zone, P.O. Box 293827, Dubai, UAE
              </span>
            </li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} Empire Aviation Group · All rights reserved</span>
        <span>Concept redesign · empireaviation.com</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Navbar, Footer, FAB, EmpireMark, EmpireMarkSmall });
