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

// Инициализация клиента PocketBase
const pb = authService.createClientFromRequest(Astro.request);

// Получение данных для героя из коллекции partner_hero
const heroRecord = await pb.collection('partner_hero').getFirstListItem('is_active = true');

// Генерация прямой ссылки на изображение героя
const heroImageUrl = pb.files.getURL(heroRecord, heroRecord.image);
---

<section class="relative w-full bg-slate-900 overflow-hidden py-12 md:py-20 lg:py-24">
    <!-- Декоративный фоновый элемент (опционально) -->
    <div class="absolute top-0 right-0 w-1/3 h-full bg-amber-500/5 skew-x-12 translate-x-1/2 pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">

            <!-- Левая колонка: Контент -->
            <div class="order-2 lg:order-1 text-center lg:text-left">
                <div class="space-y-6 md:space-y-8 max-w-2xl mx-auto lg:mx-0">

                    <!-- Заголовок -->
                    <div class="overflow-hidden">
                        <h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-white leading-[1.1]">
                            <span class="block opacity-0 animate-slideInUp">{heroRecord?.title || 'Gemeinsam auf der'}</span>
                            <span class="block text-amber-400 opacity-0 animate-slideInUp delay-300">{heroRecord?.subtitle || 'Überholspur.'}</span>
                        </h1>
                    </div>

                    <!-- Разделитель -->
                    <div class="h-1.5 bg-amber-500 w-20 mx-auto lg:mx-0 rounded-full opacity-0 animate-scaleIn delay-500 origin-left"></div>

                    <!-- Описание -->
                    <div class="overflow-hidden">
                        <p class="text-base sm:text-lg md:text-xl text-slate-300 font-light leading-relaxed opacity-0 animate-slideInUp delay-700">
                            {heroRecord?.description || 'Schaffen Sie mit uns einen unvergesslichen Mehrwert für Ihre Kunden. Eine Partnerschaft, die Exzellenz neu definiert.'}
                        </p>
                    </div>

                    <!-- Кнопка -->
                    <div class="pt-4 overflow-hidden">
                        <a href="{heroRecord?.cta_link || '#kontakt'}"
                           class="group inline-flex items-center gap-3 bg-amber-500 text-slate-900 font-bold py-4 px-8 rounded-xl text-base md:text-lg transition-all duration-300 shadow-xl shadow-amber-500/10 hover:shadow-amber-500/30 opacity-0 animate-slideInUp delay-900 hover:-translate-y-1 active:scale-95">
                            {heroRecord?.cta_text || 'Partnerschaft starten'}
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Правая колонка: Картинка -->
            <div class="order-1 lg:order-2">
                <div class="relative group mx-auto max-w-[550px] lg:max-w-none">
                    <!-- Декоративное свечение вокруг картинки -->
                    <div class="absolute -inset-4 bg-amber-500/10 rounded-[2.5rem] blur-2xl opacity-0 animate-fadeIn delay-1000 group-hover:bg-amber-500/20 transition-duration-500"></div>

                    <!-- Контейнер картинки -->
                    <div class="relative aspect-video lg:aspect-square overflow-hidden rounded-[2rem] shadow-2xl border border-white/5">
                        <img
                                src={heroImageUrl}
                                alt={heroRecord?.img_alt || 'Luxuriöser Fahrzeuginnenraum'}
                                class="absolute inset-0 w-full h-full object-cover object-center scale-105 group-hover:scale-110 transition-transform duration-700 opacity-0 animate-imageReveal delay-500"
                        />

                        <!-- Оверлей для глубины -->
                        <div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 via-transparent to-transparent opacity-60"></div>
                    </div>

                    <!-- Маленький декоративный элемент "бейджик" (опционально) -->
                    <div class="absolute -bottom-6 -left-6 bg-slate-800 border border-slate-700 p-4 rounded-2xl shadow-xl hidden md:block opacity-0 animate-slideInUp delay-1000">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-amber-500/20 rounded-lg flex items-center justify-center">
                                <span class="text-amber-500 font-bold">5★</span>
                            </div>
                            <div class="text-sm">
                                <p class="text-white font-semibold">Premium Service</p>
                                <p class="text-slate-400 text-xs">Exzellenz garantiert</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

<style>
    @keyframes slideInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes scaleIn {
        from { opacity: 0; transform: scaleX(0); }
        to { opacity: 1; transform: scaleX(1); }
    }
    @keyframes imageReveal {
        0% { opacity: 0; transform: scale(1.15); }
        100% { opacity: 1; transform: scale(1.05); }
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .animate-slideInUp { animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    .animate-scaleIn { animation: scaleIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    .animate-imageReveal { animation: imageReveal 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
    .animate-fadeIn { animation: fadeIn 0.8s ease-out forwards; }

    .delay-300 { animation-delay: 0.3s; }
    .delay-500 { animation-delay: 0.5s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-700 { animation-delay: 0.7s; }
    .delay-800 { animation-delay: 0.8s; }
    .delay-900 { animation-delay: 0.9s; }
    .delay-1000 { animation-delay: 1s; }

    a:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(245, 158, 11, 0.4), 0 10px 10px -5px rgba(245, 158, 11, 0.1); }

    @media (prefers-reduced-motion: reduce) {
        .animate-slideInUp, .animate-scaleIn, .animate-imageReveal, .animate-fadeIn {
            animation: none; opacity: 1; transform: none;
        }
        .delay-300, .delay-500, .delay-600, .delay-700, .delay-800, .delay-900, .delay-1000 {
            animation-delay: 0s;
        }
    }
</style>