// Sticky header with logo + tracked-out caps nav

const NAV_ITEMS = [
  ["home", "Home"],
  ["about", "About"],
  ["services", "Services"],
  ["work-with-me", "Work With Me"],
  ["contact", "Contact"],
  ["faq", "FAQ"],
  ["blog", "Blog"],
];

const Header = () => {
  const [openMenu, setOpenMenu] = React.useState(false);
  const route = useRoute();
  const current = route[0] || "home";

  React.useEffect(() => { setOpenMenu(false); }, [route.join("/")]);

  return (
    <header className="site-header">
      <AnnounceBar/>
      <div className="header-row">
        <div className="container" style={{
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "18px 32px", position: "relative",
        }}>
          <a href="#/" className="brand-link" onClick={navTo("home")}>
            <img src="assets/logo-mark.png" alt="" className="brand-mark"/>
            <span className="brand-wordmark">Aligned Attachments</span>
          </a>
          <button className="menu-toggle" aria-label="Open menu" onClick={() => setOpenMenu(o => !o)}>
            <span/><span/><span/>
          </button>
          <nav className={"nav-links" + (openMenu ? " is-open" : "")}>
            {NAV_ITEMS.map(([id, label]) => {
              const active = (id === "home" && current === "home") || id === current;
              return (
                <a key={id} className={"nav-link" + (active ? " is-active" : "")}
                   href={"#/" + (id === "home" ? "" : id)}
                   onClick={navTo(id)}>
                  {label.toUpperCase().split("").join(" ")}
                </a>
              );
            })}
          </nav>
        </div>
      </div>
    </header>
  );
};

window.Header = Header;