@props([
'image' => null,
'video' => null,
'poster' => null,
'title' => '',
'subtitle' => '',
'textColor' => 'text-white',
'bgColor' => '#000',
'class' => 'animated-hero-loader',
])

@php
$textClass = $textColor === 'text-black' ? 'text-black' : 'text-white';
@endphp

@if($poster)
@push('styles')
<link rel="preload" as="image" href="{{ asset($poster) }}" fetchpriority="high">
@endpush
@endif

<section
    class="{{ $class }} w-full relative pt-[118px] bg-[linear-gradient(to_bottom,#2563eb00_0%,#1e3a6a80_10%,#2563eb90_50%,#000060a0_85%,#191919_100%)]"
    aria-label="{{ strip_tags($title) }}">
    <div class="relative w-full h-full flex flex-col items-center justify-center text-center">
        {{-- Image / Video container (gets its own border-radius animation) --}}
        <div class="animated-hero-loader-img w-full h-full relative top-0 left-0 overflow-hidden"
            style="background: {{ $bgColor }}">
            <div class="w-full h-full overflow-hidden" data-parallax-hero>
                @if($video)
                <video
                    class="w-full h-full object-cover opacity-75"
                    autoplay
                    loop
                    muted
                    playsinline
                    fetchpriority="high"
                    @if($poster) poster="{{ asset($poster) }}" @endif>
                    <source src="{{ asset($video) }}" type="video/mp4">
                </video>
                @elseif($image)
                <img
                    src="{{ asset('images/heros/' . $image) }}"
                    alt="{{ strip_tags($title) }}"
                    class="w-full h-full object-cover opacity-75"
                    loading="eager"
                    fetchpriority="high">
                @endif
            </div>

            {{-- Gradient overlay (inside image container so it follows border-radius) --}}
            <div class="absolute inset-0 bg-[linear-gradient(to_bottom,#2563eb00_0%,#1e3a6a80_10%,#2563eb90_50%,#000060a0_85%,#191919_100%)] z-10 pointer-events-none"></div>
        </div>

        {{-- Text overlay --}}
        <div class="w-[calc(100vw-32px)] h-full flex flex-col items-center justify-center gap-[6vh] md:gap-[12vh] lg:gap-10 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 px-4 z-20 text-center">
            <h1 class="w-full text-3xl/snug lg:max-w-4xl md:text-4xl/snug lg:text-6xl/snug font-regular {{ $textClass }}">
                {!! $title !!}
            </h1>
            @if($subtitle)
            <p class="max-w-2xl mx-auto text-pretty {{ $textClass }}">
                {!! $subtitle !!}
            </p>
            @endif
            {{ $slot }}
        </div>
    </div>
</section>

{{-- Opt-in hero animation: only animate if user is at the top of the page.
     Uses requestAnimationFrame to wait for browser scroll restoration. --}}
<script>
    (function() {
        if (window.__heroScrollHandled) return;
        window.__heroScrollHandled = true;

        var hero = document.querySelector('.animated-hero-loader');
        if (!hero) return;

        // requestAnimationFrame runs after the browser has restored scroll position
        requestAnimationFrame(function() {
            if (window.scrollY > 50 || document.documentElement.scrollTop > 50) {
                // Scroll was restored — hero stays at final state (no animation)
                return;
            }

            // User is at the top — enable the entry animation
            hero.classList.add('hero-animate');

            // Lock body scroll during animation (500ms delay + 500ms animation)
            var body = document.body;
            var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
            body.style.overflow = 'hidden';
            body.style.paddingRight = scrollbarWidth + 'px';
            setTimeout(function() {
                body.style.overflow = '';
                body.style.paddingRight = '';
            }, 1000);
        });
    })();
</script>