<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

$db = new SQLite3('a/.eggziedb.db');
$planos = $db->query("SELECT * FROM planos_pagamento ORDER BY meses ASC");
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Escolha seu Plano Abaixo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body{
    font-family:"Segoe UI",system-ui;
    background: radial-gradient(circle at top,#1b2a45,#03040a);
    color:#f0f4ff;
}
.wrapper{
    max-width:1200px;
    margin:40px auto;
    padding:20px;
}
h2{
    text-align:center;
    margin-bottom:40px;
}
.plans{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(350px,1fr));
    gap:30px;
    justify-items:center;
}

/* LINK DO CARD */
.plan-link{
    text-decoration:none;
    color:inherit;
    width:100%;
    display:flex;
    justify-content:center;
}

/* CARD */
.plan-card{
    width:450px;
    height:490px;
    background:linear-gradient(145deg,#0f1b34,#23385e);
    border-radius:22px;
    border:1px solid rgba(114,159,255,.3);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:.3s;
}
.plan-link:hover .plan-card{
    transform:translateY(-8px);
    box-shadow:0 15px 40px rgba(0,0,0,.4);
}

/* IMAGEM */
.plan-image {
    height: 3000px;
    width: 100%;
    background-size: cover;       /* preenche todo o espaço do card */
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent; /* sem cor de fundo */
    border: none;                 /* remove qualquer borda */
    border-radius: 0;             /* sem arredondamento se não quiser borda arredondada */
}



/* CORPO */
.plan-body{
    flex:1;
    padding:18px;
    text-align:center;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}
.plan-title{
    font-size:18px;
    font-weight:700;
}
.plan-price{
    font-size:22px;
    color:#52ffb8;
    margin-top:6px;
}

/* BOTÃO */
.pay-btn img{
    max-width:100%;
    pointer-events:none; /* clique passa pro card */
}
</style>
</head>

<body>
<div class="wrapper">
    <h2>💳 Escolha seu Plano</h2>

    <div class="plans">
        <?php while ($p = $planos->fetchArray(SQLITE3_ASSOC)): ?>
        
        <a 
            href="<?= htmlspecialchars($p['pagbank_link']) ?>" 
            target="_blank" 
            class="plan-link"
        >
            <div class="plan-card">

                <!-- IMAGEM -->
                <div class="plan-image" style="
                    background-image:url('<?= htmlspecialchars($p['imagem']) ?>');
                "></div>

                <!-- CONTEÚDO -->
                <div class="plan-body">
                    <div>
                        <div class="plan-title">
                            <?= htmlspecialchars($p['titulo']) ?>
                        </div>
                        <div class="plan-price">
                            R$ <?= number_format($p['valor'],2,',','.') ?>
                        </div>
                    </div>

                    <!-- BOTÃO VISUAL -->
                    <div class="pay-btn">
                        <img 
                            src="https://assets.pagseguro.com.br/ps-integration-assets/botoes/pagamentos/205x30-pagar.gif"
                            alt="Pagar com PagBank"
                        >
                        <p>Ou qualquer banco</p>
                    </div>
                </div>

            </div>
        </a>

        <?php endwhile; ?>
    </div>
</div>
</body>
</html>
