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

<div class="hero-section hero-clip">
    {{-- Background Image --}}
    @if($coverMedia)
        <img src="{{ $coverMedia->url }}"
             alt="{{ $academy->name_ar }}"
             class="absolute inset-0 w-full h-full object-cover">
    @else
        <div class="absolute inset-0 bg-gradient-to-br from-[var(--site-primary)] via-[var(--site-secondary)] to-black"></div>
    @endif

    {{-- Overlay --}}
    <div class="hero-overlay" style="--overlay-opacity: {{ $overlayOpacity }}"></div>

    {{-- Diagonal Decorative Lines --}}
    <div class="absolute inset-0 z-[2] pointer-events-none opacity-10">
        <div class="absolute top-[20%] -start-20 w-[400px] h-[2px] bg-[var(--site-accent)] rotate-[-15deg]"></div>
        <div class="absolute top-[40%] -end-10 w-[300px] h-[2px] bg-[var(--site-accent)] rotate-[-15deg]"></div>
        <div class="absolute bottom-[30%] -start-10 w-[250px] h-[2px] bg-white rotate-[-15deg]"></div>
    </div>

    {{-- Content --}}
    <div class="hero-content max-w-4xl mx-auto">
        <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 }}
                <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>

    {{-- Scroll Indicator --}}
    <div class="absolute bottom-10 left-1/2 -translate-x-1/2 z-10 animate-bounce">
        <svg class="w-6 h-6 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
        </svg>
    </div>
</div>
