/* header.jsx — fixed header (transparent over hero → frosted on scroll) + mobile drawer */
const { useState: useStateH, useEffect: useEffectH } = React;

const NAV = [
  { id: "rooms", label: "Rooms" },
  { id: "meals", label: "The Table" },
  { id: "gallery", label: "Gallery" },
  { id: "reviews", label: "Reviews" },
  { id: "story", label: "The House" }
];

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

  useEffectH(() => {
    document.body.classList.toggle("locked", open);
    return () => document.body.classList.remove("locked");
  }, [open]);

  const go = (id) => { setOpen(false); window.scrollToId(id); };

  return (
    <React.Fragment>
      <header className={"hdr" + (scrolled ? " scrolled" : "")}>
        <div className="wrap hdr-row">
          <a className="wordmark" href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
            <span className="star">&#9733;</span>{window.RIAD.riad.wordmark}
          </a>
          <nav className="nav">
            {NAV.map((n) => (
              <a key={n.id} href={"#" + n.id} onClick={(e) => { e.preventDefault(); go(n.id); }}>{n.label}</a>
            ))}
          </nav>
          <a className="btn-cta" href="#reservation" onClick={(e) => { e.preventDefault(); go("reservation"); }}>Reserve</a>
          <button className="burger" aria-label="Menu" onClick={() => setOpen(true)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>

      <div className={"scrim" + (open ? " show" : "")} onClick={() => setOpen(false)}></div>
      <aside className={"drawer" + (open ? " show" : "")} aria-hidden={!open}>
        <div className="drawer-top">
          <span className="wordmark"><span className="star">&#9733;</span>{window.RIAD.riad.wordmark}</span>
          <button className="drawer-x" aria-label="Close" onClick={() => setOpen(false)}>&#10005;</button>
        </div>
        <nav>
          {NAV.map((n) => (
            <a key={n.id} href={"#" + n.id} onClick={(e) => { e.preventDefault(); go(n.id); }}>{n.label}</a>
          ))}
        </nav>
        <a className="btn-solid" href="#reservation" onClick={(e) => { e.preventDefault(); go("reservation"); }}>Reserve a room</a>
      </aside>
    </React.Fragment>
  );
}

window.Header = Header;