@php
    $popup = $settings->popup_config ?? [];
    $enabled = $popup['enabled'] ?? false;
    $delay = $popup['delay_seconds'] ?? 3;
    $showOnce = $popup['show_once'] ?? true;
@endphp

@if($enabled && !empty($popup['title']))
<div x-data="{
        open: false,
        init() {
            const key = 'popup_shown_{{ $academy->id }}';
            const wasShown = {{ $showOnce ? 'true' : 'false' }} && localStorage.getItem(key);
            if (!wasShown) {
                setTimeout(() => {
                    this.open = true;
                    if ({{ $showOnce ? 'true' : 'false' }}) localStorage.setItem(key, 'true');
                }, {{ $delay * 1000 }});
            }
        }
     }"
     x-show="open"
     x-cloak
     class="fixed inset-0 z-[9999] flex items-center justify-center p-4"
     @keydown.escape.window="open = false">

    {{-- Backdrop --}}
    <div x-show="open"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         @click="open = false"
         class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>

    {{-- Modal --}}
    <div x-show="open"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 scale-90 translate-y-4"
         x-transition:enter-end="opacity-100 scale-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-90"
         class="relative w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden">

        {{-- Close --}}
        <button @click="open = false"
                class="absolute top-3 end-3 z-10 w-8 h-8 rounded-full bg-black/10 hover:bg-black/20 flex items-center justify-center transition-colors"
                aria-label="إغلاق">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>

        {{-- Image --}}
        @if(!empty($popup['image_url']))
            <div class="w-full h-48 overflow-hidden">
                <img src="{{ $popup['image_url'] }}" alt="{{ $popup['title'] }}" class="w-full h-full object-cover">
            </div>
        @endif

        {{-- Content --}}
        <div class="p-6 text-center">
            <h3 class="text-xl font-bold text-gray-900">{{ $popup['title'] }}</h3>
            @if(!empty($popup['body']))
                <p class="mt-3 text-gray-600 leading-relaxed text-sm">{{ $popup['body'] }}</p>
            @endif
            @if(!empty($popup['cta_text']) && !empty($popup['cta_url']))
                <a href="{{ $popup['cta_url'] }}"
                   class="mt-5 inline-block px-6 py-2.5 rounded-full text-white text-sm font-medium shadow-lg hover:shadow-xl transition-all hover:scale-105"
                   style="background-color: {{ $popup['cta_color'] ?? 'var(--site-accent)' }}">
                    {{ $popup['cta_text'] }}
                </a>
            @endif
        </div>
    </div>
</div>
@endif
