import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import Image from "next/image"

const products = [
    {
        id: 1,
        name: "Ev Tipi Çelik Kasa",
        image: "/images/safe-1.jpg",
        category: "Ev",
    },
    {
        id: 2,
        name: "Ofis Tipi Yanmaz Kasa",
        image: "/images/safe-2.jpg",
        category: "Ofis",
    },
    {
        id: 3,
        name: "Otel Odası Kasası",
        image: "/images/safe-3.jpg",
        category: "Otel",
    },
    {
        id: 4,
        name: "Silah Kasası (Tüfek)",
        image: "/images/safe-4.jpg",
        category: "Özel",
    },
    {
        id: 5,
        name: "Kuyumcu Kasası",
        image: "/images/safe-5.jpg",
        category: "Ticari",
    },
    {
        id: 6,
        name: "Duvar İçi Gizli Kasa",
        image: "/images/safe-6.jpg",
        category: "Ev",
    },
]

export default function ProductsPage() {
    return (
        <div className="container py-12 md:py-24">
            <div className="flex flex-col items-center mb-12 text-center">
                <h1 className="text-4xl font-bold tracking-tight mb-4 font-outfit">Ürün Koleksiyonumuz</h1>
                <p className="text-muted-foreground max-w-2xl">
                    Güvenliğiniz için en son teknoloji ile üretilmiş, sertifikalı çelik kasa çözümlerimizi inceleyin.
                </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                {products.map((product) => (
                    <Card key={product.id} className="overflow-hidden border-0 shadow-md hover:shadow-xl transition-all duration-300">
                        <div className="aspect-[4/5] relative bg-slate-100 dark:bg-slate-800">
                            {/* Placeholder for real images */}
                            <div className="absolute inset-0 flex items-center justify-center text-slate-400">
                                <span className="text-sm">Görsel: {product.name}</span>
                            </div>
                        </div>
                        <CardHeader className="p-4">
                            <div className="flex justify-between items-start">
                                <div>
                                    <span className="text-xs font-medium text-slate-500 uppercase tracking-wider">{product.category}</span>
                                    <CardTitle className="text-lg mt-1">{product.name}</CardTitle>
                                </div>
                            </div>
                        </CardHeader>
                        <CardFooter className="p-4 pt-0">
                            <Button className="w-full">Detayları İncele</Button>
                        </CardFooter>
                    </Card>
                ))}
            </div>
        </div>
    )
}