import { Card, CardContent, CardHeader } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import Image from "next/image";
import Icon from "@/components/ui/icon";

const yachts = [
    {
        name: "Яхта",
        length: "12 метров",
        price: "от 12 500 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "Быстрая бронь",
        badgeIcon: "⚡",
    },
    {
        name: "Яхта",
        length: "14 метров",
        price: "от 26 400 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "22 метра",
        price: "от 48 000 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "13.6 метров",
        price: "от 17 400 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "13 метров",
        price: "от 14 400 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "12 метров",
        price: "от 12 480 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "14 метров",
        price: "от 18 000 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "19 метров",
        price: "от 25 920 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "20 метров",
        price: "от 32 400 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "8 метров",
        price: "от 9 960 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "13 метров",
        price: "от 18 000 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
    {
        name: "Яхта",
        length: "11.58 метров",
        price: "от 14 400 Р / час",
        feet: "7 Футов",
        img: "/images/yacht.jpg",
        badge: "По запросу",
        badgeIcon: "🔄",
    },
];

export default function YachtGrid() {
    return (
        <div className="min-h-screen text-white">
            <div className="container max-w-6xl mx-auto px-4 py-12">
                {/* Header Section */}
                <div className="mb-12">
                    <h1 className="text-4xl font-bold mb-4 text-black">
                        Яхты в аренду
                    </h1>
                    <h2 className="text-xl text-gray-600 mb-6">
                        Онлайн бронирование яхт
                    </h2>
                    <p className="text-gray-700 max-w-3xl leading-relaxed">
                        Каталог лучших яхт Балаклавы разных ценовых сегментах.
                        Проверенные лодки с лицензией на перевозки, опытные
                        капитаны. Выбирайте удобную дату, время и бронируйте.
                    </p>
                </div>

                {/* Yacht Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
                    {yachts.map((yacht, idx) => (
                        <Card
                            key={idx}
                            className="overflow-hidden bg-white text-gray-900 shadow-lg"
                        >
                            <CardHeader className="p-0 relative">
                                <div className="relative">
                                    <Image
                                        src={yacht.img}
                                        alt={yacht.name}
                                        width={400}
                                        height={250}
                                        className="w-full h-48 object-cover"
                                    />
                                    {/* Badge Overlay */}
                                    <div className="absolute top-3 left-3">
                                        <div className="flex items-center justify-center bg-black bg-opacity-10 text-white px-3 py-1 rounded-lg text-sm flex items-center gap-1">
                                            <Icon
                                                size={16}
                                                name={
                                                    idx === 0
                                                        ? "logo"
                                                        : "restart"
                                                }
                                            />
                                            <span>{yacht.badge}</span>
                                        </div>
                                    </div>
                                </div>
                            </CardHeader>
                            <CardContent className="p-4">
                                <div className="flex justify-between items-start mb-2">
                                    <h3 className="font-bold text-lg">
                                        {yacht.name}
                                    </h3>
                                    <div className="text-right">
                                        <p className="font-bold text-lg">
                                            {yacht.price}
                                        </p>
                                    </div>
                                </div>
                                <div className="flex items-center justify-between text-gray-600">
                                    <div className="flex items-center gap-2">
                                        <Icon
                                            size={16}
                                            name="width"
                                        />
                                        <span>{yacht.length}</span>
                                    </div>
                                    <div className="flex items-center gap-2">
                                    <Icon
                                            size={16}
                                            name="anchor"
                                        />
                                        <span>{yacht.feet}</span>
                                    </div>
                                </div>
                            </CardContent>
                        </Card>
                    ))}
                </div>

                {/* Call to Action Button */}
                <div className="text-center">
                    <Button
                        size="lg"
                        className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 text-lg font-medium"
                    >
                        Каталог яхт
                    </Button>
                </div>
            </div>
        </div>
    );
}
