{{-- First-visit popup (Admin > Popups). Shown once per browser session. --}}
@if($popup)
<div x-data="{ show: !sessionStorage.getItem('blenko_popup_seen') }"
     x-init="if (show) sessionStorage.setItem('blenko_popup_seen', '1')"
     x-show="show" x-cloak
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60">
    <div @click.outside="show = false" class="bg-white rounded-2xl shadow-xl w-full max-w-sm overflow-hidden relative">
        <button @click="show = false" class="absolute top-2 right-3 text-white text-2xl leading-none z-10">&times;</button>
        @if($popup->image)
            <img src="{{ asset('storage/'.$popup->image) }}" class="w-full aspect-square object-cover">
        @endif
        <div class="p-5 text-center">
            <h3 class="font-bold text-lg mb-1">{{ $popup->title }}</h3>
            <p class="text-sm text-gray-600">{{ $popup->description }}</p>
        </div>
    </div>
</div>
@endif