<!DOCTYPE html>
<html lang="pt-PT">
<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#222222">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>N101 Drift - Braga Geral</title>
    <style>
        body { margin: 0; padding: 0; background-color: #222; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; touch-action: none; }
        canvas { display: block; width: 100vw; height: 100vh; }
        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
        .hud { padding: 15px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
        #freguesia-atual { font-size: 22px; font-weight: bold; color: #ffeb3b; }
        #valorizacao { font-size: 18px; margin-top: 5px; }
        
        #game-over { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); padding: 30px; border-radius: 15px; text-align: center; width: 85%; pointer-events: auto; border: 2px solid #ffeb3b; box-shadow: 0 0 20px rgba(255, 235, 59, 0.3); }
        #game-over h2 { color: #fff; margin-top: 0; font-size: 24px; }
        .resumo { color: #ddd; font-size: 16px; margin-bottom: 25px; line-height: 1.5; }
        .destaque { color: #ffeb3b; font-weight: bold; font-size: 20px; display: block; margin: 10px 0; }
        
        .btn-whatsapp { display: inline-block; background: #25D366; color: white; text-decoration: none; padding: 15px 20px; font-size: 18px; font-weight: bold; border-radius: 50px; width: 90%; box-sizing: border-box; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
        .btn-restart { display: inline-block; background: #555; color: white; border: none; padding: 12px 20px; font-size: 16px; border-radius: 10px; margin-top: 15px; width: 90%; font-weight: bold; }
    </style>
</head>
<body>

    <script>
        // O jogo vai buscar a tua foto do fato cinzento e logótipo diretamente à internet!
        const linkImagemOutdoor = "https://i.ibb.co/3523q8yF/1789908751104.jpeg"; 
    </script>

    <canvas id="gameCanvas"></canvas>
    
    <div id="ui-layer">
        <div class="hud">
            <div id="freguesia-atual">A iniciar em Braga...</div>
            <div id="valorizacao">Potencial Angariado: 0€</div>
        </div>
    </div>

    <div id="game-over">
        <h2>Acidente no Trânsito!</h2>
        <div class="resumo">
            Sobreviveste até: <span id="end-freguesia" class="destaque"></span>
            <br>
            Ficaste retido no trânsito, mas a venda da tua casa não tem de ficar!
        </div>
        <a id="wa-link" href="#" class="btn-whatsapp">Pedir Avaliação Gratuita</a>
        <button class="btn-restart" onclick="iniciarJogo()">Tentar Novamente</button>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const freguesias = [
            "Avenida da Liberdade", "S. Victor", "S. Vicente", "Cividade", 
            "Nogueira, Fraião e Lamaçães", "Gualtar", "Este",
            "Tenões e Nogueiró", "Lomar e Arcos", "Esporões", "Morreira",
            "Celeirós", "Sequeira", "Tadim", "Ruilhe",
            "Arentim e Cunha", "Cabreiros e Passos", "Merlim",
            "Frossos", "Real, Dume e Semelhe", "Mire de Tibães",
            "Padim da Graça", "Palmeira", "Adaúfe",
            "Sobreposta", "Pedralva", "Guisande e Oliveira", "Priscos"
        ];

        let jogoAtivo = false;
        let carroPlayer, obstaculos, outdoors, velocidadeBase, frameCount, indiceFreguesia, valorizacao;

        const imgOutdoor = new Image();
        imgOutdoor.crossOrigin = "Anonymous"; // Ajuda a carregar imagens da internet
        imgOutdoor.src = linkImagemOutdoor;

        function iniciarJogo() {
            document.getElementById('game-over').style.display = 'none';
            carroPlayer = { x: canvas.width / 2, y: canvas.height - 150, largura: 50, altura: 90, faixa: 1 };
            obstaculos = [];
            outdoors = [];
            velocidadeBase = 4;
            frameCount = 0;
            indiceFreguesia = 0;
            valorizacao = 0;
            jogoAtivo = true;
            atualizarHUD();
            loopJogo();
        }

        canvas.addEventListener('touchstart', function(e) {
            if (!jogoAtivo) return;
            const toqueX = e.touches[0].clientX;
            if (toqueX < canvas.width / 2 && carroPlayer.faixa > 0) {
                carroPlayer.faixa--;
            } else if (toqueX > canvas.width / 2 && carroPlayer.faixa < 2) {
                carroPlayer.faixa++;
            }
        });

        function gerarObstaculo() {
            const faixas = [canvas.width * 0.25, canvas.width * 0.5, canvas.width * 0.75];
            const faixaEscolhida = Math.floor(Math.random() * 3);
            obstaculos.push({ x: faixas[faixaEscolhida], y: -100, largura: 45, altura: 85, velocidade: velocidadeBase * 0.6 });
        }

        function gerarOutdoor() {
            const lado = Math.random() > 0.5 ? 10 : canvas.width - 90; 
            outdoors.push({ x: lado, y: -200, largura: 80, altura: 130 });
        }

        function atualizarHUD() {
            document.getElementById('freguesia-atual').innerText = freguesias[indiceFreguesia];
            document.getElementById('valorizacao').innerText = `Potencial Angariado: ${valorizacao.toLocaleString('pt-PT')}€`;
        }

        function perderJogo() {
            jogoAtivo = false;
            document.getElementById('game-over').style.display = 'block';
            const freguesiaFinal = freguesias[indiceFreguesia];
            document.getElementById('end-freguesia').innerText = freguesiaFinal;
            
            const mensagem = `Olá Miguel, acabei de jogar o desafio da N101 e cheguei a ${freguesiaFinal}. Gostava de falar contigo sobre o mercado imobiliário nesta zona!`;
            document.getElementById('wa-link').href = `https://wa.me/351913528875?text=${encodeURIComponent(mensagem)}`;
        }

        function desenharCarro(x, y, largura, altura, cor) {
            ctx.fillStyle = cor;
            ctx.fillRect(x - largura/2, y, largura, altura);
            ctx.fillStyle = '#000';
            ctx.fillRect(x - largura/2 + 5, y + 15, largura - 10, 20);
        }

        function loopJogo() {
            if (!jogoAtivo) return;
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = '#444';
            ctx.fillRect(canvas.width * 0.1, 0, canvas.width * 0.8, canvas.height);
            
            ctx.fillStyle = '#fff';
            for (let i = 0; i < canvas.height; i += 40) {
                let offset = (frameCount * velocidadeBase) % 40;
                ctx.fillRect(canvas.width * 0.38, i - offset, 5, 20);
                ctx.fillRect(canvas.width * 0.62, i - offset, 5, 20);
            }

            carroPlayer.x += ((canvas.width * 0.25 + (carroPlayer.faixa * canvas.width * 0.25)) - carroPlayer.x) * 0.2; 
            desenharCarro(carroPlayer.x, carroPlayer.y, carroPlayer.largura, carroPlayer.altura, '#ffeb3b');

            if (frameCount % 150 === 0) gerarOutdoor();
            for (let i = outdoors.length - 1; i >= 0; i--) {
                let out = outdoors[i];
                out.y += velocidadeBase;
                
                ctx.fillStyle = '#555';
                ctx.fillRect(out.x + (out.largura/2) - 5, out.y + out.altura, 10, 40);

                ctx.fillStyle = '#fff';
                ctx.fillRect(out.x - 2, out.y - 2, out.largura + 4, out.altura + 4);

                if (imgOutdoor.complete && imgOutdoor.naturalHeight !== 0) {
                    ctx.drawImage(imgOutdoor, out.x, out.y, out.largura, out.altura * 0.82);
                } else {
                    // Efeito de "a carregar..." enquanto a foto da internet não chega
                    ctx.fillStyle = '#444';
                    ctx.fillRect(out.x, out.y, out.largura, out.altura * 0.82);
                }
                
                ctx.fillStyle = '#ffeb3b';
                ctx.fillRect(out.x, out.y + (out.altura * 0.82), out.largura, out.altura * 0.18);
                
                ctx.fillStyle = '#000';
                ctx.font = 'bold 13px Arial';
                ctx.textAlign = 'center';
                ctx.fillText("📞 913528875", out.x + (out.largura / 2), out.y + (out.altura * 0.95));

                if (out.y > canvas.height + 50) outdoors.splice(i, 1);
            }

            if (frameCount % Math.max(40, 100 - (indiceFreguesia * 2)) === 0) gerarObstaculo();
            
            for (let i = obstaculos.length - 1; i >= 0; i--) {
                let obs = obstaculos[i];
                obs.y += obs.velocidade;
                desenharCarro(obs.x, obs.y, obs.largura, obs.altura, '#f44336');

                if (carroPlayer.y < obs.y + obs.altura - 10 &&
                    carroPlayer.y + carroPlayer.altura > obs.y + 10 &&
                    Math.abs(carroPlayer.x - obs.x) < carroPlayer.largura * 0.8) {
                    perderJogo();
                }

                if (obs.y > canvas.height) {
                    valorizacao += 2500;
                    atualizarHUD();
                    obstaculos.splice(i, 1);
                }
            }

            if (frameCount % 300 === 0 && frameCount > 0) {
                velocidadeBase += 0.5;
                if (indiceFreguesia < freguesias.length - 1) {
                    indiceFreguesia++;
                    atualizarHUD();
                }
            }

            frameCount++;
            requestAnimationFrame(loopJogo);
        }

        window.onload = iniciarJogo;
    </script>
</body>
</html>
