@php
    $galleryImages = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
        ->where('academy_id', $academy->id)
        ->whereIn('collection', ['academy_cover', 'academy_gallery'])
        ->orderBy('sort_order')
        ->take(5)
        ->get();
    $overlayOpacity = $section->getSetting('overlay_opacity', 65) / 100;
    $ctaText = $section->getSetting('cta_text', 'سجّل الآن');
    $ctaLink = $section->getSetting('cta_link', '#section-contact');
@endphp

<div class="hero-section" x-data="{ current: 0, total: {{ $galleryImages->count() ?: 1 }} }" x-init="setInterval(() => current = (current + 1) % total, 5000)">
    @if($galleryImages->count())
        @foreach($galleryImages as $i => $img)
            <img src="{{ $img->url }}"
                 alt="{{ $academy->name_ar }}"
                 loading="{{ $i === 0 ? 'eager' : 'lazy' }}"
                 class="absolute inset-0 w-full h-full object-cover transition-opacity duration-1000"
                 :class="current === {{ $i }} ? 'opacity-100' : 'opacity-0'">
        @endforeach
    @else
        <div class="absolute inset-0 bg-gradient-to-br from-[var(--site-primary)] via-[var(--site-secondary)] to-black"></div>
    @endif

    <div class="absolute inset-0 bg-black" style="opacity: {{ $overlayOpacity }}"></div>

    <div class="hero-content max-w-4xl mx-auto relative z-10">
        <h1 class="hero-title reveal">
            {{ $section->title ?? $academy->name_ar }}
        </h1>

        <div class="hero-accent-line"></div>

        @if($section->subtitle)
            <p class="text-xl md:text-2xl text-white/80 mt-4 reveal reveal--delay-1 max-w-2xl mx-auto leading-relaxed">
                {{ $section->subtitle }}
            </p>
        @endif

        <div class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4 reveal reveal--delay-2">
            <a href="{{ $ctaLink }}" class="site-btn site-btn--primary text-lg">
                {{ $ctaText }}
            </a>
            <a href="#section-about" class="site-btn site-btn--outline">
                تعرف علينا
            </a>
        </div>
    </div>

    @if($galleryImages->count() > 1)
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex items-center gap-2">
            @for($i = 0; $i < $galleryImages->count(); $i++)
                <button @click="current = {{ $i }}"
                        class="w-2 h-2 rounded-full transition-all duration-300"
                        :class="current === {{ $i }} ? 'bg-[var(--site-accent)] w-6' : 'bg-white/40 hover:bg-white/60'"></button>
            @endfor
        </div>
    @endif
</div>
