function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { h: "#recursos", l: "Recursos" },
    { h: "#app", l: "App" },
    { h: "#depoimentos", l: "Depoimentos" },
    { h: "#planos", l: "Planos" },
    { h: "#faq", l: "FAQ" },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
        scrolled ? "bg-background/80 backdrop-blur-xl border-b border-outline" : "bg-transparent"
      }`}
    >
      <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
        <a href="#" className="flex items-center gap-2.5 focus-ring rounded">
          <Logomark size={34} />
          <span className="text-[17px] font-black tracking-tighter">MeuCraque</span>
        </a>

        <nav className="hidden md:flex items-center gap-1">
          {links.map((l) => (
            <a
              key={l.h}
              href={l.h}
              className="px-3 py-2 text-[13px] text-on-surface-variant hover:text-on-surface rounded-lg hover:bg-surface-container transition-colors"
            >
              {l.l}
            </a>
          ))}
        </nav>

        <div className="hidden md:flex items-center gap-2">
          <a
            href="https://app.meucraque.app"
            className="px-3 py-2 text-[13px] text-on-surface-variant hover:text-on-surface rounded-lg hover:bg-surface-container transition-colors"
          >
            Entrar
          </a>
        </div>

        <button
          className="md:hidden p-2 rounded-lg hover:bg-surface-container"
          onClick={() => setOpen((o) => !o)}
        >
          <Icon name={open ? "close" : "menu"} size={22} />
        </button>
      </div>

      {open && (
        <div className="md:hidden border-t border-outline bg-background/95 backdrop-blur-xl">
          <div className="px-6 py-4 flex flex-col gap-1">
            {links.map((l) => (
              <a
                key={l.h}
                href={l.h}
                onClick={() => setOpen(false)}
                className="px-3 py-3 text-[14px] text-on-surface-variant hover:text-on-surface rounded-lg hover:bg-surface-container"
              >
                {l.l}
              </a>
            ))}
            <a href="#download" className="mt-2 px-4 py-3 text-[13px] font-bold bg-primary text-on-primary rounded-lg text-center">
              Baixar o app
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;