{{-- * PWA Install Banner --}}
<div x-data="pwaInstall()"
     x-init="init()"
     x-show="showInstallPrompt && !isInstalled"
     x-transition:enter="transition ease-out duration-300"
     x-transition:enter-start="opacity-0 translate-y-full"
     x-transition:enter-end="opacity-100 translate-y-0"
     class="fixed bottom-20 md:bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-gradient-to-br from-boulanger-orange to-orange-600 text-white rounded-2xl shadow-2xl p-5 z-50"
     style="display: none;">

    {{-- * Bouton fermer --}}
    <button @click="dismissInstallPrompt()"
            class="absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/20 transition">
        <i data-lucide="x" class="w-5 h-5"></i>
    </button>

    {{-- * Contenu --}}
    <div class="flex items-start gap-4 mb-4">
        <div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg">
            <img src="{{ asset('images/logos/Bbloc_Seul_Orange_RVB.svg') }}" alt="Boulanger" class="w-10 h-10">
        </div>
        <div class="flex-1">
            <h3 class="font-display font-bold text-lg mb-1">
                Installer l'application
            </h3>
            <p class="text-white/90 text-sm leading-relaxed">
                Accédez rapidement depuis votre écran d'accueil et recevez des notifications en temps réel
            </p>
        </div>
    </div>

    {{-- * Boutons --}}
    <div class="flex gap-2">
        <button @click="installApp()"
                class="flex-1 bg-white text-boulanger-orange font-semibold py-3 px-4 rounded-xl hover:bg-gray-50 transition shadow-md">
            📱 Installer
        </button>
        <button @click="dismissInstallPrompt()"
                class="px-4 py-3 text-white/90 hover:bg-white/10 rounded-xl transition font-medium">
            Plus tard
        </button>
    </div>
</div>

{{-- * Bouton Notifications Push (si app installée) --}}
<div x-data="pwaInstall()"
     x-init="init()"
     x-show="isInstalled && canRequestNotifications && !notificationsGranted"
     x-transition
     class="fixed bottom-20 md:bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-blue-600 text-white rounded-2xl shadow-2xl p-5 z-50"
     style="display: none;">

    <button @click="notificationsGranted = true"
            class="absolute top-2 right-2 w-8 h-8 flex items-center justify-center rounded-full hover:bg-white/20 transition">
        <i data-lucide="x" class="w-5 h-5"></i>
    </button>

    <div class="flex items-start gap-4 mb-4">
        <div class="w-12 h-12 bg-white/20 rounded-xl flex items-center justify-center flex-shrink-0">
            <i data-lucide="bell" class="w-7 h-7"></i>
        </div>
        <div class="flex-1">
            <h3 class="font-display font-bold text-lg mb-1">
                Activer les notifications
            </h3>
            <p class="text-white/90 text-sm">
                Restez informé des likes, commentaires et posts importants
            </p>
        </div>
    </div>

    <button @click="requestNotificationPermission()"
            class="w-full bg-white text-blue-600 font-semibold py-3 rounded-xl hover:bg-gray-50 transition shadow-md">
            🔔 Activer les notifications
    </button>
</div>