
<?php
// Se o usuário não está no modo "App" (PWA), manda para a página de instalação
if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !isset($_GET['app'])) {
   // Você pode habilitar isso se quiser forçar a instalação antes do login
   // header("Location: instalar.php");
   // exit;
}
?>




<!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">
    <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="manifest2.json">
    <meta name="theme-color" content="#003964">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="BRT Express">
    <link rel="apple-touch-icon" href="/logo-192.png">
    
    <meta property="og:title" content="BRT Express">
    <meta property="og:description" content="Entregas rápidas nas estações do BRT. Peça seu entregador agora ou seja um emtregador!">
    <meta property="og:image" content="https://live.re9.rio.br//logo-192.png"> 
    <meta property="og:url" content="https://live.re9.rio.br/">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">

    <title>Acesso BRT Encomendas | Express </title>
    
    
    <div id="installContainer" class="hidden fixed bottom-24 left-1/2 -translate-x-1/2 z-[999] w-[90%] max-w-md">
    <div class="bg-yellow-500 p-4 rounded-2xl shadow-2xl flex items-center justify-between border-2 border-black">
        <div class="flex items-center gap-3">
            <div class="bg-black p-2 rounded-xl">
                <i class="fas fa-mobile-alt text-yellow-500 text-xl"></i>
            </div>
            <div>
                <p class="text-black font-black text-xs uppercase italic">Instalar App BRT</p>
                <p class="text-black/70 text-[10px] font-bold uppercase">Mais rápido e seguro</p>
            </div>
        </div>
        <button id="btnInstalar" class="bg-black text-yellow-500 px-4 py-2 rounded-xl font-black text-xs uppercase italic active:scale-95 transition-transform">
            Baixar Agora
        </button>
    </div>
</div>
    
    
    
    
    
    
    
    
    
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');
        
        body { 
            font-family: 'Inter', sans-serif; 
            background-color: #F1F5F9; /* Fundo claro sutil */
        }

        /* Cores da Marca */
        .bg-azul-brt { background-color: #003964; }
        .text-azul-brt { color: #003964; }
        .bg-amarelo-brt { background-color: #facc15; }
        .text-amarelo-brt { color: #facc15; }
        .border-amarelo-brt { border-color: #facc15; }

        /* Estilo dos Cards de Seleção */
        .card-select {
            background-color: #ffffff;
            border: 2px solid #E2E8F0;
            border-radius: 1.5rem;
            padding: 1.25rem;
            transition: all 0.3s ease;
            display: flex;
            items-center;
            gap: 1rem;
            position: relative;
        }

        .card-select:hover {
            border-color: #facc15;
            transform: translateY(-3px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        /* Destaque para o card de "Já tenho conta" */
        .card-login {
            background-color: #003964; /* Azul */
            border-color: #003964;
            color: #ffffff;
        }

        .card-login .icon-box {
            background-color: rgba(255, 255, 255, 0.1);
            color: #facc15; /* Amarelo */
        }
        
        .card-login:hover {
            background-color: #004e89;
            border-color: #004e89;
        }

        /* Animação do Banner de Instalação */
        .animate-bounce-slow {
            animation: bounce 2s infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
            50% { transform: translateY(-10px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
        }
    </style>
</head>
<body class="min-h-screen flex flex-col justify-center p-4">

    <div id="install-banner" class="hidden fixed top-0 left-0 right-0 z-[10000] bg-slate-900 border-b-2 border-amarelo-brt p-4 shadow-2xl animate-bounce-slow">
        <div class="max-w-md mx-auto flex items-center justify-between">
            <div class="flex items-center gap-3">
                <img src="logo-192.png" class="w-10 h-10 rounded-xl shadow-lg border border-white/10">
                <div>
                    <p class="text-white text-[11px] font-black uppercase italic leading-none mb-1">BRT EXPRESS PRO</p>
                    <p class="text-amarelo-brt text-[9px] font-bold uppercase tracking-widest">Instale em seu celular</p>
                </div>
            </div>
            <button id="btn-instalar" class="bg-amarelo-brt text-azul-brt text-[9px] font-black px-4 py-2 rounded-xl uppercase italic tracking-widest transition-all active:scale-90">
                BAIXAR APP
            </button>
        </div>
    </div>

    <div class="max-w-md w-full mx-auto pt-12">
        
        <div class="text-center mb-8">
            <h1 class="text-3xl font-black italic text-azul-brt uppercase tracking-tighter leading-none">
                BRT <span class="text-amarelo-brt">ENTREGAS</span>
            </h1>
            <p class="text-[10px] font-bold text-slate-400 tracking-widest uppercase mt-1">Receba Encomendas nas Estações do BRT</p>
        </div>

        <div class="bg-white rounded-[2.5rem] shadow-2xl border border-slate-100 overflow-hidden">
            
            <div class="bg-azul-brt p-6 text-center border-b-4 border-amarelo-brt">
                <h2 class="text-white text-lg font-black italic uppercase tracking-tighter">Acesso ao Sistema</h2>
                <p class="text-blue-200 text-[11px] font-bold uppercase tracking-widest mt-1">Selecione uma opção e cadastre-se</p> 
            </div>

            <div class="p-6">
                <div class="grid grid-cols-1 gap-4">
                    
                    <a href="cadastro_cliente.php" class="card-select group">
                        <div class="icon-box h-12 w-12 rounded-2xl bg-gray-100 flex items-center justify-center text-azul-brt shrink-0 group-hover:bg-amarelo-brt transition-colors">
                            <i class="fas fa-user-tag text-xl"></i>
                        </div>
                        <div>
                            <span class="block text-xs uppercase font-black text-azul-brt ">Cliente</span>
                            <span class="block text-[13px] text-slate-400 font-medium uppercase tracking-tight leading-tight">Enviar e receber encomendas nas estações</span>
                        </div>
                        <i class="fas fa-chevron-right ml-auto text-slate-300 group-hover:text-amarelo-brt transition-colors"></i>
                    </a>

                    <a href="cadastro_entregador.php" class="card-select group">
                        <div class="icon-box h-12 w-12 rounded-2xl bg-gray-100 flex items-center justify-center text-azul-brt shrink-0 group-hover:bg-amarelo-brt transition-colors">
                            <i class="fas fa-user text-xl"></i> 
                        </div>
                        <div>
                            <span class="block text-xs uppercase font-black text-azul-brt">Entregador(a)</span>
                            <span class="block text-[13px] text-slate-400 font-medium uppercase tracking-tight leading-tight">Sou passageiro e quero fazer entregas</span>
                        </div>
                        <i class="fas fa-user-right ml-auto text-slate-300 group-hover:text-amarelo-brt transition-colors"></i>
                    </a>

                    <a href="login.php" class="card-select card-login group shadow-lg shadow-blue-950/20">
                        <div class="icon-box h-12 w-12 rounded-2xl flex items-center justify-center shrink-0">
                            <i class="fas fa-sign-in-alt text-xl"></i> 
                        </div>
                        <div>
                            <span class="block text-xs uppercase font-black italic text-white">Já tenho conta</span>
                            <span class="block text-[11px] text-blue-100 font-medium uppercase tracking-tight leading-tight">Fazer login no meu painel</span>
                        </div>
                        <i class="fas fa-arrow-right ml-auto text-amarelo-brt group-hover:translate-x-1 transition-transform"></i>
                    </a>

                </div>

                <div class="mt-6 p-4 bg-blue-50 rounded-2xl border border-blue-100 flex items-start gap-3 shadow-inner">
                    <i class="fas fa-info-circle text-azul-brt mt-1"></i>
                    <p class="text-[13px] text-azul-brt leading-relaxed uppercase  ">
                        Aproveite sua ida ou volta do trabalho para realizar entregas nas estações do BRT. Seu trajeto agora vale dinheiro!
                    </p>
                </div>
            </div>
        </div>

        <div class="mt-6 text-center space-y-4 pb-8">
            
        </div>
    </div>

    <div id="modalRecuperar" class="fixed inset-0 bg-azul-brt/95 backdrop-blur-sm z-[20000] hidden flex items-center justify-center p-4">
        <div class="bg-white max-w-sm w-full rounded-[2.5rem] p-8 relative shadow-2xl border-b-8 border-amarelo-brt">
            <button onclick="fecharModalRecuperar()" class="absolute right-6 top-6 text-slate-300 hover:text-slate-600"><i class="fas fa-times text-xl"></i></button>
            <div class="text-center mb-6">
                <i class="fas fa-key text-4xl text-amarelo-brt mb-4"></i>
                <h3 class="text-xl font-black italic text-azul-brt uppercase tracking-tighter">Recuperar Senha</h3>
                <p class="text-xs text-slate-400 mt-2 italic text-center leading-relaxed">Informe seu e-mail de cadastro para receber as instruções.</p>
            </div>
            <form method="POST" action="recuperar_senha.php">
                <input type="email" name="email_recuperar" required class="w-full p-4 bg-slate-50 rounded-2xl border border-slate-100 outline-none mb-4 text-sm focus:border-amarelo-brt" placeholder="Seu e-mail cadastrado">
                <button type="submit" class="w-full bg-amarelo-brt text-azul-brt font-black py-4 rounded-2xl shadow-lg uppercase text-[10px] tracking-widest italic hover:scale-95 transition-transform">
                    SOLICITAR NOVA SENHA
                </button>
            </form>
        </div>
    </div>

    <script>
        // Modal Recuperar
        function abrirModalRecuperar() { document.getElementById('modalRecuperar').classList.remove('hidden'); }
        function fecharModalRecuperar() { document.getElementById('modalRecuperar').classList.add('hidden'); }

        // PWA Service Worker (sw2.js)
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw2.js')
            .then(reg => console.log('BRT Entregas: App pronto!'))
            .catch(err => console.log('Erro sw', err));
        }

        // Lógica do Banner de Instalação
        let deferredPrompt;
        const banner = document.getElementById('install-banner');

        window.addEventListener('beforeinstallprompt', (e) => {
            // Impede o Chrome de mostrar a barra padrão dele
            e.preventDefault();
            deferredPrompt = e;
            // Mostra o seu banner personalizado
            banner.classList.remove('hidden');
        });

        document.getElementById('btn-instalar').addEventListener('click', (e) => {
            banner.classList.add('hidden');
            deferredPrompt.prompt();
            deferredPrompt.userChoice.then((choiceResult) => {
                if (choiceResult.outcome === 'accepted') {
                    console.log('Usuário aceitou a instalação');
                }
                deferredPrompt = null;
            });
        });

        // Esconde o banner se o app já estiver instalado
        window.addEventListener('appinstalled', () => {
            banner.classList.add('hidden');
        });
    






let deferredPrompt;
const installContainer = document.getElementById('installContainer');
const btnInstalar = document.getElementById('btnInstalar');

window.addEventListener('beforeinstallprompt', (e) => {
    // Impede que o navegador mostre o banner padrão feio
    e.preventDefault();
    // Guarda o evento para usar depois
    deferredPrompt = e;
    // Mostra o nosso botão personalizado
    installContainer.classList.remove('hidden');
});

btnInstalar.addEventListener('click', async () => {
    if (deferredPrompt) {
        // Mostra a janela de instalação do sistema
        deferredPrompt.prompt();
        // Espera a resposta do usuário
        const { outcome } = await deferredPrompt.userChoice;
        console.log(`Usuário escolheu: ${outcome}`);
        // Limpa o prompt
        deferredPrompt = null;
        // Esconde o nosso botão
        installContainer.classList.add('hidden');
    }
});

// Esconde o botão se o app já estiver instalado
window.addEventListener('appinstalled', () => {
    installContainer.classList.add('hidden');
    console.log('App Instalado com sucesso!');
});


</script>
</body>
</html>
