---
const { title, subtitle, imageUrl, altText } = Astro.props;
---

<!-- Hero Section -->
<section class="relative h-[70vh] min-h-[500px] w-full overflow-hidden">
    <div class="absolute inset-0 hero-bg-container">
        <img
                id="hero-image"
                src={imageUrl}
                alt={altText}
                width="1920"
                height="800"
                class="w-full h-full object-cover"
                loading="eager"
        />
        <div class="absolute inset-0 bg-gradient-to-b from-black/70 via-black/40 to-black/80"></div>
    </div>

    <div class="relative z-10 h-full flex items-center justify-center text-center px-4">
        <div class="max-w-4xl">
            <h2 id="hero-title" class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6 leading-tight animate-fade-up">
                {title}
            </h2>
            <p id="hero-subtitle" class="text-xl md:text-2xl text-gray-200 max-w-3xl mx-auto leading-relaxed animate-fade-up" style="animation-delay: 0.4s">
                {subtitle}
            </p>
        </div>
    </div>
</section>

<style>
    /* Контейнер для фонового изображения */
    .hero-bg-container img {
        opacity: 0;
        animation: fadeInBackground 1.5s ease-out forwards;
        animation-delay: 0.2s;
    }

    /* Анимация появления фона */
    @keyframes fadeInBackground {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* Анимация появления текста */
    .animate-fade-up {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeUp 0.8s ease-out forwards;
    }

    @keyframes fadeUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
</style>