// REWIND website — top navigation. Left: Our Story / Lounge / Karaoke.
// Centre: wordmark. Right: FAQ / Events (dropdown), then the single Reservations
// CTA — Events sits closest to it. Menus are NOT in the nav — they are reached
// from the Lounge and Karaoke pages, which each link their own.
// These controls change the view rather than navigate, so they are <button>s:
// keyboard-reachable, announced as controls, and the open/closed state of the
// burger and the Events menu is exposed with aria-expanded.
function SiteNav({ current, go, onReserve }) {
  const U = window.RW_CONTENT.ui.nav;
  const [open, setOpen] = React.useState(false);       // mobile menu
  const [evOpen, setEvOpen] = React.useState(false);   // events dropdown
  const evRef = React.useRef(null);
  const burgerRef = React.useRef(null);

  React.useEffect(() => {
    const away = (e) => {
      if (evRef.current && !evRef.current.contains(e.target)) setEvOpen(false);
    };
    document.addEventListener("click", away);
    return () => document.removeEventListener("click", away);
  }, []);

  // Escape closes whichever layer is open, innermost first, and hands focus back
  // to the control that opened it.
  React.useEffect(() => {
    if (!open && !evOpen) return;
    const key = (e) => {
      if (e.key !== "Escape") return;
      if (evOpen) { setEvOpen(false); return; }
      setOpen(false);
      if (burgerRef.current) burgerRef.current.focus();
    };
    document.addEventListener("keydown", key);
    return () => document.removeEventListener("keydown", key);
  }, [open, evOpen]);

  const nav = (k, event) => {
    setOpen(false); setEvOpen(false);
    go(k);
  };
  const eventsActive = current === "publicevents" || current === "private";
  const onReserveClick = () => { setOpen(false); onReserve(); };
  const cur = (k) => (current === k ? "page" : undefined);

  return (
    <header className="nav">
      <div className="row">
        {/* left */}
        <nav className="links desk" aria-label="Primary" data-rw-field="navCopy">
          <button type="button" className={"link" + (current === "ourstory" ? " on" : "")} aria-current={cur("ourstory")} onClick={(event) => nav("ourstory", event)}>{U.ourStory}</button>
          <button type="button" className={"link" + (current === "lounge" ? " on" : "")} aria-current={cur("lounge")} onClick={(event) => nav("lounge", event)}>{U.lounge}</button>
          <button type="button" className={"link" + (current === "karaoke" ? " on" : "")} aria-current={cur("karaoke")} onClick={(event) => nav("karaoke", event)}>{U.karaoke}</button>
        </nav>
        <button ref={burgerRef} type="button" className="burger mob" aria-label={U.menuAria}
        aria-expanded={open} aria-controls="rw-mobmenu" onClick={() => setOpen((o) => !o)}>
          <span></span><span></span><span></span>
        </button>

        {/* centre brand — wordmark only */}
        <button type="button" className="brand" onClick={(event) => nav("home", event)} aria-label={U.homeAria}>
          <img data-rw-field="logo" src={window.RW_IMG.logoWordmark} alt="" height="18" />
        </button>

        {/* right — secondary links + reservation CTA */}
        <nav className="links right" aria-label="Secondary" data-rw-field="navCopy">
          <button type="button" className={"link2" + (current === "faq" ? " on" : "")} aria-current={cur("faq")} onClick={(event) => nav("faq", event)}>{U.faq}</button>
          <div className="navdd" ref={evRef}>
            <button type="button" className={"link2" + (eventsActive ? " on" : "")}
            aria-expanded={evOpen} aria-haspopup="true" aria-controls="rw-evmenu"
            onClick={() => setEvOpen((o) => !o)}>
              {U.events} <span className="ddcaret" aria-hidden="true" style={{ transform: evOpen ? "rotate(180deg)" : "none" }}>&#9662;</span>
            </button>
            {evOpen && (
              <div className="ddmenu" id="rw-evmenu">
                <button type="button" aria-current={cur("publicevents")} onClick={(event) => nav("publicevents", event)}>{U.public}</button>
                <button type="button" aria-current={cur("private")} onClick={(event) => nav("private", event)}>{U.private}</button>
              </div>
            )}
          </div>
          <button type="button" className={"btn btn--sm " + (current === "karaoke" ? "btn--neon" : "btn--champ")} onClick={onReserveClick}>
            <span className="desk">{U.reservations}</span><span className="mob">{U.reserve}</span>
          </button>
        </nav>
      </div>

      {open && (
        <div className="mobmenu mob" id="rw-mobmenu" data-rw-field="navCopy">
          <button type="button" className={current === "ourstory" ? "on" : ""} aria-current={cur("ourstory")} onClick={(event) => nav("ourstory", event)}>{U.ourStory}</button>
          <button type="button" className={current === "lounge" ? "on" : ""} aria-current={cur("lounge")} onClick={(event) => nav("lounge", event)}>{U.lounge}</button>
          <button type="button" className={current === "karaoke" ? "on" : ""} aria-current={cur("karaoke")} onClick={(event) => nav("karaoke", event)}>{U.karaoke}</button>
          <button type="button" className={current === "faq" ? "on" : ""} aria-current={cur("faq")} onClick={(event) => nav("faq", event)}>{U.faq}</button>
          <button type="button" className={current === "publicevents" ? "on" : ""} aria-current={cur("publicevents")} onClick={(event) => nav("publicevents", event)}>{U.publicEvents}</button>
          <button type="button" className={current === "private" ? "on" : ""} aria-current={cur("private")} onClick={(event) => nav("private", event)}>{U.privateEvents}</button>
        </div>
      )}
    </header>
  );
}
window.SiteNav = SiteNav;