---
import Button from '../base/Button.astro';
import { authService } from '@/lib/authService';
import type { PersonalizedCtaSectionProps } from '@/types/globalInterfaces';

const { sectionData, href, size = 'lg', className = 'mt-6' } = Astro.props as PersonalizedCtaSectionProps;

// Если sectionData не передан, пробуем получить данные из PocketBase
let ctaData = sectionData;
if (!ctaData && typeof window === 'undefined') { // Только на сервере
    try {
        const pb = authService.createClientFromRequest(Astro.request);
        const pbData = await pb.collection('personalized_cta_sections').getFirstListItem('is_active = true');

        ctaData = {
            title: pbData.title,
            description: pbData.description,
            buttonText: pbData.button_text,
            buttonLink: pbData.button_link,
            image: `${import.meta.env.POCKETBASE_URL}/api/files/${pbData.collectionId}/${pbData.id}/${pbData.image}`,
            collectionId: pbData.collectionId,
            id: pbData.id
        };
    } catch (error) {
        console.error('Error fetching CTA section data from PocketBase:', error);
        // Используем значения по умолчанию, если данные не получены из PocketBase
        ctaData = {
            title: "Lassen Sie uns Ihre perfekte Reise planen.",
            description: "Jeder Kunde und jede Fahrt ist einzigartig. Kontaktieren Sie uns für eine persönliche Beratung, damit wir Ihre Wünsche bis ins kleinste Detail erfüllen können.",
            buttonText: "Persönliche Beratung anfordern",
            buttonLink: "/kontakt", // используем переданную ссылку или значение по умолчанию
            image: "/images/services/vip_services.avif",
            collectionId: "",
            id: ""
        };
    }
}

// Приоритет у href из пропсов для обратной совместимости
const finalHref = href || (ctaData ? ctaData.buttonLink : "/kontakt");
---

<section class="relative bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-amber-500/10 rounded-full blur-3xl"></div>
    </div>

    <div class="max-w-7xl mx-auto relative z-10">
        <div class="grid grid-cols-1 lg:grid-cols-2 items-center">
            <!-- Left Column - Text and Button -->
            <div class="text-white p-10 md:p-16 lg:p-20 opacity-0 animate-slideInLeft">
                <h2 class="text-3xl md:text-4xl font-bold mb-6 opacity-0 animate-fadeInUp delay-200">
                    {ctaData?.title || "Lassen Sie uns Ihre perfekte Reise planen."}
                </h2>

                <p class="mt-4 text-lg text-gray-300 max-w-lg leading-relaxed opacity-0 animate-fadeInUp delay-400">
                    {ctaData?.description || "Jeder Kunde und jede Fahrt ist einzigartig. Kontaktieren Sie uns für eine persönliche Beratung, damit wir Ihre Wünsche bis ins kleinste Detail erfüllen können."}
                </p>

                <div class="opacity-0 animate-fadeInUp delay-600 pt-6">
                    <Button
                        variant="primary"
                        size={size}
                        href={finalHref}
                        className={className}
                    >
                        {ctaData?.buttonText || "Persönliche Beratung anfordern"}
                    </Button>
                </div>
            </div>

            <!-- Right Column - Image -->
            <div class="relative w-full min-h-[500px] lg:h-full opacity-0 animate-slideInRight delay-200">
                <img
                        src={ctaData?.image || "/images/services/vip_services.avif"}
                        alt="Persönliche Beratung für VIP-Service"
                        width="1000"
                        height="1200"
                        loading="lazy"
                        sizes="(max-width: 1024px) 100vw, 50vw"
                        class="object-cover w-full h-full rounded-2xl"
                />
                <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/50 to-transparent lg:bg-gradient-to-r rounded-2xl" />

                <!-- Decorative Element -->
                <div class="absolute bottom-0 right-0 w-64 h-64 bg-amber-500/20 rounded-full blur-3xl -mb-32 -mr-32"></div>
            </div>
        </div>
    </div>
</section>

<style>
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(50px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

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

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

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

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

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

    .delay-600 {
        animation-delay: 0.6s;
    }
</style>