/* global React */

const BOOKING_URL = "https://calendar.app.google/dsGDvEFc5NdkPPA48";

function SiteHeader({ onDark = false }) {
  const links = [
    { l: "Capabilities", href: "#capabilities" },
    { l: "Case studies", href: "#works" },
  ];
  const logo = onDark
    ? "assets/logo-omasu-white.png"
    : "assets/logo-omasu-black.png";

  const [menuOpen, setMenuOpen] = React.useState(false);

  // Lock body scroll while the mobile menu is open
  React.useEffect(() => {
    if (menuOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [menuOpen]);

  const close = () => setMenuOpen(false);

  return (
    <>
      <header className={"site-header" + (onDark ? " site-header--on-dark" : "") + (menuOpen ? " is-menu-open" : "")} data-screen-label="00 Header">
        <div className="shell site-header__inner">
          <a href="#top" aria-label="Omasu" onClick={close}><img src={logo} alt="Omasu" /></a>
          <nav className="site-header__nav">
            {links.map(({ l, href }) => (
              <a key={l} href={href}>{l}</a>
            ))}
          </nav>
          <div className="site-header__cta">
            <a className={"btn " + (onDark ? "btn-ghost btn-ghost--on-dark" : "btn-ghost")} href="#contact">Contact</a>
            <a
              className={"btn " + (onDark ? "btn-primary--invert" : "btn-primary")}
              href={BOOKING_URL}
              target="_blank"
              rel="noopener noreferrer"
            >
              Book a call <span className="arrow">→</span>
            </a>
          </div>

          {/* Mobile hamburger */}
          <button
            className="site-header__burger"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span className={"burger" + (menuOpen ? " is-open" : "")}>
              <span></span><span></span><span></span>
            </span>
          </button>
        </div>
      </header>

      {/* Mobile drawer — rendered OUTSIDE the header so its position:fixed
          is relative to the viewport, not the backdrop-filtered header. */}
      <div
        className={"site-header__drawer" + (menuOpen ? " is-open" : "") + (onDark ? " site-header__drawer--on-dark" : "")}
        aria-hidden={!menuOpen}
      >
        <nav className="site-header__drawer-nav">
          {links.map(({ l, href }) => (
            <a key={l} href={href} onClick={close}>{l}</a>
          ))}
        </nav>
        <div className="site-header__drawer-ctas">
          <a className="btn btn-secondary" href="#contact" onClick={close}>Contact</a>
          <a
            className="btn btn-primary"
            href={BOOKING_URL}
            target="_blank"
            rel="noopener noreferrer"
            onClick={close}
          >
            Book a call <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </>
  );
}

window.SiteHeader = SiteHeader;