"use client";

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

export default function Services() {
    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>
                    <h2 className="text-l text-black font-bold mb-2">
                        Организация &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">
                    <div className="space-y-4">
                        <div className="relative">
                            <Carousel className="w-full">
                                <CarouselContent>
                                    <CarouselItem>
                                        <div className="relative group">
                                            <Image
                                                src="/images/services/service1.png"
                                                alt="Морская рыбалка в Балаклаве"
                                                width={600}
                                                height={500}
                                                className="w-full h-[500px] object-cover rounded-lg"
                                            />
                                        </div>
                                    </CarouselItem>
                                    <CarouselItem>
                                        <div className="relative group">
                                            <Image
                                                src="/images/services/service1.png"
                                                alt="Морская рыбалка в Балаклаве"
                                                width={600}
                                                height={500}
                                                className="w-full h-[500px] object-cover rounded-lg"
                                            />
                                        </div>
                                    </CarouselItem>
                                </CarouselContent>
                                <CarouselPrevious className="left-4" />
                                <CarouselNext className="right-4" />
                            </Carousel>
                            <div className="absolute top-4 right-4 z-10">
                                <Icon
                                    name="like"
                                    size={32}
                                    className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
                                />
                            </div>
                        </div>
                        <div className="px-2">
                            <h3 className="text-l font-semibold text-black">
                                Морская рыбалка в Балаклаве
                            </h3>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <div className="relative">
                            <Carousel className="w-full">
                                <CarouselContent>
                                    <CarouselItem>
                                        <div className="relative group">
                                            <Image
                                                src="/images/services/service2.png"
                                                alt="Прогулка на парусной яхте"
                                                width={600}
                                                height={500}
                                                className="w-full h-[500px] object-cover rounded-lg"
                                            />
                                        </div>
                                    </CarouselItem>
                                </CarouselContent>
                                <CarouselPrevious className="left-4" />
                                <CarouselNext className="right-4" />
                            </Carousel>
                            <div className="absolute top-4 right-4 z-10">
                                <Icon
                                    name="like"
                                    size={32}
                                    className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
                                />
                            </div>
                        </div>
                        <div className="px-2">
                            <h3 className="text-l font-semibold text-black">
                                Прогулка на парусной яхте
                            </h3>
                        </div>
                    </div>
                </div>

                {/* Три маленьких карточки на всю ширину */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div className="space-y-4">
                        <Card className="overflow-hidden">
                            <div className="relative group">
                                <Image
                                    src="/images/services/service3.png"
                                    alt="Вечеринка на яхте"
                                    width={400}
                                    height={200}
                                    className="w-full h-[200px] object-cover"
                                />
                                <div className="absolute top-4 right-4">
                                    <Icon
                                        name="like"
                                        size={32}
                                        className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
                                    />
                                </div>
                            </div>
                        </Card>
                        <div className="px-2">
                            <h3 className="text-l font-semibold text-black">
                                Вечеринка на яхте
                            </h3>
                            <p className="text-sm text-gray-500">Свадьба, девичник/мальчишник, день рождения</p>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <Card className="overflow-hidden">
                            <div className="relative group">
                                <Image
                                    src="/images/services/service4.png"
                                    alt="Корпоративная прогулка на яхте"
                                    width={400}
                                    height={200}
                                    className="w-full h-[200px] object-cover"
                                />
                                <div className="absolute top-4 right-4">
                                    <Icon
                                        name="like"
                                        size={32}
                                        className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
                                    />
                                </div>
                            </div>
                        </Card>
                        <div className="px-2">
                            <h3 className="text-l font-semibold text-black">
                                Корпоративная прогулка на яхте
                            </h3>
                        </div>
                    </div>

                    <div className="space-y-4">
                        <Card className="overflow-hidden">
                            <div className="relative group">
                                <Image
                                    src="/images/services/service5.jpg"
                                    alt="Морские прогулки на яхте"
                                    width={400}
                                    height={200}
                                    className="w-full h-[200px] object-cover"
                                />
                                <div className="absolute top-4 right-4">
                                    <Icon
                                        name="like"
                                        size={32}
                                        className="h-6 w-6 text-white cursor-pointer hover:text-red-500 transition-colors"
                                    />
                                </div>
                            </div>
                        </Card>
                        <div className="px-2">
                            <h3 className="text-l font-semibold text-black">
                                Морская прогулка на яхте или катере
                            </h3>
                        </div>
                    </div>
                </div>

                {/* Кнопка */}
                <div className="text-center">
                    <Button
                        size="lg"
                        className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-3 h-[56px] w-[336px] text-lg font-bold"
                    >
                        Все морские прогулки
                    </Button>
                </div>
            </div>
        </section>
    );
}
