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

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

  const links = [
    { href: "#demo", label: "Demo ao vivo" },
    { href: "#perda", label: "Quanto você perde" },
    { href: "#dois-mundos", label: "Para quem é" },
    { href: "#precos", label: "Preços" },
  ];

  return (
    <header className="nav-bar" style={{
      borderBottomColor: scrolled ? "rgba(255,255,255,.06)" : "rgba(255,255,255,0)",
      boxShadow: scrolled ? "0 1px 0 rgba(0,0,0,.20)" : "none",
    }}>
      <div className="container" style={{
        display: "flex", alignItems: "center", justifyContent: "space-between",
        height: 68, gap: 24,
      }}>
        <a href="#top" style={{
          display: "inline-flex", alignItems: "center", gap: 10,
          textDecoration: "none", color: "#fff", fontWeight: 600, fontSize: 18, letterSpacing: "-0.01em"
        }}>
          <IconLogo size={28} />
          BinGest
        </a>

        <nav className="nav-links" style={{
          display: "flex", gap: 6, alignItems: "center"
        }}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={{
              padding: "9px 14px", borderRadius: 999, textDecoration: "none",
              color: "rgba(255,255,255,.7)", fontWeight: 500, fontSize: 13.5,
            }}>{l.label}</a>
          ))}
        </nav>

        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <a href="#" className="btn btn-ghost btn-sm" style={{ border: "none", background: "transparent", color: "rgba(255,255,255,.85)" }}>Entrar</a>
          <a href="#demo" className="btn btn-blue btn-sm">
            Ver demo ao vivo
            <IconArrow size={15} />
          </a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;