@php
    $sectionImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
        ->where('academy_id', $academy->id)
        ->where('collection', 'section_image')
        ->where('mediable_type', 'website_section')
        ->where('mediable_id', $section->id)
        ->first();
@endphp

<div class="site-section">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div class="reveal">
                <h2 class="section-title">{{ $section->title ?? 'من نحن' }}</h2>

                @if($section->content)
                    <div class="mt-8 text-gray-600 leading-relaxed text-lg space-y-4">
                        {!! nl2br(e($section->content)) !!}
                    </div>
                @else
                    <div class="mt-8 text-gray-400 leading-relaxed text-lg">
                        <p>أضف وصفاً عن أكاديميتك من إعدادات الموقع</p>
                    </div>
                @endif

                @if($section->getSetting('show_stats', true) && !empty($data['stats'] ?? []))
                    <div class="mt-8 flex items-center gap-8">
                        @foreach(($data['stats'] ?? []) as $key => $value)
                            @if($loop->index < 3 && $value > 0)
                                <div class="text-center">
                                    <span class="block text-2xl font-bold text-[var(--site-accent)]">{{ $value }}+</span>
                                    <span class="text-sm text-gray-500">
                                        {{ match($key) { 'participants' => 'طالب', 'trainers' => 'مدرب', 'branches' => 'فرع', 'programs' => 'برنامج', default => $key } }}
                                    </span>
                                </div>
                            @endif
                        @endforeach
                    </div>
                @endif
            </div>

            <div class="reveal reveal--delay-2">
                @if($sectionImage)
                    <div class="relative">
                        <img src="{{ $sectionImage->url }}"
                             alt="{{ $section->title }}"
                             class="rounded-2xl w-full object-cover shadow-lg">
                        <div class="absolute -bottom-3 -start-3 w-20 h-20 border-b-4 border-s-4 border-[var(--site-accent)] rounded-bl-2xl"></div>
                    </div>
                @else
                    <div class="relative rounded-2xl overflow-hidden aspect-[4/3] bg-gray-50 border border-gray-200 flex items-center justify-center">
                        <svg class="w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                        </svg>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
