import { Logo, Arrow } from "../lib/primitives.jsx";

export default function Nav({ scrolled }) {
  return (
    <nav
      className={[
        "sticky top-0 z-50 backdrop-blur-md transition-colors",
        "bg-[oklch(0.155_0.008_60/0.55)]",
        scrolled ? "border-b border-hairline" : "border-b border-transparent",
      ].join(" ")}
    >
      <div className="wrap flex items-center justify-between h-16">
        <Logo href="/" />
        <div className="hidden md:flex gap-7 text-fg-mute text-[14px]">
          <a href="#how" className="hover:text-fg">How it works</a>
          <a href="#" className="hover:text-fg">Templates</a>
          <a href="#" className="hover:text-fg">Pricing</a>
          <a href="#" className="hover:text-fg">Stories</a>
        </div>
        <div className="flex items-center gap-2.5">
          <a href="#" className="btn btn-ghost h-9 px-4 text-sm hidden sm:inline-flex">Sign in</a>
          <a href="/beta.html" className="btn btn-primary h-9 px-4 text-sm">
            Request invite <Arrow size={12} />
          </a>
        </div>
      </div>
    </nav>
  );
}
