<?php
// 1. FORÇAR EXIBIÇÃO DE ERROS (Para sabermos o que trava)
error_reporting(E_ALL);
ini_set('display_errors', 1);

// 2. PEGAR DADOS DA URL
$id_prod = isset($_GET['id']) ? $_GET['id'] : '';
$nome_cli = isset($_GET['nome']) ? $_GET['nome'] : 'Cliente';

// 3. BUSCAR NO JSON
$arq = "produtos.json";
$produto = null;

if (file_exists($arq)) {
    $conteudo = file_get_contents($arq);
    $dados = json_decode($conteudo, true);
    if (is_array($dados)) {
        foreach ($dados as $p) {
            if ($p['id'] == $id_prod) { $produto = $p; break; }
        }
    }
}

// Se não achar o produto, gera um reserva para não dar erro
if (!$produto) {
    $produto = array(
        "nome" => "Produto Selecionado",
        "preco" => 0.00,
        "imagem" => "https://via.placeholder.com/150"
    );
}

// 4. CONFIGURAÇÃO WHATSAPP
$seu_numero = "5521986297787"; 
$valor_formatado = number_format($produto['preco'], 2, ',', '.');
$texto = "Olá Elias! Meu nome é " . $nome_cli . ".\n\nQuero pagar o produto: " . $produto['nome'] . "\nValor: R$ " . $valor_formatado;
$link_whatsapp = "https://wa.me/" . $seu_numero . "?text=" . urlencode($texto);
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout Seguro | OABCG</title>
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">













    <style>
        body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .checkout-container { max-width: 500px; margin: 40px auto; }
        .card { border: none; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .card-header { background: #1a252f; color: white; text-align: center; border-radius: 15px 15px 0 0 !important; padding: 20px; }
        .btn-whatsapp { background-color: #25d366; color: white; border: none; padding: 15px; font-weight: bold; border-radius: 10px; width: 100%; display: block; text-decoration: none; text-align: center; transition: 0.3s; }
        .btn-whatsapp:hover { background-color: #128c7e; color: white; transform: scale(1.02); }
        .footer-custom { margin-top: 30px; text-align: center; color: #7f8c8d; font-size: 0.85rem; }
        .prod-img { width: 70px; height: 70px; object-fit: cover; border-radius: 10px; }
        
        
        /* Prova Social Estilizada */
        #social-proof {
            position: fixed; bottom: 20px; left: 20px; background: #fff; padding: 12px 20px;
            border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none;
            align-items: center; gap: 12px; z-index: 10000; border-left: 4px solid var(--accent);
            animation: slideUp 0.5s ease;
        }
        @keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        
        
        
        
        
        
    </style>
</head>
<body>

<div class="container checkout-container">
    <div class="text-center mb-4">
        <h4 class="fw-bold text-dark"><i class="fas fa-lock text-success me-2"></i>OABCG SOLUÇÕES</h4>
    </div>

    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">RESUMO DO PEDIDO</h5>
        </div>
        <div class="card-body p-4">
            <p class="text-muted small">Olá, <b><?= htmlspecialchars($nome_cli) ?></b>!</p>
            
            <div class="d-flex align-items-center bg-light p-3 rounded-3 mb-4">
                <img src="<?= $produto['imagem'] ?>" class="prod-img me-3" onerror="this.src='https://via.placeholder.com/70'">
                <div>
                    <div class="fw-bold text-dark"><?= htmlspecialchars($produto['nome']) ?></div>
                    <div class="text-success fw-bold fs-5">R$ <?= $valor_formatado ?></div>
                </div>
            </div>

            <div class="alert alert-info border-0 small">
                <i class="fas fa-shield-alt me-2"></i> Clique abaixo para concluir o pagamento com segurança via WhatsApp.
            </div>

            <a href="<?= $link_whatsapp ?>" class="btn-whatsapp" id="btnFinalizar">
                <i class="fab fa-whatsapp me-2"></i> CONCLUIR NO WHATSAPP
            </a>
            
            <div class="text-center mt-3 text-muted small">
                <i class="fas fa-clock me-1"></i> Atendimento imediato
            </div>
        </div>
    </div>

    <div class="footer-custom">
        <p class="mb-1"><b>OABCG - SOLUÇÕES DIGITAIS LTDA</b></p>
        <p class="mb-1">CNPJ: 00.000.000/0001-00</p>
        <p class="mb-0">Rio de Janeiro - RJ | Suporte: (21) 98629-7787</p>
        <hr class="w-25 mx-auto my-3">
        <p>© <?= date('Y') ?> Ambiente de Pagamento Seguro</p>
    </div>
</div>



<div id="p-social">
    <div class="p-social-img" id="p-img">R</div>
    <div class="p-social-content">
        <span class="p-social-title"><b id="p-nome">Ricardo M.</b> acabou de comprar</span>
        <span class="p-social-prod" id="p-item">Serviço Digital OABCG</span>
        <span class="p-social-time"><i class="fas fa-check-circle"></i> verificado há <span id="p-tempo">2</span> min</span>
    </div>
    <button class="p-social-close" onclick="fecharNotif()">×</button>
</div>







<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    document.getElementById('btnFinalizar').onclick = function() {
        this.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> ABRINDO WHATSAPP...';
    };
</script>






<script>
// Configurações da Simulação
const compradores = ["Marcos Oliveira", "Ana Beatriz", "Carlos H. Silva", "Juliana Farias", "Roberto Souza", "Fernanda Lima", "Lucas Pereira", "Patrícia Gomes"];
const tempos = ["0,1"]; // segundos ou minutos

// Pega a lista de produtos que o PHP gerou para a vitrine (opcional)
// Se não quiser complicar, coloque nomes manuais aqui:
const produtosLoja = ["Este produto", "Este produto", "Este produto", "Este produto"];

function mostrarNotificacao() {
    const pop = document.getElementById('p-social');
    
    // Sorteia os dados
    const nome = compradores[Math.floor(Math.random() * compradores.length)];
    const item = produtosLoja[Math.floor(Math.random() * produtosLoja.length)];
    const tempo = tempos[Math.floor(Math.random() * tempos.length)];

    // Alimenta o HTML
    document.getElementById('p-nome').innerText = nome;
    document.getElementById('p-item').innerText = item;
    document.getElementById('p-tempo').innerText = tempo;
    document.getElementById('p-img').innerText = nome.charAt(0);

    // Mostra o balão com animação
    pop.classList.add('animar-entrada');

    // Esconde depois de 6 segundos
    setTimeout(() => {
        pop.classList.remove('animar-entrada');
        pop.style.display = 'none';
    }, 6000);
}

function fecharNotif() {
    document.getElementById('p-social').style.display = 'none';
}

// Inicia o ciclo: Primeira notificação após 3 segundos
setTimeout(mostrarNotificacao, 3000);

// Repete a cada 15 a 25 segundos (tempo variado para parecer humano)
setInterval(() => {
    const delayAleatorio = Math.random() * (25000 - 15000) + 15000;
    setTimeout(mostrarNotificacao, delayAleatorio);
}, 20000);
</script>
























<script>


// LÓGICA DE SIMULAÇÃO DE VENDAS (PROVA SOCIAL)
const compradores = ["Marcos S.", "Ana Paula K.", "Ricardo Oliveira", "Bruna F.", "Carlos Eduardo", "Dra. Juliana", "Roberto M.", "Fernanda Costa"];

function mostrarVenda() {
    const nomeAleatorio = compradores[Math.floor(Math.random() * compradores.length)];
    const box = document.getElementById('social-proof');
    const nameEl = document.getElementById('sp-name');

    nameEl.innerText = nomeAleatorio;
    box.style.display = 'flex';

    // Esconde após 5 segundos
    setTimeout(() => {
        box.style.display = 'none';
    }, 5000);
}

// Inicia a primeira simulação após 3 segundos
setTimeout(mostrarVenda, 3000);

// Repete a simulação em intervalos aleatórios entre 10 e 20 segundos
setInterval(mostrarVenda, Math.floor(Math.random() * (20000 - 10000 + 1)) + 10000);
</script>
</body>
</html>
































<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checkout Seguro | <?= $produto['nome'] ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        :root { --primary: #0f172a; --accent: #3b82f6; --whatsapp: #25d366; --bg: #f8fafc; }
        body { background: var(--bg); font-family: 'Plus Jakarta Sans', sans-serif; color: var(--primary); }
        .header-bar { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 15px 0; }
        .main-card { background: #fff; border-radius: 24px; border: 1px solid #e2e8f0; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08); overflow: hidden; margin-top: 30px; }
        .urgency-banner { background: #fff1f2; color: #e11d48; font-size: 11px; font-weight: 700; padding: 8px; text-align: center; }
        .price-hero { font-size: 48px; font-weight: 800; letter-spacing: -2px; }
        .product-badge { background: #f1f5f9; border-radius: 16px; padding: 15px; }
        
        .btn-whatsapp {
            background: var(--whatsapp); color: #fff; padding: 20px; border-radius: 18px;
            font-weight: 800; text-decoration: none; display: flex; align-items: center;
            justify-content: center; gap: 12px; border: none; width: 100%; transition: 0.3s;
            animation: pulse-green 2s infinite;
        }
        @keyframes pulse-green {
            0% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
            100% { transform: scale(0.98); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }

        /* Prova Social Estilizada */
        #social-proof {
            position: fixed; bottom: 20px; left: 20px; background: #fff; padding: 12px 20px;
            border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); display: none;
            align-items: center; gap: 12px; z-index: 10000; border-left: 4px solid var(--accent);
            animation: slideUp 0.5s ease;
        }
        @keyframes slideUp { from { transform: translateY(100px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
    
    
    
    
    
    /* Container do Balão */
#p-social {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: none; /* Inicia escondido */
    align-items: center;
    gap: 12px;
    z-index: 9999;
    border-left: 5px solid #002366; /* Azul Del Rei */
    min-width: 280px;
    max-width: 320px;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Foto/Inicial do Comprador */
.p-social-img {
    width: 40px;
    height: 40px;
    background: #002366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    flex-shrink: 0;
}

/* Textos */
.p-social-content { display: flex; flex-direction: column; }
.p-social-title { font-size: 13px; color: #333; margin-bottom: 2px; }
.p-social-prod { font-size: 11px; color: #002366; font-weight: 700; text-transform: uppercase; }
.p-social-time { font-size: 10px; color: #27ae60; margin-top: 2px; font-weight: 600; }

/* Botão Fechar */
.p-social-close {
    position: absolute; top: 5px; right: 8px;
    background: none; border: none; color: #ccc;
    font-size: 18px; cursor: pointer;
}

/* Animação de Entrada e Saída */
@keyframes subirPop {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.animar-entrada { animation: subirPop 0.6s forwards; display: flex !important; }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </style>
</head>
<body>

<nav class="header-bar shadow-sm">
   

<script>
function irParaPagamento() {
    document.getElementById('cta-block').style.display = 'none';
    document.getElementById('loading-block').style.display = 'block';
    
    const msg = atob("<?= $token ?>");
    const url = "https://wa.me/<?= $seu_numero ?>?text=" + encodeURIComponent(msg);
    
    setTimeout(() => { window.location.href = url; }, 1500);
}

// LÓGICA DE SIMULAÇÃO DE VENDAS (PROVA SOCIAL)
const compradores = ["Marcos S.", "Ana Paula K.", "Ricardo Oliveira", "Bruna F.", "Carlos Eduardo", "Dra. Juliana", "Roberto M.", "Fernanda Costa"];

function mostrarVenda() {
    const nomeAleatorio = compradores[Math.floor(Math.random() * compradores.length)];
    const box = document.getElementById('social-proof');
    const nameEl = document.getElementById('sp-name');

    nameEl.innerText = nomeAleatorio;
    box.style.display = 'flex';

    // Esconde após 5 segundos
    setTimeout(() => {
        box.style.display = 'none';
    }, 5000);
}

// Inicia a primeira simulação após 3 segundos
setTimeout(mostrarVenda, 3000);

// Repete a simulação em intervalos aleatórios entre 10 e 20 segundos
setInterval(mostrarVenda, Math.floor(Math.random() * (20000 - 10000 + 1)) + 10000);
</script>



















</body>
</html>