import Image from "next/image";
import { Icon } from "../../components/ui/icon";

export default function Advantages() {
    return (
        <section className="container max-w-6xl mx-auto px-4 mt-8 md:mt-12">
            {/* Заголовок секции */}
            <div className="text-center mb-12 max-w-[600px] mx-auto">
                <h2 className="text-3xl md:text-4xl font-bold mb-6">
                    Аренда яхт и организация морских прогулок в Балаклаве
                </h2>
                <p className="text-lg">
                    Выбирайте яхту и наслаждайтесь, об остальном позаботились мы
                </p>
            </div>

            <div className="flex flex-col justify-between lg:flex-row gap-12">
                {/* Левая колонка с тремя секциями */}
                <div className="lg:w-2/5 space-y-9">
                    {/* Секция 01 */}
                    <div>
                        <div className="w-12 h-8 border border-brand rounded-full flex items-center justify-center mb-4">
                            <span className="text-m">01</span>
                        </div>
                        <h3 className="text-xl font-bold mb-5">
                            Каталог лучших яхт Балаклавы в разных ценовых
                            сегментах
                        </h3>
                        <p className="text-gray-600 leading-relaxed">
                            Проверенные лодки с лицензией на перевозки, надежные
                            судовладельцы, опытные капитаны. В нашем каталоге вы
                            найдете катера, парусники, катамараны с фото,
                            подробным описанием и диапазоном цен.
                        </p>
                    </div>

                    {/* Секция 02 */}
                    <div>
                        <div className="w-12 h-8 border border-brand rounded-full flex items-center justify-center mb-4">
                            <span className="text-m">02</span>
                        </div>
                        <h3 className="text-xl font-bold mb-5">
                            Удобное самостоятельное бронирование яхты в аренду
                        </h3>
                        <p className="text-gray-600 leading-relaxed">
                            Вы можете самостоятельно выбрать яхту на ваш вкус,
                            взять любимую еду и напитки, поставить свой
                            плей-лист. На борту есть все для комфортного
                            размещения. Выбирайте удобную дату, время и
                            бронируйте.
                        </p>
                    </div>

                    {/* Секция 03 */}
                    <div>
                        <div className="w-12 h-8 border border-brand rounded-full flex items-center justify-center mb-4">
                            <span className="text-m">03</span>
                        </div>
                        <h3 className="text-xl font-bold">
                            Организация морских прогулок
                        </h3>
                        <h3 className="text-xl font-bold mb-5">
                            под ключ
                        </h3>
                    </div>
                </div>

                {/* Правая колонка с изображением и оверлейными карточками */}
                <div className="relative hidden lg:block">
                    <div className="relative">
                        <Image
                            src="/images/advantage.png"
                            alt="Яхта в Балаклаве"
                            width={460}
                            height={620}
                            className="rounded-2xl object-cover"
                        />

                        {/* Оверлейные карточки */}
                        <div className="absolute top-16 left-[-100px] border  bg-white rounded-full w-[334px] py-2 px-3">
                            <div className="flex items-center gap-3">
                                <Image
                                    src="/images/another-yacht.jpg"
                                    alt="Яхта"
                                    width={62}
                                    height={62}
                                    className="rounded-full h-[62px] w-[62px] object-fill"
                                />
                                <div>
                                    <p className="font-medium text-gray-800">
                                        Яхта
                                    </p>
                                    <div className="flex items-center gap-1">
                                        {[...Array(5)].map((_, i) => (
                                            <Icon
                                                key={i}
                                                name="star"
                                                size={10}
                                                className="text-yellow-400"
                                            />
                                        ))}
                                        <span className="text-sm text-gray-600">
                                            124
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="absolute top-1/2 right-[-100px] border  bg-white rounded-full w-[334px] py-2 px-3 hidden xl:block">
                            <div className="flex items-center gap-3">
                                <Image
                                    src="/images/another-yacht.jpg"
                                    alt="Яхта"
                                    width={62}
                                    height={62}
                                    className="rounded-full h-[62px] w-[62px] object-fill"
                                />
                                <div>
                                    <p className="font-medium text-gray-800">
                                        Яхта
                                    </p>
                                    <div className="flex items-center gap-1">
                                        {[...Array(5)].map((_, i) => (
                                            <Icon
                                                key={i}
                                                name="star"
                                                size={10}
                                                className="text-yellow-400"
                                            />
                                        ))}
                                        <span className="text-sm text-gray-600">
                                            124
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div className="absolute bottom-8 left-8 border bg-white rounded-full w-[334px] py-2 px-3">
                            <div className="flex items-center gap-3">
                                <Image
                                    src="/images/another-yacht.jpg"
                                    alt="Яхта"
                                    width={62}
                                    height={62}
                                    className="rounded-full h-[62px] w-[62px] object-fill"
                                />
                                <div>
                                    <p className="font-medium text-gray-800">
                                        Яхта
                                    </p>
                                    <div className="flex items-center gap-1">
                                        {[...Array(5)].map((_, i) => (
                                            <Icon
                                                key={i}
                                                name="star"
                                                size={10}
                                                className="text-yellow-400"
                                            />
                                        ))}
                                        <span className="text-sm text-gray-600">
                                            124
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p className="text-gray-600 leading-relaxed">
                Вы можете связаться с нами, и наш менеджер поможет вам подобрать
                яхту, а также организовать праздник на борту: шампанское и
                фрукты, кейтеринг по меню, музыканты и DJ, украшение яхты,
                прогулка в подарок.
            </p>
        </section>
    );
}
