@php
    $coverMedia = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
        ->where('academy_id', $academy->id)
        ->where('collection', 'academy_cover')
        ->first();
    $ctaText = $section->getSetting('cta_text', 'سجّل الآن');
    $ctaLink = $section->getSetting('cta_link', '#section-contact');
@endphp

<div class="hero-section !min-h-[80vh]" style="background: var(--site-primary)">
    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[80vh] py-24">
            {{-- Image Side --}}
            <div class="order-1 reveal">
                @if($coverMedia)
                    <div class="relative">
                        <img src="{{ $coverMedia->url }}"
                             alt="{{ $academy->name_ar }}"
                             loading="eager"
                             class="w-full h-[400px] lg:h-[500px] object-cover site-img rounded-2xl shadow-2xl">
                        <div class="absolute -bottom-4 -end-4 w-24 h-24 bg-[var(--site-accent)] rounded-xl opacity-20"></div>
                        <div class="absolute -top-4 -start-4 w-16 h-16 bg-[var(--site-accent)] rounded-full opacity-10"></div>
                    </div>
                @else
                    <div class="w-full h-[400px] lg:h-[500px] rounded-2xl bg-gradient-to-br from-[var(--site-secondary)] to-[var(--site-accent)] opacity-30"></div>
                @endif
            </div>

            {{-- Text Side --}}
            <div class="order-2">
                <h1 class="hero-title !text-start reveal reveal--delay-1" style="font-size: clamp(2rem, 5vw, 3.5rem)">
                    {{ $section->title ?? $academy->name_ar }}
                </h1>

                <div class="w-16 h-1 bg-[var(--site-accent)] rounded-full mt-6 mb-6"></div>

                @if($section->subtitle)
                    <p class="text-lg md:text-xl text-white/70 leading-relaxed reveal reveal--delay-2 max-w-lg">
                        {{ $section->subtitle }}
                    </p>
                @endif

                <div class="mt-8 flex flex-wrap items-center gap-4 reveal reveal--delay-3">
                    <a href="{{ $ctaLink }}" class="site-btn site-btn--primary">
                        {{ $ctaText }}
                        <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                    <a href="#section-about" class="site-btn site-btn--outline">
                        تعرف علينا
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
