import { redirect } from "next/navigation";
import { headers } from "next/headers";
import Link from "next/link";
import { auth } from "@/lib/auth/server";
import { getMessages } from "@/lib/i18n/server";
import { getEffectiveMarketingLocale } from "@/lib/marketing-locale";
import { isSignupsDisabled } from "@/lib/site-settings";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Utensils, Wand2 } from "lucide-react";

const HIGHLIGHTS = [
  { icon: Sparkles, key: "ai" },
  { icon: MessageCircle, key: "assistant" },
  { icon: Calendar, key: "mealPlan" },
  { icon: Package, key: "pantry" },
  { icon: Utensils, key: "cookMode" },
  { icon: Wand2, key: "variations" },
  { icon: Users, key: "social" },
  { icon: ChefHat, key: "batchCook" },
] as const;

export default async function MarketingHomePage() {
  const session = await auth.api.getSession({ headers: await headers() });
  if (session) redirect("/recipes");

  const [locale, signupsDisabled] = await Promise.all([getEffectiveMarketingLocale(), isSignupsDisabled()]);
  const m = getMessages(locale);
  const t = m.marketing.home;
  const ctaLabel = signupsDisabled ? m.marketing.nav.signupClosed : t.ctaPrimary;

  return (
    <div>
      <section className="container mx-auto px-4 py-20 sm:py-28 text-center space-y-6">
        <h1 className="text-4xl sm:text-5xl font-bold tracking-tight max-w-2xl mx-auto">
          {t.heroTitle}
        </h1>
        <p className="text-lg text-muted-foreground max-w-xl mx-auto">
          {t.heroSubtitle}
        </p>
        <div className="flex items-center justify-center gap-3 pt-2">
          <Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
            {ctaLabel}
          </Link>
          <Link href="/features" className={cn(buttonVariants({ variant: "outline", size: "lg" }))}>
            {t.ctaSecondary}
          </Link>
        </div>
      </section>

      <section className="container mx-auto px-4 py-16 border-t">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {HIGHLIGHTS.map(({ icon: Icon, key }) => (
            <div key={key} className="rounded-xl border bg-card p-6 space-y-3">
              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <Icon className="h-5 w-5 text-primary" />
              </div>
              <h3 className="font-semibold">{t.highlights[key].title}</h3>
              <p className="text-sm text-muted-foreground leading-relaxed">{t.highlights[key].description}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="container mx-auto px-4 py-16 border-t text-center space-y-4">
        <h2 className="text-2xl font-semibold">{t.bottomCtaTitle}</h2>
        <p className="text-muted-foreground max-w-lg mx-auto">{t.bottomCtaSubtitle}</p>
        <Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
          {ctaLabel}
        </Link>
      </section>
    </div>
  );
}