<?php
require_once 'db.php';
$conn = dbconnect();
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>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" class="active">Accueil</a>
            <a href="details.php">Détails de la fete</a>
            <a href="soundboard.php">Proposer des sons</a>
            <a href="activites.php">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>

    <!-- HERO SECTION -->
    <header class="hero" style="padding-top: 7rem;">
        <div class="badge">POV : La princesse est majeure </div>
        <!-- <h1 id="guest-name">Hello Famiiii !</h1>    -->
        <h1 class="guest-name">Helloo Famiii !</h1>
        <p class="subtitle">T'es invité(e) a la  </p>
        <h2 class="main-title">MARTCH's 18th<br><span>Birthday Party</span></h2>
        <p class="date-line">11 Septembre 2026 — Dès 13h00</p>

        <!-- COMPTE À REBOURS -->
        <div class="countdown" id="countdown">
            <div class="countdown-item"><span class="number" id="days">00</span><span class="label">Jours</span></div>
            <div class="countdown-item"><span class="number" id="hours">00</span><span class="label">Heures</span></div>
            <div class="countdown-item"><span class="number" id="minutes">00</span><span class="label">Min</span></div>
            <div class="countdown-item"><span class="number" id="seconds">00</span><span class="label">Sec</span></div>
        </div>
    <!-- 
            <div style="margin-top: 2rem;">
                <a href="rsvp.php" class="btn-submit" style="display: inline-block; max-width: 250px; text-decoration: none; text-align: center;">Je confirme ma venue</a>
            </div> -->
    </header>

    <!-- 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>