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

interface CtaData {
    id: string;
    title: string;
    subtitle?: string | null;
    button_text?: string | null;
    button_link?: string | null;
    is_active?: boolean;
}

// Получаем данные из PocketBase
const pb = authService.createClientFromRequest(Astro.request);

let ctaData: CtaData | null = null;

try {
    const response = await pb.collection('about_cta').getFirstListItem('is_active = true');

    ctaData = {
        id: response.id,
        title: response.title,
        subtitle: response.subtitle,
        button_text: response.button_text,
        button_link: response.button_link,
        is_active: response.is_active
    };
} catch (error) {
    console.error('Ошибка при загрузке данных из коллекции about_cta:', error);
    // В случае ошибки используем null, чтобы показать сообщение об отсутствии данных
    ctaData = null;
}
---

{ctaData ? (
<div class="container mx-auto px-4 max-w-7xl pb-12 pt-12">
    <section class="relative bg-gradient-to-r from-blue-600 to-indigo-700 rounded-3xl overflow-hidden text-white text-center py-12 px-8 opacity-0 animate-fadeInUp delay-700 shadow-2xl">
        <div class="absolute inset-0 opacity-10">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
                <defs>
                    <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                        <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1" />
                    </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#grid)" />
            </svg>
        </div>

        <div class="relative z-10">
            <h2 class="text-3xl md:text-4xl font-bold mb-4 opacity-0 animate-fadeInUp delay-400">
                {ctaData.title}
            </h2>
            {ctaData.subtitle && (
                    <p class="text-lg mb-8 max-w-2xl mx-auto opacity-95 animate-fadeInUp delay-500">
                        {ctaData.subtitle}
                    </p>
            )}
            {ctaData.button_text && ctaData.button_link && (
                    <a
                            href={ctaData.button_link}
                            class="cta-button inline-block bg-white text-blue-700 font-semibold px-8 py-4 rounded-xl shadow-lg transition-all duration-300"
                    >
                        {ctaData.button_text}
                    </a>
            )}
        </div>
    </section>
</div>
) : (
    <div class="container mx-auto px-4 max-w-7xl pb-12 pt-12">
        <div class="text-center py-10 text-gray-500">
            Keine CTA-Daten gefunden.
        </div>
    </div>
)}

<style>
    @keyframes buttonHover {
        to { transform: scale(1.05); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15); }
    }
    @keyframes buttonTap {
        to { transform: scale(0.95); }
    }
    .cta-button:hover {
        animation: buttonHover 0.3s ease forwards;
    }
    .cta-button:active {
        animation: buttonTap 0.1s ease forwards;
    }
</style>