@extends('layouts.public-layout')

@section("title", "Accueil - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Eternel")

@push('styles')
<style>
    /* Style spécial pour la lettre J de Jésus-Christ sur tablette et desktop */
    @media (min-width: 768px) {
        .hero-jesus-title::first-letter {
            font-size: 1.4em;
            font-weight: 900;
            background: linear-gradient(135deg, #fbbf24 0%, #fcd34d 25%, #fef3c7 50%, #fcd34d 75%, #fbbf24 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 30px rgba(251, 191, 36, 0.8),
                         0 0 60px rgba(251, 191, 36, 0.6),
                         0 0 90px rgba(251, 191, 36, 0.4);
            filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9))
                    drop-shadow(0 0 20px rgba(251, 191, 36, 0.7))
                    drop-shadow(0 0 30px rgba(251, 191, 36, 0.5));
            animation: glowPulse 2s ease-in-out infinite;
            display: inline-block;
            margin-right: 0.05em;
        }

        @keyframes glowPulse {
            0%, 100% {
                filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.9))
                        drop-shadow(0 0 20px rgba(251, 191, 36, 0.7))
                        drop-shadow(0 0 30px rgba(251, 191, 36, 0.5));
            }
            50% {
                filter: drop-shadow(0 0 15px rgba(251, 191, 36, 1))
                        drop-shadow(0 0 30px rgba(251, 191, 36, 0.9))
                        drop-shadow(0 0 45px rgba(251, 191, 36, 0.7))
                        drop-shadow(0 0 60px rgba(251, 191, 36, 0.5));
            }
        }
    }
</style>
@endpush

@section('content')
    <!-- Hero Section -->
    <section class="relative bg-slate-900 text-white overflow-hidden min-h-screen flex items-center justify-center">
        <!-- Background Image with Blur -->
        <div class="absolute inset-0 z-0">
            <!-- Image de fond - Unsplash (église, bible, ou croix) -->
            <img
                src="https://images.unsplash.com/photo-1438232992991-995b7058bbb3?q=80&w=2073&auto=format&fit=crop"
                alt="Background"
                class="w-full h-full object-cover opacity-90 blur-sm scale-110"
                style="filter: brightness(1.5) contrast(1.1);"
                loading="eager"
            >
            <!-- Overlay très léger pour contraste minimal -->
            <div class="absolute inset-0 bg-gradient-to-br from-slate-900/35 via-slate-900/30 to-slate-800/35"></div>
            <!-- Subtle texture overlay -->
            <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:50px_50px]"></div>
        </div>

        <!-- Decorative Light Accents -->
        <div class="absolute inset-0 z-10 overflow-hidden pointer-events-none">
            <div class="absolute top-20 right-10 w-[500px] h-[500px] bg-amber-600/8 rounded-full blur-3xl"></div>
            <div class="absolute bottom-20 left-10 w-[500px] h-[500px] bg-slate-400/6 rounded-full blur-3xl"></div>
        </div>

        <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32">
            <div class="text-center">
                <!-- Bouton Live Animé -->
                <div id="hero-badge" class="inline-block mb-6 opacity-0">
                    <div class="relative">
                        <!-- Cercles d'animation externes -->
                        <span class="absolute inset-0 rounded-full bg-red-500 opacity-75 animate-ping"></span>
                        <span class="absolute inset-0 rounded-full bg-red-400 opacity-50 animate-pulse"></span>

                        <!-- Bouton principal -->
                        <a href="#live-section" class="relative inline-flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-red-600 via-red-500 to-red-600 hover:from-red-700 hover:via-red-600 hover:to-red-700 backdrop-blur-md rounded-full border-2 border-white/30 text-white font-bold text-base shadow-2xl transition-all duration-300 hover:scale-110 hover:shadow-red-500/50 animate-bounce hover:animate-none">
                            <!-- Point lumineux animé -->
                            <span class="relative flex h-4 w-4">
                                <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-90"></span>
                                <span class="animate-pulse relative inline-flex rounded-full h-4 w-4 bg-white shadow-lg shadow-white/50"></span>
                            </span>

                            <!-- Icône YouTube avec animation -->
                            <i class="fab fa-youtube text-xl animate-pulse"></i>

                            <!-- Texte -->
                            <span class="tracking-wide">SUIVEZ-NOUS EN DIRECT</span>

                            <!-- Flèche animée -->
                            <i class="fas fa-chevron-right text-sm animate-pulse"></i>
                        </a>
                    </div>
                </div>

                <h1 class="text-5xl md:text-6xl lg:text-8xl font-bold mb-8 font-serif leading-tight drop-shadow-2xl">
                    <span id="hero-title-1" class="block opacity-0 bg-gradient-to-r from-white via-slate-100 to-white bg-clip-text text-transparent">
                        Proclamer l'Évangile de
                    </span>
                    <span id="hero-title-2" class="block opacity-0 bg-gradient-to-r from-amber-400 via-amber-300 to-amber-400 bg-clip-text text-transparent hero-jesus-title">
                        Jésus-Christ
                    </span>
                </h1>
                <p id="hero-subtitle" class="text-xl md:text-2xl text-slate-100 mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-lg font-medium opacity-0">
                    Pour transformer les vies par sa puissance à travers le monde
                </p>
                <div id="hero-verse" class="inline-block mb-12 px-8 py-4 bg-gradient-to-r from-amber-600/20 via-amber-500/20 to-amber-600/20 backdrop-blur-md rounded-2xl border-2 border-amber-600/40 shadow-2xl hover:scale-105 transition-transform duration-300 opacity-0">
                    <p class="text-amber-400 font-bold italic text-lg md:text-xl drop-shadow-md">
                        <i class="fas fa-book-bible mr-2"></i>"Jésus-Christ est le même hier, aujourd'hui et éternellement"
                    </p>
                    <p class="text-amber-200 text-sm mt-1">- Hébreux 13:8</p>
                </div>
                <div id="hero-buttons" class="flex flex-col sm:flex-row gap-5 justify-center items-center opacity-0">
                    <a href="{{ route('public.churches') }}" class="group relative overflow-hidden bg-gradient-to-r from-amber-600 via-amber-500 to-amber-600 text-white px-10 py-5 rounded-full font-bold transition-all shadow-2xl hover:shadow-amber-600/50 transform hover:-translate-y-2 hover:scale-110 duration-300">
                        <span class="relative z-10 flex items-center">
                            <i class="fas fa-church mr-3 text-lg group-hover:rotate-12 transition-transform"></i>
                            Découvrir nos Églises
                            <i class="fas fa-arrow-right ml-3 group-hover:translate-x-2 transition-transform inline-block"></i>
                        </span>
                        <div class="absolute inset-0 bg-gradient-to-r from-amber-700 to-amber-600 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    </a>
                    <a href="#contact" class="group relative overflow-hidden bg-white/10 backdrop-blur-md border-2 border-white/40 text-white px-10 py-5 rounded-full font-bold hover:bg-white hover:border-white hover:text-slate-800 transition-all shadow-2xl transform hover:-translate-y-2 hover:scale-110 duration-300">
                        <span class="flex items-center">
                            <i class="fas fa-envelope mr-3 text-lg group-hover:scale-125 transition-transform inline-block"></i>
                            Nous Contacter
                        </span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Wave Separator -->
        <div class="absolute bottom-0 left-0 w-full overflow-hidden leading-none">
            <svg class="relative block w-full h-12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
                <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-neutral-cream"></path>
            </svg>
        </div>
    </section>

    <!-- Live YouTube Section -->
    <section id="live-section" class="py-16 bg-neutral-cream relative overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 opacity-5">
            <div class="absolute top-20 right-10 w-96 h-96 bg-primary-navy rounded-full blur-3xl"></div>
            <div class="absolute bottom-20 left-10 w-96 h-96 bg-primary-gold rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header -->
            <div id="live-header" class="text-center mb-10">
                <div id="live-badge" class="inline-flex items-center gap-3 mb-4 bg-red-100 px-4 py-2 rounded-full hidden">
                    <div class="relative">
                        <div class="w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
                        <div class="absolute top-0 left-0 w-3 h-3 bg-red-600 rounded-full animate-ping"></div>
                    </div>
                    <span class="text-red-600 font-bold text-sm uppercase tracking-wider">EN DIRECT</span>
                </div>
                @if($lastLiveVideo)
                <div id="no-live-badge" class="inline-flex items-center gap-3 mb-4 bg-blue-100 px-4 py-2 rounded-full">
                    <i class="fas fa-video text-blue-600"></i>
                    <span class="text-blue-600 font-bold text-sm uppercase tracking-wider">Replay en boucle</span>
                </div>
                @else
                <div id="no-live-badge" class="inline-flex items-center gap-3 mb-4 bg-gray-100 px-4 py-2 rounded-full">
                    <i class="fas fa-info-circle text-gray-600"></i>
                    <span class="text-gray-600 font-bold text-sm uppercase tracking-wider">Pas de live actuellement</span>
                </div>
                @endif
                <h2 id="live-title" class="text-4xl md:text-5xl font-bold text-primary-navy mb-4 font-serif hidden">
                    <i class="fab fa-youtube text-red-600 mr-3"></i>Suivez-nous en Live
                </h2>
                @if($lastLiveVideo)
                <h2 id="no-live-title" class="text-4xl md:text-5xl font-bold text-primary-navy mb-4 font-serif">
                    <i class="fab fa-youtube text-red-600 mr-3"></i>{{ $lastLiveVideo->title }}
                </h2>
                @else
                <h2 id="no-live-title" class="text-4xl md:text-5xl font-bold text-primary-navy mb-4 font-serif">
                    <i class="fab fa-youtube text-gray-600 mr-3"></i>Chaîne YouTube
                </h2>
                @endif
                <p id="live-description" class="text-text-muted text-lg max-w-2xl mx-auto hidden">
                    Rejoignez notre famille et vivez nos cultes, enseignements et événements en direct
                </p>
                @if($lastLiveVideo)
                <p id="no-live-description" class="text-text-muted text-lg max-w-2xl mx-auto">
                    Regardez notre dernier live en replay jusqu'au prochain direct. Abonnez-vous pour être notifié !
                </p>
                @else
                <p id="no-live-description" class="text-text-muted text-lg max-w-2xl mx-auto">
                    Aucun live n'est en cours actuellement. Consultez nos replays et abonnez-vous pour être notifié du prochain live
                </p>
                @endif
            </div>

            <!-- YouTube Embed -->
            <div class="max-w-5xl mx-auto">
                <div id="youtube-container" class="relative bg-black rounded-2xl overflow-hidden shadow-2xl border-4 border-gray-200">
                    <div class="aspect-w-16 aspect-h-9">
                        <!-- Live YouTube - Les Rachetés de l'Eternel -->
                        <iframe
                            id="youtube-live-iframe"
                            class="w-full h-full hidden"
                            style="aspect-ratio: 16/9; min-height: 400px;"
                            data-src="https://www.youtube.com/embed/live_stream?channel=UCl5h3ItmmNzqVENkh55oPIQ&autoplay=1&mute=0&enablejsapi=1"
                            title="Live YouTube - MMPV"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen>
                        </iframe>

                        <!-- Replay video when no live is active -->
                        @if($lastLiveVideo)
                        <iframe
                            id="replay-video-iframe"
                            class="w-full h-full hidden"
                            style="aspect-ratio: 16/9; min-height: 400px;"
                            data-src="https://www.youtube.com/embed/{{ $lastLiveVideo->youtube_id }}?autoplay=1&mute=1&loop=1&playlist={{ $lastLiveVideo->youtube_id }}&enablejsapi=1"
                            title="Dernier Live - {{ $lastLiveVideo->title }}"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen>
                        </iframe>
                        @else
                        <!-- Placeholder when no live and no replay available -->
                        <div id="no-live-placeholder" class="absolute inset-0 bg-gradient-to-br from-primary-navy to-blue-900 flex items-center justify-center">
                            <div class="text-center text-white p-8">
                                <div class="mb-6">
                                    <i class="fab fa-youtube text-8xl text-red-600 mb-4"></i>
                                </div>
                                <h3 class="text-3xl font-bold mb-4">Aucun Live en ce moment</h3>
                                <p class="text-xl text-gray-300 mb-6 max-w-md mx-auto">
                                    Nous ne diffusons pas en direct actuellement. Consultez notre chaîne pour voir les replays et rester informé du prochain live !
                                </p>
                                <div class="flex flex-col sm:flex-row gap-3 justify-center items-center">
                                    <a href="https://www.youtube.com/c/RACHETÉSWEBTV/streams"
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       class="inline-flex items-center bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-bold transition-all shadow-lg">
                                        <i class="fas fa-video mr-2"></i>
                                        Voir les Replays
                                    </a>
                                    <a href="https://www.youtube.com/c/RACHETÉSWEBTV"
                                       target="_blank"
                                       rel="noopener noreferrer"
                                       class="inline-flex items-center bg-white bg-opacity-20 hover:bg-opacity-30 backdrop-blur-sm text-white px-6 py-3 rounded-full font-semibold transition-all border-2 border-white border-opacity-40">
                                        <i class="fab fa-youtube mr-2"></i>
                                        Visiter la Chaîne
                                    </a>
                                </div>

                                <!-- Schedule info (optional) -->
                                <div class="mt-8 p-4 bg-white bg-opacity-10 backdrop-blur-sm rounded-xl border border-white border-opacity-20">
                                    <p class="text-sm text-gray-200 mb-2">
                                        <i class="fas fa-calendar-alt mr-2 text-primary-gold"></i>
                                        <strong>Nos Lives habituels :</strong>
                                    </p>
                                    <p class="text-sm text-gray-300">
                                        Cultes du dimanche • Enseignements • Événements spéciaux
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- CTA Buttons -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center mt-8">
                    <a href="https://www.youtube.com/c/RACHETÉSWEBTV" target="_blank" rel="noopener noreferrer" class="group bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full font-bold transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1 inline-flex items-center justify-center">
                        <i class="fab fa-youtube text-2xl mr-3"></i>
                        S'abonner à notre chaîne
                        <i class="fas fa-external-link-alt ml-2 text-sm group-hover:translate-x-1 transition-transform"></i>
                    </a>
                    <a href="https://www.youtube.com/c/RACHETÉSWEBTV/streams" target="_blank" rel="noopener noreferrer" class="group bg-white hover:bg-gray-50 text-primary-navy px-8 py-4 rounded-full font-bold transition-all shadow-lg hover:shadow-xl border-2 border-primary-navy inline-flex items-center justify-center">
                        <i class="fas fa-video mr-2"></i>
                        Voir tous les replays
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Mission Statement -->
    <section class="py-20 bg-neutral-cream">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <div class="inline-block mb-4 px-4 py-2 bg-primary-gold bg-opacity-20 rounded-full border border-primary-gold border-opacity-30">
                    <span class="text-primary-gold font-semibold italic">Ésaïe 35:10</span>
                </div>
                <h2 class="text-4xl md:text-5xl font-bold text-primary-navy mb-6 font-serif">Notre Mission</h2>
                <p class="text-xl text-text-muted max-w-3xl mx-auto leading-relaxed mb-6">
                    "Les rachetés de l'Éternel retourneront, Ils iront à Sion avec chants de triomphe, Et une joie éternelle couronnera leur tête; L'allégresse et la joie s'approcheront, La douleur et les gémissements s'enfuiront."
                </p>
                <div class="max-w-4xl mx-auto mb-8 p-6 bg-white bg-opacity-50 rounded-2xl border border-primary-gold border-opacity-20">
                    <p class="text-lg text-primary-navy leading-relaxed">
                        La Mission Mondiale de la Parole de Vie "Les Rachetés de l'Éternel" est une famille chrétienne fondée le <strong>31 décembre 2006</strong>, mandatée pour répandre la bonne nouvelle de l'Évangile de notre Seigneur Jésus-Christ, avec un message centré sur la Sanctification, sans laquelle nul ne verra Dieu <em class="text-text-muted">(Hébreux 12:14)</em>.
                    </p>
                </div>
            </div>

            <!-- 3 axes fondamentaux -->
            <div class="text-center max-w-4xl mx-auto mb-12">
                <p class="text-lg text-text-muted font-semibold">
                    Notre mission repose sur 3 axes fondamentaux qui guident toutes nos actions :
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 mb-16">
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="w-16 h-16 bg-gradient-to-br from-primary-navy to-blue-600 rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-book-open text-white text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-primary-navy mb-4 font-serif text-center">La vie de méditation de la Parole de Dieu</h3>
                </div>

                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="w-16 h-16 bg-gradient-to-br from-primary-gold to-yellow-600 rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-hands-praying text-white text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold text-primary-navy mb-4 font-serif text-center">La vie de prière</h3>
                </div>

                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="w-16 h-16 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform">
                        <span class="text-4xl">🍽️</span>
                    </div>
                    <h3 class="text-xl font-bold text-primary-navy mb-4 font-serif text-center">La vie de jeûne</h3>
                </div>
            </div>

            <!-- Séparateur décoratif -->
            <div class="my-16">
                <div class="flex items-center justify-center">
                    <div class="h-px bg-gradient-to-r from-transparent via-primary-gold to-transparent flex-1 max-w-md"></div>
                    <div class="mx-6">
                        <div class="w-3 h-3 bg-primary-gold rounded-full"></div>
                    </div>
                    <div class="h-px bg-gradient-to-r from-primary-gold via-primary-gold to-transparent flex-1 max-w-md"></div>
                </div>
            </div>

            <!-- Grille des 3 blocs: Message de Sanctification, Édification d'églises, Présence Mondiale -->
            <div class="grid md:grid-cols-3 gap-8 mb-8">
                <!-- Bloc 1: Message de Sanctification -->
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="text-5xl mb-4 text-center">🔥</div>
                    <h3 class="text-xl font-bold text-primary-navy mb-3 font-serif text-center">Message de Sanctification</h3>
                    <p class="text-text-muted leading-relaxed mb-4 text-center">
                        Proclamer l'importance de la sainteté pour voir Dieu
                    </p>
                    <p class="text-primary-gold italic text-sm text-center">"Recherchez... la sanctification, sans laquelle personne ne verra le Seigneur." - Hébreux 12:14</p>
                </div>

                <!-- Bloc 2: Édification d'églises -->
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="text-5xl mb-4 text-center">⛪</div>
                    <h3 class="text-xl font-bold text-primary-navy mb-3 font-serif text-center">Édification d'églises</h3>
                    <p class="text-text-muted leading-relaxed mb-4 text-center">
                        Bâtir des familles fortes centrées sur l'amour et la sanctification
                    </p>
                    <p class="text-primary-gold italic text-sm text-center">"Je bâtirai mon Église, et les portes du séjour des morts ne prévaudront point contre elle." - Matthieu 16:18</p>
                </div>

                <!-- Bloc 3: Présence Mondiale -->
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="text-5xl mb-4 text-center">🌍</div>
                    <h3 class="text-xl font-bold text-primary-navy mb-3 font-serif text-center">Présence Mondiale</h3>
                    <p class="text-text-muted leading-relaxed mb-4 text-center">
                        Des églises implantées en France et dans plusieurs pays d'Afrique pour toucher les nations
                    </p>
                    <p class="text-primary-gold italic text-sm text-center">"Vous serez mes témoins... jusqu'aux extrémités de la terre." - Actes 1:8</p>
                </div>
            </div>

            <!-- Notre Présence dans le Monde -->
            <div class="mt-16">
                <div class="text-center mb-12">
                    <h3 class="text-3xl md:text-4xl font-bold text-primary-navy mb-4 font-serif">Notre Présence dans le Monde</h3>
                    <p class="text-lg text-text-muted max-w-3xl mx-auto leading-relaxed">
                        Une mission mondiale qui touche les cœurs à travers les continents
                    </p>
                </div>

                <!-- Section Afrique -->
                <div class="mb-12">
                    <div class="flex items-center justify-center mb-8">
                        <div class="h-px bg-gradient-to-r from-transparent via-primary-gold to-transparent flex-1"></div>
                        <h4 class="text-2xl md:text-3xl font-bold text-primary-gold px-6 font-serif">🌍 Afrique</h4>
                        <div class="h-px bg-gradient-to-r from-primary-gold via-primary-gold to-transparent flex-1"></div>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/maghreb.png" alt="Maghreb" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover" onerror="this.src='https://flagcdn.com/w80/sa.png'">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Maghreb</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/mz.png" alt="Mozambique" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Mozambique</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/cd.png" alt="RD Congo" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">RD Congo</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/bf.png" alt="Burkina Faso" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Burkina Faso</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ml.png" alt="Mali" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Mali</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ci.png" alt="Côte d'Ivoire" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Côte d'Ivoire</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ug.png" alt="Ouganda" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Ouganda</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/cg.png" alt="Congo-Brazzaville" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Congo-Brazzaville</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ao.png" alt="Angola" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Angola</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/cm.png" alt="Cameroun" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Cameroun</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ls.png" alt="Lesotho" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Lesotho</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/gh.png" alt="Ghana" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Ghana</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/tg.png" alt="Togo" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Togo</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ga.png" alt="Gabon" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Gabon</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/bj.png" alt="Bénin" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Bénin</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/tz.png" alt="Tanzanie" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Tanzanie</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/mw.png" alt="Malawi" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Malawi</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/bi.png" alt="Burundi" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Burundi</p>
                        </div>
                        <div class="group bg-gradient-to-br from-neutral-cream to-white p-4 rounded-xl border-2 border-gray-100 hover:border-primary-gold hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/rw.png" alt="Rwanda" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-primary-gold transition-colors">Rwanda</p>
                        </div>
                    </div>
                </div>

                <!-- Section Europe & Amérique -->
                <div>
                    <div class="flex items-center justify-center mb-8">
                        <div class="h-px bg-gradient-to-r from-transparent via-blue-600 to-transparent flex-1"></div>
                        <h4 class="text-2xl md:text-3xl font-bold text-blue-600 px-6 font-serif">🌎 Europe & Amérique</h4>
                        <div class="h-px bg-gradient-to-r from-blue-600 via-blue-600 to-transparent flex-1"></div>
                    </div>
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 gap-4">
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/be.png" alt="Belgique" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Belgique</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/ch.png" alt="Suisse" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Suisse</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/hu.png" alt="Hongrie" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Hongrie</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/pt.png" alt="Portugal" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Portugal</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/us.png" alt="États-Unis" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">États-Unis</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/de.png" alt="Allemagne" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Allemagne</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/se.png" alt="Suède" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Suède</p>
                        </div>
                        <div class="group bg-gradient-to-br from-blue-50 to-white p-4 rounded-xl border-2 border-gray-100 hover:border-blue-600 hover:shadow-lg transition-all duration-300 text-center">
                            <img src="https://flagcdn.com/w80/es.png" alt="Espagne" class="w-8 h-8 mx-auto mb-2 rounded shadow-md object-cover">
                            <p class="text-sm font-semibold text-primary-navy group-hover:text-blue-600 transition-colors">Espagne</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    @if($mainChurch)
        <!-- Main Church Highlight (Angers) -->
        <section class="py-8 md:py-12 lg:py-20 bg-gradient-to-br from-blue-50 via-purple-50 to-blue-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="bg-white rounded-xl md:rounded-2xl shadow-2xl overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <!-- Left Side - Image/Icon -->
                        <div class="relative bg-gradient-to-br from-blue-600 via-blue-700 to-purple-700 overflow-hidden">
                            @if($mainChurch->image)
                                <!-- Image de l'église -->
                                <div class="relative h-full min-h-[300px] sm:min-h-[400px] md:min-h-[600px]">
                                    @php
                                        // Détermine le bon chemin pour l'image
                                        $imagePath = $mainChurch->image;
                                        if (str_starts_with($imagePath, 'http')) {
                                            // URL complète
                                            $imageUrl = $imagePath;
                                        } elseif (str_starts_with($imagePath, 'storage/')) {
                                            // Déjà préfixé avec storage/
                                            $imageUrl = asset($imagePath);
                                        } elseif (str_starts_with($imagePath, 'churches/') || str_starts_with($imagePath, 'images/')) {
                                            // Chemin relatif dans storage
                                            $imageUrl = asset('storage/' . $imagePath);
                                        } else {
                                            // Nom de fichier simple
                                            $imageUrl = asset('storage/churches/' . $imagePath);
                                        }
                                    @endphp
                                    <img src="{{ $imageUrl }}"
                                         alt="{{ $mainChurch->name }}"
                                         class="absolute inset-0 w-full h-full object-cover">
                                    <!-- Overlay gradient -->
                                    <div class="absolute inset-0 bg-gradient-to-t from-blue-900/95 via-blue-800/60 to-transparent"></div>
                                    <!-- Content over image - Hidden on mobile, shown on desktop -->
                                    <div class="hidden md:block absolute bottom-0 left-0 right-0 p-8 lg:p-12 text-white">
                                        <h3 class="text-3xl lg:text-4xl font-bold mb-3 drop-shadow-lg">Notre Église Siège</h3>
                                        <div class="flex items-center text-blue-100 text-lg drop-shadow-md">
                                            <i class="fas fa-map-marker-alt mr-2"></i>
                                            <span>{{ $mainChurch->city }}, {{ $mainChurch->country }}</span>
                                        </div>
                                    </div>
                                </div>
                            @else
                                <!-- Icône par défaut si pas d'image -->
                                <div class="p-6 sm:p-8 md:p-12 flex flex-col items-center justify-center text-white h-full min-h-[300px] sm:min-h-[400px] md:min-h-[600px]">
                                    <div class="bg-white bg-opacity-20 backdrop-blur-sm rounded-full p-6 md:p-8 mb-4 md:mb-6">
                                        <i class="fas fa-church text-5xl sm:text-6xl md:text-8xl"></i>
                                    </div>
                                    <div class="text-center">
                                        <h3 class="text-xl sm:text-2xl md:text-3xl font-bold mb-2 md:mb-3">Notre Église Siège</h3>
                                        <div class="flex items-center justify-center text-blue-100 text-sm sm:text-base md:text-lg">
                                            <i class="fas fa-map-marker-alt mr-2"></i>
                                            <span>{{ $mainChurch->city }}, {{ $mainChurch->country }}</span>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Right Side - Content -->
                        <div class="p-6 sm:p-8 md:p-10 lg:p-12">
                            <div class="mb-4 md:mb-6">
                                <span class="inline-block md:inline-block bg-blue-100 text-blue-800 px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-semibold mb-3 md:mb-4">
                                    <i class="fas fa-star mr-1 md:mr-2"></i>Église Principale
                                </span>
                                <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold text-gray-900 mb-3 md:mb-4 break-words">{{ $mainChurch->name }}</h2>
                            </div>

                            @if($mainChurch->description)
                                <div class="mb-4 md:mb-6">
                                    <p class="text-gray-700 text-sm sm:text-base md:text-lg leading-relaxed break-words">
                                        {{ Str::limit($mainChurch->description, 300) }}
                                    </p>
                                </div>
                            @endif

                            <div class="space-y-3 md:space-y-4 mb-6 md:mb-8">
                                @if($mainChurch->pastor)
                                    <div class="flex items-center">
                                        <div class="bg-purple-100 w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center mr-3 md:mr-4 flex-shrink-0">
                                            <i class="fas fa-user-tie text-purple-600 text-base md:text-lg"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-xs md:text-sm text-gray-500">Responsable</p>
                                            <p class="font-semibold text-gray-900 text-sm sm:text-base md:text-lg break-words">{{ $mainChurch->pastor }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if($mainChurch->address)
                                    <div class="flex items-start">
                                        <div class="bg-blue-100 w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center mr-3 md:mr-4 flex-shrink-0">
                                            <i class="fas fa-location-dot text-blue-600 text-base md:text-lg"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-xs md:text-sm text-gray-500">Adresse</p>
                                            <p class="font-medium text-gray-900 text-sm sm:text-base break-words">{{ $mainChurch->address }}</p>
                                        </div>
                                    </div>
                                @endif

                                @if($mainChurch->phone || $mainChurch->email)
                                    <div class="flex items-start">
                                        <div class="bg-green-100 w-10 h-10 md:w-12 md:h-12 rounded-full flex items-center justify-center mr-3 md:mr-4 flex-shrink-0">
                                            <i class="fas fa-phone text-green-600 text-base md:text-lg"></i>
                                        </div>
                                        <div class="min-w-0 flex-1">
                                            <p class="text-xs md:text-sm text-gray-500">Contact</p>
                                            @if($mainChurch->phone)
                                                <p class="font-medium text-gray-900 text-sm sm:text-base break-words">
                                                    <a href="tel:{{ $mainChurch->phone }}" class="hover:text-blue-600 transition">
                                                        {{ $mainChurch->phone }}
                                                    </a>
                                                </p>
                                            @endif
                                            @if($mainChurch->email)
                                                <p class="font-medium text-gray-900 text-sm sm:text-base break-words">
                                                    <a href="mailto:{{ $mainChurch->email }}" class="hover:text-blue-600 transition">
                                                        {{ $mainChurch->email }}
                                                    </a>
                                                </p>
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="pt-4 md:pt-6 border-t border-gray-200">
                                <a href="{{ route('public.church.show', $mainChurch->slug) }}"
                                   class="inline-flex items-center justify-center w-full md:w-auto px-6 md:px-8 py-3 md:py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold text-sm md:text-base rounded-lg md:rounded-xl shadow-lg hover:shadow-xl transition duration-300 transform hover:-translate-y-1">
                                    <i class="fas fa-church mr-2 md:mr-3"></i>
                                    <span class="hidden sm:inline">Découvrir l'Église d'Angers</span>
                                    <span class="sm:hidden">Découvrir</span>
                                    <i class="fas fa-arrow-right ml-2 md:ml-3"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif

    <!-- Vision Section -->
    <section class="py-20 bg-gradient-to-br from-blue-50 via-purple-50 to-blue-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-primary-navy mb-6 font-serif">Notre Vision</h2>
                <p class="text-2xl md:text-3xl text-primary-gold mb-6 font-bold">"Gagner, Former, et Régner"</p>
                <div class="max-w-4xl mx-auto">
                    <p class="text-lg md:text-xl text-primary-navy leading-relaxed mb-4 font-semibold">
                        Notre vision se résume en trois mots puissants : <strong class="text-primary-gold">Gagner, Former, et Régner</strong>.
                    </p>
                    <p class="text-lg text-text-muted leading-relaxed">
                        Il est question de gagner les âmes à Jésus-Christ et de les amener par les enseignements de la Parole de Dieu à devenir ses disciples, pour régner avec Lui sur terre puis au ciel.
                    </p>
                </div>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Vision Card 1 -->
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="text-5xl mb-4 text-center">🎯</div>
                    <h3 class="text-xl font-bold text-primary-navy mb-3 font-serif text-center">Gagner les Âmes</h3>
                    <p class="text-text-muted leading-relaxed mb-4 text-center">
                        Conduire les hommes et les femmes à une rencontre personnelle avec Jésus-Christ
                    </p>
                    <p class="text-primary-gold italic text-sm text-center">"Allez par tout le monde, et prêchez la bonne nouvelle à toute la création." - Marc 16:15</p>
                </div>

                <!-- Vision Card 2 -->
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="text-5xl mb-4 text-center">📚</div>
                    <h3 class="text-xl font-bold text-primary-navy mb-3 font-serif text-center">Former des Disciples</h3>
                    <p class="text-text-muted leading-relaxed mb-4 text-center">
                        Enseigner et équiper les croyants par la Parole de Dieu pour une vie chrétienne authentique
                    </p>
                    <p class="text-primary-gold italic text-sm text-center">"Allez, faites de toutes les nations des disciples... et enseignez-leur à observer tout ce que je vous ai prescrit." - Matthieu 28:19-20</p>
                </div>

                <!-- Vision Card 3 -->
                <div class="group bg-white p-8 rounded-2xl hover:shadow-2xl transition-all duration-300 border border-gray-100 hover:border-primary-gold">
                    <div class="text-5xl mb-4 text-center">👑</div>
                    <h3 class="text-xl font-bold text-primary-navy mb-3 font-serif text-center">Régner avec Christ</h3>
                    <p class="text-text-muted leading-relaxed mb-4 text-center">
                        Préparer les disciples à régner avec Lui sur terre et dans l'éternité
                    </p>
                    <p class="text-primary-gold italic text-sm text-center">"Si nous persévérons, nous régnerons aussi avec lui." - 2 Timothée 2:12</p>
                </div>

            </div>
        </div>
    </section>

    <!-- Upcoming Events -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
                <div>
                    <h2 class="text-4xl md:text-5xl font-bold text-primary-navy mb-3 font-serif">Nos Événements</h2>
                    <p class="text-xl text-text-muted">Rejoignez-nous pour nos prochains rassemblements</p>
                </div>
                <a href="{{ route('public.events') }}" class="group mt-4 md:mt-0 text-primary-gold hover:text-primary-navy font-semibold text-lg transition-colors">
                    Voir tous les événements
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform inline-block"></i>
                </a>
            </div>

            <!-- Prochain Événement en Vedette -->
            @if($nextEvent)
                <div class="mb-12">
                    <div class="bg-gradient-to-br from-slate-800 via-slate-700 to-slate-800 rounded-2xl shadow-2xl overflow-hidden border border-amber-600/30">
                        <div class="grid md:grid-cols-2">
                            <!-- Contenu -->
                            <div class="p-8 md:p-12 text-white">
                                <div class="inline-block bg-amber-600/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-semibold mb-4 text-amber-200 border border-amber-600/30">
                                    <i class="fas fa-star mr-2"></i>Prochain Événement
                                </div>
                                <h3 class="text-3xl md:text-4xl font-bold mb-4">{{ $nextEvent->title }}</h3>
                                <div class="space-y-3 mb-6">
                                    <div class="flex items-center text-lg">
                                        <i class="fas fa-calendar-alt w-6 mr-3 text-amber-400"></i>
                                        <span class="font-semibold">{{ \Carbon\Carbon::parse($nextEvent->event_date)->translatedFormat('l d F Y') }}</span>
                                    </div>
                                    @if($nextEvent->event_time)
                                        <div class="flex items-center text-lg">
                                            <i class="fas fa-clock w-6 mr-3 text-amber-400"></i>
                                            <span>
                                                {{ \Carbon\Carbon::parse($nextEvent->event_time)->format('H:i') }}
                                                @if($nextEvent->end_time)
                                                    - {{ \Carbon\Carbon::parse($nextEvent->end_time)->format('H:i') }}
                                                @endif
                                            </span>
                                        </div>
                                    @endif
                                    <div class="flex items-center text-lg">
                                        <i class="fas fa-map-marker-alt w-6 mr-3 text-amber-400"></i>
                                        <span>{{ $nextEvent->location }}</span>
                                    </div>
                                    @if($nextEvent->church)
                                        <div class="flex items-center text-lg">
                                            <i class="fas fa-church w-6 mr-3 text-amber-400"></i>
                                            <span>{{ $nextEvent->church->name }}</span>
                                        </div>
                                    @endif
                                </div>
                                @if($nextEvent->description)
                                    <p class="text-slate-200 mb-6">{{ Str::limit($nextEvent->description, 150) }}</p>
                                @endif
                                <a href="{{ route('public.event.show', $nextEvent->slug) }}" class="inline-block bg-amber-600 text-white px-8 py-3 rounded-full font-bold hover:bg-amber-700 transition-all shadow-lg">
                                    Plus de détails <i class="fas fa-arrow-right ml-2"></i>
                                </a>
                            </div>
                            <!-- Image/Icône -->
                            <div class="bg-gradient-to-br from-slate-700/50 to-slate-800/50 backdrop-blur-sm p-12 flex items-center justify-center">
                                <div class="text-center">
                                    <i class="fas fa-calendar-check text-amber-600/30 text-9xl mb-4"></i>
                                    <p class="text-slate-300 text-xl font-semibold">Ne manquez pas cet événement !</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Événements En Cours -->
            @if($ongoingEvents->count() > 0)
                <div class="mb-12">
                    <h3 class="text-2xl font-bold text-slate-800 mb-6 flex items-center">
                        <span class="relative flex h-3 w-3 mr-3">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-600 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-emerald-600"></span>
                        </span>
                        Événements En Cours
                    </h3>
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($ongoingEvents as $event)
                            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition border border-emerald-200">
                                <div class="bg-gradient-to-br from-emerald-600 to-emerald-700 p-4 sm:p-6 text-white relative">
                                    <div class="absolute top-3 right-3">
                                        <span class="flex h-3 w-3">
                                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
                                            <span class="relative inline-flex rounded-full h-3 w-3 bg-white"></span>
                                        </span>
                                    </div>
                                    <div class="flex items-center justify-between mb-3">
                                        <span class="bg-white/20 px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm backdrop-blur-sm">
                                            {{ $event->church->name ?? 'MMPV' }}
                                        </span>
                                    </div>
                                    <h3 class="text-base sm:text-lg md:text-xl font-bold mb-3 break-words leading-tight">{{ $event->title }}</h3>
                                    <div class="flex items-center text-emerald-50 mb-2 text-sm">
                                        <i class="fas fa-calendar mr-2 flex-shrink-0"></i>
                                        <span class="break-words">{{ \Carbon\Carbon::parse($event->event_date)->format('d M Y') }}</span>
                                    </div>
                                    @if($event->event_time)
                                        <div class="flex items-center text-emerald-50 text-sm">
                                            <i class="fas fa-clock mr-2 flex-shrink-0"></i>
                                            <span class="break-words">
                                                {{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                                                @if($event->end_time)
                                                    - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                                                @endif
                                            </span>
                                        </div>
                                    @endif
                                </div>
                                <div class="p-4 sm:p-6">
                                    <div class="flex items-start mb-3">
                                        <i class="fas fa-map-marker-alt text-slate-400 mt-1 mr-3"></i>
                                        <span class="text-slate-700">{{ $event->location }}</span>
                                    </div>
                                    @if($event->description)
                                        <p class="text-slate-600 text-sm line-clamp-2">
                                            {{ Str::limit($event->description, 100) }}
                                        </p>
                                    @endif
                                    <a href="{{ route('public.event.show', $event->slug) }}" class="mt-4 inline-block text-emerald-600 font-semibold hover:text-emerald-700">
                                        Voir les détails <i class="fas fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Autres Événements à Venir -->
            @if($upcomingEvents->count() > 0)
                <div>
                    <h3 class="text-2xl font-bold text-slate-800 mb-6">Autres Événements à Venir</h3>
                    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($upcomingEvents->take(3) as $event)
                        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition border border-slate-200">
                            <div class="bg-gradient-to-br from-slate-700 to-slate-800 p-4 sm:p-6 text-white">
                                <div class="flex items-center justify-between mb-3">
                                    <span class="bg-white/10 px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm backdrop-blur-sm">
                                        {{ $event->church->name ?? 'MMPV' }}
                                    </span>
                                </div>
                                <h3 class="text-base sm:text-lg md:text-xl font-bold mb-3 break-words leading-tight">{{ $event->title }}</h3>
                                <div class="flex items-center text-slate-200 mb-2 text-sm">
                                    <i class="fas fa-calendar mr-2 flex-shrink-0"></i>
                                    <span class="break-words">{{ \Carbon\Carbon::parse($event->event_date)->format('d M Y') }}</span>
                                </div>
                                @if($event->event_time)
                                    <div class="flex items-center text-slate-200 text-sm">
                                        <i class="fas fa-clock mr-2 flex-shrink-0"></i>
                                        <span class="break-words">
                                            {{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                                            @if($event->end_time)
                                                - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                                            @endif
                                        </span>
                                    </div>
                                @endif
                            </div>
                            <div class="p-4 sm:p-6">
                                <div class="flex items-start mb-3">
                                    <i class="fas fa-map-marker-alt text-slate-400 mt-1 mr-3"></i>
                                    <span class="text-slate-700">{{ $event->location }}</span>
                                </div>
                                @if($event->description)
                                    <p class="text-slate-600 text-sm line-clamp-2">
                                        {{ Str::limit($event->description, 100) }}
                                    </p>
                                @endif
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Message si aucun événement -->
            @if(!$nextEvent && $ongoingEvents->count() == 0 && $upcomingEvents->count() == 0)
                <div class="bg-white rounded-lg shadow-md p-12 text-center">
                    <i class="fas fa-calendar-times text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 text-lg">Aucun événement disponible pour le moment</p>
                </div>
            @endif
        </div>
    </section>

    <!-- Recent Media -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center mb-8">
                <div>
                    <h2 class="text-3xl font-bold text-slate-800 mb-2">Médiathèque</h2>
                    <p class="text-slate-600">Découvrez nos derniers contenus</p>
                </div>
                <a href="{{ route('public.media') }}" class="text-amber-600 hover:text-amber-700 font-semibold transition-colors">
                    Voir tout <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>

            @if($recentMedia->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($recentMedia->take(4) as $media)
                        @php
                            // Gallery logic for images
                            $imageGallery = $media->images ?? [];
                            $mainImage = !empty($imageGallery) ? $imageGallery[0] : ($media->file_path ?: $media->thumbnail);
                            $hasGallery = !empty($imageGallery) && count($imageGallery) > 1;
                        @endphp
                        <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition">
                            <div class="relative pb-56 bg-gray-200
                                {{ $media->media_type === 'image' && $hasGallery ? 'cursor-pointer' : '' }}
                                {{ $media->media_type === 'video' && $media->youtube_id ? 'cursor-pointer' : '' }}
                                {{ $media->media_type === 'audio' ? 'cursor-pointer' : '' }}"
                                 @if($media->media_type === 'image' && $hasGallery)
                                     onclick="openGalleryModal({{ json_encode($imageGallery) }}, '{{ addslashes($media->title) }}', '{{ addslashes($media->description ?? '') }}', 0)"
                                 @elseif($media->media_type === 'video' && $media->youtube_id)
                                     onclick="openVideoModal('{{ $media->youtube_id }}', '{{ addslashes($media->title) }}')"
                                 @elseif($media->media_type === 'audio')
                                     onclick="window.location.href='{{ route('public.media') }}#audios-section'"
                                 @endif>
                                @if($media->media_type === 'video' && $media->youtube_id)
                                    <img src="https://img.youtube.com/vi/{{ $media->youtube_id }}/hqdefault.jpg"
                                         alt="{{ $media->title }}"
                                         class="absolute inset-0 w-full h-full object-cover"
                                         onerror="this.src='https://img.youtube.com/vi/{{ $media->youtube_id }}/mqdefault.jpg'">
                                    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 hover:bg-opacity-30 transition">
                                        <div class="bg-red-600 bg-opacity-90 w-16 h-16 rounded-full flex items-center justify-center transform hover:scale-110 transition">
                                            <i class="fas fa-play text-white text-xl ml-1"></i>
                                        </div>
                                    </div>
                                @elseif($media->media_type === 'audio')
                                    @if($media->podcast_image)
                                        <img src="{{ asset($media->podcast_image) }}"
                                             alt="{{ $media->title }}"
                                             class="absolute inset-0 w-full h-full object-cover">
                                    @else
                                        <img src="{{ asset('images/defaults/podcast-default.svg') }}"
                                             alt="{{ $media->title }}"
                                             class="absolute inset-0 w-full h-full object-cover">
                                    @endif
                                    <!-- Play Button Overlay -->
                                    <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-20 hover:bg-opacity-30 transition">
                                        <div class="bg-gradient-to-br from-amber-400 to-orange-500 w-16 h-16 rounded-full flex items-center justify-center transform hover:scale-110 transition shadow-2xl">
                                            <i class="fas fa-play text-white text-xl ml-1"></i>
                                        </div>
                                    </div>
                                    <!-- Podcast Badge -->
                                    <div class="absolute top-3 right-3 bg-amber-600 bg-opacity-90 px-3 py-1 rounded-full text-sm font-semibold text-white shadow-lg z-10">
                                        <i class="fas fa-podcast mr-1"></i>Podcast
                                    </div>
                                @elseif($media->media_type === 'image' && $mainImage)
                                    <img src="{{ $mainImage }}"
                                         alt="{{ $media->title }}"
                                         class="absolute inset-0 w-full h-full object-cover">

                                    <!-- Gallery Badge -->
                                    @if($hasGallery)
                                        <div class="absolute top-3 left-3 bg-emerald-600 bg-opacity-90 px-3 py-1 rounded-full text-sm font-semibold text-white shadow-lg z-10">
                                            <i class="fas fa-images mr-1"></i>{{ count($imageGallery) }} photos
                                        </div>
                                    @else
                                        <div class="absolute top-3 left-3 bg-slate-600 bg-opacity-90 px-3 py-1 rounded-full text-sm font-semibold text-white shadow-lg z-10">
                                            <i class="fas fa-image mr-1"></i>Image
                                        </div>
                                    @endif

                                    <!-- Gallery Preview Thumbnails (if multiple images) -->
                                    @if($hasGallery && count($imageGallery) > 1)
                                        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-2">
                                            <div class="flex gap-1 justify-center">
                                                @foreach($imageGallery as $index => $img)
                                                    @if($index < 4)
                                                        <div class="w-8 h-8 rounded overflow-hidden border border-white shadow-sm">
                                                            <img src="{{ $img }}" alt="Preview {{ $index + 1 }}" class="w-full h-full object-cover">
                                                        </div>
                                                    @endif
                                                @endforeach
                                                @if(count($imageGallery) > 4)
                                                    <div class="w-8 h-8 rounded bg-emerald-600 flex items-center justify-center text-white text-xs font-bold">
                                                        +{{ count($imageGallery) - 4 }}
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endif
                                @else
                                    <div class="absolute inset-0 flex items-center justify-center">
                                        <i class="fas fa-{{ $media->media_type === 'video' ? 'video' : ($media->media_type === 'image' ? 'image' : 'music') }} text-gray-400 text-4xl"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="p-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="px-2 py-1 rounded text-xs font-semibold
                                        {{ $media->media_type === 'video' ? 'bg-amber-100 text-amber-700' : '' }}
                                        {{ $media->media_type === 'audio' ? 'bg-slate-100 text-slate-700' : '' }}
                                        {{ $media->media_type === 'image' ? 'bg-emerald-100 text-emerald-700' : '' }}">
                                        {{ $media->media_type === 'video' ? 'Vidéo' : ($media->media_type === 'image' ? 'Image' : 'Audio') }}
                                    </span>
                                </div>
                                <h4 class="font-semibold text-slate-800 mb-1 line-clamp-2">{{ $media->title }}</h4>
                                @if($media->description)
                                    <p class="text-slate-600 text-sm line-clamp-2">{{ $media->description }}</p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="bg-gray-50 rounded-lg p-12 text-center">
                    <i class="fas fa-photo-video text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 text-lg">Aucun média disponible pour le moment</p>
                </div>
            @endif
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-20 bg-slate-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
                <div>
                    <h2 class="text-4xl md:text-5xl font-bold text-slate-800 mb-3 font-serif">Témoignages</h2>
                    <p class="text-xl text-slate-600">Découvrez comment Dieu transforme des vies</p>
                </div>
                <a href="{{ route('public.testimonials') }}" class="group mt-4 md:mt-0 text-amber-600 hover:text-slate-800 font-semibold text-lg transition-colors">
                    Tous les témoignages
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform inline-block"></i>
                </a>
            </div>

            @if($approvedTestimonials->count() > 0)
                <div class="grid md:grid-cols-3 gap-6">
                    @foreach($approvedTestimonials->take(3) as $testimonial)
                        <div class="bg-white rounded-lg shadow-md p-6 hover:shadow-xl transition border border-slate-200">
                            <div class="flex items-center mb-4">
                                <div class="bg-amber-100 w-12 h-12 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-user text-amber-600 text-xl"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-slate-800">{{ $testimonial->author_name }}</h4>
                                    @if($testimonial->church)
                                        <p class="text-sm text-slate-500">{{ $testimonial->church->name }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="mb-3">
                                <i class="fas fa-quote-left text-amber-200 text-2xl"></i>
                            </div>
                            @if($testimonial->title)
                                <h5 class="font-semibold text-slate-800 mb-2">{{ $testimonial->title }}</h5>
                            @endif
                            <p class="text-slate-600 italic line-clamp-4">{{ $testimonial->content }}</p>
                            <div class="mt-3">
                                <i class="fas fa-quote-right text-amber-200 text-2xl float-right"></i>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="bg-white rounded-lg shadow-md p-12 text-center">
                    <i class="fas fa-quote-right text-gray-300 text-5xl mb-4"></i>
                    <p class="text-gray-500 text-lg">Aucun témoignage pour le moment</p>
                </div>
            @endif
        </div>
    </section>

    <!-- Member Registration Call to Action -->
    {{-- Section membre temporairement cachée
    <section class="relative py-20 bg-gradient-to-br from-slate-800 via-slate-700 to-slate-800 text-white overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 left-10 w-72 h-72 bg-amber-600 rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 right-10 w-96 h-96 bg-slate-400 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <!-- Left Side - Content -->
                <div>
                    <div class="inline-block mb-4 px-4 py-2 bg-amber-600 bg-opacity-20 rounded-full border border-amber-600 border-opacity-30">
                        <span class="text-amber-300 font-semibold">
                            <i class="fas fa-users mr-2"></i>Faites partie de nous
                        </span>
                    </div>

                    <h2 class="text-3xl md:text-5xl font-bold mb-6 font-serif leading-tight">
                        Identifiez-vous comme Membre
                    </h2>

                    <p class="text-lg md:text-xl text-slate-200 mb-8 leading-relaxed">
                        Rejoignez officiellement notre famille de foi et bénéficiez de tous les avantages d'être membre des Rachetés de l'Eternel.
                    </p>

                    <div class="space-y-4 mb-8">
                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-amber-600 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-id-badge text-amber-400 text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-1">Carte de Membre Officielle</h4>
                                <p class="text-slate-300 text-sm">Recevez votre carte de membre personnalisée</p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-amber-600 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-hands-praying text-amber-400 text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-1">Communion Fraternelle</h4>
                                <p class="text-slate-300 text-sm">Participez pleinement à la vie de l'église</p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-amber-600 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-calendar-check text-amber-400 text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-1">Événements Exclusifs</h4>
                                <p class="text-slate-300 text-sm">Accès prioritaire aux événements et retraites</p>
                            </div>
                        </div>

                        <div class="flex items-start space-x-4">
                            <div class="flex-shrink-0 w-12 h-12 bg-amber-600 bg-opacity-20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-globe text-amber-400 text-xl"></i>
                            </div>
                            <div>
                                <h4 class="font-bold text-lg mb-1">Réseau International</h4>
                                <p class="text-slate-300 text-sm">Connectez-vous avec les membres du monde entier</p>
                            </div>
                        </div>
                    </div>

                    <a href="#contact" class="group inline-flex items-center bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-full font-bold text-lg transition-all shadow-2xl hover:shadow-3xl transform hover:scale-105">
                        <i class="fas fa-envelope mr-3 text-xl group-hover:rotate-12 transition-transform"></i>
                        Nous Contacter
                        <i class="fas fa-arrow-right ml-3 group-hover:translate-x-2 transition-transform"></i>
                    </a>
                </div>

                <!-- Right Side - Visual Card -->
                <div class="relative">
                    <div class="bg-gradient-to-br from-white to-slate-100 rounded-2xl p-8 shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
                        <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 text-white">
                            <div class="flex items-center mb-6">
                                <img src="{{ asset('images/logo-mmpv.png') }}" alt="Logo" class="h-12 w-12 mr-3 bg-white bg-opacity-20 rounded-full p-2">
                                <div>
                                    <p class="text-xs font-bold opacity-90">MISSION MONDIALE</p>
                                    <p class="text-xs font-semibold opacity-80">DE LA PAROLE DE VIE</p>
                                </div>
                            </div>

                            <div class="mb-6">
                                <p class="text-xs text-amber-400 mb-2">Numéro de Membre</p>
                                <p class="text-2xl font-bold tracking-wider">MMPV-2025-XXXX</p>
                            </div>

                            <div class="flex justify-between items-end">
                                <div>
                                    <p class="text-xs opacity-75 mb-1">Nom du Membre</p>
                                    <p class="font-bold text-lg">Votre Nom Ici</p>
                                    <p class="text-xs opacity-75 mt-2">Membre depuis 2025</p>
                                </div>
                                <div class="w-16 h-20 bg-white bg-opacity-20 rounded flex items-center justify-center">
                                    <i class="fas fa-user text-3xl opacity-50"></i>
                                </div>
                            </div>

                            <div class="mt-6 pt-4 border-t border-white border-opacity-20">
                                <p class="text-xs text-center italic opacity-75">"Les rachetés de l'Éternel retourneront, Ils iront à Sion avec chants de triomphe, Et une joie éternelle couronnera leur tête; L'allégresse et la joie s'approcheront, La douleur et les gémissements s'enfuiront." - Esaïe 35:10</p>
                            </div>
                        </div>
                    </div>

                    <!-- Decorative elements -->
                    <div class="absolute -top-4 -right-4 w-24 h-24 bg-primary-gold rounded-full opacity-20 blur-2xl animate-pulse"></div>
                    <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-blue-400 rounded-full opacity-20 blur-2xl animate-pulse" style="animation-delay: 1s"></div>
                </div>
            </div>
        </div>
    </section>
    --}}

    <!-- Donation Call to Action -->
    <section class="relative py-24 bg-gradient-to-br from-primary-gold via-yellow-600 to-orange-500 text-white overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-10 right-20 w-72 h-72 bg-white rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-20 w-96 h-96 bg-yellow-300 rounded-full blur-3xl"></div>
        </div>

        <!-- Animated particles -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute top-1/4 left-1/4 w-3 h-3 bg-white rounded-full opacity-60 animate-pulse"></div>
            <div class="absolute top-1/3 right-1/3 w-2 h-2 bg-white rounded-full opacity-40 animate-pulse" style="animation-delay: 0.5s"></div>
            <div class="absolute bottom-1/4 left-1/3 w-2.5 h-2.5 bg-white rounded-full opacity-50 animate-pulse" style="animation-delay: 1s"></div>
            <div class="absolute top-2/3 right-1/4 w-2 h-2 bg-white rounded-full opacity-30 animate-pulse" style="animation-delay: 1.5s"></div>
        </div>

        <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-white bg-opacity-20 rounded-full border-2 border-white border-opacity-40 backdrop-blur-sm">
                <span class="text-white font-bold flex items-center">
                    <i class="fas fa-heart mr-2 animate-pulse"></i>
                    Soutenez notre mission
                </span>
            </div>

            <h2 class="text-4xl md:text-6xl font-bold mb-6 font-serif leading-tight drop-shadow-lg">
                Soutenez Notre Mission
            </h2>

            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed drop-shadow-md">
                Votre générosité permet de porter l'Évangile jusqu'aux extrémités de la terre<br class="hidden sm:inline">
                afin que des vies soient transformées pour la gloire de Dieu.
            </p>

            <div class="bg-gradient-to-br from-white/20 via-white/15 to-white/10 backdrop-blur-lg rounded-2xl p-8 mb-6 max-w-2xl mx-auto border-2 border-white/40 shadow-2xl">
                <div class="bg-primary-gold/20 backdrop-blur-sm rounded-xl p-6 mb-3 border border-primary-gold/30">
                    <p class="text-lg md:text-xl font-medium italic leading-relaxed text-white drop-shadow-lg">
                        "Que chacun donne comme il l'a résolu en son cœur, sans tristesse ni contrainte; car Dieu aime celui qui donne avec joie."
                    </p>
                </div>
                <p class="text-base md:text-lg font-bold text-white drop-shadow-lg text-right">- 2 Corinthiens 9:7</p>
            </div>

            <div class="flex flex-col gap-4 justify-center items-center">
                <a href="{{ route('public.donations') }}" class="group relative bg-white text-primary-gold px-10 py-5 rounded-full font-bold text-lg transition-all shadow-2xl hover:shadow-3xl transform hover:scale-105 hover:-translate-y-1 overflow-hidden">
                    <span class="absolute inset-0 bg-gradient-to-r from-primary-gold to-yellow-500 opacity-0 group-hover:opacity-20 transition-opacity"></span>
                    <span class="relative flex items-center">
                        <i class="fas fa-heart mr-3 text-xl group-hover:animate-pulse"></i>
                        Faire un don libre et volontaire
                        <i class="fas fa-arrow-right ml-3 group-hover:translate-x-2 transition-transform"></i>
                    </span>
                </a>
                <p class="text-lg font-semibold drop-shadow-md">
                    Que Dieu bénisse votre semence.
                </p>
            </div>
        </div>
    </section>

    <!-- Contact Form Section -->
    <section id="contact" class="relative py-20 bg-gradient-to-br from-slate-50 via-blue-50 to-purple-50 overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 opacity-30">
            <div class="absolute top-20 left-10 w-64 h-64 bg-primary-gold rounded-full blur-3xl"></div>
            <div class="absolute bottom-20 right-10 w-80 h-80 bg-blue-300 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <div class="inline-block mb-4 px-4 py-2 bg-primary-gold bg-opacity-20 rounded-full border border-primary-gold border-opacity-30">
                    <span class="text-primary-gold font-semibold">
                        <i class="fas fa-hands-helping mr-2"></i>Restons en contact
                    </span>
                </div>

                <p class="text-lg md:text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
                    Nous serions ravis d'échanger avec vous. Que vous souhaitiez en savoir plus sur notre mission, participer à nos activités, ou simplement poser des questions, n'hésitez pas à nous contacter.
                </p>
            </div>

            <div class="max-w-2xl mx-auto">
                <div class="bg-white rounded-2xl shadow-2xl p-8 md:p-10 border border-slate-200">
                    <form action="mailto:rachetesdeleternel@gmail.com" method="get" class="space-y-6">
                        <div class="grid md:grid-cols-2 gap-4 md:gap-6">
                            <div>
                                <label for="name" class="block text-xs sm:text-sm font-semibold text-slate-700 mb-2">
                                    <i class="fas fa-user mr-1 sm:mr-2 text-primary-gold"></i>Nom complet *
                                </label>
                                <input
                                    type="text"
                                    id="name"
                                    name="name"
                                    required
                                    class="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-gold focus:border-transparent transition-all"
                                    placeholder="Votre nom"
                                >
                            </div>

                            <div>
                                <label for="email" class="block text-xs sm:text-sm font-semibold text-slate-700 mb-2">
                                    <i class="fas fa-envelope mr-1 sm:mr-2 text-primary-gold"></i>Email *
                                </label>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    required
                                    class="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-gold focus:border-transparent transition-all"
                                    placeholder="votre@email.com"
                                >
                            </div>
                        </div>

                        <div>
                            <label for="phone" class="block text-xs sm:text-sm font-semibold text-slate-700 mb-2">
                                <i class="fas fa-phone mr-1 sm:mr-2 text-primary-gold"></i>Téléphone
                            </label>
                            <input
                                type="tel"
                                id="phone"
                                name="phone"
                                class="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-gold focus:border-transparent transition-all"
                                placeholder="+33 6 12 34 56 78"
                            >
                        </div>

                        <div>
                            <label for="subject" class="block text-xs sm:text-sm font-semibold text-slate-700 mb-2">
                                <i class="fas fa-tag mr-1 sm:mr-2 text-primary-gold"></i>Sujet *
                            </label>
                            <input
                                type="text"
                                id="subject"
                                name="subject"
                                required
                                class="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-gold focus:border-transparent transition-all"
                                placeholder="Objet de votre message"
                            >
                        </div>

                        <div>
                            <label for="message" class="block text-xs sm:text-sm font-semibold text-slate-700 mb-2">
                                <i class="fas fa-comment-dots mr-1 sm:mr-2 text-primary-gold"></i>Message *
                            </label>
                            <textarea
                                id="message"
                                name="body"
                                rows="5"
                                required
                                class="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-gold focus:border-transparent transition-all resize-none"
                                placeholder="Écrivez votre message ici..."
                            ></textarea>
                        </div>

                        <div class="flex flex-col gap-3 sm:gap-4 pt-4">
                            <button
                                type="submit"
                                class="w-full group bg-primary-gold hover:bg-opacity-90 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-full font-bold text-base sm:text-lg transition-all shadow-lg hover:shadow-xl"
                            >
                                <span class="flex items-center justify-center">
                                    <i class="fas fa-paper-plane mr-2 group-hover:translate-x-1 transition-transform"></i>
                                    Envoyer le message
                                </span>
                            </button>
                            <p class="text-xs sm:text-sm text-slate-500 text-center">
                                <i class="fas fa-lock mr-1"></i>Vos informations sont protégées
                            </p>
                        </div>
                    </form>
                </div>

                <!-- Contact Info Cards -->
                <div class="grid md:grid-cols-3 gap-4 mt-8">
                    <div class="bg-white rounded-xl p-6 text-center shadow-lg border border-slate-200">
                        <div class="w-12 h-12 bg-primary-gold bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-envelope text-primary-gold text-xl"></i>
                        </div>
                        <h4 class="font-bold text-slate-800 mb-1">Email</h4>
                        <p class="text-sm text-slate-600 break-all">rachetesdeleternel@gmail.com</p>
                    </div>

                    <div class="bg-white rounded-xl p-6 text-center shadow-lg border border-slate-200">
                        <div class="w-12 h-12 bg-primary-gold bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-map-marker-alt text-primary-gold text-xl"></i>
                        </div>
                        <h4 class="font-bold text-slate-800 mb-1">Adresse</h4>
                        <p class="text-sm text-slate-600">1 Boulevard Gaston Birgé<br>49100 Angers, France</p>
                    </div>

                    <a href="https://www.youtube.com/c/RACHETÉSWEBTV" target="_blank" rel="noopener noreferrer" class="block bg-white rounded-xl p-6 text-center shadow-lg border border-slate-200 hover:shadow-xl hover:border-primary-gold transition-all transform hover:-translate-y-1">
                        <div class="w-12 h-12 bg-primary-gold bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fab fa-youtube text-primary-gold text-xl"></i>
                        </div>
                        <h4 class="font-bold text-slate-800 mb-1">YouTube</h4>
                        <p class="text-sm text-slate-600">Suivez nos cultes en direct</p>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Community Call to Action -->
    <section class="relative py-24 bg-gradient-to-br from-primary-navy via-blue-900 to-purple-900 text-white overflow-hidden">
        <!-- Decorative Elements -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 right-20 w-72 h-72 bg-primary-gold rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-20 w-96 h-96 bg-blue-500 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-primary-gold bg-opacity-20 rounded-full border border-primary-gold border-opacity-30">
                <span class="text-primary-gold font-semibold">Faites partie de la famille</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-bold mb-6 font-serif leading-tight">Rejoignez notre famille</h2>
            <p class="text-xl md:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto leading-relaxed">
                Découvrez une église près de chez vous et faites partie de notre grande famille en Christ à travers le monde
            </p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                <a href="{{ route('public.churches') }}" class="group bg-primary-gold hover:bg-opacity-90 text-white px-8 py-4 rounded-full font-semibold transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1">
                    Trouver une Église
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform inline-block"></i>
                </a>
            </div>
        </div>
    </section>

    @push('scripts')
    <script>
        // YouTube Live Display - Détection automatique
        document.addEventListener('DOMContentLoaded', function() {
            const youtubeIframe = document.getElementById('youtube-live-iframe');
            const replayIframe = document.getElementById('replay-video-iframe');
            const noLivePlaceholder = document.getElementById('no-live-placeholder');

            // Éléments du header
            const liveBadge = document.getElementById('live-badge');
            const noLiveBadge = document.getElementById('no-live-badge');
            const liveTitle = document.getElementById('live-title');
            const noLiveTitle = document.getElementById('no-live-title');
            const liveDescription = document.getElementById('live-description');
            const noLiveDescription = document.getElementById('no-live-description');

            // Fonction pour afficher le live
            function showLive(videoId) {
                console.log('✅ Live YouTube détecté - Affichage du live');

                // Cacher le replay si présent
                if (replayIframe) {
                    replayIframe.classList.add('hidden');
                }

                // Changer le contenu vidéo
                youtubeIframe.classList.remove('hidden');
                if (noLivePlaceholder) {
                    noLivePlaceholder.classList.add('hidden');
                }

                // Changer le header
                liveBadge.classList.remove('hidden');
                noLiveBadge.classList.add('hidden');
                liveTitle.classList.remove('hidden');
                noLiveTitle.classList.add('hidden');
                liveDescription.classList.remove('hidden');
                noLiveDescription.classList.add('hidden');

                // Charger l'iframe avec le bon videoId et autoplay
                let src = youtubeIframe.getAttribute('data-src');
                if (videoId) {
                    src = `https://www.youtube.com/embed/${videoId}?autoplay=1&mute=0&enablejsapi=1`;
                }

                // Toujours charger la source (même si déjà chargée, pour mettre à jour le videoId)
                youtubeIframe.setAttribute('src', src);

                // Effet de fondu
                youtubeIframe.style.opacity = '0';
                setTimeout(() => {
                    youtubeIframe.style.transition = 'opacity 0.5s ease-in';
                    youtubeIframe.style.opacity = '1';
                }, 100);
            }

            // Fonction pour afficher le placeholder ou replay
            function showNoLive() {
                console.log('❌ Aucun live en cours - Affichage du replay ou placeholder');

                // Afficher le replay si disponible
                if (replayIframe) {
                    // Charger la source du replay si pas encore chargée
                    if (!replayIframe.src) {
                        const replaySrc = replayIframe.getAttribute('data-src');
                        if (replaySrc) {
                            replayIframe.setAttribute('src', replaySrc);
                        }
                    }
                    replayIframe.classList.remove('hidden');
                } else if (noLivePlaceholder) {
                    noLivePlaceholder.classList.remove('hidden');
                }

                // Cacher le live
                youtubeIframe.classList.add('hidden');

                // Retirer la source de l'iframe pour arrêter la vidéo
                youtubeIframe.removeAttribute('src');

                // Changer le header
                liveBadge.classList.add('hidden');
                noLiveBadge.classList.remove('hidden');
                liveTitle.classList.add('hidden');
                noLiveTitle.classList.remove('hidden');
                liveDescription.classList.add('hidden');
                noLiveDescription.classList.remove('hidden');

                // Effet de fondu pour le placeholder
                noLivePlaceholder.style.opacity = '0';
                setTimeout(() => {
                    noLivePlaceholder.style.transition = 'opacity 0.5s ease-in';
                    noLivePlaceholder.style.opacity = '1';
                }, 100);
            }

            // Vérifier le statut du live automatiquement
            function checkLiveStatus() {
                console.log('🔍 Vérification du statut du live YouTube...');

                fetch('{{ route("api.youtube.live-status") }}')
                    .then(response => response.json())
                    .then(data => {
                        if (data.isLive) {
                            console.log('🎥 Live en cours:', data.title);
                            showLive(data.videoId);
                        } else {
                            console.log('📺 Aucun live en cours');
                            showNoLive();
                        }
                    })
                    .catch(error => {
                        console.error('❌ Erreur lors de la vérification du live:', error);
                        // En cas d'erreur, afficher le placeholder par sécurité
                        showNoLive();
                    });
            }

            // Vérifier immédiatement au chargement
            checkLiveStatus();

            // Revérifier toutes les 2 minutes
            setInterval(checkLiveStatus, 120000);

            // Intersection Observer pour lazy loading avec autoplay
            const youtubeSection = document.getElementById('youtube-container');
            if (youtubeSection) {
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting && entry.intersectionRatio >= 0.3) {
                            const iframe = youtubeSection.querySelector('iframe');
                            const dataSrc = iframe.getAttribute('data-src');

                            if (dataSrc && !iframe.getAttribute('src')) {
                                iframe.setAttribute('src', dataSrc);
                            }
                        }
                    });
                }, {
                    threshold: 0.3
                });

                observer.observe(youtubeSection);
            }

            console.log('🚀 Détection automatique du live YouTube activée');
        });

        // GSAP Hero Animation
        document.addEventListener('DOMContentLoaded', function() {
            // Importer GSAP
            const gsapScript = document.createElement('script');
            gsapScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js';
            gsapScript.onload = function() {
                // Créer une timeline pour orchestrer les animations
                const tl = gsap.timeline({
                    defaults: {
                        ease: 'power3.out',
                        duration: 1
                    }
                });

                // Animation du badge (apparition avec bounce)
                tl.fromTo('#hero-badge',
                    {
                        opacity: 0,
                        y: -50,
                        scale: 0.5
                    },
                    {
                        opacity: 1,
                        y: 0,
                        scale: 1,
                        duration: 0.8,
                        ease: 'back.out(1.7)'
                    }
                );

                // Animation du premier titre (apparition depuis la gauche)
                tl.fromTo('#hero-title-1',
                    {
                        opacity: 0,
                        x: -100,
                        rotationY: -90
                    },
                    {
                        opacity: 1,
                        x: 0,
                        rotationY: 0,
                        duration: 1.2
                    },
                    '-=0.4'
                );

                // Animation du deuxième titre (apparition depuis la droite avec effet de brillance)
                tl.fromTo('#hero-title-2',
                    {
                        opacity: 0,
                        x: 100,
                        scale: 0.8,
                        rotationY: 90
                    },
                    {
                        opacity: 1,
                        x: 0,
                        scale: 1,
                        rotationY: 0,
                        duration: 1.2
                    },
                    '-=0.8'
                );

                // Animation du sous-titre (fondu et montée)
                tl.fromTo('#hero-subtitle',
                    {
                        opacity: 0,
                        y: 30
                    },
                    {
                        opacity: 1,
                        y: 0,
                        duration: 1
                    },
                    '-=0.6'
                );

                // Animation du verset (apparition avec scale et rotation légère)
                tl.fromTo('#hero-verse',
                    {
                        opacity: 0,
                        scale: 0.8,
                        rotation: -5
                    },
                    {
                        opacity: 1,
                        scale: 1,
                        rotation: 0,
                        duration: 0.8
                    },
                    '-=0.4'
                );

                // Animation des boutons (apparition séquentielle)
                tl.fromTo('#hero-buttons',
                    {
                        opacity: 0,
                        y: 50
                    },
                    {
                        opacity: 1,
                        y: 0,
                        duration: 1,
                        ease: 'elastic.out(1, 0.5)'
                    },
                    '-=0.4'
                );

                // Effet de pulsation continue sur le titre doré
                gsap.to('#hero-title-2', {
                    scale: 1.05,
                    duration: 2,
                    repeat: -1,
                    yoyo: true,
                    ease: 'sine.inOut'
                });

                console.log('✨ Animations GSAP du hero activées');
            };
            document.head.appendChild(gsapScript);
        });
    </script>

    <!-- Gallery Modal JavaScript -->
    <script>
        let currentGalleryImages = [];
        let currentGalleryIndex = 0;
        let currentGalleryTitle = '';
        let currentGalleryDescription = '';

        function openGalleryModal(images, title, description, startIndex = 0) {
            // Ensure we have valid images array
            currentGalleryImages = Array.isArray(images) && images.length > 0 ? images : [];
            if (currentGalleryImages.length === 0) {
                console.error('No images to display in gallery');
                return;
            }

            currentGalleryIndex = startIndex;
            currentGalleryTitle = title || '';
            currentGalleryDescription = description || '';

            updateGalleryDisplay();
            document.getElementById('galleryModal').classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        function closeGalleryModal() {
            document.getElementById('galleryModal').classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        function navigateGallery(direction) {
            currentGalleryIndex += direction;
            if (currentGalleryIndex < 0) {
                currentGalleryIndex = currentGalleryImages.length - 1;
            } else if (currentGalleryIndex >= currentGalleryImages.length) {
                currentGalleryIndex = 0;
            }
            updateGalleryDisplay();
        }

        function goToGalleryImage(index) {
            currentGalleryIndex = index;
            updateGalleryDisplay();
        }

        function updateGalleryDisplay() {
            // Update main image
            const mainImage = document.getElementById('galleryMainImage');
            if (mainImage && currentGalleryImages[currentGalleryIndex]) {
                mainImage.src = currentGalleryImages[currentGalleryIndex];
            }

            // Update counter
            const counter = document.getElementById('galleryCounter');
            if (counter) {
                counter.textContent = `${currentGalleryIndex + 1} / ${currentGalleryImages.length}`;
            }

            // Update title and description
            const titleEl = document.getElementById('galleryTitle');
            const descEl = document.getElementById('galleryDescription');
            if (titleEl) titleEl.textContent = currentGalleryTitle;
            if (descEl) descEl.textContent = currentGalleryDescription;

            // Update thumbnails active state
            document.querySelectorAll('.gallery-thumb').forEach((thumb, index) => {
                if (index === currentGalleryIndex) {
                    thumb.classList.add('ring-4', 'ring-emerald-500');
                } else {
                    thumb.classList.remove('ring-4', 'ring-emerald-500');
                }
            });

            // Update thumbnails
            const thumbnailsContainer = document.getElementById('galleryThumbnails');
            if (thumbnailsContainer) {
                thumbnailsContainer.innerHTML = '';
                currentGalleryImages.forEach((img, index) => {
                    const thumbDiv = document.createElement('div');
                    thumbDiv.className = `gallery-thumb w-16 h-16 rounded overflow-hidden cursor-pointer transition-all ${index === currentGalleryIndex ? 'ring-4 ring-emerald-500' : 'opacity-60 hover:opacity-100'}`;
                    thumbDiv.onclick = () => goToGalleryImage(index);

                    const thumbImg = document.createElement('img');
                    thumbImg.src = img;
                    thumbImg.alt = `Thumbnail ${index + 1}`;
                    thumbImg.className = 'w-full h-full object-cover';

                    thumbDiv.appendChild(thumbImg);
                    thumbnailsContainer.appendChild(thumbDiv);
                });
            }
        }

        // Keyboard navigation
        document.addEventListener('keydown', function(e) {
            const modal = document.getElementById('galleryModal');
            if (!modal || modal.classList.contains('hidden')) return;

            if (e.key === 'ArrowLeft') {
                navigateGallery(-1);
            } else if (e.key === 'ArrowRight') {
                navigateGallery(1);
            } else if (e.key === 'Escape') {
                closeGalleryModal();
            }
        });
    </script>
    @endpush

    <!-- Gallery Modal -->
    <div id="galleryModal" class="hidden fixed inset-0 z-50 bg-black bg-opacity-95 flex items-center justify-center p-4">
        <!-- Close Button -->
        <button onclick="closeGalleryModal()" class="absolute top-4 right-4 text-white hover:text-gray-300 transition z-50">
            <i class="fas fa-times text-3xl"></i>
        </button>

        <!-- Navigation Buttons -->
        <button onclick="navigateGallery(-1)" class="absolute left-4 top-1/2 transform -translate-y-1/2 text-white hover:text-gray-300 transition bg-black bg-opacity-50 p-4 rounded-full z-50">
            <i class="fas fa-chevron-left text-2xl"></i>
        </button>
        <button onclick="navigateGallery(1)" class="absolute right-4 top-1/2 transform -translate-y-1/2 text-white hover:text-gray-300 transition bg-black bg-opacity-50 p-4 rounded-full z-50">
            <i class="fas fa-chevron-right text-2xl"></i>
        </button>

        <!-- Modal Content -->
        <div class="w-full max-w-6xl mx-auto" onclick="event.stopPropagation()">
            <!-- Image Counter -->
            <div class="text-center mb-4">
                <span id="galleryCounter" class="text-white text-lg font-semibold bg-black bg-opacity-50 px-4 py-2 rounded-full">1 / 1</span>
            </div>

            <!-- Main Image -->
            <div class="mb-4 flex items-center justify-center">
                <img id="galleryMainImage" src="" alt="Gallery Image" class="max-h-[70vh] max-w-full object-contain rounded-lg shadow-2xl">
            </div>

            <!-- Image Info -->
            <div class="text-center mb-4 px-4">
                <h3 id="galleryTitle" class="text-white text-xl font-bold mb-2"></h3>
                <p id="galleryDescription" class="text-gray-300 text-sm"></p>
            </div>

            <!-- Thumbnails -->
            <div class="overflow-x-auto pb-2">
                <div id="galleryThumbnails" class="flex gap-2 justify-center min-w-max px-4">
                    <!-- Thumbnails will be inserted here by JavaScript -->
                </div>
            </div>
        </div>

        <!-- Click outside to close -->
        <div class="absolute inset-0 -z-10" onclick="closeGalleryModal()"></div>
    </div>

    <!-- Video Modal -->
    <div id="videoModal" class="fixed inset-0 bg-black bg-opacity-90 z-50 hidden items-center justify-center p-4">
        <div class="relative w-full max-w-5xl">
            <button onclick="closeVideoModal()" class="absolute -top-12 right-0 text-white hover:text-gray-300 text-4xl">
                <i class="fas fa-times"></i>
            </button>
            <div class="bg-black rounded-lg overflow-hidden">
                <div class="relative pb-[56.25%]">
                    <iframe id="videoFrame"
                            class="absolute inset-0 w-full h-full"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                            allowfullscreen>
                    </iframe>
                </div>
                <div id="videoTitle" class="p-4 text-white font-semibold"></div>
            </div>
        </div>
    </div>

    <!-- Latest Audio Popup Modal -->
    @if($latestAudio)
    <div id="audioPopupModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4" style="display: none;">
        <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full overflow-hidden">
            <!-- Header -->
            <div class="bg-gradient-to-r from-amber-500 to-orange-600 p-6 text-white relative">
                <button onclick="closeAudioPopup()" class="absolute top-4 right-4 text-white hover:bg-white hover:bg-opacity-20 rounded-full w-10 h-10 flex items-center justify-center transition">
                    <i class="fas fa-times text-2xl"></i>
                </button>
                <div class="flex items-center gap-4">
                    <div class="bg-white bg-opacity-20 w-16 h-16 rounded-full flex items-center justify-center">
                        <i class="fas fa-podcast text-3xl"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium opacity-90">Dernier Podcast Ajouté</p>
                        <h2 class="text-2xl font-bold mt-1">{{ $latestAudio->title }}</h2>
                    </div>
                </div>
            </div>

            <!-- Content -->
            <div class="p-6">
                <!-- Podcast Cover -->
                <div class="mb-6 rounded-xl overflow-hidden shadow-lg">
                    @if($latestAudio->podcast_image)
                        <img src="{{ asset($latestAudio->podcast_image) }}" alt="{{ $latestAudio->title }}" class="w-full h-64 object-cover">
                    @else
                        <img src="{{ asset('images/defaults/podcast-default.svg') }}" alt="{{ $latestAudio->title }}" class="w-full h-64 object-cover">
                    @endif
                </div>

                <!-- Description -->
                @if($latestAudio->description)
                    <div class="mb-6">
                        <p class="text-gray-700 leading-relaxed">{{ Str::limit($latestAudio->description, 200) }}</p>
                    </div>
                @endif

                <!-- Church Info -->
                @if($latestAudio->church)
                    <div class="mb-6 flex items-center gap-2 text-sm text-gray-600">
                        <i class="fas fa-church text-amber-600"></i>
                        <span>{{ $latestAudio->church->name }}</span>
                    </div>
                @endif

                <!-- Action Buttons -->
                <div class="flex gap-3">
                    <a href="{{ route('public.media') }}#audios-section"
                       class="flex-1 bg-gradient-to-r from-amber-500 to-orange-600 hover:from-amber-600 hover:to-orange-700 text-white font-bold py-4 px-6 rounded-xl shadow-lg hover:shadow-xl transition text-center">
                        <i class="fas fa-play mr-2"></i>Écouter Maintenant
                    </a>
                    <button onclick="closeAudioPopup()"
                            class="px-6 py-4 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold rounded-xl transition">
                        <i class="fas fa-times mr-2"></i>Fermer
                    </button>
                </div>

                <!-- Don't show again checkbox -->
                <div class="mt-4 pt-4 border-t border-gray-200">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" id="dontShowAgain" class="w-4 h-4 text-amber-600 rounded focus:ring-amber-500">
                        <span class="ml-2 text-sm text-gray-600">Ne plus afficher ce message</span>
                    </label>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('scripts')
<script>
    // Video modal functions
    function openVideoModal(youtubeId, title) {
        const modal = document.getElementById('videoModal');
        const frame = document.getElementById('videoFrame');
        const titleEl = document.getElementById('videoTitle');

        frame.src = `https://www.youtube.com/embed/${youtubeId}?autoplay=1`;
        titleEl.textContent = title;
        modal.classList.remove('hidden');
        modal.classList.add('flex');

        // Prevent body scroll
        document.body.style.overflow = 'hidden';
    }

    function closeVideoModal() {
        const modal = document.getElementById('videoModal');
        const frame = document.getElementById('videoFrame');

        frame.src = '';
        modal.classList.add('hidden');
        modal.classList.remove('flex');

        // Restore body scroll
        document.body.style.overflow = 'auto';
    }

    // Close video modal on background click
    document.getElementById('videoModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeVideoModal();
        }
    });

    // Close modals on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeVideoModal();
            closeGalleryModal();
            closeAudioPopup();
        }
    });

    // Audio Popup functions
    function closeAudioPopup() {
        const modal = document.getElementById('audioPopupModal');
        if (!modal) return;

        const dontShowAgain = document.getElementById('dontShowAgain');

        if (dontShowAgain && dontShowAgain.checked) {
            // Store in localStorage to not show again
            localStorage.setItem('hideAudioPopup', 'true');
        }

        modal.style.display = 'none';
        document.body.style.overflow = 'auto';
    }

    function openAudioPopup() {
        const modal = document.getElementById('audioPopupModal');
        if (!modal) return;

        modal.style.display = 'flex';
        document.body.style.overflow = 'hidden';
    }

    // Auto-show audio popup on page load
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('audioPopupModal');
        if (!modal) return;

        // Check if user has chosen to not show the popup
        const hidePopup = localStorage.getItem('hideAudioPopup');

        if (!hidePopup) {
            // Show popup after a short delay (2 seconds)
            setTimeout(function() {
                openAudioPopup();
            }, 2000);
        }
    });

    // Close audio popup on background click
    document.getElementById('audioPopupModal')?.addEventListener('click', function(e) {
        if (e.target === this) {
            closeAudioPopup();
        }
    });
</script>
@endpush