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

const products = [
  {
    id: 1,
    name: "Gourmet Whole Bean",
    category: "Coffee",
    price: "$18.99",
    image: "https://images.unsplash.com/photo-1559056199-641a0ac8b55e?q=80&w=2070&auto=format&fit=crop",
    tag: "Best Seller"
  },
  {
    id: 2,
    name: "Biodegradable Pods",
    category: "Eco-Friendly",
    price: "$14.50",
    image: "https://images.unsplash.com/photo-1514432324607-a09d9b4aefdd?q=80&w=1974&auto=format&fit=crop",
    tag: "Sustainable"
  },
  {
    id: 3,
    name: "Coffee Cookies",
    category: "Snacks",
    price: "$8.99",
    image: "https://images.unsplash.com/photo-1499636136210-6f4ee915583e?q=80&w=1964&auto=format&fit=crop",
    tag: "Artisan"
  },
  {
    id: 4,
    name: "Quindío Gift Set",
    category: "Bundles",
    price: "$45.00",
    image: "https://images.unsplash.com/photo-1544787210-2827443cb69b?q=80&w=2022&auto=format&fit=crop",
    tag: "Gift Idea"
  }
];

export function ProductGrid() {
  return (
    <section id="products" className="py-24 bg-white">
      <Container>
        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
          <div>
            <Badge className="bg-amber-100 text-amber-800 border-none mb-4">Our Collection</Badge>
            <Heading>Premium Colombian Selection</Heading>
          </div>
          <Button variant="link" className="text-amber-800 font-semibold">View All Products →</Button>
        </div>
        
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {products.map((product) => (
            <Card key={product.id} className="group border-none shadow-sm hover:shadow-md transition-all">
              <CardHeader className="p-0 overflow-hidden rounded-t-xl">
                <div className="relative h-64 w-full">
                  <Image 
                    src={product.image} 
                    alt={product.name} 
                    fill 
                    className="object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute top-3 left-3">
                    <Badge className="bg-white/90 text-stone-900 backdrop-blur-sm border-none">
                      {product.tag}
                    </Badge>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="pt-6">
                <p className="text-xs text-stone-500 uppercase tracking-widest mb-1">{product.category}</p>
                <CardTitle className="text-xl text-stone-900">{product.name}</CardTitle>
                <p className="text-lg font-bold text-amber-800 mt-2">{product.price}</p>
              </CardContent>
              <CardFooter className="pb-6">
                <Button className="w-full bg-stone-900 hover:bg-stone-800 text-white">
                  Add to Cart
                </Button>
              </CardFooter>
            </Card>
          ))}
        </div>
      </Container>
    </section>
  );
}