/* Navbar — sticky glass, theme toggle, Login → sistema QA */
(function () {
  const { useState, useEffect } = React;

  function Navbar({ data, theme, onToggleTheme, heroVariant }) {
    const [scrolled, setScrolled] = useState(false);
    const [open, setOpen] = useState(false);

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

    useEffect(() => {
      document.body.style.overflow = open ? "hidden" : "";
    }, [open]);

    const go = (href) => {
      setOpen(false);
      if (href.startsWith("#")) {
        const el = document.querySelector(href);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
      } else {
        window.open(href, "_blank");
      }
    };

    const overDark = heroVariant === "C" && !scrolled;

    return (
      <header className={"nav " + (scrolled ? "nav--solid" : "") + (overDark ? " nav--over-dark" : "")}>
        <div className="wrap nav__inner">
          <a className="nav__brand" href="#top" onClick={(e) => { e.preventDefault(); go("#top"); }}>
            <img src={(window.__resources && window.__resources.logoMain) || "assets/logo-hemel-2024.png"} alt="HEMEL" className="nav__logo" />
          </a>

          <nav className="nav__links">
            {data.nav.map((n) => (
              <a key={n.href} href={n.href} onClick={(e) => { e.preventDefault(); go(n.href); }}>
                {n.label}
              </a>
            ))}
          </nav>

          <div className="nav__actions">
            <button className="nav__icon" onClick={onToggleTheme} aria-label="Cambiar tema" title="Cambiar tema">
              <Icon name={theme === "dark" ? "sun" : "moon"} size={19} />
            </button>
            <a className="btn btn-primary btn-sm nav__login" href={data.loginUrl} target="_blank" rel="noreferrer">
              <Icon name="login" size={17} /> Login
            </a>
            <button className="nav__burger" onClick={() => setOpen(true)} aria-label="Abrir menú">
              <Icon name="menu" size={22} />
            </button>
          </div>
        </div>

        {/* Mobile drawer */}
        <div className={"drawer " + (open ? "drawer--open" : "")}>
          <div className="drawer__head wrap">
            <img src={(window.__resources && window.__resources.logoMain) || "assets/logo-hemel-2024.png"} alt="HEMEL" className="nav__logo" />
            <button className="nav__icon" onClick={() => setOpen(false)} aria-label="Cerrar menú">
              <Icon name="x" size={22} />
            </button>
          </div>
          <nav className="drawer__links wrap">
            {data.nav.map((n) => (
              <a key={n.href} href={n.href} onClick={(e) => { e.preventDefault(); go(n.href); }}>
                {n.label} <Icon name="arrowUpRight" size={20} />
              </a>
            ))}
          </nav>
          <div className="drawer__foot wrap">
            <a className="btn btn-primary" href={data.loginUrl} target="_blank" rel="noreferrer" style={{ width: "100%" }}>
              <Icon name="login" size={18} /> Acceder al sistema
            </a>
            <div className="drawer__social">
              {data.social.map((s) => (
                <a key={s.icon} href={s.href} target="_blank" rel="noreferrer" className="nav__icon" aria-label={s.label}>
                  <Icon name={s.icon} size={19} />
                </a>
              ))}
            </div>
          </div>
        </div>
        {open && <button className="drawer__scrim" onClick={() => setOpen(false)} aria-label="Cerrar" />}
      </header>
    );
  }

  window.Navbar = Navbar;
})();