// Nav

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, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const links = [
    { href: "#home", label: "Home" },
    { href: "#build", label: "What We Build" },
    { href: "#process", label: "How We Work" },
    { href: "#different", label: "Why We're Different" },
    { href: "#industries", label: "Industries" },
    { href: "#faq", label: "FAQ" },
  ];

  return (
    <header
      style={{
        position: "fixed",
        top: 16,
        left: 0,
        right: 0,
        zIndex: 50,
        display: "flex",
        justifyContent: "center",
        padding: "0 20px",
        transition: "top 0.4s cubic-bezier(0.2,0.8,0.2,1)",
      }}
    >
      <nav
        style={{
          width: "100%",
          maxWidth: 1280,
          height: 64,
          padding: "0 12px 0 20px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          background: scrolled ? "rgba(251,250,246,0.85)" : "rgba(251,250,246,0.55)",
          border: "1px solid var(--line)",
          borderRadius: 999,
          backdropFilter: "blur(18px) saturate(140%)",
          WebkitBackdropFilter: "blur(18px) saturate(140%)",
          boxShadow: scrolled ? "0 8px 30px rgba(10,10,10,0.06)" : "0 2px 12px rgba(10,10,10,0.03)",
          transition: "background 0.4s, box-shadow 0.4s",
        }}
      >
        <a href="#home" aria-label="Home">
          <Logo />
        </a>
        <ul
          style={{
            display: "flex",
            gap: 4,
            listStyle: "none",
            margin: 0,
            padding: 0,
            alignItems: "center",
          }}
          className="nav-links"
        >
          {links.map((l) => (
            <li key={l.href}>
              <a
                href={l.href}
                style={{
                  display: "inline-flex",
                  padding: "8px 14px",
                  borderRadius: 999,
                  fontSize: 13.5,
                  color: "var(--ink-2)",
                  fontWeight: 450,
                  letterSpacing: "-0.005em",
                  transition: "background 0.2s, color 0.2s",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.background = "rgba(0,0,0,0.04)")}
                onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <a href="#contact" className="btn btn-primary" style={{ height: 44, fontSize: 13.5, padding: "0 8px 0 18px" }}>
          Contact
          <span className="arrow"><ArrowUR /></span>
        </a>
      </nav>
      <style>{`
        @media (max-width: 980px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </header>
  );
}

window.Nav = Nav;