/* global React */

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

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 100,
      background: scrolled ? "rgba(255,255,255,0.85)" : "transparent",
      backdropFilter: scrolled ? "blur(14px)" : "none",
      WebkitBackdropFilter: scrolled ? "blur(14px)" : "none",
      borderBottom: scrolled ? "1px solid var(--rule)" : "1px solid transparent",
      transition: "all 200ms var(--easing)"
    }}>
      <div className="page" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px var(--page-pad)" }}>
        <a href="https://wearebolder.pt/" style={{ display: "flex", alignItems: "baseline", gap: 4, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22, letterSpacing: "-0.03em" }}>
          <span>Bolder</span>
          <span style={{ color: "var(--coral)" }}>_</span>
        </a>
        <nav style={{ display: "flex", gap: 28, alignItems: "center" }} className="nav-links">
          <a className="mono mono-ink" href="https://wearebolder.pt/blog/" style={{ fontSize: 12 }}>Blog</a>
          <a className="mono mono-ink" href="#system" style={{ fontSize: 12 }}>Sistema</a>
          <a className="mono mono-ink" href="#cinematic" style={{ fontSize: 12 }}>Be Cinematic</a>
          <a className="mono mono-ink" href="#pricing" style={{ fontSize: 12 }}>Pricing</a>
          <a className="mono mono-ink" href="#faq" style={{ fontSize: 12 }}>FAQ</a>
          <a className="btn" href="https://wearebolder.pt/login" style={{ padding: "10px 18px", fontSize: 13, marginLeft: 4 }}>
            Portal <span className="arrow">→</span>
          </a>
          <a className="btn" href="/signup.html" style={{ padding: "10px 18px", fontSize: 13, background: "var(--coral)", borderColor: "var(--coral)", color: "#fff" }}>
            Subscrever <span className="arrow">→</span>
          </a>
        </nav>
      </div>
      <style>{`@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }`}</style>
    </header>
  );
}

window.Nav = Nav;