"use client";

import Image from "next/image";
import { Heart } from "lucide-react";
import {
    Carousel,
    CarouselContent,
    CarouselItem,
    CarouselNext,
    CarouselPrevious,
} from "@/components/ui/carousel";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";

export default function Services() {
    return (
        <section className="bg-background py-12">
            <div className="container max-w-6xl mx-auto px-4">
                <div className="mb-8">
                    <h1 className="text-4xl font-bold mb-4 text-black">
                        Морские прогулки
                    </h1>
                    <h2 className="text-xl text-gray-600 mb-6">
                        Организация &quot;под ключ&quot;
                    </h2>
                    <p className="text-gray-700 max-w-3xl leading-relaxed">
                        Мы поможем выбрать яхту под ваш запрос. Организуем
                        праздник на борту: шампанское и фрукты, кейтеринг по
                        меню, музыканты и DJ, украшение яхты, прогулка в
                        подарок.
                    </p>
                </div>

                {/* Два высоких карусели в одном ряду */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
                    <Carousel className="w-full">
                        <CarouselContent>
                            <CarouselItem>
                                <div className="relative group">
                                    <Image
                                        src="/images/rod.png"
                                        alt="Морская рыбалка в Балаклаве"
                                        width={600}
                                        height={500}
                                        className="w-full h-[500px] object-cover rounded-lg"
                                    />
                                    <div className="absolute top-4 right-4">
                                        <Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
                                    </div>
                                    <div className="absolute bottom-4 left-4 text-white">
                                        <h3 className="text-xl font-semibold">
                                            Морская рыбалка в Балаклаве
                                        </h3>
                                    </div>
                                </div>
                            </CarouselItem>
                        </CarouselContent>
                        <CarouselPrevious className="left-4" />
                        <CarouselNext className="right-4" />
                    </Carousel>

                    <Carousel className="w-full">
                        <CarouselContent>
                            <CarouselItem>
                                <div className="relative group">
                                    <Image
                                        src="/images/rod.png"
                                        alt="Прогулка на парусной яхте"
                                        width={600}
                                        height={500}
                                        className="w-full h-[500px] object-cover rounded-lg"
                                    />
                                    <div className="absolute top-4 right-4">
                                        <Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
                                    </div>
                                    <div className="absolute bottom-4 left-4 text-white">
                                        <h3 className="text-xl font-semibold">
                                            Прогулка на парусной яхте
                                        </h3>
                                    </div>
                                </div>
                            </CarouselItem>
                        </CarouselContent>
                        <CarouselPrevious className="left-4" />
                        <CarouselNext className="right-4" />
                    </Carousel>
                </div>

                {/* Три маленьких карточки на всю ширину */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <Card className="overflow-hidden">
                        <div className="relative group">
                            <Image
                                src="/images/rod.png"
                                alt="Вечеринка на яхте"
                                width={400}
                                height={300}
                                className="w-full h-[300px] object-cover"
                            />
                            <div className="absolute top-4 right-4">
                                <Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
                            </div>
                            <div className="absolute bottom-4 left-4 text-white">
                                <h3 className="text-lg font-semibold">
                                    Вечеринка на яхте
                                </h3>
                            </div>
                        </div>
                    </Card>

                    <Card className="overflow-hidden">
                        <div className="relative group">
                            <Image
                                src="/images/rod.png"
                                alt="Корпоративная прогулка на яхте"
                                width={400}
                                height={300}
                                className="w-full h-[300px] object-cover"
                            />
                            <div className="absolute top-4 right-4">
                                <Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
                            </div>
                            <div className="absolute bottom-4 left-4 text-white">
                                <h3 className="text-lg font-semibold">
                                    Корпоративная прогулка на яхте
                                </h3>
                            </div>
                        </div>
                    </Card>

                    <Card className="overflow-hidden">
                        <div className="relative group">
                            <Image
                                src="/images/rod.png"
                                alt="Морские прогулки на яхте"
                                width={400}
                                height={300}
                                className="w-full h-[300px] object-cover"
                            />
                            <div className="absolute top-4 right-4">
                                <Heart className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors" />
                            </div>
                            <div className="absolute bottom-4 left-4 text-white">
                                <h3 className="text-lg font-semibold">
                                    Морские прогулки на яхте в Бал...
                                </h3>
                            </div>
                        </div>
                    </Card>
                </div>

                {/* Кнопка */}
                <div className="text-center">
                    <Button size="lg" className="px-8 py-3">
                        Все морские прогулки
                    </Button>
                </div>
            </div>
        </section>
    );
}
