import Link from "next/link";
import { headers } from "next/headers";
import { ChefHat } from "lucide-react";
import { auth } from "@/lib/auth/server";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { getMessages } from "@/lib/i18n/server";

const LINKS = [
  { href: "/features", key: "features" },
  { href: "/about", key: "about" },
] as const;

export async function MarketingNav() {
  const session = await auth.api.getSession({ headers: await headers() }).catch(() => null);
  const m = getMessages((session?.user as { locale?: string } | undefined)?.locale);

  return (
    <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-14 items-center gap-6 px-4">
        <Link href="/" className="flex items-center gap-2 font-semibold">
          <ChefHat className="h-5 w-5" />
          <span>Epicure</span>
        </Link>
        <nav className="hidden md:flex items-center gap-1 text-sm text-muted-foreground">
          {LINKS.map(({ href, key }) => (
            <Link key={href} href={href} className="px-3 py-2 rounded-md hover:text-foreground hover:bg-accent transition-colors">
              {m.marketing.nav[key]}
            </Link>
          ))}
        </nav>
        <div className="ml-auto flex items-center gap-2">
          {session ? (
            <Link href="/recipes" className={cn(buttonVariants({ size: "sm" }))}>
              {m.marketing.nav.openApp}
            </Link>
          ) : (
            <>
              <Link href="/login" className={cn(buttonVariants({ variant: "ghost", size: "sm" }))}>
                {m.marketing.nav.login}
              </Link>
              <Link href="/signup" className={cn(buttonVariants({ size: "sm" }))}>
                {m.marketing.nav.signup}
              </Link>
            </>
          )}
        </div>
      </div>
    </header>
  );
}