{{-- Banner "instalar como PWA": añade el icono a la pantalla de inicio.
     No hay tienda de apps que avise de instalabilidad, así que lo hacemos
     nosotros — captura beforeinstallprompt (Android/Chrome) o muestra los
     pasos manuales (iOS Safari, o cualquier navegador que no dispare ese
     evento: requiere contexto seguro — https o localhost — así que en
     local sobre http siempre caemos en las instrucciones genéricas).
     Se oculta si ya está instalada (display-mode: standalone). El cierre (×)
     se recuerda: tras cerrarlo descansa 7 días, y al tercer cierre no vuelve
     — ocupaba media pantalla de Inicio en cada visita. --}}
<div class="fm-card fm-stack" style="gap:12px;" x-data="installBanner()" x-init="init()" x-show="visible" x-cloak>
    <div class="fm-row" style="align-items:flex-start;">
        <span class="fm-glyph" style="width:42px;height:42px;border-radius:14px;background:var(--green-050);color:var(--green-700);flex-shrink:0;">
            <i class="fa-solid fa-mobile-screen-button"></i>
        </span>
        <div style="flex:1;min-width:0;">
            <div class="fm-h2" style="font-size:16px;">Instala Fermenty en tu móvil</div>
            <div class="fm-muted" style="font-size:13px;line-height:1.5;margin-top:4px;">
                Añade el icono a tu pantalla de inicio y ábrela como una app — sin tiendas ni descargas.
                🎁 Entre los primeros 100 en instalarla, sorteamos una cuenta Pro gratis.
            </div>
        </div>
        <button type="button" @click="dismiss()" aria-label="Cerrar"
                style="border:none;background:none;color:var(--ink-400);font-size:20px;line-height:1;padding:2px;flex-shrink:0;">&times;</button>
    </div>

    <template x-if="canInstall">
        <button type="button" class="fm-btn fm-btn--gold fm-btn--block" @click="install()">Instalar app</button>
    </template>

    <template x-if="!canInstall && isIOS">
        <div style="font-size:13px;line-height:1.5;color:var(--text-primary);background:var(--paper-2);border-radius:var(--radius-md);padding:10px 12px;">
            Toca <i class="fa-solid fa-arrow-up-from-bracket"></i> <strong>Compartir</strong> en Safari y luego <strong>«Añadir a pantalla de inicio»</strong>.
        </div>
    </template>

    <template x-if="!canInstall && !isIOS">
        <div style="font-size:13px;line-height:1.5;color:var(--text-primary);background:var(--paper-2);border-radius:var(--radius-md);padding:10px 12px;">
            Busca <strong>«Instalar app»</strong> o <strong>«Añadir a pantalla de inicio»</strong> en el menú de tu navegador (⋮ o similar).
        </div>
    </template>
</div>

<script>
function installBanner() {
    return {
        visible: false,
        canInstall: false,
        isIOS: false,
        deferredPrompt: null,
        init() {
            const standalone = window.matchMedia('(display-mode: standalone)').matches || window.navigator.standalone === true;
            if (standalone) return;

            // Frecuencia limitada: tras un cierre descansa 7 días; al tercer
            // cierre se da por entendido y no vuelve. (La instalación sigue
            // disponible siempre desde el menú del navegador.)
            let st = null;
            try { st = JSON.parse(localStorage.getItem('fm_install_banner') || 'null'); } catch (e) {}
            if (st && (st.n >= 3 || Date.now() - st.t < 7 * 24 * 3600 * 1000)) return;

            this.isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent) && !window.MSStream;

            window.addEventListener('beforeinstallprompt', (e) => {
                e.preventDefault();
                this.deferredPrompt = e;
                this.canInstall = true;
                this.visible = true;
            });

            // No esperamos a beforeinstallprompt para pintar: en iOS no existe,
            // y en cualquier navegador sin contexto seguro (http local) nunca
            // llega. Mostramos ya con la instrucción genérica; si el evento
            // llega después, el botón nativo la sustituye solo (reactividad).
            this.visible = true;
        },
        async install() {
            if (!this.deferredPrompt) return;
            this.deferredPrompt.prompt();
            const choice = await this.deferredPrompt.userChoice;
            this.deferredPrompt = null;
            this.canInstall = false;
            if (choice.outcome === 'accepted') this.visible = false;
        },
        dismiss() {
            this.visible = false;
            try {
                const st = JSON.parse(localStorage.getItem('fm_install_banner') || 'null') || { n: 0 };
                localStorage.setItem('fm_install_banner', JSON.stringify({ n: (st.n || 0) + 1, t: Date.now() }));
            } catch (e) {}
        },
    };
}
</script>