{{-- At end of body so DOM order + max z-index puts overlays above navbar, Livewire, and all content. --}}
<div id="global-marketing-modals" class="relative isolate" style="z-index: 2147483647;" aria-hidden="true"
     x-data="{ showConnect: false, showLogout: false, showAdminLogout: false }"
     @open-marketing-connect.window="showConnect = true"
     @open-marketing-logout.window="showLogout = true"
     @open-marketing-admin-logout.window="showAdminLogout = true"
     @keydown.escape.window="showConnect = false; showLogout = false; showAdminLogout = false">
    <!-- Admin logout -->
    <div x-show="showAdminLogout" x-cloak
         class="fixed inset-0 flex items-center justify-center p-4 bg-black/50"
         style="z-index: 2147483647;"
         @click.self="showAdminLogout = false">
        <div x-transition class="bg-white rounded-2xl shadow-xl w-full max-w-sm min-w-0 shrink-0 p-6" style="max-width: 24rem;" @click.stop>
            <h3 class="text-lg font-semibold text-slate-900 mb-2">Sign out?</h3>
            <p class="text-sm text-slate-600 mb-6">Are you sure you want to sign out of the admin panel?</p>
            <div class="flex gap-3">
                <button type="button" @click="showAdminLogout = false" class="flex-1 px-4 py-2.5 text-sm font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors">Cancel</button>
                <form method="POST" action="{{ route('admin.logout') }}" class="flex-1">
                    @csrf
                    <button type="submit" class="w-full px-4 py-2.5 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-xl transition-colors">Yes, sign out</button>
                </form>
            </div>
        </div>
    </div>
    <!-- User logout -->
    <div x-show="showLogout" x-cloak
         class="fixed inset-0 flex items-center justify-center p-4 bg-black/50"
         style="z-index: 2147483647;"
         @click.self="showLogout = false">
        <div x-transition class="bg-white rounded-2xl shadow-xl w-full max-w-sm min-w-0 shrink-0 p-6" style="max-width: 24rem;" @click.stop>
            <h3 class="text-lg font-semibold text-slate-900 mb-2">Sign out?</h3>
            <p class="text-sm text-slate-600 mb-6">Are you sure you want to sign out of your account?</p>
            <div class="flex gap-3">
                <button type="button" @click="showLogout = false" class="flex-1 px-4 py-2.5 text-sm font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-xl transition-colors">Cancel</button>
                <form method="POST" action="{{ route('logout') }}" class="flex-1">
                    @csrf
                    <button type="submit" class="w-full px-4 py-2.5 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-xl transition-colors">Yes, sign out</button>
                </form>
            </div>
        </div>
    </div>
    <!-- Connect Modal for Guests -->
    <div x-show="showConnect" x-cloak
         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"
         class="fixed inset-0 flex items-center justify-center p-4 bg-black/50 overflow-y-auto"
         style="z-index: 2147483647;"
         @click.self="showConnect = false">
        <div x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
             class="bg-white rounded-2xl shadow-xl max-w-md w-full p-6 my-auto relative" @click.stop>
            <div class="flex justify-between items-start gap-4 mb-4">
                <h3 class="text-xl font-bold text-slate-900 pr-8">Healthcare Worker Connect</h3>
                <button type="button" @click="showConnect = false" class="absolute top-5 right-5 p-1 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 transition-colors" aria-label="Close">
                    <svg class="w-5 h-5" 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>
            </div>
            <p class="text-slate-600 text-sm leading-relaxed mb-5">
                Connect with other healthcare workers, share experiences, find mentors, and build your professional network.
            </p>
            <div class="space-y-3 mb-6">
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-8 h-8 rounded-full bg-[#1D5BBF]/10 flex items-center justify-center">
                        <svg class="w-4 h-4 text-[#1D5BBF]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    </span>
                    <span class="text-sm text-slate-700">Network with professionals in your specialty</span>
                </div>
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-8 h-8 rounded-full bg-[#1D5BBF]/10 flex items-center justify-center">
                        <svg class="w-4 h-4 text-[#1D5BBF]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    </span>
                    <span class="text-sm text-slate-700">Share insights and career experiences</span>
                </div>
                <div class="flex items-start gap-3">
                    <span class="flex-shrink-0 w-8 h-8 rounded-full bg-[#1D5BBF]/10 flex items-center justify-center">
                        <svg class="w-4 h-4 text-[#1D5BBF]" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    </span>
                    <span class="text-sm text-slate-700">Find mentorship and guidance</span>
                </div>
            </div>
            <div class="flex flex-col sm:flex-row gap-3">
                <a href="{{ route('login') }}" class="flex-1 inline-flex items-center justify-center bg-[#1D5BBF] text-white py-3 px-4 rounded-xl font-semibold hover:bg-[#14499d] transition-colors text-center text-sm">
                    Sign in
                </a>
                <a href="{{ route('register') }}" class="flex-1 inline-flex items-center justify-center border-2 border-[#1D5BBF] text-[#1D5BBF] py-3 px-4 rounded-xl font-semibold hover:bg-[#1D5BBF]/5 transition-colors text-center text-sm">
                    Join now
                </a>
            </div>
        </div>
    </div>
</div>