<?php
$user = session()->get('user');
?>

<!DOCTYPE html>
<html class="light" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Arbre de Noël du Ministère</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
<link rel="stylesheet" href="<?= base_url('css/style.css') ?>">
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#ec1313",
                        "background-light": "#f8f6f6",
                        "background-dark": "#221010",
                    },
                    fontFamily: {
                        "display": ["Public Sans", "sans-serif"]
                    },
                    borderRadius: {
                        "DEFAULT": "0.25rem",
                        "lg": "0.5rem",
                        "xl": "0.75rem",
                        "full": "9999px"
                    },
                },
            },
        }
    </script>
</head>
<body>

<div class="container">
    <!-- Flocons roses -->

<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<header class="w-full">
<div class="px-4 sm:px-6 md:px-8 lg:px-12 py-3">
<div class="flex items-center justify-between gap-4 text-slate-900 dark:text-slate-100">
<div class="flex items-center gap-4">
<img alt="Logo du Ministère" class="h-16 w-16" src="<?= base_url('assets/img/MEN.jpg') ?>"/>
<div class="flex flex-col">
<h1 class="text-lg font-bold leading-tight tracking-[-0.015em]">Ministère de l'Éducation Nationale</h1>
<p class="text-sm font-normal text-slate-600 dark:text-slate-400">République du Sénégal</p>
</div>
</div>
<?php if (isset($user) && $user['status'] === 'admin'): ?>
<div>
<div class="hidden md:flex items-center gap-6">
<nav class="flex items-center gap-6 text-sm font-medium">
<a class="text-slate-700 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="/ArbreNoel">Accueil</a>
<a class="text-slate-700 dark:text-slate-300 hover:text-primary dark:hover:text-primary transition-colors" href="/ArbreNoel/statistique">Statistiques des inscrits</a>
</nav>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" data-alt="Avatar of the user" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZyy5bIwnEq5mNqTw4xOsprMPznBbmlZIO4O73gBUuGaPBobpJaxV8MP5cnYl592KTEhyxjBJeCOk7vRqJlhh1yyv3VDr8UQySTSHUhbnaFHXuyc76-XGl4rxwLrxnBx49iLhqsAS9Qg7CrNjiYp4EVebpCSclbRkoor1FERcgQjFnzdgCc4AaZiDN4LdDn5Ri1wevXMJSPa-4ikJeq1XMje89DD2IEFgp3en8SNVRmxe9OMQvT9dydf5wDXRrat_5n1AIqHNejvU");'></div>
</div></div>
<?php else :?>
    <div>
<span class="text-lg font-semibold text-slate-800 dark:text-slate-200">🎄 Arbre de Noël 2025 🎄</span>
</div>
<?php endif; ?>
</div>
</div>
</header>
<div class="layout-container flex h-full grow flex-col">
<div class="px-4 sm:px-6 md:px-8 lg:px-12 flex flex-1 justify-center py-5">
<div class="layout-content-container flex flex-col w-full max-w-[900px] flex-1">
<div class="w-full border-b border-solid border-primary/20 dark:border-primary/30 mb-5"></div>
<div class="@container pt-10">
<div class="@[480px]:px-4">
<div class="flex min-h-[480px] flex-col gap-6 bg-cover bg-center bg-no-repeat @[480px]:gap-8 @[480px]:rounded-lg items-center justify-center p-4 text-center" data-alt="A festive Christmas scene with decorated tree and gifts" style='background-image: linear-gradient(rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%), url("https://lh3.googleusercontent.com/aida-public/AB6AXuDzITZOaTlaLcybBkvIVBy71Nn24pSKeJQhynZjK4ht_C_d84G35O8rIyTePXgWbGh2hhh2rssx-pqfoZCC7D5hQFpGKmJIF6ThUioD22QZFkP6iJeqJlGTaGUPhhd-vFjPZvvPTLKz4FVoNY0VC1zK8bpqOONNblKUNXprhjBZutVPvtet6nI9w2cUgHuVscqhPx-NaSIHgoGQTumwNInrVnFeMJv2-6zGMNFBz-DSvYEGl7JW6njQGW3WbLIrevhfKu5Kg-YpW2A");'>
<div class="flex flex-col gap-2">
<h1 class="text-white text-4xl font-black leading-tight tracking-[-0.033em] @[480px]:text-5xl whitespace-pre-line">Célébration des Enfants du Personnel<br/><span class="text-xl @[480px]:text-2xl font-bold">Un Moment de Joie et de Partage pour nos Familles</span></h1>
<h2 class="text-white/90 text-xl font-normal leading-normal @[480px]:text-2xl max-w-2xl mx-auto whitespace-pre-line">🔐 Authentification Requise<br/><span class="text-sm @[480px]:text-base">Pour garantir l'éligibilité et la sécurité des inscriptions, veuillez vous authentifier avec votre compte professionnel du Ministère de l'Éducation Nationale.</span></h2>
</div>
<?php if (!empty($enfant)): ?>
    <!-- CAS : enfant déjà inscrit -->
    <div class="bg-green-100 text-green-800 p-3 rounded mb-4">
        ✅ Vous avez déjà inscrit un enfant

        <a href="/ArbreNoel/inscriptionEnfant"
           class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base hover:bg-primary/90 transition-colors">
            Modifier l'inscription
        </a>
    </div>

<?php else: ?>
    <!-- CAS : pas encore inscrit -->
    <a href="/ArbreNoel/authentification"
       class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 @[480px]:h-12 @[480px]:px-5 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] @[480px]:text-base hover:bg-primary/90 transition-colors">
        Commencer l'inscription
    </a>
<?php endif; ?>

</div>
</div>
</div>
<div class="py-16 sm:py-24">

<div class="flex flex-col items-center gap-4 text-center">
<p class="text-lg font-semibold text-primary dark:text-primary/90">✨ Organisé par l'AFMEN - Association des Femmes du Ministère de l'Éducation Nationale ✨</p>
<h2 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-slate-100 sm:text-4xl">Bienvenue à l'Arbre de Noël 2025</h2>
<p class="max-w-3xl text-lg leading-8 text-slate-600 dark:text-slate-400">L'Arbre de Noël du Ministère de l'Éducation Nationale est un événement phare qui célèbre les enfants de notre personnel dévoué. C'est un moment privilégié de joie, de cohésion et de reconnaissance envers les familles qui contribuent quotidiennement au développement de l'éducation au Sénégal. Cette année encore, l'AFMEN organise une journée mémorable remplie de surprises, d'animations et de cadeaux pour faire briller les yeux de nos enfants.</p>
</div>
<div class="mt-16 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="flex flex-col gap-4 rounded-xl border border-slate-200/80 dark:border-slate-800/50 bg-white dark:bg-slate-900/50 p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/50 text-primary">
<span class="material-symbols-outlined text-3xl">card_giftcard</span>
</div>
<div class="flex flex-col gap-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Distribution de Cadeaux</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Chaque enfant inscrit recevra un cadeau soigneusement sélectionné et adapté à son âge. Des présents qui illumineront leur journée et créeront des souvenirs inoubliables.</p>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-slate-200/80 dark:border-slate-800/50 bg-white dark:bg-slate-900/50 p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/50 text-primary">
<span class="material-symbols-outlined text-3xl">celebration</span>
</div>
<div class="flex flex-col gap-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Spectacles et Animations</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Programme riche en divertissements : Spectacles de magie, Clowns et animations, Maquillage artistique, Jeux et activités ludiques.</p>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-slate-200/80 dark:border-slate-800/50 bg-white dark:bg-slate-900/50 p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/50 text-primary">
<span class="material-symbols-outlined text-3xl">cake</span>
</div>
<div class="flex flex-col gap-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Goûter Festif</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Un délicieux goûter sera offert avec gâteaux, bonbons, jus de fruits et autres gourmandises pour régaler tous les participants.</p>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-slate-200/80 dark:border-slate-800/50 bg-white dark:bg-slate-900/50 p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/50 text-primary">
<span class="material-symbols-outlined text-3xl">family_star</span>
</div>
<div class="flex flex-col gap-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Visite du Père Noël</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Le Père Noël en personne viendra partager des moments magiques avec les enfants. Séances photos et distribution personnalisée de cadeaux au programme.</p>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-slate-200/80 dark:border-slate-800/50 bg-white dark:bg-slate-900/50 p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/50 text-primary">
<span class="material-symbols-outlined text-3xl">groups</span>
</div>
<div class="flex flex-col gap-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Cohésion Familiale</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Un moment convivial permettant aux familles du personnel du MEN de se retrouver et de partager une journée exceptionnelle dans une ambiance chaleureuse.</p>
</div>
</div>
<div class="flex flex-col gap-4 rounded-xl border border-slate-200/80 dark:border-slate-800/50 bg-white dark:bg-slate-900/50 p-6">
<div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/50 text-primary">
<span class="material-symbols-outlined text-3xl">favorite</span>
</div>
<div class="flex flex-col gap-1">
<h3 class="font-bold text-lg text-slate-900 dark:text-slate-100">Reconnaissance</h3>
<p class="text-sm text-slate-500 dark:text-slate-400">Cet événement témoigne de la reconnaissance du Ministère envers son personnel et leurs familles pour leur engagement continu au service de l'éducation nationale.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="w-full bg-red-200 mt-auto">
  <div class="w-full px-4 sm:px-6 md:px-8 lg:px-12 py-8">
    <div class="flex flex-col items-center justify-center gap-4 text-center">
      <p class="text-sm text-red-900">Ministère de l'Éducation Nationale - République du Sénégal</p>
      <p class="text-sm text-red-900">AFMEN - Association des Femmes du Ministère de l'Éducation Nationale</p>
      <p class="text-xs text-red-800">© 2025 - Tous droits réservés</p>
    </div>
  </div>
</footer>
</div>
</body></html>