function Nav() {
  const links = ["about", "products", "projects", "founders corner", "contact us"];
  const [scrolled, setScrolled] = React.useState(false);

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

  const goTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollTo ? null : null;
    if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: "smooth" });
  };

  const idFor = (label) => label.replace(/\s+/g, "-");

  return (
    <nav
      className="fixed z-40 top-0 left-0 right-0 pt-5 md:pt-6 px-5 md:px-10"
    >
      {/* Frosted scrim — blurs content behind the header and fades out downward */}
      <div
        className="absolute inset-x-0 top-0 pointer-events-none transition-opacity duration-500"
        style={{
          height: "120px",
          opacity: scrolled ? 1 : 0,
          backdropFilter: "blur(15px) saturate(120%)",
          WebkitBackdropFilter: "blur(15px) saturate(120%)",
          background: "linear-gradient(to bottom, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0) 100%)",
          maskImage: "linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%)",
          WebkitMaskImage: "linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%)",
        }}
      ></div>

      <div className="relative flex items-center justify-between gap-4">
        {/* Left: logo */}
        <a href="#top" onClick={goTo("top")} className="text-white">
          <QurceeLogo size={24} />
        </a>

        {/* Center: pill */}
        <div className="hidden md:flex items-center rounded-full bg-neutral-900/70 backdrop-blur-md ring-1 ring-white/10 px-2 py-1.5">
          {links.map((l) => (
            <a
              key={l}
              href={`#${idFor(l)}`}
              onClick={goTo(idFor(l))}
              className="nav-link text-neutral-300 hover:text-white transition-colors text-[13px] px-5 py-2 rounded-full"
              style={{ letterSpacing: "0.02em" }}
            >
              {l}
            </a>
          ))}
        </div>

        {/* Right: CTA */}
        <div className="flex items-center gap-3">
          <a
            href="#contact-us"
            onClick={goTo("contact-us")}
            className="hidden md:inline-flex items-center gap-2 text-[12px] uppercase tracking-[0.22em] text-neutral-300 hover:text-white transition-colors px-4 py-2 rounded-full ring-1 ring-white/15 hover:ring-white/40"
          >
            <span className="w-1.5 h-1.5 rounded-full bg-white/80" />
            showroom
          </a>
          <button
            aria-label="Menu"
            className="md:hidden w-10 h-10 rounded-full bg-neutral-900/70 backdrop-blur ring-1 ring-white/10 flex flex-col items-center justify-center gap-1.5"
          >
            <span className="block w-4 h-px bg-white/80"></span>
            <span className="block w-4 h-px bg-white/80"></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });