/* global React, Wordmark, Button, Icon */
const { useState: useNavState, useEffect: useNavEffect } = React;

function Nav({ onCTA, base = "" }) {
  const [scrolled, setScrolled] = useNavState(false);
  const [menuOpen, setMenuOpen] = useNavState(false);

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

  return (
    <header className={`nav-root${scrolled ? " scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href={base || "#top"} style={{ textDecoration: "none", flexShrink: 0 }}>
          <Wordmark size="md"/>
        </a>

        {/* Desktop nav — absolutely centered */}
        <nav className="nav-links nav-desktop" style={{ position: "absolute", left: "50%", transform: "translateX(-50%)", flex: "none" }}>
          <a href="about.html" className="nav-link">About</a>
          <a href="services.html" className="nav-link">Services</a>
          <a href="packages.html" className="nav-link">Packages</a>
          <a href="faq.html" className="nav-link">FAQ</a>
        </nav>

        <div className="nav-actions nav-desktop" style={{ marginLeft: "auto" }}>
          <Button variant="accent" as="a" href="tel:5126505062">Call for a Free Consultation</Button>
        </div>

        {/* Mobile hamburger */}
        <button className="nav-hamburger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
          <Icon size={24} d={
            menuOpen
              ? <><path d="M18 6 6 18"/><path d="m6 6 12 12"/></>
              : <><path d="M3 6h18"/><path d="M3 12h18"/><path d="M3 18h18"/></>
          }/>
        </button>
      </div>

      {menuOpen && (
        <div className="nav-mobile-menu">
          <a href="about.html"           className="nav-mobile-link" onClick={() => setMenuOpen(false)}>About</a>
          <a href="services.html"        className="nav-mobile-link" onClick={() => setMenuOpen(false)}>Services</a>
          <a href="packages.html"       className="nav-mobile-link" onClick={() => setMenuOpen(false)}>Packages</a>
          <a href="faq.html"            className="nav-mobile-link" onClick={() => setMenuOpen(false)}>FAQ</a>
          <Button variant="accent" as="a" href="tel:5126505062" onClick={() => setMenuOpen(false)}>Call for a Free Consultation</Button>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;