import Link from "next/link";
import { LeafMark } from "@/components/ui/Logo";

/**
 * Minimal cinematic nav — two destinations, two actions. Nothing else.
 */
export function Navbar() {
  return (
    <header className="fixed inset-x-0 top-0 z-40">
      <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4">
        <Link href="/" className="flex items-center gap-2.5 font-display text-2xl text-paper">
          <LeafMark size={26} /> Aartha
        </Link>
        <nav className="hidden items-center gap-1 rounded-full bg-white/[.07] p-1 font-mono text-[11px] uppercase tracking-[.15em] text-paper/75 backdrop-blur-md md:flex">
          <a href="#product" className="rounded-full px-4 py-2 transition hover:bg-white/10 hover:text-paper">Product</a>
          <a href="#pricing" className="rounded-full px-4 py-2 transition hover:bg-white/10 hover:text-paper">Pricing</a>
          <a href="#faq" className="rounded-full px-4 py-2 transition hover:bg-white/10 hover:text-paper">FAQ</a>
        </nav>
        <div className="flex items-center gap-2">
          <Link href="/dashboard" className="hidden rounded-full px-4 py-2 font-mono text-[11px] uppercase tracking-[.15em] text-paper/75 transition hover:text-paper sm:block">
            Log in
          </Link>
          <Link href="/dashboard" className="rounded-full bg-paper px-4 py-2 font-mono text-[11px] font-bold uppercase tracking-[.15em] text-ink transition hover:bg-mint">
            Get started →
          </Link>
        </div>
      </div>
    </header>
  );
}