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

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

// Стандартные иконки для особенностей (не хранятся в базе)
const featureIcons = {
    'Tadellose Sauberkeit': 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1', // Sparkles imitation
    'Höchste Sicherheit': 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z', // Shield
    'Professionelle Chauffeure': 'M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M8.5 11a4 4 0 100-8 4 4 0 000 8z M20 8v6M23 11h-6', // UserCheck imitation
    'Absolute Pünktlichkeit': 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' // Clock
};

// Добавляем иконки к полученным данным
const displayFeatures = features.map(feature => ({
    ...feature,
    icon_path: featureIcons[feature.title] || 'M4.5 12.74L14.26 3 16 4.74 5.24 15.5 4.5 12.74zM18 19.5h-15v-15h15v15zM13 12.5H11V8h2v4.5zm0 3.5H11v-2h2v2z' // Default icon
})).sort((a, b) => a.order - b.order);

// Если нет данных из API, используем заглушку
const fallbackFeatures = [
    {
        title: 'Tadellose Sauberkeit',
        description: 'Jedes Fahrzeug wird vor der Fahrt professionell gereinigt und desinfiziert.',
        icon_path: 'M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1',
        order: 1
    },
    {
        title: 'Höchste Sicherheit',
        description: 'Unsere Flotte ist mit modernsten Sicherheitssystemen ausgestattet und wird regelmäßig gewartet.',
        icon_path: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
        order: 2
    },
    {
        title: 'Professionelle Chauffeure',
        description: 'Unsere Fahrer sind diskret, ortskundig und auf exzellenten Service geschult.',
        icon_path: 'M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2 M8.5 11a4 4 0 100-8 4 4 0 000 8z M20 8v6M23 11h-6',
        order: 3
    },
    {
        title: 'Absolute Pünktlichkeit',
        description: 'Wir garantieren eine pünktliche Abholung, damit Sie Ihre Termine stressfrei erreichen.',
        icon_path: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
        order: 4
    }
];

const finalFeatures = displayFeatures.length > 0 ? displayFeatures : fallbackFeatures;
---

<section class="bg-gradient-to-r from-blue-50 to-indigo-50 py-20 md:py-28">
    <div class="max-w-7xl mx-auto px-6">
        <div class="text-center mb-16 fade-up observer-target">
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                Was Sie in jedem Fahrzeug erwartet
            </h2>
            <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-600">
                Unser Qualitätsversprechen gilt für die gesamte Flotte.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {finalFeatures.map((feature, index) => (
                    <div
                            class="feature-card bg-white rounded-2xl p-8 shadow-md hover:shadow-lg border border-gray-100 fade-up observer-target"
                            style={`--delay: ${index * 150}ms`}
                    >
                        <div class="flex items-center justify-center h-16 w-16 rounded-full bg-gradient-to-r from-blue-100 to-indigo-100 text-blue-600 mx-auto mb-6">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d={feature.icon_path} />
                            </svg>
                        </div>
                        <h3 class="text-lg font-bold text-gray-800 mb-3">
                            {feature.title}
                        </h3>
                        <p class="text-gray-600">{feature.description}</p>
                    </div>
            ))}
        </div>
    </div>
</section>

<script>
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('is-visible');
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.2 });

    document.querySelectorAll('.observer-target').forEach((el) => {
        observer.observe(el);
    });
</script>

<style>
    .fade-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        /* Используем переменную для задержки */
        transition-delay: var(--delay, 0ms);
    }

    .fade-up.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Hover эффект для карточки */
    .feature-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.6s, transform 0.6s; /* Объединяем транзишны */
    }

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