@php
    $ctaText = $section->getSetting('cta_text', 'سجّل الآن');
    $ctaLink = $section->getSetting('cta_link', '#section-contact');
@endphp

<div class="hero-section !min-h-[75vh]" style="background: linear-gradient(160deg, var(--site-primary) 0%, var(--site-secondary) 100%)">
    <div class="absolute inset-0 opacity-5">
        <div class="absolute top-1/4 start-1/4 w-96 h-96 bg-[var(--site-accent)] rounded-full blur-[120px]"></div>
        <div class="absolute bottom-1/4 end-1/4 w-64 h-64 bg-[var(--site-accent)] rounded-full blur-[100px]"></div>
    </div>

    <div class="hero-content max-w-3xl mx-auto relative z-10">
        @if($academy->logo_path)
            <div class="mb-8 reveal">
                <img src="{{ asset('storage/' . $academy->logo_path) }}"
                     alt="{{ $academy->name_ar }}"
                     class="h-20 w-20 mx-auto rounded-2xl object-contain shadow-lg">
            </div>
        @endif

        <h1 class="hero-title reveal reveal--delay-1" style="font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.1">
            {{ $section->title ?? $academy->name_ar }}
        </h1>

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

        <div class="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 reveal reveal--delay-3">
            <a href="{{ $ctaLink }}" class="site-btn site-btn--primary text-lg px-10">
                {{ $ctaText }}
            </a>
        </div>
    </div>
</div>
