/* Sticky nav — transparent over hero, solidifies on scroll. */
const { useState: useNavState, useEffect: useNavEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useNavState(false);
  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    ["Programa", "#programa"],
    ["Experiencia", "#vivir"],
    ["Qué incluye", "#incluye"],
    ["Galería", "#galeria"],
    ["Media kit", "assets/media/billboard-ar-experience-media-kit.pdf"],
  ];

  return (
    <header
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: "var(--z-nav)",
        height: "var(--nav-h)",
        display: "flex",
        alignItems: "center",
        transition: "background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base)",
        background: scrolled ? "rgba(7,8,15,0.72)" : "transparent",
        backdropFilter: scrolled ? "blur(14px)" : "none",
        WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
        borderBottom: scrolled ? "1px solid var(--border-on-dark)" : "1px solid transparent",
      }}
    >
      <div style={{ width: "min(100% - calc(var(--gutter) * 2), var(--maxw))", marginInline: "auto", display: "flex", alignItems: "center", justifyContent: "space-between", gap: "24px" }}>
        <a href="#top" style={{ display: "flex", alignItems: "center", gap: "10px" }}>
          <img src="assets/logos/billboard-ar-wordmark-white.png" alt="billboard AR" style={{ height: "22px", width: "auto", display: "block" }} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: "30px" }} className="kit-navlinks">
          {links.map(([label, href]) => {
            const isPdf = href.endsWith(".pdf");
            return (
            <a key={href} href={href} {...(isPdf ? { target: "_blank", rel: "noopener" } : {})} style={{ font: "var(--fw-medium) var(--fs-body-sm)/1 var(--font-body)", color: "var(--text-on-dark-muted)", letterSpacing: "0.01em", transition: "color var(--dur-fast)" }}
               onMouseEnter={(e) => (e.currentTarget.style.color = "var(--white)")}
               onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-on-dark-muted)")}>
              {label}
            </a>
            );
          })}
        </nav>
        <Button size="sm" variant="primary" href="#sumate" icon={Icons.arrow}>Inscribite</Button>
      </div>
    </header>
  );
}

window.Nav = Nav;