function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const items = [
    { label: "Services", href: "#services" },
    { label: "Approach", href: "#about" },
    { label: "Packages", href: "#pricing" },
    { label: "Writing", href: "#articles" },
    { label: "FAQs", href: "#faq" },
  ];
  return (
    <nav style={{
      position: "sticky",
      top: 0,
      zIndex: 50,
      background: scrolled ? "rgba(250,248,245,0.92)" : "transparent",
      backdropFilter: scrolled ? "saturate(140%) blur(8px)" : "none",
      WebkitBackdropFilter: scrolled ? "saturate(140%) blur(8px)" : "none",
      borderBottom: scrolled ? "1px solid var(--ink-15)" : "1px solid transparent",
      transition: "background .22s ease, border-color .22s ease",
    }}>
      <div className="shell" style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        height: 72,
      }}>
        <a href="#top"><Logo /></a>
        <div style={{ display: "flex", alignItems: "center", gap: 36 }}>
          <ul className="nav-links" style={{
            display: "flex",
            alignItems: "center",
            gap: 28,
            listStyle: "none",
            margin: 0,
            padding: 0,
          }}>
            {items.map(it => (
              <li key={it.label}>
                <a href={it.href} style={{
                  fontSize: 14,
                  color: "var(--charcoal)",
                  position: "relative",
                  padding: "4px 0",
                }}
                onMouseEnter={e => e.currentTarget.style.color = "var(--gold)"}
                onMouseLeave={e => e.currentTarget.style.color = "var(--charcoal)"}
                >{it.label}</a>
              </li>
            ))}
          </ul>
          <a href="#contact" className="btn btn-primary nav-cta-compact">
            Book a consultation <ArrowRight />
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;