<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Painel de Interação - Evento</title>
    <style>
        /* Mantendo sua estilização original */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            background-color: #1a1a1a; 
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 15px;
        }
        .container { 
            width: 100%;
            max-width: 500px; 
            background: #2d2d2d; 
            padding: 25px; 
            border-radius: 15px; 
            box-shadow: 0 8px 20px rgba(0,0,0,0.5); 
        }
        h2 { margin-bottom: 20px; font-size: 1.5rem; color: #00d4ff; text-align: center; }
        h3 { margin: 25px 0 10px; font-size: 1.2rem; }
        
        .btn-grande { 
            border: none; 
            padding: 18px; 
            font-size: 1.1rem; 
            font-weight: bold;
            border-radius: 10px; 
            cursor: pointer; 
            width: 100%; 
            transition: transform 0.2s, background 0.3s;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-decoration: none;
            color: white;
        }
        .btn-grande:active { transform: scale(0.98); }

        .btn-atendente { background-color: #ff4757; }
        .btn-atendente:hover { background-color: #ff6b81; }

        .btn-cardapio { background-color: #0097e6; }
        .btn-cardapio:hover { background-color: #00a8ff; }

        .caixa-texto { 
            width: 100%; 
            height: 100px; 
            border-radius: 8px; 
            border: 2px solid #444; 
            padding: 12px; 
            background: #3d3d3d;
            color: #fff;
            font-size: 1rem;
            resize: none;
            margin-bottom: 15px;
        }
        .btn-enviar { 
            background-color: #2ed573; 
            color: white; 
            border: none; 
            padding: 15px; 
            font-size: 1rem; 
            font-weight: bold;
            border-radius: 8px; 
            cursor: pointer; 
            width: 100%; 
        }
    </style>
</head>
<body>

<div class="container">
    <h2>Sistema de Gestão</h2>
    
    <?php 
    // Captura a localidade uma única vez para uso no arquivo
    $localidade = htmlspecialchars($_GET['localidade'] ?? 'Não definida'); 
    ?>

    <div style="color: #00d4ff; margin-bottom: 15px; text-align: center; font-size: 0.9rem;">
        📍 Localidade: <strong><?php echo $localidade; ?></strong>
    </div>

    <form method="GET" action="grupo_produtos.php">
        <input type="hidden" name="localidade" value="<?php echo $localidade; ?>">
        <button type="submit" class="btn-grande btn-cardapio">
            📖 VER CARDÁPIO
        </button>
    </form>

    <form method="POST" action="chama.php">
        <input type="hidden" name="localidade" value="<?php echo $localidade; ?>">
        <button type="submit" name="chamar" class="btn-grande btn-atendente">
            🔔 CHAMAR ATENDENTE
        </button>
    </form>

    <hr style="border: 0; border-top: 1px solid #444; margin: 20px 0;">

    <h3>💌 Correio Elegante</h3>
    <form method="POST" action="salvar_correio.php">
        <textarea name="mensagem" class="caixa-texto" placeholder="Digite sua mensagem romântica ou divertida..." maxlength="99" required></textarea>
        <input type="hidden" name="localidade" value="<?php echo $localidade; ?>">
        <button type="submit" name="enviar_correio" class="btn-enviar">POSTAR MENSAGEM</button>
    </form>
</div>

</body>
</html>