"use client";

import Image from "next/image";
import { Card } from "@/components/ui/card";

// Массив с данными о карточках
const sportCards = [
    {
        id: 1,
        image: "/images/sport/sport1.jpg",
        alt: "Вейксерф",
        title: "Вейксерф",
    },
    {
        id: 2,
        image: "/images/sport/sport2.jpg",
        alt: "Вейкборд",
        title: "Вейкборд",
    },
    {
        id: 3,
        image: "/images/sport/sport3.jpg",
        alt: "Гидроциклы",
        title: "Гидроциклы",
    },
    {
        id: 4,
        image: "/images/sport/sport4.png",
        alt: "Дайвинг",
        title: "Дайвинг",
    },
    {
        id: 5,
        image: "/images/sport/sport5.jpg",
        alt: "Сапы",
        title: "Сапы",
    },
    {
        id: 6,
        image: "/images/sport/sport6.png",
        alt: "Каяки",
        title: "Каяки",
    },
];

export default function Sport() {
    return (
        <section className="bg-background mt-8 md:mt-12">
            <div className="container max-w-6xl mx-auto px-4">
                <div className="mb-8">
                    <h1 className="text-3xl md:text-4xl font-bold mb-4 text-black">
                        Активный отдых и спорт
                    </h1>
                    <p className="text-gray-700 leading-relaxed">
                        Идеальное сочетание драйва, свободы и природы.
                    </p>
                    <p className="text-gray-700 leading-relaxed">
                        Попробуйте вейксерф, вейкборд, гидрофоил, дайвинг, сапы
                        и каяки — каждый из них подарит уникальные впечатления и
                        сделает вашу морскую прогулку по-настоящему
                        незабываемой.
                    </p>
                </div>

                {/* Три маленьких карточки на всю ширину */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    {sportCards.map((card) => (
                        <div key={card.id} className="space-y-4">
                            <Card className="overflow-hidden">
                                <div className="relative group">
                                    <Image
                                        src={card.image}
                                        alt={card.alt}
                                        width={400}
                                        height={200}
                                        className="w-full h-[200px] object-cover"
                                    />
                                </div>
                            </Card>
                            <div className="px-2">
                                <h3 className="text-l font-semibold text-black">
                                    {card.title}
                                </h3>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}
