---
const audiences = [
    {
        title: "Luxushotels & Boutique-Hotels",
        description: "Bieten Sie Ihren Gästen einen nahtlosen Premium-Transferservice direkt vom Check-in.",
        icon: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6",
        color: "amber",
        staggerClass: "sm:mt-8 md:mt-12"
    },
    {
        title: "Unternehmen & Konzerne",
        description: "Sorgen Sie für einen erstklassigen Transport Ihrer Führungskräfte, Kunden und Geschäftspartner.",
        icon: "M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",
        color: "slate",
        staggerClass: ""
    },
    {
        title: "Event- & Hochzeitsagenturen",
        description: "Garantieren Sie einen stilvollen und zuverlässigen Shuttleservice für Ihre exklusiven Veranstaltungen.",
        icon: "M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7",
        color: "rose",
        staggerClass: ""
    },
    {
        title: "Premium-Reiseveranstalter",
        description: "Integrieren Sie einen Chauffeurdienst, der den hohen Erwartungen Ihrer anspruchsvollen Klientel gerecht wird.",
        icon: "M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z M15 13a3 3 0 11-6 0 3 3 0 016 0z",
        color: "sky",
        staggerClass: "sm:mt-8 md:mt-12"
    }
];

// Маппинг цветов для соответствия вашему дизайну
const cardStyles = {
    amber: { border: "border-amber-200", iconBg: "from-amber-50 to-amber-100", iconText: "text-amber-600", hoverBg: "from-amber-50 to-amber-100" },
    slate: { border: "border-slate-200", iconBg: "from-slate-50 to-slate-100", iconText: "text-slate-600", hoverBg: "from-slate-50 to-slate-100" },
    rose: { border: "border-rose-200", iconBg: "from-rose-50 to-rose-100", iconText: "text-rose-600", hoverBg: "from-rose-50 to-rose-100" },
    sky: { border: "border-sky-200", iconBg: "from-sky-50 to-sky-100", iconText: "text-sky-600", hoverBg: "from-sky-50 to-sky-100" }
};
---

<section class="py-24 md:py-40 bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-6 sm:px-8 flex flex-col lg:grid lg:grid-cols-2 gap-20 md:gap-24 items-center">
        <!-- Левая часть: Текст -->
        <div class="text-center lg:text-left space-y-8">
            <h2 class="text-4xl md:text-5xl lg:text-[3.5rem] font-bold text-gray-900 leading-tight tracking-tight">
                Für Partner, die Exzellenz{' '}
                <span class="relative inline-block">
                    <span class="relative z-10">erwarten</span>
                    <span class="absolute bottom-2 left-0 h-3 bg-amber-400/30 -rotate-1 -z-0 w-full"></span>
                </span>
                .
            </h2>

            <p class="text-lg md:text-xl text-gray-600 leading-relaxed max-w-xl mx-auto lg:mx-0">
                Wir arbeiten mit Unternehmen zusammen, die wie wir den höchsten
                Anspruch an Qualität, Diskretion und Service haben.
            </p>

            <div class="relative inline-block">
                <div class="w-24 h-1.5 bg-amber-500 rounded-full mx-auto lg:mx-0" />
                <div class="absolute inset-0 w-24 h-1.5 bg-amber-400/30 rounded-full mt-1" />
            </div>
        </div>

        <!-- Правая часть: Сетка карточек -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 sm:gap-7 w-full max-w-2xl mx-auto">
            {audiences.map((item) => {
                const style = cardStyles[item.color];
                return (
                        <div class={`group relative rounded-xl md:rounded-2xl p-6 md:p-8 flex flex-col items-start border bg-white shadow-sm hover:shadow-md hover:-translate-y-2 transition-all duration-300 ${style.border} ${item.staggerClass}`}>

                            <!-- Эффект при наведении (как в оригинале) -->
                            <div class="absolute inset-0 rounded-xl md:rounded-2xl overflow-hidden -z-10 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <div class={`absolute inset-0 bg-gradient-to-br opacity-30 ${style.hoverBg}`} />
                            </div>

                            <!-- Иконка -->
                            <div class={`w-14 h-14 md:w-16 md:h-16 rounded-xl mb-5 flex items-center justify-center bg-gradient-to-br shadow-inner ${style.iconBg} ${style.iconText}`}>
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-7 md:h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={item.icon} />
                                </svg>
                            </div>

                            <h3 class="font-bold text-lg md:text-xl text-gray-800 mb-3 leading-snug">
                                {item.title}
                            </h3>

                            <p class="text-sm md:text-base text-gray-600 leading-relaxed">
                                {item.description}
                            </p>

                            <!-- Футер карточки -->
                            <div class="mt-5 pt-4 border-t border-gray-100 w-full group-hover:border-transparent transition-colors duration-300">
                            <span class="text-xs font-medium text-gray-400 group-hover:text-gray-500 transition-colors duration-300">
                                Mehr erfahren →
                            </span>
                            </div>
                        </div>
                );
            })}
        </div>
    </div>
</section>