<?php
require_once 'config/init.php';

$nom_site = get_param('nom_site', 'Mon Site de Cours');
$logo_url = get_param('logo_url', 'assets/images/logo.png');
$whatsapp = get_param('whatsapp_numero', '00000000');
$couleur_primaire = get_param('couleur_primaire', '#2c7be5');
$texte_accueil = get_param('texte_accueil', 'Bienvenue sur notre plateforme.');
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($nom_site) ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <style>
        :root { --primary-color: <?= e($couleur_primaire) ?>; }
        body { font-family: 'Segoe UI', sans-serif; }
        .top-header { background: #f8f9fa; border-bottom: 1px solid #eee; padding: 10px 0; }
        .main-header { background: white; padding: 15px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .hero-banner { 
            background: linear-gradient(135deg, var(--primary-color), #1a56db); 
            color: white; padding: 80px 0; text-align: center; 
        }
        .nav-link { font-weight: 600; color: #333 !important; }
        .nav-link:hover { color: var(--primary-color) !important; }
        .btn-primary-custom { background: var(--primary-color); border: none; color: white; }
        .btn-primary-custom:hover { background: #1a56db; color: white; }
        footer { background: #212529; color: #adb5bd; padding: 40px 0; }
        footer a { color: white; text-decoration: none; }
        footer a:hover { color: var(--primary-color); }
    </style>
</head>
<body>

    <!-- HEADER -->
    <header>
        <div class="top-header d-none d-md-block">
            <div class="container d-flex justify-content-between align-items-center">
                <div>
                    <i class="fab fa-whatsapp text-success me-2"></i> <?= e($whatsapp) ?>
                </div>
                <div>
                    <a href="#" class="me-3"><i class="fab fa-facebook"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
        </div>
        <div class="main-header">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Gauche : Logo -->
                    <div class="col-md-3 text-center text-md-start mb-3 mb-md-0">
                        <img src="<?= e($logo_url) ?>" alt="Logo" style="max-height: 60px;" onerror="this.src='https://via.placeholder.com/150x60?text=LOGO'">
                    </div>
                    <!-- Milieu : Nom et WhatsApp -->
                    <div class="col-md-5 text-center mb-3 mb-md-0">
                        <h3 class="fw-bold mb-0" style="color: var(--primary-color);"><?= e($nom_site) ?></h3>
                        <small class="text-muted"><i class="fab fa-whatsapp text-success"></i> <?= e($whatsapp) ?></small>
                    </div>
                    <!-- Droite : Menu -->
                    <div class="col-md-4">
                        <nav class="navbar navbar-expand-lg justify-content-end">
                            <ul class="navbar-nav">
                                <li class="nav-item"><a class="nav-link" href="index.php">Accueil</a></li>
                                <li class="nav-item"><a class="nav-link" href="contact.php">Contact</a></li>
                                <li class="nav-item ms-2">
                                    <a class="btn btn-primary-custom btn-sm px-3" href="connexion.php">
                                        <i class="fas fa-lock me-1"></i> Connexion
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- BANNIÈRE / HERO -->
    <section class="hero-banner">
        <div class="container">
            <h1 class="display-4 fw-bold mb-3">Apprenez à votre rythme</h1>
            <p class="lead mb-4"><?= e($texte_accueil) ?></p>
            <a href="connexion.php" class="btn btn-light btn-lg fw-bold" style="color: var(--primary-color);">
                Commencer maintenant
            </a>
        </div>
    </section>

    <!-- FOOTER -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h5 class="text-white"><?= e($nom_site) ?></h5>
                    <p>Votre partenaire de confiance pour l'excellence éducative à distance.</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5 class="text-white">Contact</h5>
                    <p><i class="fas fa-phone me-2"></i> <?= e(get_param('telephone', 'Non renseigné')) ?></p>
                    <p><i class="fab fa-whatsapp me-2"></i> <?= e($whatsapp) ?></p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5 class="text-white">Réseaux Sociaux</h5>
                    <a href="<?= e(get_param('facebook_url', '#')) ?>" class="me-3 fs-4"><i class="fab fa-facebook"></i></a>
                    <a href="<?= e(get_param('instagram_url', '#')) ?>" class="fs-4"><i class="fab fa-instagram"></i></a>
                </div>
            </div>
            <hr class="border-secondary">
            <div class="text-center small">
                &copy; <?= date('Y') ?> <?= e($nom_site) ?>. Tous droits réservés.
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>