---
import Layout from '@layouts/Layout.astro';
import VipCoreFeaturesSection from '@components/services/VipCoreFeaturesSection.astro';
import ServiceCard from '@components/services/ServiceCard.astro';
import PersonalizedCtaSection from '@components/services/PersonalizedCtaSection.astro';
import { authService } from '@/lib/authService';

// Получаем глобальные настройки сайта из PocketBase
const pb = authService.createClientFromRequest(Astro.request);
const siteSettings = await pb.collection('site_settings').getFirstListItem('');
const siteUrl = siteSettings.site_url;

// Получаем данные страницы из PocketBase
const pageData = await pb.collection('pages').getFirstListItem('slug = "vip-services"');

// Получаем VIP-услуги из PocketBase
const vipServices = await pb.collection('vip_services').getFullList({
    sort: 'order',
    filter: 'is_active = true'
});

// Получаем hero-секцию для VIP-услуг из PocketBase
const vipHero = await pb.collection('vip_hero_sections').getFirstListItem('is_active = true');

const title = `${pageData.title} | ${siteSettings.site_name}`;
const description = pageData.meta_description;
const canonicalLink = pageData.canonical_url ? pageData.canonical_url : `${siteUrl}/${pageData.slug}`;
---

<Layout {title} {description} {canonicalLink}>
    <div class="min-h-screen">
        <h1 class="sr-only">VIP-Services in Berlin</h1>

        <section class="relative h-[80vh] min-h-[700px] w-full flex items-center justify-center overflow-hidden">
            <!-- Background Image with Parallax Effect -->
            <div class="absolute inset-0 scale-110 animate-scaleIn">
                <img
                    src={`${import.meta.env.POCKETBASE_URL}/api/files/${vipHero.collectionId}/${vipHero.id}/${vipHero.image}`}
                    alt="VIP Chauffeur Service"
                    width="1920"
                    height="1080"
                    sizes="100vw"
                    class="absolute inset-0 w-full h-full object-cover brightness-40"
                    loading="eager"
                />
            </div>

            <div class="absolute inset-0 bg-gradient-to-b from-black/90 via-black/60 to-black/0" />
            <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-50 to-transparent" />

            <!-- Content -->
            <div class="relative z-10 text-center p-6 max-w-4xl opacity-0 animate-fadeInUp delay-300">
                <div class="opacity-0 animate-fadeIn delay-500">
                    <h2 class="text-5xl md:text-7xl font-extrabold tracking-tight mb-6 text-center leading-none">
                        <span class="block text-white leading-none">{vipHero.title || 'Exklusiver'}</span>
                        <span class="block text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500 leading-none mt-[-1rem]">
                            {vipHero.subtitle || 'VIP-Fahrservice'}
                        </span>
                    </h2>
                </div>
                <p class="mt-6 text-xl md:text-2xl text-gray-200 max-w-2xl mx-auto font-light opacity-0 animate-fadeIn delay-900">
                    {vipHero.description || 'Ihr Partner für erstklassige Mobilität, Diskretion und perfekten Service in Berlin.'}
                </p>
            </div>
        </section>

        <VipCoreFeaturesSection />

        <section class="py-20 md:py-28 bg-white">
            <div class="max-w-7xl mx-auto px-6">
                <div class="text-center mb-16">
                    <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                        VIP-Services für jeden Anlass
                    </h2>
                    <p class="mt-3 max-w-3xl mx-auto text-lg text-gray-600">
                        Ob geschäftlich oder privat – unsere Flotte und unser Service sind
                        auf Ihre individuellen Bedürfnisse zugeschnitten.
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                    {vipServices.map((service, index) => (
                        <div class="opacity-0 animate-cardEntry" style={`--delay: ${index * 0.1}s`}>
                            <ServiceCard service={service} />
                        </div>
                    ))}
                </div>
            </div>
        </section>

        <PersonalizedCtaSection />
    </div>
</Layout>

<style>
    @keyframes scaleIn {
        from {
            transform: scale(1.1);
        }
        to {
            transform: scale(1);
        }
    }

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

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes scaleXIn {
        from {
            transform: scaleX(0);
        }
        to {
            transform: scaleX(1);
        }
    }

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

    .animate-scaleIn {
        animation: scaleIn 1.5s ease-out forwards;
    }

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

    .animate-fadeIn {
        animation: fadeIn 1s ease-out forwards;
    }

    .animate-scaleXIn {
        animation: scaleXIn 0.8s ease-out forwards;
        transform-origin: left;
    }

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

    .delay-300 {
        animation-delay: 0.3s;
    }

    .delay-500 {
        animation-delay: 0.5s;
    }

    .delay-700 {
        animation-delay: 0.7s;
    }

    .delay-900 {
        animation-delay: 0.9s;
    }
</style>