/* global React, LogoImg, WAIcon, waLink */
const { useState: useStateN, useEffect: useEffectN } = React;

const HOME = "Rancho%20La%20Vega.html";
const NAV = [
  ["Inicio", HOME],
  ["Rancho La Vega", "rancho.html"],
  ["Ejemplares", "ejemplares.html"],
  ["Lista de precios", "precios.html"],
  ["Líneas disponibles", "lineas.html"],
  ["Proceso de compra", "proceso.html"],
  ["Mapa de envíos", "envios.html"],
  ["Dinámicas", "dinamicas.html"],
  ["Crianza y cuidado", "crianza.html"],
  ["Legalidad", "legalidad.html"],
  ["Blog", "blog.html"],
  ["Contacto", "contacto.html"],
];
const PRIMARY = ["ejemplares.html", "precios.html", "lineas.html", "envios.html", "contacto.html"];

function currentFile() {
  const p = decodeURIComponent(location.pathname.split("/").pop() || "");
  return p || "Rancho La Vega.html";
}

function Header() {
  const [menu, setMenu] = useStateN(false);
  const [scrolled, setScrolled] = useStateN(false);
  const cur = currentFile();
  const isHome = cur === "Rancho La Vega.html" || cur === "";

  useEffectN(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffectN(() => { document.body.style.overflow = menu ? "hidden" : ""; }, [menu]);

  const active = (href) => decodeURIComponent(href) === cur || (isHome && href === HOME);

  return (
    <header className={"site-header" + (scrolled ? " is-scrolled" : "")}>
      <div className="header-inner wrap">
        <a className="brand" href={HOME} aria-label="Rancho La Vega inicio">
          <LogoImg height={50} className="brand-logo" />
          <span className="brand-words">
            <span className="brand-name gold-text">RANCHO LA VEGA</span>
            <span className="brand-sub">Tempoal, Veracruz</span>
          </span>
        </a>

        <nav className="nav-primary">
          {NAV.filter(([, href]) => PRIMARY.includes(href)).map(([label, href]) => (
            <a key={href} href={href} className={active(href) ? "on" : ""}>{label}</a>
          ))}
        </nav>

        <div className="header-actions">
          <a className="wa-pill" href={waLink("Hola, vi la página oficial de Rancho La Vega y quiero consultar disponibilidad.")} target="_blank" rel="noopener noreferrer">
            <WAIcon size={14} /> <span>WhatsApp</span>
          </a>
          <button className="menu-btn" onClick={() => setMenu(true)} aria-label="Abrir menú">
            <span /><span /><span />
            <em>Menú</em>
          </button>
        </div>
      </div>
      <div className="brass-rail header-rail" />

      <div className={"menu-overlay" + (menu ? " open" : "")} role="dialog" aria-hidden={!menu}>
        <button className="menu-close" onClick={() => setMenu(false)} aria-label="Cerrar menú">×</button>
        <div className="menu-panel">
          <p className="eyebrow menu-kicker">Rancho La Vega — Menú</p>
          <nav className="menu-links">
            {NAV.map(([label, href], i) => (
              <a key={href} href={href} className={active(href) ? "on" : ""} style={{ transitionDelay: (i * 30) + "ms" }}>
                <span className="menu-num">{String(i + 1).padStart(2, "0")}</span>
                {label}
              </a>
            ))}
          </nav>
          <a className="btn-gold menu-wa" href={waLink("Hola, vi la página oficial de Rancho La Vega y quiero consultar disponibilidad.")} target="_blank" rel="noopener noreferrer">
            <WAIcon size={15} /> Consultar por WhatsApp
          </a>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Header, NAV });