---
import type { PriceService, ServicesSectionProps } from '@/types/globalInterfaces';

const { services = [], title = "Unsere Fahrzeuge für jeden Anlass" } = Astro.props as ServicesSectionProps;
---

<!-- Services -->
<section>
    <h2 class="text-2xl sm:text-3xl font-semibold text-center text-gray-800 mb-8 opacity-0 animate-fadeInUp delay-200">
        {title}
    </h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <!-- Уменьшенный отступ между карточками -->
        {services.map((service, index) => (
                <div
                        class="service-card bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 border border-gray-100 opacity-0 animate-cardEntry"
                        style={`animation-delay: ${index * 0.1}s`}
                >
                    <div class="p-6">
                        <div class="flex items-start gap-4 mb-3">
                            <div class="flex-shrink-0 bg-blue-50 p-3 rounded-full text-blue-600 text-xl">
                                {service.icon}
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800">
                                    {service.title}
                                </h3>
                                <p class="text-gray-600 mt-1">
                                    {service.description}
                                </p>
                            </div>
                        </div>
                        <ul class="space-y-2 mt-3 pl-1">
                            {service.features?.map((feature, i) => (
                                    <li
                                            class="flex items-center text-sm text-gray-700 opacity-0 animate-featureEntry"
                                            style={`animation-delay: ${0.2 + (i * 0.1)}s`}
                                    >
                                        <span class="w-1.5 h-1.5 bg-blue-600 rounded-full mr-2 flex-shrink-0"></span>
                                        {feature}
                                    </li>
                            ))}
                        </ul>
                    </div>
                </div>
        ))}
    </div>
</section>

<style>
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes cardEntry {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes featureEntry {
        from {
            opacity: 0;
            transform: translateX(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .animate-fadeInUp {
        animation: fadeInUp 0.8s ease-out forwards;
    }

    .animate-cardEntry {
        animation: cardEntry 0.6s ease-out forwards;
    }

    .animate-featureEntry {
        animation: featureEntry 0.4s ease-out forwards;
    }

    .delay-200 {
        animation-delay: 0.2s;
    }

    .service-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    }
</style>