function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const go = (id) => (e) => {
    e.preventDefault();
    setOpen(false);
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

  const items = [
    { id: "que-hacemos", label: "Propuesta" },
    { id: "espacios", label: "Espacios" },
    { id: "experiencias", label: "Formatos" },
    { id: "galeria", label: "Galería" },
    { id: "resenas", label: "Reseñas" },
  ];

  return (
    <header
      className="fixed top-0 inset-x-0 z-40 transition-all duration-300 navbar-blur"
      style={{
        backgroundColor: scrolled ? "rgba(26,14,7,0.85)" : "rgba(26,14,7,0.15)",
        borderBottom: scrolled ? "1px solid rgba(245,237,224,0.08)" : "1px solid transparent",
      }}
    >
      <div className="container flex items-center justify-between" style={{ height: scrolled ? 64 : 84, transition: "height .3s ease" }}>
        <a href="#hero" onClick={go("hero")} className="flex items-center group">
          <img
            src="assets/logo-zerua.png"
            alt="Zerua Events"
            className="logo-on-dark"
            style={{
              height: scrolled ? 30 : 38,
              width: "auto",
              transition: "height .3s ease, opacity .3s ease",
              opacity: 0.95,
            }}
          />
        </a>

        <nav className="hidden md:flex items-center gap-9">
          {items.map((it) => (
            <a
              key={it.id}
              href={`#${it.id}`}
              onClick={go(it.id)}
              className="text-xs tracking-widest uppercase transition-colors duration-200"
              style={{
                color: "rgba(245,237,224,0.7)",
                fontFamily: "'DM Sans', sans-serif",
                letterSpacing: "0.2em",
              }}
              onMouseEnter={(e) => (e.target.style.color = "#F5EDE0")}
              onMouseLeave={(e) => (e.target.style.color = "rgba(245,237,224,0.7)")}
            >
              {it.label}
            </a>
          ))}
        </nav>

        <div className="hidden md:block">
          <a
            href="#contacto"
            onClick={go("contacto")}
            className="text-xs tracking-widest uppercase px-5 py-2.5 transition-all duration-300"
            style={{
              color: "#F5EDE0",
              border: "1px solid rgba(245,237,224,0.5)",
              fontFamily: "'DM Sans', sans-serif",
              letterSpacing: "0.2em",
            }}
            onMouseEnter={(e) => {
              e.target.style.backgroundColor = "#F5EDE0";
              e.target.style.color = "#5E3719";
            }}
            onMouseLeave={(e) => {
              e.target.style.backgroundColor = "transparent";
              e.target.style.color = "#F5EDE0";
            }}
          >
            Contacto
          </a>
        </div>

        <button className="md:hidden p-2" onClick={() => setOpen((v) => !v)} aria-label="Menú">
          {open ? <X size={22} style={{ color: "#F5EDE0" }} /> : <Menu size={22} style={{ color: "#F5EDE0" }} />}
        </button>
      </div>

      {/* Mobile menu */}
      {open && (
        <div className="md:hidden" style={{ backgroundColor: "rgba(26,14,7,0.97)", borderTop: "1px solid rgba(245,237,224,0.08)" }}>
          <div className="container py-6 flex flex-col gap-5">
            {items.map((it) => (
              <a
                key={it.id}
                href={`#${it.id}`}
                onClick={go(it.id)}
                className="text-sm tracking-widest uppercase"
                style={{ color: "rgba(245,237,224,0.8)", fontFamily: "'DM Sans', sans-serif", letterSpacing: "0.2em" }}
              >
                {it.label}
              </a>
            ))}
            <a
              href="#contacto"
              onClick={go("contacto")}
              className="text-xs tracking-widest uppercase px-5 py-3 inline-block text-center"
              style={{
                color: "#5E3719",
                backgroundColor: "#F5EDE0",
                fontFamily: "'DM Sans', sans-serif",
                letterSpacing: "0.2em",
              }}
            >
              Contacto
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

window.Navbar = Navbar;