@php
    use App\Models\SiteSetting;

    $enabled = SiteSetting::getValue('notice_enabled') === '1';
    $imagePath = SiteSetting::getValue('notice_image_path');
    $imageUrl = $imagePath ? asset('storage/'.$imagePath) : null;

    $hasContent = (bool) $imageUrl;
@endphp

@if ($enabled && $hasContent)
    <div x-data="{
            open: false,
            init() {
                // Always show on each visit while enabled.
                this.open = true;
                document.body.style.overflow = 'hidden';
            },
            dismiss() {
                this.open = false;
                document.body.style.overflow = '';
            }
        }"
         x-show="open"
         x-cloak
         x-transition.opacity.duration.150ms
         @keydown.escape.window="dismiss()"
         role="dialog"
         aria-modal="true"
         aria-label="Important notice"
         class="fixed inset-0 z-[100] flex items-end justify-center px-3 pb-4 pt-6 sm:items-center sm:p-6">

        <div class="absolute inset-0 bg-slate-900/70 backdrop-blur-[2px]"
             @click="dismiss()"></div>

        <div x-show="open"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-3 sm:scale-95"
             x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
             x-transition:leave-end="opacity-0 translate-y-3 sm:scale-95"
             class="relative w-full overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 sm:max-w-5xl">

            <button type="button"
                    @click="dismiss()"
                    aria-label="Close notice"
                    class="absolute right-3 top-3 z-10 flex h-9 w-9 items-center justify-center rounded-full bg-white/95 text-cv-navy-deep shadow ring-1 ring-black/5 transition hover:bg-white hover:text-cv-gold focus:outline-none focus:ring-2 focus:ring-cv-gold">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M18 6L6 18"/>
                </svg>
            </button>

            @if ($imageUrl)
                <div class="w-full bg-cv-cream/40">
                    <img src="{{ $imageUrl }}"
                         alt=""
                         class="h-[70vh] w-full object-cover object-center" />
                </div>
            @endif

            {{-- No footer actions: close using X or clicking outside --}}
        </div>
    </div>
@endif