@extends('layout.app')

@section('body')

<div class="min-h-screen bg-[#F5F7F9] text-[#111100]">
    <!-- Navigation -->
    <div class="sticky top-0 z-50 border-b border-black/5 bg-white/95 backdrop-blur-md">
        <div class="px-4 py-3 sm:px-8 flex justify-between items-center">
            <a href="{{ route('homepage') }}" class="inline-block transition hover:opacity-70">
                <img src="{{ asset('img/logo.png') }}" alt="Logo" class="h-12 w-auto"/>
            </a>
            
        </div>
    </div>

    <!-- Hero Section -->
    <section class="relative overflow-hidden px-4 py-16 sm:py-24 bg-gradient-to-b from-white via-white to-[#F5F7F9]">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <!-- Left Content -->
                <div class="space-y-6">
                    <div class="space-y-4">
                        <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00] animate-fade-in">✨ Été 2026</span>
                        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-black leading-[0.95] text-[#111100] animate-fade-in-up animation-delay-100">
                            L'été<br/>inoubliable<br/>de vos<br/>enfants
                        </h1>
                        <p class="text-lg sm:text-xl text-[#666] font-light max-w-lg animate-fade-in-up animation-delay-200">
                            Découvrez des activités attractives, des animateurs passionnés et des moments magiques qui marqueront cet été.
                        </p>
                    </div>

                    <div class="flex flex-col sm:flex-row gap-4 pt-4 animate-fade-in-up animation-delay-300">
                        <a href="{{ route('inscription-2026') }}" class="group relative inline-flex px-8 py-4 rounded-full bg-[#F77F00] text-white font-black text-lg overflow-hidden transition hover:shadow-2xl hover:scale-105">
                            <span class="relative z-10 flex items-center gap-2">
                                Commencer l'inscription
                                <svg class="w-5 h-5 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                </svg>
                            </span>
                            <div class="absolute inset-0 bg-[#111100] opacity-0 transition group-hover:opacity-100"></div>
                        </a>
                        <a href="#activites" class="inline-flex px-8 py-4 rounded-full border-2 border-[#111100] text-[#111100] font-black text-lg transition hover:bg-[#111100] hover:text-white">
                            En savoir plus
                        </a>
                    </div>
                </div>

                <!-- Right Visual -->
                <div class="relative flex justify-center lg:justify-end">
                    <div class="relative w-80 h-80 lg:w-96 lg:h-96">
                        <!-- Floating elements background -->
                        <div class="absolute inset-0 bg-gradient-to-br from-[#F77F00]/10 to-transparent rounded-3xl blur-3xl"></div>

                        <!-- Main image container -->
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center space-y-8">
                                <div class="text-9xl animate-float">🏖️</div>
                                <div class="flex justify-around text-7xl opacity-70">
                                    <span class="animate-float animation-delay-200">🎪</span>
                                    <span class="animate-float animation-delay-300">⛺</span>
                                </div>
                            </div>
                        </div>

                        <!-- Decorative circles -->
                        <div class="absolute top-0 right-0 w-40 h-40 bg-[#F77F00] rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
                        <div class="absolute bottom-0 left-0 w-40 h-40 bg-[#111100] rounded-full mix-blend-multiply filter blur-3xl opacity-10 animate-pulse animation-delay-200"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="px-4 py-12 sm:py-16 bg-white border-y border-black/5">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-3 gap-4 sm:gap-8 text-center">
                <div class="space-y-2">
                    <div class="text-4xl sm:text-5xl font-black text-[#F77F00]">5</div>
                    <p class="text-sm sm:text-base font-semibold text-[#666]">Semaines d'activités</p>
                </div>
                <div class="space-y-2">
                    <div class="text-4xl sm:text-5xl font-black text-[#F77F00]">10+</div>
                    <p class="text-sm sm:text-base font-semibold text-[#666]">Activités variées</p>
                </div>
                <div class="space-y-2">
                    <div class="text-4xl sm:text-5xl font-black text-[#F77F00]">100%</div>
                    <p class="text-sm sm:text-base font-semibold text-[#666]">Plaisir garanti</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Activities Section -->
    <section id="activites" class="px-4 py-16 sm:py-24">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12 sm:mb-16">
                <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00] mb-4 animate-fade-in">🎉 Nos Activités</span>
                <h2 class="text-4xl sm:text-5xl font-black text-[#111100] mb-4 animate-fade-in-up animation-delay-100">
                    Semaines remplies d'aventures
                </h2>
                <p class="text-lg text-[#666] font-light max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
                    Du camping aux parcs d'attractions, des activités adaptées à tous les enfants
                </p>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 stagger-animate">
                <!-- Activity 1 -->
                <div class="group relative rounded-2xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] transition hover:shadow-xl hover:scale-105">
                    <div class="relative h-40 bg-gradient-to-br from-[#F77F00]/20 to-transparent flex items-center justify-center">
                        <span class="text-7xl group-hover:scale-125 transition">🏖️</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-black mb-2 text-[#111100]">Activités Aquatiques</h3>
                        <p class="text-[#666] font-light mb-4">Piscine, jeux d'eau, canoë ou pêche</p>
                        <div class="flex gap-2 flex-wrap">
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🌊 Eau</span>
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">😄 Amusement</span>
                        </div>
                    </div>
                </div>

                <!-- Activity 2 -->
                <div class="group relative rounded-2xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] transition hover:shadow-xl hover:scale-105">
                    <div class="relative h-40 bg-gradient-to-br from-[#F77F00]/20 to-transparent flex items-center justify-center">
                        <span class="text-7xl group-hover:scale-125 transition">⛺</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-black mb-2 text-[#111100]">Camping & Nature</h3>
                        <p class="text-[#666] font-light mb-4">Nuits sous les étoiles, découverte de la nature et aventures en plein air</p>
                        <div class="flex gap-2 flex-wrap">
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🌲 Nature</span>
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🏕️ Aventure</span>
                        </div>
                    </div>
                </div>

                <!-- Activity 3 -->
                <div class="group relative rounded-2xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] transition hover:shadow-xl hover:scale-105">
                    <div class="relative h-40 bg-gradient-to-br from-[#F77F00]/20 to-transparent flex items-center justify-center">
                        <span class="text-7xl group-hover:scale-125 transition">🎢</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-black mb-2 text-[#111100]">Parcs & Attractions</h3>
                        <p class="text-[#666] font-light mb-4">Walibi, manèges et divertissements pour des journées mémorables</p>
                        <div class="flex gap-2 flex-wrap">
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🎡 Attractions</span>
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🎉 Frisson</span>
                        </div>
                    </div>
                </div>

                <!-- Activity 4 -->
                <div class="group relative rounded-2xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] transition hover:shadow-xl hover:scale-105">
                    <div class="relative h-40 bg-gradient-to-br from-[#F77F00]/20 to-transparent flex items-center justify-center">
                        <span class="text-7xl group-hover:scale-125 transition">🎨</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-black mb-2 text-[#111100]">Créativité & Loisirs</h3>
                        <p class="text-[#666] font-light mb-4">Ateliers créatifs, jeux de groupe et activités ludiques pour tous</p>
                        <div class="flex gap-2 flex-wrap">
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">✏️ Créatif</span>
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🎭 Expressif</span>
                        </div>
                    </div>
                </div>

                <!-- Activity 5 -->
                <div class="group relative rounded-2xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] transition hover:shadow-xl hover:scale-105">
                    <div class="relative h-40 bg-gradient-to-br from-[#F77F00]/20 to-transparent flex items-center justify-center">
                        <span class="text-7xl group-hover:scale-125 transition">🤝</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-black mb-2 text-[#111100]">Socialisation</h3>
                        <p class="text-[#666] font-light mb-4">Faire de nouveaux amis, travailler en équipe et développer l'esprit collectif</p>
                        <div class="flex gap-2 flex-wrap">
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">👫 Copains</span>
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">💪 Équipe</span>
                        </div>
                    </div>
                </div>

                <!-- Activity 6 -->
                <div class="group relative rounded-2xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] transition hover:shadow-xl hover:scale-105">
                    <div class="relative h-40 bg-gradient-to-br from-[#F77F00]/20 to-transparent flex items-center justify-center">
                        <span class="text-7xl group-hover:scale-125 transition">😄</span>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-black mb-2 text-[#111100]">Accueil Flexible</h3>
                        <p class="text-[#666] font-light mb-4">Accueil matin et soir pour faciliter l'organisation de la famille</p>
                        <div class="flex gap-2 flex-wrap">
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🌅 Matin</span>
                            <span class="text-xs bg-[#F77F00]/10 text-[#F77F00] font-bold px-3 py-1 rounded-full">🌙 Soir</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="px-4 py-16 sm:py-24 bg-white border-t border-black/5">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12 sm:mb-16">
                <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00] mb-4">⭐ Pourquoi nous</span>
                <h2 class="text-4xl sm:text-5xl font-black text-[#111100] mb-4">
                    Votre confiance, notre priorité
                </h2>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="flex gap-4">
                    <div class="flex-shrink-0 text-4xl">👨‍🏫</div>
                    <div>
                        <h3 class="text-xl font-black text-[#111100] mb-2">Animateurs Qualifiés</h3>
                        <p class="text-[#666] font-light">Une équipe d'animateurs expérimentés et passionnés, formés pour assurer la sécurité et le bien-être de chaque enfant</p>
                    </div>
                </div>

                <div class="flex gap-4">
                    <div class="flex-shrink-0 text-4xl">🥳</div>
                    <div>
                        <h3 class="text-xl font-black text-[#111100] mb-2">Fun et convivialité</h3>
                        <p class="text-[#666] font-light">Des activités ludiques et des moments en famille pour créer des souvenirs inoubliables</p>
                    </div>
                </div>

                <div class="flex gap-4">
                    <div class="flex-shrink-0 text-4xl">🎯</div>
                    <div>
                        <h3 class="text-xl font-black text-[#111100] mb-2">Activités Variées</h3>
                        <p class="text-[#666] font-light">Un large choix d'activités pour tous les âges et tous les intérêts, de la plus calme à la plus sportive</p>
                    </div>
                </div>

                <div class="flex gap-4">
                    <div class="flex-shrink-0 text-4xl">💰</div>
                    <div>
                        <h3 class="text-xl font-black text-[#111100] mb-2">Tarifs Accessibles</h3>
                        <p class="text-[#666] font-light">Des prix justes et des possibilités de financement pour rendre l'été accessible à tous</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Timeline Section -->
    <section class="px-4 py-16 sm:py-24 bg-gradient-to-b from-[#F5F7F9] to-white">
        <div class="max-w-6xl mx-auto">
            <div class="text-center mb-12 sm:mb-16">
                <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00] mb-4">📅 Les Semaines</span>
                <h2 class="text-4xl sm:text-5xl font-black text-[#111100] mb-4">
                    5 semaines d'aventures
                </h2>
                <p class="text-lg text-[#666] font-light max-w-2xl mx-auto">
                    Du 6 juillet au 7 août, choisissez les semaines qui vous conviennent
                </p>
            </div>

            <div class="space-y-4">
                @php
                    $weeks = [
                        ['num' => 1, 'dates' => '6-10 juil', 'emoji' => '🏖️', 'highlight' => 'Camp Hirson'],
                        ['num' => 2, 'dates' => '13-17 juil', 'emoji' => '🎢', 'highlight' => 'Walibi'],
                        ['num' => 3, 'dates' => '20-24 juil', 'emoji' => '🎪', 'highlight' => 'Kermesse'],
                        ['num' => 4, 'dates' => '27-31 juil', 'emoji' => '🎯', 'highlight' => 'Jeux & Créativité'],
                        ['num' => 5, 'dates' => '3-7 août', 'emoji' => '⭐', 'highlight' => 'Grand Finale'],
                    ];
                @endphp
                @foreach ($weeks as $index => $week)
                    <div class="group relative rounded-xl bg-white border-2 border-black/5 overflow-hidden hover:border-[#F77F00] hover:shadow-lg transition p-6">
                        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                            <div class="flex items-center gap-4">
                                <div class="text-5xl group-hover:scale-125 transition">{{ $week['emoji'] }}</div>
                                <div>
                                    <p class="text-sm font-bold uppercase tracking-wider text-[#F77F00]">Semaine {{ $week['num'] }}</p>
                                    <p class="text-2xl font-black text-[#111100]">{{ $week['dates'] }}</p>
                                    <p class="text-sm text-[#666] font-light">{{ $week['highlight'] }}</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="inline-block px-4 py-2 rounded-full bg-[#F77F00] text-white font-bold text-sm">
                                    Places disponibles
                                </p>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="px-4 py-16 sm:py-24 bg-gradient-to-r from-[#111100] to-[#1a1a0f] relative overflow-hidden">
        <!-- Background decorative elements -->
        <div class="absolute top-0 right-0 w-96 h-96 bg-[#F77F00] rounded-full mix-blend-multiply filter blur-3xl opacity-10"></div>
        <div class="absolute bottom-0 left-0 w-96 h-96 bg-[#F77F00] rounded-full mix-blend-multiply filter blur-3xl opacity-10"></div>

        <div class="max-w-4xl mx-auto text-center relative z-10">
            <span class="inline-block text-sm font-bold uppercase tracking-[0.15em] text-[#F77F00] mb-6 animate-fade-in">🎉 Prêt?</span>
            <h2 class="text-5xl sm:text-6xl font-black text-white mb-6 animate-fade-in-up animation-delay-100">
                Inscrivez vos enfants<br/>dès maintenant !
            </h2>
            <p class="text-xl text-white/80 font-light max-w-2xl mx-auto mb-8 animate-fade-in-up animation-delay-200">
                Les places sont limitées et les demandes nombreuses. Sécurisez la participation de vos enfants dès aujourd'hui pour un été magique.
            </p>

            <div class="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up animation-delay-300">
                <a href="{{ route('inscription-2026') }}" class="group relative inline-flex px-8 py-4 rounded-full bg-[#F77F00] text-[#111100] font-black text-lg overflow-hidden transition hover:shadow-2xl hover:scale-105">
                    <span class="relative z-10 flex items-center gap-2">
                        Commencer maintenant
                        <svg class="w-5 h-5 transition group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                        </svg>
                    </span>
                    <div class="absolute inset-0 bg-white opacity-0 transition group-hover:opacity-20"></div>
                </a>
                <a href="#activites" class="inline-flex px-8 py-4 rounded-full border-2 border-white text-white font-black text-lg transition hover:bg-white hover:text-[#111100]">
                    Voir les activités
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="px-4 py-8 sm:py-12 bg-white border-t border-black/5">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col sm:flex-row justify-between items-center gap-6">
                <img src="{{ asset('img/logo.png') }}" alt="Logo" class="h-10 w-auto"/>
                <p class="text-sm text-[#666] font-light text-center sm:text-right">
                    © 2026 FRANCAS de Donchery. Tous droits réservés. 🏖️
                </p>
            </div>
        </div>
    </footer>
</div>

@endsection