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

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

// Получение данных из PocketBase
const heroData = await pb.collection('career_hero').getFirstListItem('');

// Генерация прямой ссылки на изображение с помощью метода PocketBase
const backgroundImageUrl = pb.files.getURL(heroData, heroData.background_image);
---

<!-- Career Hero Component -->
<section class="relative h-[70vh] min-h-[600px] w-full flex items-center justify-center text-center text-white overflow-hidden">
    <!-- Background Image -->
    <div
        class="absolute inset-0 bg-cover bg-center brightness-50"
        style={`background-image: url('${backgroundImageUrl}')`}
    ></div>
    <div class="absolute inset-0 bg-gradient-to-b from-black/70 to-black/40"></div>

    <!-- Content -->
    <div class="relative z-10 p-6 max-w-5xl mx-auto">
        <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6">
            <span class="block">{heroData.title}</span>
        </h1>

        <p class="mt-6 text-lg md:text-xl max-w-3xl mx-auto text-slate-200">
            {heroData.subtitle}
        </p>

        <div class="mt-10">
            <a
                href="#offene-stellen"
                class="inline-block bg-amber-500 text-slate-900 font-bold py-3 px-8 rounded-lg text-lg transition-all duration-300 shadow-lg hover:shadow-amber-500/40 hover:bg-amber-400 hover:scale-105 active:scale-95"
            >
                {heroData.btn_text}
            </a>
        </div>
    </div>

    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <div class="w-8 h-12 rounded-full border-2 border-white flex justify-center p-1">
            <div class="w-2 h-2 bg-white rounded-full"></div>
        </div>
    </div>
</section>

<style>
    .animate-bounce {
        animation: bounce 1.5s infinite;
    }
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
</style>