---
import { authService } from '@/lib/authService';

// Получаем основные особенности VIP-сервиса из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
const features = await pb.collection('vip_core_features').getFullList({
    sort: 'order',
    filter: 'is_active = true'
});

// Преобразуем данные под нужный формат
const coreFeatures = features.map(feature => ({
    id: feature.feature_id,
    icon: feature.icon,
    title: feature.title,
    description: feature.description,
    imageUrl: `${import.meta.env.POCKETBASE_URL}/api/files/${feature.collectionId}/${feature.id}/${feature.image}`
}));

// Если нет данных из API, используем заглушку
const displayFeatures = coreFeatures.length > 0 ? coreFeatures : [
    {
        id: 'diskretion',
        icon: '🔒',
        title: 'Absolute Diskretion & Privatsphäre',
        description: 'Unsere professionellen Chauffeure sind zu höchster Vertraulichkeit verpflichtet. Getönte Scheiben und eine umsichtige Fahrweise garantieren Ihre Privatsphäre.',
        imageUrl: '/images/services/privacy.avif',
    },
    {
        id: 'concierge',
        icon: '⭐',
        title: 'Maßgeschneiderter Concierge-Service',
        description: 'Ihr Chauffeur ist mehr als nur ein Fahrer. Benötigen Sie eine Tischreservierung oder kurzfristige Planänderungen? Wir kümmern uns darum.',
        imageUrl: '/images/services/concierge.avif',
    },
    {
        id: '24h-service',
        icon: '⏰',
        title: '24/7 Erreichbarkeit & Service',
        description: 'Unser Team und unsere Chauffeure stehen Ihnen rund um die Uhr zur Verfügung. Egal ob früher Morgen oder späte Nacht – Ihr exklusiver Fahrservice ist nur einen Anruf entfernt.',
        imageUrl: '/images/services/24h-service.avif',
    },
];
---

<section class="py-20 md:py-28 bg-gradient-to-b from-white to-amber-50">
    <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-20 opacity-0 animate-fadeInUp">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 opacity-0 animate-fadeInUp delay-200">
                Ein Service, der über das Fahren hinausgeht
            </h2>

            <p class="mt-3 max-w-3xl mx-auto text-lg text-gray-600 leading-relaxed opacity-0 animate-fadeInUp delay-400">
                Wir verstehen VIP-Service als ein ganzheitliches Erlebnis, das auf
                Ihre individuellen Bedürfnisse zugeschnitten ist.
            </p>
        </div>

        <div class="space-y-24">
            {displayFeatures.map((feature, index) => (
                    <div
                            id={feature.id}
                            class={`feature-item scroll-mt-28 flex flex-col md:flex-row items-center gap-12 lg:gap-16 opacity-0 animate-featureItem ${
                                index % 2 !== 0 ? 'md:flex-row-reverse' : ''
                            }`}
                            style={`animation-delay: ${index * 0.1}s`}
                    >
                        <!-- Image Block -->
                        <div class="w-full md:w-1/2 opacity-0 animate-imageEntry">
                            <div class="relative rounded-2xl overflow-hidden shadow-xl">
                                <img
                                        src={feature.imageUrl}
                                        alt={feature.title}
                                        width="800"
                                        height="600"
                                        loading="lazy"
                                        sizes="(max-width: 768px) 100vw, 50vw"
                                        class="w-full h-auto object-cover transition-transform duration-700 hover:scale-105"
                                />
                                <div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
                            </div>
                        </div>

                        <!-- Text Block -->
                        <div class="w-full md:w-1/2 opacity-0 animate-textEntry">
                            <div class="flex items-center mb-5">
                                <div class="flex-shrink-0 mr-4 text-amber-500 text-3xl hover:scale-125 hover:rotate-15 transition-transform duration-300">
                                    {feature.icon}
                                </div>
                                <h3 class="text-2xl font-bold text-gray-800">
                                    {feature.title}
                                </h3>
                            </div>
                            <p class="text-gray-600 text-lg leading-relaxed">
                                {feature.description}
                            </p>
                        </div>
                    </div>
            ))}
        </div>
    </div>
</section>

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

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

    @keyframes imageEntry {
        from {
            opacity: 0;
            transform: scale(0.9);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes textEntry {
        from {
            opacity: 0;
            transform: translateX(var(--start-x, -30px));
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

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

    .animate-featureItem {
        animation: featureItem 0.7s ease-out forwards;
    }

    .animate-imageEntry {
        animation: imageEntry 0.7s ease-out forwards;
    }

    .animate-textEntry {
        animation: textEntry 0.7s ease-out forwards;
    }

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

    .delay-400 {
        animation-delay: 0.4s;
    }

    /* Set different starting positions for alternating items */
    .feature-item:nth-child(even) .animate-textEntry {
        --start-x: 30px;
    }

    .feature-item:nth-child(odd) .animate-textEntry {
        --start-x: -30px;
    }

    .hover\:rotate-15:hover {
        transform: rotate(15deg);
    }
</style>
