// Navigation — multi-page
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  const links = [
    { href: "index.html", label: "Home" },
    { href: "fleet.html", label: "Fleet" },
    { href: "services.html", label: "Services" },
    { href: "safety.html", label: "Safety" },
    { href: "about.html", label: "About" },
    { href: "contact.html", label: "Contact" },
  ];

  const path = window.location.pathname;
  const isActive = (href) => path.endsWith("/" + href) || path.endsWith(href);

  return (
    <React.Fragment>
      <nav className={"nav" + (scrolled ? " scrolled" : "") + (menuOpen ? " menu-open" : "")}>
        <a href="index.html" className="brand">
          <span className="brand-mark"><Icons.Mark size={28} /></span>
          <span className="brand-name">
            Schindler<span style={{ color: "var(--brass-2)" }}>.</span>
            <small>Aviation Brokerage</small>
          </span>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a key={l.href} href={l.href} className={isActive(l.href) ? "active" : ""}>{l.label}</a>
          ))}
        </div>
        <div className="nav-right">
          <span className="nav-phone">24/7 DISPATCH · <strong>+1 (602) 799-8737</strong></span>
          <a href="contact.html" className="btn btn-primary nav-cta">
            Request Charter <Icons.Arrow />
          </a>
          <button
            className={"hamburger" + (menuOpen ? " open" : "")}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Toggle menu"
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </nav>

      <div className={"mobile-menu" + (menuOpen ? " open" : "")} aria-hidden={!menuOpen}>
        <div className="mobile-menu-inner">
          <nav className="mobile-nav-links">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setMenuOpen(false)}>{l.label}</a>
            ))}
          </nav>
          <div className="mobile-menu-footer">
            <a href="contact.html" className="btn btn-primary" style={{ width: "100%", justifyContent: "center", display: "inline-flex" }}>
              Request Charter <Icons.Arrow />
            </a>
            <a href="tel:+16027998737" className="mobile-phone">+1 (602) 799-8737</a>
          </div>
        </div>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;