import type { Metadata } from "next";
import Link from "next/link";
import { Sparkles, Calendar, Package, MessageCircle, Users, ChefHat, Camera, ListChecks } from "lucide-react";
import { getMessages } from "@/lib/i18n/server";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Features — Epicure",
  description: "AI recipe generation, meal planning, pantry tracking, and a cooking assistant that can act on your behalf.",
};

const FEATURES = [
  { icon: Sparkles, key: "ai" },
  { icon: Camera, key: "photoImport" },
  { icon: MessageCircle, key: "assistant" },
  { icon: Calendar, key: "mealPlan" },
  { icon: Package, key: "pantry" },
  { icon: ListChecks, key: "shoppingList" },
  { icon: Users, key: "social" },
  { icon: ChefHat, key: "batchCook" },
] as const;

export default function FeaturesPage() {
  const m = getMessages(undefined);
  const t = m.marketing.features;

  return (
    <div className="container mx-auto px-4 py-16 space-y-12">
      <div className="text-center space-y-4 max-w-2xl mx-auto">
        <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">{t.title}</h1>
        <p className="text-lg text-muted-foreground">{t.subtitle}</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
        {FEATURES.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 text-lg">{t.items[key].title}</h3>
            <p className="text-sm text-muted-foreground leading-relaxed">{t.items[key].description}</p>
          </div>
        ))}
      </div>

      <div className="text-center pt-4">
        <Link href="/signup" className={cn(buttonVariants({ size: "lg" }))}>
          {t.cta}
        </Link>
      </div>
    </div>
  );
}