// nav.jsx — sticky top navigation
const { useState: useNavState, useEffect: useNavEffect } = React;

function TopNav({ view, onGo, onReserve, onHome }) {
  const [scrolled, setScrolled] = useNavState(false);
  const [open, setOpen] = useNavState(false);
  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const handle = (item) => {
    setOpen(false);
    if (item.view) { onGo({ view: item.view }); }
    else { onGo({ target: item.target }); }
  };

  return (
    <header className={`nav ${scrolled || view !== "main" ? "nav-solid" : ""}`}>
      <div className="nav-inner">
        <div className="nav-left">
          <span className="nav-badge" onClick={onHome} role="button" tabIndex={0}>
            <Medallion size={42} />
          </span>
          <Wordmark small onClick={onHome} />
        </div>

        <nav className="nav-links">
          {NAV.map((item) => (
            <button key={item.label}
              className={`nav-link ${item.tag ? "has-tag" : ""} ${item.view === "bally" && view === "bally" ? "is-active" : ""}`}
              onClick={() => handle(item)}>
              {item.label}
              {item.tag && <span className="nav-tag">{item.tag}</span>}
              <span className="nav-underline" />
            </button>
          ))}
        </nav>

        <div className="nav-right">
          <button className="nav-reserve" onClick={onReserve}>Reserve</button>
          <button className={`nav-burger ${open ? "is-open" : ""}`} onClick={() => setOpen(o => !o)} aria-label="Menu">
            <span /><span /><span />
          </button>
        </div>
      </div>

      <div className={`nav-drawer ${open ? "is-open" : ""}`}>
        {NAV.map((item) => (
          <button key={item.label} className="drawer-link" onClick={() => handle(item)}>{item.label}{item.tag && <span className="nav-tag">{item.tag}</span>}</button>
        ))}
        <button className="drawer-reserve" onClick={() => { setOpen(false); onReserve(); }}>Reserve Your Vehicle</button>
      </div>
    </header>
  );
}

Object.assign(window, { TopNav });