/* global React, Button, useOpenStatus, OPENTABLE_URL */
const { useState: useStateH, useEffect: useEffectH } = React;

function Header() {
  const [scrolled, setScrolled] = useStateH(false);
  const [open, setOpen] = useStateH(false);

  useEffectH(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const nav = [
    { href: "menu.html", label: "Menu" },
    { href: "happyhour.html", label: "Happy Hour" },
    { href: "events.html", label: "Events" },
    { href: "giftcards.html", label: "Gift Cards" },
    { href: "visit.html", label: "Contact" },
    { href: "careers.html", label: "Careers" }
  ];

  return (
    <header className={`dh-header ${scrolled ? "is-scrolled" : ""}`}>
      <div className="dh-header-inner">
        <a href="index.html#top" className="dh-header-brand" aria-label="Dimi's Greek House — home">
          <img src="assets/logo-dimis-black.png" alt="Dimi's Greek House" />
        </a>
        <nav className="dh-header-nav" aria-label="Primary">
          {nav.map(n => (
            <a key={n.href} href={n.href}>{n.label}</a>
          ))}
        </nav>
        <div className="dh-header-cta">
          <Button variant="primary" size="sm" as="a" href={OPENTABLE_URL} target="_blank" rel="noopener">Reserve a table</Button>
        </div>
        <button className="dh-header-burger" aria-label="Menu" onClick={() => setOpen(!open)}>
          <span /><span /><span />
        </button>
      </div>
      {open && (
        <div className="dh-header-mobile">
          {nav.map(n => <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
          <Button variant="primary" size="sm" as="a" href={OPENTABLE_URL} target="_blank" rel="noopener">Reserve a table</Button>
        </div>
      )}
    </header>
  );
}

window.Header = Header;