function Nav({ currentPage }) {
  const links = [
    { label: "Home",             page: "home",        href: "#" },
    { label: "Product",          page: "product",     href: "#product" },
    { label: "For Cheer & Dance",page: "cheer-dance", href: "#cheer-dance" },
    { label: "Why Primo",        page: "why-primo",   href: "#why-primo" },
    { label: "Pricing",          page: "pricing",     href: "#pricing" },
    { label: "FAQs",             page: "faq",         href: "#faq" },
  ];

  const [open, setOpen] = React.useState(false);

  // Close menu on hash change (page navigation)
  React.useEffect(() => {
    setOpen(false);
  }, [currentPage]);

  // Prevent body scroll when menu is open
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <>
      <nav className="nav">
        <div className="wrap nav-inner">
          <a href="#" aria-label="Primo Ticketing — Home">
            <img src="assets/primo-logo.png" alt="Primo Ticketing" style={{ height: 48, width: "auto", display: "block" }} />
          </a>

          <div className="nav-links">
            {links.map(l => (
              <a
                key={l.page}
                href={l.href}
                className={currentPage === l.page ? "active" : ""}
              >
                {l.label}
              </a>
            ))}
          </div>

          <div className="nav-cta">
            <a href="https://app.primoticketing.com/login" target="_blank" rel="noopener" className="signin">Sign in</a>
            <a href="schedule.html" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14, background: "linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%)", boxShadow: "0 8px 24px -8px rgba(139,92,246,0.45)" }}>
              Schedule a Demo
            </a>
            <a href="signup.html" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 14, background: "linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%)", boxShadow: "0 8px 24px -8px rgba(139,92,246,0.45)" }}>
              Start Selling Tickets
            </a>
          </div>

          {/* Hamburger — only visible on mobile */}
          <button
            className={"nav-hamburger" + (open ? " is-open" : "")}
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </nav>

      {/* Mobile drawer */}
      {open && (
        <div className="nav-mobile-overlay" onClick={() => setOpen(false)} />
      )}
      <div className={"nav-mobile-drawer" + (open ? " is-open" : "")}>
        <div className="nav-mobile-links">
          {links.map(l => (
            <a
              key={l.page}
              href={l.href}
              className={currentPage === l.page ? "active" : ""}
              onClick={() => setOpen(false)}
            >
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-mobile-actions">
          <a href="https://app.primoticketing.com/login" target="_blank" rel="noopener" className="nav-mobile-signin">
            Sign in
          </a>
          <a href="schedule.html" className="btn btn-primary nav-mobile-btn">
            Schedule a Demo
          </a>
          <a href="signup.html" className="btn btn-primary nav-mobile-btn">
            Start Selling Tickets
          </a>
        </div>
      </div>
    </>
  );
}

window.Nav = Nav;