<?php 
require_once '../session.php'; 
require_once '../db.php';      

// Sécurité : Si l'utilisateur n'est pas connecté, retour à la racine
if (!isset($_SESSION['user_id'])) {
    header('Location: ../index.php');
    exit;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Espace | ParcoTrip</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        /* Ajustement local pour intégrer le lien discret à gauche */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .nav-left-group {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .link-back-site {
            font-size: 0.85rem !important;
            color: #94a3b8 !important;
            text-decoration: none;
            font-weight: 500 !important;
            transition: color 0.2s;
        }
        .link-back-site:hover {
            color: #4a51ff !important;
        }
    </style>
</head>
<body>

    <!-- NAVBAR PANEL OPTIMISÉE ET ISOLÉE -->
    <?php include_once 'sidebar.php'; ?>

    <main class="container" style="min-height: 70vh; padding: 60px 20px; max-width: 1200px; margin: 0 auto; box-sizing: border-box;">
        
        <div style="background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%); padding: 40px; border-radius: 24px; border: 1px solid #e2e8f0; margin-bottom: 40px;">
            <span style="color: #4a51ff; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 1px;">Espace Membre Privé</span>
            <h1 style="font-size: 2.3rem; font-weight: 800; color: #0f172a; margin: 10px 0 8px 0;">Ravi de vous revoir, <?php echo htmlspecialchars($_SESSION['nom'] ?? 'Aventurier'); ?> ! 👋</h1>
            <p style="color: #64748b; font-size: 1.05rem; margin: 0; max-width: 700px;">Bienvenue sur votre tableau de bord. Depuis cet espace, vous pouvez accéder aux outils exclusifs de planification de vos séjours.</p>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 20px;">
            
            <!-- Carte des parcs -->
            <div style="background: #ffffff; border: 1px solid #e2e8f0; padding: 35px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.01); transition: transform 0.2s;" onmouseenter="this.style.transform='translateY(-4px)'" onmouseleave="this.style.transform='translateY(0)'">
                <div style="font-size: 2.2rem; color: #4a51ff; margin-bottom: 20px;"><i class="fa-solid fa-map-location-dot"></i></div>
                <h3 style="font-size: 1.25rem; font-weight: 800; margin: 0 0 10px 0;">Carte interactive</h3>
                <p style="color: #64748b; font-size: 0.92rem; margin: 0 0 25px 0; line-height: 1.5;">Visualisez géographiquement tous les parcs d'Europe, examinez leur nombre de coasters et préparez vos trajets d'un coup d'œil.</p>
                <a href="mapview.php" class="btn-primary" style="display: inline-block; padding: 10px 20px; font-size: 0.9rem;">Ouvrir la carte</a>
            </div>

            <!-- Temps d'attentes -->
            <div style="background: #ffffff; border: 1px solid #e2e8f0; padding: 35px; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.01); transition: transform 0.2s;" onmouseenter="this.style.transform='translateY(-4px)'" onmouseleave="this.style.transform='translateY(0)'">
                <div style="font-size: 2.2rem; color: #2ed573; margin-bottom: 20px;"><i class="fa-solid fa-clock"></i></div>
                <h3 style="font-size: 1.25rem; font-weight: 800; margin: 0 0 10px 0;">Temps d'attente en direct</h3>
                <p style="color: #64748b; font-size: 0.92rem; margin: 0 0 25px 0; line-height: 1.5;">Consultez l'affluence actuelle des attractions en direct pour décider de vos rides prioritaires sur le parc.</p>
                <a href="../waittimes.php" class="btn-secondary" style="display: inline-block; padding: 10px 20px; font-size: 0.9rem;">Voir l'affluence</a>
            </div>

        </div>

    </main>

    <footer class="main-footer">
        <div class="footer-container" style="max-width: 1200px; margin: 0 auto; padding-bottom: 20px; display: flex; justify-content: center;">
            <div style="text-align: center;">
                <span class="footer-logo">PARCO<span>TRIP</span></span>
                <p style="color: #94a3b8; font-size: 0.88rem; margin-top: 10px;">Votre compagnon de ride ultime.</p>
            </div>
        </div>
        <div class="footer-bottom" style="border-top: 1px solid #1e293b; padding-top: 20px;">
            <p>&copy; 2026 ParcoTrip. Espace Membre Sécurisé.</p>
        </div>
    </footer>

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