<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Instalar BRT Express</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="manifest" href="manifest.json">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');
        body { font-family: 'Montserrat', sans-serif; }
    </style>
</head>
<body class="bg-black text-white h-screen flex flex-col justify-between p-8">

    <div class="text-center mt-10">
        <div class="w-24 h-24 bg-yellow-500 rounded-[2.5rem] flex items-center justify-center mx-auto mb-6 shadow-2xl shadow-yellow-500/20">
            <i class="fas fa-motorcycle text-4xl text-black"></i>
        </div>
        <h1 class="text-3xl font-black uppercase italic tracking-tighter">BRT <span class="text-yellow-500">Express</span></h1>
        <p class="text-gray-400 text-xs font-bold uppercase tracking-widest mt-2">Plataforma de Entregas</p>
    </div>

    <div id="instrucoes" class="bg-white/5 border border-white/10 p-6 rounded-[2rem] text-center">
        <div id="area-android" class="hidden">
            <h2 class="text-lg font-black uppercase italic mb-2">Instalar no Android</h2>
            <p class="text-gray-400 text-xs mb-6">Clique no botão abaixo para baixar o app oficial e receber notificações em tempo real.</p>
            <button id="btnInstalar" class="w-full bg-yellow-500 text-black font-black py-4 rounded-2xl uppercase italic hover:bg-yellow-400 transition-all">
                Baixar Aplicativo
            </button>
        </div>

        <div id="area-ios" class="hidden">
            <h2 class="text-lg font-black uppercase italic mb-2">Instalar no iPhone</h2>
            <p class="text-gray-400 text-xs">
                1. Toque no ícone de <span class="text-white">Compartilhar</span> <i class="fas fa-share-square"></i> abaixo.<br>
                2. Role e escolha <span class="text-white">"Adicionar à Tela de Início"</span>.
            </p>
        </div>

        <div id="area-instalado" class="hidden">
            <p class="text-green-500 font-black uppercase italic mb-4">App já instalado!</p>
            <a href="index.php" class="inline-block bg-white text-black px-8 py-3 rounded-full font-black uppercase text-xs">Entrar no Sistema</a>
        </div>
    </div>

    <div class="text-center mb-6">
        <a href="index.php" class="text-gray-500 text-[10px] font-black uppercase tracking-widest hover:text-white transition-colors">
            Continuar pelo navegador <i class="fas fa-chevron-right ml-1"></i>
        </a>
    </div>

    <script>
        let deferredPrompt;
        const btnInstalar = document.getElementById('btnInstalar');
        
        // Detecta o Sistema Operacional
        const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
        const isStandalone = window.matchMedia('(display-mode: standalone)').matches;

        if (isStandalone) {
            document.getElementById('area-instalado').classList.remove('hidden');
        } else if (isIOS) {
            document.getElementById('area-ios').classList.remove('hidden');
        } else {
            document.getElementById('area-android').classList.remove('hidden');
        }

        // Lógica do Botão Android
        window.addEventListener('beforeinstallprompt', (e) => {
            e.preventDefault();
            deferredPrompt = e;
        });

        btnInstalar.addEventListener('click', async () => {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                const { outcome } = await deferredPrompt.userChoice;
                if (outcome === 'accepted') {
                    window.location.href = 'cadastro.php';
                }
                deferredPrompt = null;
            } else {
                alert("O app já está pronto para instalar. Procure 'Instalar App' no menu do seu navegador.");
            }
        });

        // Registrar Service Worker obrigatório
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js');
        }
    </script>
</body>
</html>