/* Header.jsx — top bar shared across the portal and internal pages.
 * Logo links to index; nav items use real URLs.
 * Pass activePath="legales" | "tecnicos" | "nosotros" | "contacto" etc.
 * Mobile (≤880px): hamburger button toggles a nav drawer with accordions.
 */
function Header({ onThemisXClick, activePath = "inicio" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [mobAccordion, setMobAccordion] = React.useState(null);
  const headerRef = React.useRef(null);

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

  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [menuOpen]);

  React.useEffect(() => {
    const mq = window.matchMedia("(min-width: 881px)");
    const onChange = (e) => { if (e.matches) setMenuOpen(false); };
    mq.addEventListener("change", onChange);
    return () => mq.removeEventListener("change", onChange);
  }, []);

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

  const serviciosActive = activePath === "legales" || activePath === "tecnicos";
  /* const recursosActive = activePath === "recursos-legales" || activePath === "recursos-tecnicos"; */

  const DropdownItem = ({ label, isActive, children }) => (
    <div className={"nav-dropdown" + (isActive ? " active" : "")}>
      <span className={"nav-drop-trigger" + (isActive ? " active" : "")}>
        {label}
        <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 4L5 6.5L7.5 4"/></svg>
      </span>
      <div className="nav-drop-menu">
        {children}
      </div>
    </div>
  );

  return (
    <>
      <header
        ref={headerRef}
        className={"portal-header" + (scrolled ? " scrolled" : "")}
        style={scrolled ? { borderBottomColor: "var(--hl-border)" } : {}}
      >
        <div className="portal-container row">
          <a href="index.html" aria-label="HONDULegal — Inicio">
            <img className="mark" src="assets/hondulegal-logo.png" alt="HONDULegal" />
          </a>

          {/* Desktop nav */}
          <nav aria-label="Principal" style={{ justifyContent: "center" }}>
            <a href="index.html" className={activePath === "inicio" ? "active" : ""}>Inicio</a>

            <DropdownItem label="Servicios" isActive={serviciosActive}>
              <a href="servicios-legales.html" className={activePath === "legales" ? "active" : ""}>Legales</a>
              <a href="servicios-tecnicos.html" className={activePath === "tecnicos" ? "active" : ""}>Técnicos</a>
            </DropdownItem>

            {/* <DropdownItem label="Recursos" isActive={recursosActive}>
              <a href="recursos-legales.html" className={activePath === "recursos-legales" ? "active" : ""}>Legales</a>
              <a href="recursos-tecnicos.html" className={activePath === "recursos-tecnicos" ? "active" : ""}>Técnicos</a>
            </DropdownItem> */}

            <a href="sobre-nosotros.html" className={activePath === "nosotros" ? "active" : ""}>Nosotros</a>
            <a href="equipo.html" className={activePath === "equipo" ? "active" : ""}>Equipo</a>
            <a href="contacto.html" className={activePath === "contacto" ? "active" : ""}>Contacto</a>
          </nav>

          {/* Desktop CTA */}
          <button className="header-cta" onClick={onThemisXClick}>
            <span className="star">✦</span>
            Consultar a ThemisX
          </button>

          {/* Hamburger — visible on mobile only */}
          <button
            className={"nav-burger" + (menuOpen ? " is-open" : "")}
            onClick={() => setMenuOpen(v => !v)}
            aria-label={menuOpen ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={String(menuOpen)}
          >
            <span /><span /><span />
          </button>
        </div>
      </header>

      {/* Mobile scrim + drawer — outside <header> so fixed positioning works */}
      {menuOpen && (
        <div className="mob-scrim" onClick={() => setMenuOpen(false)} />
      )}
      {menuOpen && (
        <nav className="mob-drawer" aria-label="Menú móvil">
          <a href="index.html"
             className={activePath === "inicio" ? "active" : ""}
             onClick={() => setMenuOpen(false)}>Inicio</a>

          <button className={"mob-accordion-trigger" + (serviciosActive ? " active" : "")}
                  onClick={() => setMobAccordion(v => v === "servicios" ? null : "servicios")}>
            Servicios
            <svg className={mobAccordion === "servicios" ? "rotated" : ""} width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 4L5 6.5L7.5 4"/></svg>
          </button>
          {mobAccordion === "servicios" && (
            <div className="mob-sub">
              <a href="servicios-legales.html" className={activePath === "legales" ? "active" : ""} onClick={() => setMenuOpen(false)}>Legales</a>
              <a href="servicios-tecnicos.html" className={activePath === "tecnicos" ? "active" : ""} onClick={() => setMenuOpen(false)}>Técnicos</a>
            </div>
          )}

          {/* <button className={"mob-accordion-trigger" + (recursosActive ? " active" : "")}
                  onClick={() => setMobAccordion(v => v === "recursos" ? null : "recursos")}>
            Recursos
            <svg className={mobAccordion === "recursos" ? "rotated" : ""} width="12" height="12" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M2.5 4L5 6.5L7.5 4"/></svg>
          </button>
          {mobAccordion === "recursos" && (
            <div className="mob-sub">
              <a href="recursos-legales.html" className={activePath === "recursos-legales" ? "active" : ""} onClick={() => setMenuOpen(false)}>Legales</a>
              <a href="recursos-tecnicos.html" className={activePath === "recursos-tecnicos" ? "active" : ""} onClick={() => setMenuOpen(false)}>Técnicos</a>
            </div>
          )} */}

          <a href="sobre-nosotros.html"
             className={activePath === "nosotros" ? "active" : ""}
             onClick={() => setMenuOpen(false)}>Nosotros</a>
          <a href="equipo.html"
             className={activePath === "equipo" ? "active" : ""}
             onClick={() => setMenuOpen(false)}>Equipo</a>
          <a href="contacto.html"
             className={activePath === "contacto" ? "active" : ""}
             onClick={() => setMenuOpen(false)}>Contacto</a>

          <button
            className="mob-cta"
            onClick={() => { setMenuOpen(false); onThemisXClick && onThemisXClick(); }}
          >
            <span className="star">✦</span>Consultar a ThemisX
          </button>
        </nav>
      )}
    </>
  );
}

Object.assign(window, { Header });