"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/badge";
import Link from "next/link";

const products = [
  { id: "ultra", name: "👑 ULTRA", price: 16000, desc: "1,000 pares de tenis + adicional 500 playeras o 100 pares", color: "bg-yellow-500" },
  { id: "mega", name: "💎 MEGA", price: 9500, desc: "500 pares de tenis + adicional 250 playeras o 50 pares", color: "bg-blue-400" },
  { id: "premium", name: "⭐ PREMIUM", price: 4800, desc: "200 pares de tenis + adicional 100 playeras o 20 pares", color: "bg-purple-500" },
  { id: "basico", name: "🔹 Básico", price: 2900, desc: "100 pares de tenis + adicional 50 playeras o 10 pares", color: "bg-blue-600" },
  { id: "esencia", name: "🟢 ESENCIA", price: 1650, desc: "50 pares de tenis + adicional 25 playeras o 5 pares", color: "bg-green-500" },
  { id: "origen", name: "🔵 ORIGEN", price: 1250, desc: "35 pares de tenis + adicional 18 playeras o 3 pares", color: "bg-blue-700" },
  { id: "raiz", name: "🟡 RAÍZ", price: 950, desc: "25 pares de tenis + adicional 12 playeras o 2 pares", color: "bg-yellow-400" },
  { id: "mini", name: "🔴 Mini", price: 650, desc: "15 pares de tenis + adicional 8 playeras o 1 par", color: "bg-red-500" },
];

export function Catalog() {
  return (
    <section id="catalog" className="py-20 bg-neutral-50">
      <Container>
        <div className="text-center mb-16">
          <Heading>Nuestras Pacas</Heading>
          <p className="text-neutral-600 mt-4">Selecciona el paquete que mejor se adapte a tu inversión</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {products.map((p) => (
            <Card key={p.id} className="flex flex-col h-full hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className={`w-12 h-12 rounded-full ${p.color} mb-4 flex items-center justify-center text-white text-xl`}>
                  {p.name.split(' ')[0]}
                </div>
                <CardTitle>{p.name}</CardTitle>
                <CardDescription className="text-2xl font-bold text-neutral-900">
                  ${p.price.toLocaleString()} USD
                </CardDescription>
              </CardHeader>
              <CardContent className="flex-grow">
                <p className="text-sm text-neutral-600">{p.desc}</p>
              </CardContent>
              <CardFooter>
                <Button className="w-full" asChild>
                  <Link href={`/checkout?plan=${p.id}`}>Comprar Ahora</Link>
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}