<?php
require_once 'db.php';
$conn = dbconnect();

$success = "";
$error = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $guest_name = trim($_POST['guest_name'] ?? '');
    $activity_title = trim($_POST['activity_title'] ?? '');
    $description = trim($_POST['description'] ?? '');

    if (!empty($guest_name) && !empty($activity_title)) {
        $stmt = $conn->prepare("INSERT INTO activities_pending (guest_name, activity_title, description) VALUES (?, ?, ?)");
        if ($stmt) {
            $stmt->bind_param("sss", $guest_name, $activity_title, $description);
            if ($stmt->execute()) {
                $success = "Ta proposition d'activité a bien été envoyée !";
            } else {
                $error = "Une erreur est survenue lors de l'envoi.";
            }
            $stmt->close();
        } else {
            $error = "Erreur de base de données.";
        }
    } else {
        $error = "Merci de renseigner au moins ton prénom et le nom de l'activité.";
    }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proposer des Activités — 18 ANS Martchella</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="invitation.css">
</head>
<body>

    <!-- PARTICULES -->
    <div id="particles"></div>

    <!-- MENU ÉPURÉ -->
    <nav>
        <span>18yoo</span>
        <div>
            <a href="index.php">Accueil</a>
            <a href="details.php">Détails de la fete</a>
            <a href="soundboard.php">Proposer des sons</a>
            <a href="activites.php" class="active">Proposer des Jeus/Activités</a>
            <a href="regles.php">Règles d'or</a>
            <a href="rsvp.php">Confirmer la présence</a>
        </div>
    </nav>

    <!-- CONTENU ACTIVITÉS -->
    <main style="padding: 10rem 2rem 5rem 2rem; max-width: 700px; margin: 0 auto; position: relative; z-index: 1;">
        
        <div style="text-align: center; margin-bottom: 3rem;">
            <div class="badge">Animation</div>
            <h1 class="main-title" style="font-size: clamp(2.5rem, 6vw, 4rem);">Proposer<br><span>Un Jeu / Activité</span></h1>
            <p class="date-line">Partage tes idées pour pimenter la journée et la soirée</p>
        </div>

        <?php if (!empty($success)): ?>
            <div style="background: rgba(223, 188, 83, 0.1); border: 1px solid var(--gold); padding: 1.2rem; text-align: center; margin-bottom: 2rem; border-radius: 4px; color: var(--gold-light);">
                <?= htmlspecialchars($success) ?>
            </div>
        <?php endif; ?>

        <?php if (!empty($error)): ?>
            <div style="background: rgba(88, 17, 26, 0.4); border: 1px solid var(--bordeaux); padding: 1.2rem; text-align: center; margin-bottom: 2rem; border-radius: 4px; color: #ff9999;">
                <?= htmlspecialchars($error) ?>
            </div>
        <?php endif; ?>

        <!-- FORMULAIRE -->
        <form method="POST" style="background: var(--bg-card); border: 1px solid var(--border); padding: 3rem 2.5rem; border-radius: 4px; box-shadow: 0 15px 35px rgba(0,0,0,0.5);">
            
            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 0.5rem;">Ton Prénom gars</label>
                <input type="text" name="guest_name" required style="width: 100%; padding: 1rem; background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); font-family: 'Montserrat', sans-serif; border-radius: 2px;">
            </div>

            <div style="margin-bottom: 1.5rem;">
                <label style="display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 0.5rem;">Titre de l'Activité ou du Jeu</label>
                <input type="text" name="activity_title" required style="width: 100%; padding: 1rem; background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); font-family: 'Montserrat', sans-serif; border-radius: 2px;" placeholder="Ex: Blind Test géant...">
            </div>

            <div style="margin-bottom: 2.5rem;">
                <label style="display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 0.5rem;">Description / Comment ça marche ? (Optionnel)</label>
                <textarea name="description" rows="4" style="width: 100%; padding: 1rem; background: var(--bg-main); border: 1px solid var(--border); color: var(--text-main); font-family: 'Montserrat', sans-serif; border-radius: 2px; resize: vertical;" placeholder="Explique brièvement ton idée..."></textarea>
            </div>

            <button type="submit" class="btn-submit">Envoyer ma proposition</button>

        </form>

    </main>

    <!-- FOOTER -->
    <footer>
        <div class="footer-glam">See you there twinnn !</div>
        <p>Martchella — 18 ans — 11.09.2026</p>
    </footer>

    <script src="script.js"></script>
</body>
</html>