/* global React */

// Top sticky navigation. Pass currentPage + onNavigate(pageId).
function Nav({ currentPage, onNavigate }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    { id: "home",     label: "Home" },
    { id: "house",    label: "The House" },
    { id: "gallery",  label: "Gallery" },
    { id: "listowel", label: "Listowel" },
    { id: "wedding-accommodation-listowel", label: "Weddings" },
    { id: "photo-shoot-location-listowel",  label: "Shoots" },
    { id: "book",     label: "Book" },
    { id: "contact",  label: "Contact" },
  ];

  // Close mobile menu when navigating.
  const go = (id) => { setOpen(false); onNavigate(id); };
  const hrefFor = (id) => id === "home" ? "/" : `/${id}`;

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

  return (
    <nav className={"ws-nav" + (open ? " is-open" : "")}>
      <div className="ws-nav__inner">
        <a className="ws-nav__logo" onClick={(e) => { e.preventDefault(); go("home"); }} href="/">
          <Monogram />
        </a>
        <div className="ws-nav__mobile-tagline">Luxury townhouse stays in the heart of Listowel</div>

        <div className="ws-nav__links ws-nav__links--desktop">
          {links.map(l => (
            <a
              key={l.id}
              href={hrefFor(l.id)}
              className={"ws-nav__link" + (currentPage === l.id ? " is-active" : "")}
              onClick={(e) => { e.preventDefault(); go(l.id); }}
            >{l.label}</a>
          ))}
        </div>

        <a className="ws-nav__cta ws-nav__cta--desktop" href="/book" onClick={(e) => { e.preventDefault(); go("book"); }}>
          Book Your Stay
        </a>

        <button
          className={"ws-nav__burger" + (open ? " is-open" : "")}
          onClick={() => setOpen(!open)}
          aria-label="Toggle menu"
          aria-expanded={open}
        >
          <span /><span /><span />
        </button>
      </div>

      {/* Mobile drawer */}
      <div className={"ws-nav__drawer" + (open ? " is-open" : "")} onClick={() => setOpen(false)}>
        <div className="ws-nav__drawer-inner" onClick={(e) => e.stopPropagation()}>
          {links.map(l => (
            <a
              key={l.id}
              href={hrefFor(l.id)}
              className={"ws-nav__drawer-link" + (currentPage === l.id ? " is-active" : "")}
              onClick={(e) => { e.preventDefault(); go(l.id); }}
            >{l.label}</a>
          ))}
          <a className="ws-btn ws-btn--gold" href="/book" style={{ width: "100%", marginTop: 20 }} onClick={(e) => { e.preventDefault(); go("book"); }}>
            Book Your Stay
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;