@extends('layouts.public-layout')

@section("title", "Accueil - Mission Mondiale de la Parole de Vie - Les Rachetés de l'Éternel")
@section('meta_description', 'Bienvenue à la Mission Mondiale de la Parole de Vie - Les Rachetés de l\'Éternel. Église chrétienne évangélique à Angers, France. Rejoignez nos cultes, événements et moments de prière.')
@section('meta_keywords', 'église évangélique Angers, MMPV, Rachetés de l\'Éternel, culte chrétien, prière, louange, église Angers, mission parole de vie')
@section('og_title', 'Mission Mondiale de la Parole de Vie - Les Rachetés de l\'Éternel')
@section('og_description', 'Église chrétienne évangélique à Angers. Cultes, événements, prières et louange. Rejoignez-nous !')

@push('structured_data')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type' => 'WebSite',
    'name' => 'Mission Mondiale de la Parole de Vie',
    'alternateName' => 'MMPV - Les Rachetés de l\'Éternel',
    'url' => url('/'),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT) !!}
</script>
@endpush

@push('styles')
<style>
    .hero-jesus-title::first-letter {
        font-size: 1.15em;
        font-weight: 800;
        color: #c9a961;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes fadeInLeft {
        from { opacity: 0; transform: translateX(-30px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
        from { opacity: 0; transform: translateX(30px); }
        to { opacity: 1; transform: translateX(0); }
    }
    .animate-fade-in-up {
        animation: fadeInUp 0.8s ease-out forwards;
    }
    .animate-fade-in {
        animation: fadeIn 0.6s ease-out forwards;
    }
    .animate-fade-in-left {
        animation: fadeInLeft 0.8s ease-out forwards;
    }
    .animate-fade-in-right {
        animation: fadeInRight 0.8s ease-out forwards;
    }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-700 { animation-delay: 0.7s; }

    /* Vie Nouvelle inspired card hover overlay */
    .vn-card {
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
    }
    .vn-card::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(255,255,255,0);
        transition: background 0.4s ease;
        pointer-events: none;
        border-radius: inherit;
    }
    .vn-card:hover::after {
        background: rgba(255,255,255,0.05);
    }
    .vn-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -12px rgba(0,0,0,0.1);
    }

    /* Subtle divider line */
    .vn-divider {
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #c9a961, #e6c96e);
        border-radius: 2px;
        margin: 0 auto;
    }

    /* Image hover zoom */
    .vn-img-zoom {
        overflow: hidden;
    }
    .vn-img-zoom img {
        transition: transform 0.6s ease;
    }
    .vn-img-zoom:hover img {
        transform: scale(1.05);
    }

    /* Section reveal on scroll (CSS-only with IntersectionObserver fallback) */
    .vn-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .vn-reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }
</style>
@endpush

@section('content')
    <!-- ===================== HERO SECTION ===================== -->
    <section class="relative bg-white text-white overflow-hidden min-h-screen flex items-center justify-center">
        <div class="absolute inset-0 z-0">
            <img src="https://images.unsplash.com/photo-1504052434569-70ad5836ab65?q=80&w=2070&auto=format&fit=crop"
                 alt="Background" class="w-full h-full object-cover" style="filter: blur(3px) brightness(0.7);" loading="eager">
            <div class="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/60"></div>
        </div>

        <div class="relative z-20 max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-28 md:py-36">
            <div class="text-center">
                <!-- Live Badge -->
                <div id="hero-badge" class="inline-block mb-8 opacity-0 animate-fade-in">
                    <div class="relative">
                        <span class="absolute inset-0 rounded-full bg-red-500 opacity-60 animate-ping"></span>
                        <span class="absolute inset-0 rounded-full bg-red-400 opacity-40 animate-pulse"></span>
                        <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">
                            <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>
                            <i class="fab fa-youtube text-xl animate-pulse"></i>
                            <span class="tracking-wide uppercase text-sm">Suivez-nous en direct</span>
                            <i class="fas fa-chevron-right text-sm animate-pulse"></i>
                        </a>
                    </div>
                </div>

                <h1 class="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold mb-6 font-serif leading-tight">
                    <span id="hero-title-1" class="block opacity-0 animate-fade-in-up delay-100 text-white" style="text-shadow: 0 2px 10px rgba(0,0,0,0.6);">
                        Proclamer l'Évangile de
                    </span>
                    <span id="hero-title-2" class="block opacity-0 animate-fade-in-up delay-300 mt-2" style="color: #FFD700; text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 0 30px rgba(255,215,0,0.3);">
                        Jésus-Christ
                    </span>
                </h1>

                <p id="hero-subtitle" class="text-lg md:text-xl text-white mb-10 max-w-2xl mx-auto leading-relaxed font-semibold opacity-0 animate-fade-in-up delay-400 drop-shadow-lg">
                    Pour transformer les vies par sa puissance à travers le monde
                </p>

                <div id="hero-verse" class="inline-block mb-12 px-6 py-4 bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 opacity-0 animate-fade-in-up delay-500">
                    <p class="text-white/90 italic text-base md:text-lg font-light">
                        <i class="fas fa-book-bible mr-2 text-primary-gold/80"></i>"Jésus-Christ est le même hier, aujourd'hui et éternellement"
                    </p>
                    <p class="text-primary-gold/70 text-sm mt-2 font-medium">Hébreux 13:8</p>
                </div>

                <div id="hero-buttons" class="flex flex-col sm:flex-row gap-4 justify-center items-center opacity-0 animate-fade-in-up delay-600">
                    <a href="{{ route('public.churches') }}"
                       class="group bg-primary-gold text-white px-8 py-3.5 rounded-full font-semibold text-sm tracking-wide transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:shadow-primary-gold/30 hover:scale-105">
                        <i class="fas fa-church mr-2 group-hover:rotate-6 transition-transform inline-block"></i>
                        Découvrir nos Églises
                        <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform inline-block text-xs"></i>
                    </a>
                    <a href="#contact"
                       class="group bg-transparent border-2 border-white/40 text-white px-8 py-3.5 rounded-full font-semibold text-sm tracking-wide transition-all duration-500 hover:bg-white hover:text-primary-navy hover:scale-105">
                        <i class="fas fa-envelope mr-2"></i>
                        Nous Contacter
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================== LIVE YOUTUBE SECTION ===================== -->
    <section id="live-section" class="vn-reveal py-20 lg:py-28 bg-white">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div id="live-header" class="text-center mb-12">
                <div id="live-badge" class="inline-flex items-center gap-2 mb-4 bg-red-50 px-4 py-1.5 rounded-full hidden">
                    <div class="relative">
                        <div class="w-2.5 h-2.5 bg-red-500 rounded-full animate-pulse"></div>
                        <div class="absolute top-0 left-0 w-2.5 h-2.5 bg-red-500 rounded-full animate-ping"></div>
                    </div>
                    <span class="text-red-600 font-semibold text-xs uppercase tracking-wider">En Direct</span>
                </div>
                @if($lastLiveVideo)
                <div id="no-live-badge" class="inline-flex items-center gap-2 mb-4 px-4 py-1.5 rounded-full bg-gray-50 border border-gray-100">
                    <i class="fas fa-video text-primary-navy/50 text-xs"></i>
                    <span class="text-primary-navy/60 font-medium text-xs uppercase tracking-wider">Replay disponible</span>
                </div>
                @else
                <div id="no-live-badge" class="inline-flex items-center gap-2 mb-4 px-4 py-1.5 rounded-full bg-gray-50 border border-gray-100">
                    <i class="fas fa-info-circle text-text-muted text-xs"></i>
                    <span class="text-text-muted font-medium text-xs uppercase tracking-wider">Pas de live actuellement</span>
                </div>
                @endif

                <h2 id="live-title" class="text-3xl md:text-4xl font-bold text-primary-navy mb-3 font-serif hidden">
                    Suivez-nous en Live
                </h2>
                @if($lastLiveVideo)
                <h2 id="no-live-title" class="text-3xl md:text-4xl font-bold text-primary-navy mb-3 font-serif">
                    {{ $lastLiveVideo->title }}
                </h2>
                @else
                <h2 id="no-live-title" class="text-3xl md:text-4xl font-bold text-primary-navy mb-3 font-serif">
                    Chaîne YouTube
                </h2>
                @endif

                <p id="live-description" class="text-text-muted text-base max-w-xl 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-base max-w-xl 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-base max-w-xl mx-auto">
                    Aucun live n'est en cours actuellement. Consultez nos replays et abonnez-vous pour être notifié du prochain live
                </p>
                @endif
            </div>

            <div class="max-w-5xl mx-auto">
                <div id="youtube-container" class="relative bg-white rounded-2xl overflow-hidden shadow-lg border border-gray-100">
                    <div class="aspect-w-16 aspect-h-9">
                        <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>

                        @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
                        <div id="no-live-placeholder" class="absolute inset-0 bg-gradient-to-br from-gray-50 to-gray-100 flex items-center justify-center">
                            <div class="text-center p-8">
                                <div class="mb-6">
                                    <i class="fab fa-youtube text-7xl text-gray-200 mb-4"></i>
                                </div>
                                <h3 class="text-2xl font-bold mb-3 font-serif text-primary-navy">Aucun Live en ce moment</h3>
                                <p class="text-base text-text-muted mb-8 max-w-md mx-auto font-light">
                                    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%C3%89SWEBTV/streams" target="_blank" rel="noopener noreferrer"
                                       class="inline-flex items-center bg-primary-navy/10 hover:bg-primary-navy/20 text-primary-navy px-6 py-2.5 rounded-full font-medium text-sm transition-all border border-primary-navy/20">
                                        <i class="fas fa-video mr-2"></i>Voir les Replays
                                    </a>
                                    <a href="https://www.youtube.com/c/RACHET%C3%89SWEBTV" target="_blank" rel="noopener noreferrer"
                                       class="inline-flex items-center text-text-muted hover:text-primary-navy px-6 py-2.5 rounded-full font-medium text-sm transition-all">
                                        <i class="fab fa-youtube mr-2"></i>Visiter la Chaîne
                                    </a>
                                </div>
                                <div class="mt-10 p-4 bg-white rounded-xl border border-gray-100 max-w-sm mx-auto shadow-sm">
                                    <p class="text-xs text-text-muted mb-1">
                                        <i class="fas fa-calendar-alt mr-1 text-primary-gold/60"></i>
                                        <strong>Nos Lives habituels :</strong>
                                    </p>
                                    <p class="text-xs text-text-muted/70">
                                        Cultes du dimanche -- Enseignements -- Événements spéciaux
                                    </p>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <div class="flex flex-col sm:flex-row gap-3 justify-center mt-8">
                    <a href="https://www.youtube.com/c/RACHET%C3%89SWEBTV" target="_blank" rel="noopener noreferrer"
                       class="group bg-red-600 hover:bg-red-700 text-white px-6 py-3 rounded-full font-semibold text-sm transition-all duration-500 shadow-sm hover:shadow-lg hover:scale-105 inline-flex items-center justify-center">
                        <i class="fab fa-youtube text-lg mr-2"></i>
                        S'abonner à notre chaîne
                    </a>
                    <a href="https://www.youtube.com/c/RACHET%C3%89SWEBTV/streams" target="_blank" rel="noopener noreferrer"
                       class="group bg-white hover:bg-gray-50 text-primary-navy px-6 py-3 rounded-full font-semibold text-sm transition-all duration-500 shadow-sm hover:shadow-lg border border-gray-200 inline-flex items-center justify-center hover:scale-105">
                        <i class="fas fa-video mr-2 text-text-muted"></i>
                        Voir tous les replays
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================== MISSION STATEMENT ===================== -->
    <section class="vn-reveal py-20 lg:py-28 bg-white">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-4">Ésaïe 35:10</span>
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-primary-navy mb-4 font-serif">Notre Mission</h2>
                <div class="vn-divider mb-6"></div>
                <p class="text-base text-text-muted max-w-3xl mx-auto leading-relaxed italic mb-8">
                    "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-3xl mx-auto p-6 bg-gray-50 rounded-2xl border border-gray-100 shadow-sm">
                    <p class="text-base text-text-dark 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-3xl mx-auto mb-12">
                <p class="text-text-muted font-medium">
                    Notre mission repose sur 3 axes fondamentaux :
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-6 mb-16">
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg text-center">
                    <div class="w-14 h-14 bg-primary-navy/5 rounded-full flex items-center justify-center mx-auto mb-5 group-hover:bg-primary-navy/10 transition-colors">
                        <i class="fas fa-book-open text-primary-navy text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-2 font-serif">La vie de méditation de la Parole de Dieu</h3>
                </div>
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg text-center">
                    <div class="w-14 h-14 bg-primary-gold/10 rounded-full flex items-center justify-center mx-auto mb-5 group-hover:bg-primary-gold/20 transition-colors">
                        <i class="fas fa-hands-praying text-primary-gold text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-2 font-serif">La vie de prière</h3>
                </div>
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg text-center">
                    <div class="w-14 h-14 bg-primary-navy/5 rounded-full flex items-center justify-center mx-auto mb-5 group-hover:bg-primary-navy/10 transition-colors">
                        <i class="fas fa-utensils text-primary-navy text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-2 font-serif">La vie de jeûne</h3>
                </div>
            </div>

            <!-- Grille des 3 blocs -->
            <div class="grid md:grid-cols-3 gap-6 mb-20">
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg">
                    <div class="w-12 h-12 bg-red-50 rounded-full flex items-center justify-center mb-5">
                        <i class="fas fa-fire text-red-400 text-lg"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-3 font-serif">Message de Sanctification</h3>
                    <p class="text-text-muted leading-relaxed text-sm mb-4">
                        Proclamer l'importance de la sainteté pour voir Dieu
                    </p>
                    <p class="text-primary-gold/70 italic text-xs">"Recherchez... la sanctification, sans laquelle personne ne verra le Seigneur." - Hébreux 12:14</p>
                </div>
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg">
                    <div class="w-12 h-12 bg-blue-50 rounded-full flex items-center justify-center mb-5">
                        <i class="fas fa-church text-blue-400 text-lg"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-3 font-serif">Édification d'églises</h3>
                    <p class="text-text-muted leading-relaxed text-sm mb-4">
                        Bâtir des familles fortes centrées sur l'amour et la sanctification
                    </p>
                    <p class="text-primary-gold/70 italic text-xs">"Je bâtirai mon Église, et les portes du séjour des morts ne prévaudront point contre elle." - Matthieu 16:18</p>
                </div>
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg">
                    <div class="w-12 h-12 bg-emerald-50 rounded-full flex items-center justify-center mb-5">
                        <i class="fas fa-globe-africa text-emerald-400 text-lg"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-3 font-serif">Présence Mondiale</h3>
                    <p class="text-text-muted leading-relaxed text-sm mb-4">
                        Des églises implantées en France et dans plusieurs pays d'Afrique pour toucher les nations
                    </p>
                    <p class="text-primary-gold/70 italic text-xs">"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>
                <div class="text-center mb-12">
                    <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-4">À travers les continents</span>
                    <h3 class="text-2xl md:text-3xl font-bold text-primary-navy mb-3 font-serif">Notre Présence dans le Monde</h3>
                    <p class="text-text-muted max-w-2xl mx-auto">
                        Une mission mondiale qui touche les cœurs à travers les continents
                    </p>
                </div>

                <!-- Section Afrique -->
                <div class="mb-10">
                    <h4 class="text-lg font-bold text-primary-navy mb-6 font-serif flex items-center justify-center gap-2">
                        <i class="fas fa-globe-africa text-primary-gold text-sm"></i> Afrique
                    </h4>
                    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3">
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/maghreb.png" alt="Maghreb" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover" onerror="this.src='https://flagcdn.com/w80/sa.png'">
                            <p class="text-xs font-medium text-primary-navy">Maghreb</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/mz.png" alt="Mozambique" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Mozambique</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/cd.png" alt="RD Congo" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">RD Congo</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/bf.png" alt="Burkina Faso" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Burkina Faso</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ml.png" alt="Mali" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Mali</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ci.png" alt="Côte d'Ivoire" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Côte d'Ivoire</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ug.png" alt="Ouganda" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Ouganda</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/cg.png" alt="Congo-Brazzaville" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Congo-Brazza.</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ao.png" alt="Angola" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Angola</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/cm.png" alt="Cameroun" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Cameroun</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ls.png" alt="Lesotho" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Lesotho</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/gh.png" alt="Ghana" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Ghana</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/tg.png" alt="Togo" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Togo</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ga.png" alt="Gabon" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Gabon</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/bj.png" alt="Bénin" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Bénin</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/tz.png" alt="Tanzanie" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Tanzanie</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/mw.png" alt="Malawi" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Malawi</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/bi.png" alt="Burundi" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Burundi</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/rw.png" alt="Rwanda" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Rwanda</p>
                        </div>
                    </div>
                </div>

                <!-- Section Europe & Amérique -->
                <div>
                    <h4 class="text-lg font-bold text-primary-navy mb-6 font-serif flex items-center justify-center gap-2">
                        <i class="fas fa-globe-americas text-primary-gold text-sm"></i> Europe & Amérique
                    </h4>
                    <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-4 gap-3 max-w-3xl mx-auto">
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/be.png" alt="Belgique" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Belgique</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/ch.png" alt="Suisse" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Suisse</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/hu.png" alt="Hongrie" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Hongrie</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/pt.png" alt="Portugal" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Portugal</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/us.png" alt="États-Unis" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">États-Unis</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/de.png" alt="Allemagne" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Allemagne</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/se.png" alt="Suède" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Suède</p>
                        </div>
                        <div class="group bg-white p-3 rounded-xl border border-gray-100 hover:border-primary-gold/30 hover:shadow-md transition-all duration-300 text-center hover:scale-[1.02]">
                            <img src="https://flagcdn.com/w80/es.png" alt="Espagne" class="w-7 h-7 mx-auto mb-1.5 rounded shadow-sm object-cover">
                            <p class="text-xs font-medium text-primary-navy">Espagne</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================== MAIN CHURCH HIGHLIGHT ===================== -->
    @if($mainChurch)
    <section class="vn-reveal py-20 lg:py-28 bg-gray-50">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-4">Notre siege</span>
                <h2 class="text-3xl md:text-4xl font-bold text-primary-navy mb-3 font-serif">Église Principale</h2>
                <div class="vn-divider mt-3"></div>
            </div>
            <div class="bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-lg transition-all duration-500">
                <div class="grid md:grid-cols-2 gap-0">
                    <!-- Left Side - Image -->
                    <div class="vn-img-zoom relative bg-gradient-to-br from-blue-50 to-indigo-50 overflow-hidden min-h-[300px] md:min-h-[500px]">
                        @if($mainChurch->image)
                            @php
                                $imagePath = $mainChurch->image;
                                if (str_starts_with($imagePath, 'http')) {
                                    $imageUrl = $imagePath;
                                } elseif (str_starts_with($imagePath, 'storage/')) {
                                    $imageUrl = asset($imagePath);
                                } elseif (str_starts_with($imagePath, 'churches/') || str_starts_with($imagePath, 'images/')) {
                                    $imageUrl = asset('storage/' . $imagePath);
                                } else {
                                    $imageUrl = asset('storage/churches/' . $imagePath);
                                }
                            @endphp
                            <img src="{{ $imageUrl }}" alt="{{ $mainChurch->name }}"
                                 class="absolute inset-0 w-full h-full object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-primary-navy/50 via-transparent to-transparent"></div>
                            <div class="hidden md:block absolute bottom-0 left-0 right-0 p-8 text-white">
                                <span class="text-primary-gold/80 text-xs font-semibold uppercase tracking-widest">Église Siège</span>
                                <h3 class="text-2xl font-bold mt-1 font-serif">{{ $mainChurch->city }}, {{ $mainChurch->country }}</h3>
                            </div>
                        @else
                            <div class="flex flex-col items-center justify-center h-full p-8">
                                <div class="bg-primary-navy/10 rounded-full p-6 mb-4">
                                    <i class="fas fa-church text-5xl text-primary-navy/40"></i>
                                </div>
                                <span class="text-primary-gold text-xs font-semibold uppercase tracking-widest">Église Siège</span>
                                <p class="text-primary-navy/60 mt-1">{{ $mainChurch->city }}, {{ $mainChurch->country }}</p>
                            </div>
                        @endif
                    </div>

                    <!-- Right Side - Content -->
                    <div class="p-8 md:p-10 lg:p-12 flex flex-col justify-center">
                        <span class="inline-block w-fit bg-primary-gold/10 text-primary-gold px-3 py-1 rounded-full text-xs font-semibold mb-4 uppercase tracking-wider">
                            <i class="fas fa-star mr-1"></i>Église Principale
                        </span>
                        <h2 class="text-2xl md:text-3xl font-bold text-primary-navy mb-4 font-serif">{{ $mainChurch->name }}</h2>

                        @if($mainChurch->description)
                            <p class="text-text-muted text-sm leading-relaxed mb-6">
                                {{ Str::limit($mainChurch->description, 300) }}
                            </p>
                        @endif

                        <div class="space-y-4 mb-8">
                            @if($mainChurch->pastor)
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center mr-3 flex-shrink-0 border border-gray-100">
                                    <i class="fas fa-user-tie text-primary-navy/40"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-text-muted">Responsable</p>
                                    <p class="font-semibold text-primary-navy text-sm">{{ $mainChurch->pastor }}</p>
                                </div>
                            </div>
                            @endif
                            @if($mainChurch->address)
                            <div class="flex items-start">
                                <div class="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center mr-3 flex-shrink-0 border border-gray-100">
                                    <i class="fas fa-location-dot text-primary-navy/40"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-text-muted">Adresse</p>
                                    <p class="font-medium text-primary-navy text-sm">{{ $mainChurch->address }}</p>
                                </div>
                            </div>
                            @endif
                            @if($mainChurch->phone || $mainChurch->email)
                            <div class="flex items-start">
                                <div class="w-10 h-10 bg-gray-50 rounded-lg flex items-center justify-center mr-3 flex-shrink-0 border border-gray-100">
                                    <i class="fas fa-phone text-primary-navy/40"></i>
                                </div>
                                <div>
                                    <p class="text-xs text-text-muted">Contact</p>
                                    @if($mainChurch->phone)
                                        <p class="font-medium text-primary-navy text-sm">
                                            <a href="tel:{{ $mainChurch->phone }}" class="hover:text-primary-gold transition">{{ $mainChurch->phone }}</a>
                                        </p>
                                    @endif
                                    @if($mainChurch->email)
                                        <p class="font-medium text-primary-navy text-sm">
                                            <a href="mailto:{{ $mainChurch->email }}" class="hover:text-primary-gold transition">{{ $mainChurch->email }}</a>
                                        </p>
                                    @endif
                                </div>
                            </div>
                            @endif
                        </div>

                        <a href="{{ route('public.church.show', $mainChurch->slug) }}"
                           class="inline-flex items-center justify-center w-full md:w-auto px-6 py-3 bg-primary-gold text-white font-semibold text-sm rounded-full transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:scale-105">
                            <i class="fas fa-church mr-2"></i>
                            Découvrir l'Église d'Angers
                            <i class="fas fa-arrow-right ml-2 text-xs"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    <!-- ===================== VISION SECTION ===================== -->
    <section class="vn-reveal py-20 lg:py-28 bg-neutral-cream">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-4">Notre appel</span>
                <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-primary-navy mb-4 font-serif">Notre Vision</h2>
                <div class="vn-divider mb-4"></div>
                <p class="text-xl text-primary-gold font-serif font-semibold mb-4">"Gagner, Former, et Régner"</p>
                <div class="max-w-3xl mx-auto">
                    <p class="text-base text-primary-navy leading-relaxed mb-3">
                        Notre vision se résume en trois mots puissants : <strong class="text-primary-gold">Gagner, Former, et Régner</strong>.
                    </p>
                    <p class="text-sm 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-3 gap-6">
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg text-center">
                    <div class="w-14 h-14 bg-primary-gold/10 rounded-full flex items-center justify-center mx-auto mb-5">
                        <i class="fas fa-bullseye text-primary-gold text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-3 font-serif">Gagner les Âmes</h3>
                    <p class="text-text-muted leading-relaxed text-sm mb-4">
                        Conduire les hommes et les femmes à une rencontre personnelle avec Jésus-Christ
                    </p>
                    <p class="text-primary-gold/60 italic text-xs">"Allez par tout le monde, et prêchez la bonne nouvelle à toute la création." - Marc 16:15</p>
                </div>
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg text-center">
                    <div class="w-14 h-14 bg-primary-navy/5 rounded-full flex items-center justify-center mx-auto mb-5">
                        <i class="fas fa-book text-primary-navy text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-3 font-serif">Former des Disciples</h3>
                    <p class="text-text-muted leading-relaxed text-sm mb-4">
                        Enseigner et équiper les croyants par la Parole de Dieu pour une vie chrétienne authentique
                    </p>
                    <p class="text-primary-gold/60 italic text-xs">"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>
                <div class="vn-card group bg-white p-8 rounded-2xl transition-all duration-500 border border-gray-100 hover:border-primary-gold/30 hover:shadow-lg text-center">
                    <div class="w-14 h-14 bg-primary-gold/10 rounded-full flex items-center justify-center mx-auto mb-5">
                        <i class="fas fa-crown text-primary-gold text-xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-primary-navy mb-3 font-serif">Régner avec Christ</h3>
                    <p class="text-text-muted leading-relaxed text-sm mb-4">
                        Préparer les disciples à régner avec Lui sur terre et dans l'éternité
                    </p>
                    <p class="text-primary-gold/60 italic text-xs">"Si nous persévérons, nous régnerons aussi avec lui." - 2 Timothée 2:12</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================== EVENTS ===================== -->
    <section class="vn-reveal py-20 lg:py-28 bg-gray-50">
        <div class="max-w-6xl 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-14">
                <div>
                    <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-3">Calendrier</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-primary-navy font-serif">Nos Événements</h2>
                    <div class="vn-divider mt-3" style="margin: 12px 0 0 0;"></div>
                    <p class="text-text-muted mt-2">Rejoignez-nous pour nos prochains rassemblements</p>
                </div>
                <a href="{{ route('public.events') }}" class="group mt-4 md:mt-0 bg-primary-gold text-white px-5 py-2.5 rounded-full font-semibold text-sm transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:scale-105 inline-flex items-center">
                    Voir tous les événements
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform inline-block text-xs"></i>
                </a>
            </div>

            <!-- Prochain Événement en Vedette -->
            @if($nextEvent)
            <div class="mb-12">
                <div class="bg-white rounded-2xl overflow-hidden border border-primary-gold/20 shadow-sm hover:shadow-lg transition-all duration-500">
                    <div class="grid md:grid-cols-5">
                        <div class="md:col-span-3 p-8 md:p-10">
                            <span class="inline-block bg-primary-gold/10 px-3 py-1 rounded-full text-xs font-semibold text-primary-gold mb-4 uppercase tracking-wider border border-primary-gold/20">
                                <i class="fas fa-star mr-1"></i>Prochain Événement
                            </span>
                            <h3 class="text-2xl md:text-3xl font-bold mb-5 font-serif text-primary-navy">{{ $nextEvent->title }}</h3>
                            <div class="space-y-2.5 mb-6">
                                <div class="flex items-center text-sm text-text-muted">
                                    <i class="fas fa-calendar-alt w-5 mr-2 text-primary-gold"></i>
                                    <span>{{ \Carbon\Carbon::parse($nextEvent->event_date)->translatedFormat('l d F Y') }}</span>
                                </div>
                                @if($nextEvent->event_time)
                                <div class="flex items-center text-sm text-text-muted">
                                    <i class="fas fa-clock w-5 mr-2 text-primary-gold"></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-sm text-text-muted">
                                    <i class="fas fa-map-marker-alt w-5 mr-2 text-primary-gold"></i>
                                    <span>{{ $nextEvent->location }}</span>
                                </div>
                                @if($nextEvent->church)
                                <div class="flex items-center text-sm text-text-muted">
                                    <i class="fas fa-church w-5 mr-2 text-primary-gold"></i>
                                    <span>{{ $nextEvent->church->name }}</span>
                                </div>
                                @endif
                            </div>
                            @if($nextEvent->description)
                                <p class="text-text-muted text-sm mb-6">{{ Str::limit($nextEvent->description, 150) }}</p>
                            @endif
                            <a href="{{ route('public.event.show', $nextEvent->slug) }}"
                               class="inline-flex items-center bg-primary-gold text-white px-6 py-2.5 rounded-full font-semibold text-sm transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:scale-105">
                                Plus de détails <i class="fas fa-arrow-right ml-2 text-xs"></i>
                            </a>
                        </div>
                        <div class="md:col-span-2 bg-gray-50 p-10 hidden md:flex items-center justify-center border-l border-gray-100">
                            <div class="text-center">
                                <i class="fas fa-calendar-check text-primary-gold/20 text-8xl"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            <!-- Événements En Cours -->
            @if($ongoingEvents->count() > 0)
            <div class="mb-12">
                <h3 class="text-xl font-bold text-primary-navy mb-6 flex items-center font-serif">
                    <span class="relative flex h-2.5 w-2.5 mr-3">
                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
                        <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></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="vn-card bg-white rounded-2xl overflow-hidden border border-gray-100 hover:shadow-lg transition-all duration-500">
                        <div class="bg-gradient-to-r from-emerald-50 to-emerald-50/50 p-5 relative border-b border-emerald-100/50">
                            <div class="absolute top-3 right-3">
                                <span class="flex h-2 w-2">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-500 opacity-75"></span>
                                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                                </span>
                            </div>
                            <span class="bg-emerald-100 text-emerald-700 px-2 py-0.5 rounded-full text-xs mb-2 inline-block">{{ $event->church->name ?? 'MMPV' }}</span>
                            <h3 class="text-base font-bold mt-2 leading-tight text-primary-navy">{{ $event->title }}</h3>
                            <div class="flex items-center text-text-muted mt-2 text-xs">
                                <i class="fas fa-calendar mr-1.5 text-emerald-600"></i>
                                <span>{{ \Carbon\Carbon::parse($event->event_date)->format('d M Y') }}</span>
                            </div>
                            @if($event->event_time)
                            <div class="flex items-center text-text-muted text-xs mt-1">
                                <i class="fas fa-clock mr-1.5 text-emerald-600"></i>
                                <span>{{ \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-5">
                            <div class="flex items-start mb-2">
                                <i class="fas fa-map-marker-alt text-text-muted mt-0.5 mr-2 text-xs"></i>
                                <span class="text-text-dark text-sm">{{ $event->location }}</span>
                            </div>
                            @if($event->description)
                                <p class="text-text-muted text-xs line-clamp-2">{{ Str::limit($event->description, 100) }}</p>
                            @endif
                            <a href="{{ route('public.event.show', $event->slug) }}" class="mt-3 inline-block text-emerald-600 font-semibold text-sm hover:text-emerald-700 transition-colors">
                                Voir les détails <i class="fas fa-arrow-right ml-1 text-xs"></i>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Autres Événements à Venir -->
            @if($upcomingEvents->count() > 0)
            <div>
                <h3 class="text-xl font-bold text-primary-navy mb-6 font-serif">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="vn-card bg-white rounded-2xl overflow-hidden border border-gray-100 hover:shadow-lg transition-all duration-500">
                        <div class="bg-gradient-to-r from-blue-50 to-blue-50/50 p-5 border-b border-blue-100/50">
                            <span class="bg-blue-100 text-primary-navy px-2 py-0.5 rounded-full text-xs mb-2 inline-block">{{ $event->church->name ?? 'MMPV' }}</span>
                            <h3 class="text-base font-bold mt-2 leading-tight text-primary-navy">{{ $event->title }}</h3>
                            <div class="flex items-center text-text-muted mt-2 text-xs">
                                <i class="fas fa-calendar mr-1.5 text-primary-gold"></i>
                                <span>{{ \Carbon\Carbon::parse($event->event_date)->format('d M Y') }}</span>
                            </div>
                            @if($event->event_time)
                            <div class="flex items-center text-text-muted text-xs mt-1">
                                <i class="fas fa-clock mr-1.5 text-primary-gold"></i>
                                <span>{{ \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-5">
                            <div class="flex items-start mb-2">
                                <i class="fas fa-map-marker-alt text-text-muted mt-0.5 mr-2 text-xs"></i>
                                <span class="text-text-dark text-sm">{{ $event->location }}</span>
                            </div>
                            @if($event->description)
                                <p class="text-text-muted text-xs 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-2xl p-12 text-center border border-gray-100 shadow-sm">
                <i class="fas fa-calendar-times text-gray-200 text-4xl mb-3"></i>
                <p class="text-text-muted">Aucun événement disponible pour le moment</p>
            </div>
            @endif
        </div>
    </section>

    <!-- ===================== RECENT MEDIA ===================== -->
    <section class="vn-reveal py-20 lg:py-28 bg-neutral-cream">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center mb-12">
                <div>
                    <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-3">Derniers contenus</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-primary-navy font-serif">Mediatheque</h2>
                    <div class="vn-divider mt-3" style="margin: 12px 0 0 0;"></div>
                </div>
                <a href="{{ route('public.media') }}" class="bg-primary-gold text-white px-5 py-2.5 rounded-full font-semibold text-sm transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:scale-105 inline-flex items-center">
                    Voir tout <i class="fas fa-arrow-right ml-2 text-xs"></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
                        $imageGalleryRaw = $media->images ?? [];
                        $imageGallery = array_map(fn($u) => str_starts_with($u, 'http') ? $u : asset($u), $imageGalleryRaw);
                        $mainImage = !empty($imageGallery) ? $imageGallery[0] : ($media->file_path ? asset($media->file_path) : ($media->thumbnail ? asset($media->thumbnail) : null));
                        $hasGallery = !empty($imageGallery) && count($imageGallery) > 1;
                    @endphp
                    <div class="vn-card group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:shadow-lg transition-all duration-500">
                        <div class="relative pb-56 bg-gray-50
                            {{ $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 group-hover:scale-105 transition-transform duration-500"
                                     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/10 group-hover:bg-black/20 transition">
                                    <div class="bg-white/90 w-12 h-12 rounded-full flex items-center justify-center shadow-lg">
                                        <i class="fas fa-play text-primary-navy text-sm ml-0.5"></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 group-hover:scale-105 transition-transform duration-500">
                                @else
                                    <img src="{{ asset('images/defaults/podcast-default.svg') }}" alt="{{ $media->title }}"
                                         class="absolute inset-0 w-full h-full object-cover">
                                @endif
                                <div class="absolute inset-0 flex items-center justify-center bg-black/10 group-hover:bg-black/20 transition">
                                    <div class="bg-primary-gold/90 w-12 h-12 rounded-full flex items-center justify-center shadow-lg">
                                        <i class="fas fa-play text-white text-sm ml-0.5"></i>
                                    </div>
                                </div>
                                <div class="absolute top-3 right-3 bg-primary-gold px-2.5 py-0.5 rounded-full text-xs font-semibold text-white 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 group-hover:scale-105 transition-transform duration-500">
                                @if($hasGallery)
                                    <div class="absolute top-3 left-3 bg-primary-navy/70 px-2.5 py-0.5 rounded-full text-xs font-semibold text-white z-10">
                                        <i class="fas fa-images mr-1"></i>{{ count($imageGallery) }} photos
                                    </div>
                                @else
                                    <div class="absolute top-3 left-3 bg-primary-navy/50 px-2.5 py-0.5 rounded-full text-xs font-semibold text-white z-10">
                                        <i class="fas fa-image mr-1"></i>Image
                                    </div>
                                @endif
                                @if($hasGallery && count($imageGallery) > 1)
                                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/40 to-transparent p-2">
                                        <div class="flex gap-1 justify-center">
                                            @foreach($imageGallery as $index => $img)
                                                @if($index < 4)
                                                    <div class="w-7 h-7 rounded overflow-hidden border border-white/50 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-7 h-7 rounded bg-primary-navy/70 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-300 text-3xl"></i>
                                </div>
                            @endif
                        </div>
                        <div class="p-4">
                            <span class="px-2 py-0.5 rounded-full text-xs font-medium
                                {{ $media->media_type === 'video' ? 'bg-amber-50 text-amber-600' : '' }}
                                {{ $media->media_type === 'audio' ? 'bg-gray-50 text-text-muted' : '' }}
                                {{ $media->media_type === 'image' ? 'bg-emerald-50 text-emerald-600' : '' }}">
                                {{ $media->media_type === 'video' ? 'Video' : ($media->media_type === 'image' ? 'Image' : 'Audio') }}
                            </span>
                            <h4 class="font-semibold text-primary-navy mt-2 text-sm line-clamp-2">{{ $media->title }}</h4>
                            @if($media->description)
                                <p class="text-text-muted text-xs line-clamp-2 mt-1">{{ $media->description }}</p>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-2xl p-12 text-center border border-gray-100 shadow-sm">
                <i class="fas fa-photo-video text-gray-200 text-4xl mb-3"></i>
                <p class="text-text-muted">Aucun media disponible pour le moment</p>
            </div>
            @endif
        </div>
    </section>

    <!-- ===================== TESTIMONIALS ===================== -->
    <section class="vn-reveal py-20 lg:py-28 bg-white">
        <div class="max-w-6xl 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-14">
                <div>
                    <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-3">Vies transformées</span>
                    <h2 class="text-3xl md:text-4xl font-bold text-primary-navy font-serif">Témoignages</h2>
                    <div class="vn-divider mt-3" style="margin: 12px 0 0 0;"></div>
                    <p class="text-text-muted mt-2">Découvrez comment Dieu transforme des vies</p>
                </div>
                <a href="{{ route('public.testimonials') }}" class="group mt-4 md:mt-0 bg-primary-gold text-white px-5 py-2.5 rounded-full font-semibold text-sm transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:scale-105 inline-flex items-center">
                    Tous les témoignages
                    <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform inline-block text-xs"></i>
                </a>
            </div>

            @if($approvedTestimonials->count() > 0)
            <div class="grid md:grid-cols-3 gap-6">
                @foreach($approvedTestimonials->take(3) as $testimonial)
                <div class="vn-card bg-white rounded-2xl p-7 border border-gray-100 hover:shadow-lg transition-all duration-500 relative">
                    <i class="fas fa-quote-left text-primary-gold/10 text-4xl absolute top-6 right-6"></i>
                    <div class="flex items-center mb-5">
                        <div class="bg-gray-50 w-11 h-11 rounded-full flex items-center justify-center mr-3 border border-gray-100">
                            <i class="fas fa-user text-primary-navy/30"></i>
                        </div>
                        <div>
                            <h4 class="font-semibold text-primary-navy text-sm">{{ $testimonial->author_name }}</h4>
                            @if($testimonial->church)
                                <p class="text-xs text-text-muted">{{ $testimonial->church->name }}</p>
                            @endif
                        </div>
                    </div>
                    @if($testimonial->title)
                        <h5 class="font-semibold text-primary-navy text-sm mb-2">{{ $testimonial->title }}</h5>
                    @endif
                    <p class="text-text-muted text-sm italic line-clamp-4 leading-relaxed">{{ $testimonial->content }}</p>
                </div>
                @endforeach
            </div>
            @else
            <div class="bg-white rounded-2xl p-12 text-center border border-gray-100 shadow-sm">
                <i class="fas fa-quote-right text-gray-200 text-4xl mb-3"></i>
                <p class="text-text-muted">Aucun témoignage pour le moment</p>
            </div>
            @endif
        </div>
    </section>

    <!-- ===================== MEMBER REGISTRATION (COMMENTED OUT) ===================== -->
    {{-- Section membre temporairement cachee
    <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'Éternel.
                    </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 personnalisee</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">Reseau 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">Numero 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." - Ésaï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 ===================== -->
    <section class="vn-reveal relative py-24 lg:py-32 bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 overflow-hidden">
        <div class="absolute inset-0 opacity-30">
            <div class="absolute top-10 right-20 w-96 h-96 bg-primary-gold/10 rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-20 w-96 h-96 bg-amber-200/20 rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-5">Soutenir la mission</span>
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4 font-serif leading-tight text-primary-navy">
                Soutenez notre mission
            </h2>
            <div class="vn-divider mb-5"></div>
            <p class="text-lg text-text-muted mb-10 max-w-2xl mx-auto leading-relaxed font-light">
                Votre générosité permet de porter l'Évangile jusqu'aux extrémités de la terre
                afin que des vies soient transformées pour la gloire de Dieu.
            </p>

            <div class="bg-white/80 backdrop-blur-sm rounded-2xl p-6 mb-10 max-w-xl mx-auto border border-gray-100 shadow-sm">
                <p class="text-base text-text-dark italic leading-relaxed font-light">
                    "Que chacun donne comme il l'a resolu en son coeur, sans tristesse ni contrainte; car Dieu aime celui qui donne avec joie."
                </p>
                <p class="text-sm font-medium text-primary-gold mt-3">- 2 Corinthiens 9:7</p>
            </div>

            <div class="flex flex-col md:flex-row gap-8 justify-center items-center">
                {{-- QR Code --}}
                <a href="https://linktr.ee/rcerennes" target="_blank" rel="noopener noreferrer"
                   class="group flex flex-col items-center bg-white rounded-2xl p-5 shadow-sm hover:shadow-lg transition-all duration-500 hover:-translate-y-1 hover:scale-[1.02] border border-gray-100">
                    <img src="{{ asset('images/qr-don-linktree.svg') }}" alt="QR Code - Faire un don"
                         class="w-40 h-40 md:w-48 md:h-48">
                    <span class="mt-3 text-xs font-medium text-text-muted group-hover:text-primary-gold transition-colors flex items-center gap-1">
                        <i class="fas fa-qrcode"></i>Scannez pour donner
                    </span>
                </a>

                {{-- Bouton + texte --}}
                <div class="flex flex-col gap-4 items-center">
                    <a href="{{ route('public.donations') }}"
                       class="group bg-primary-gold text-white px-8 py-3.5 rounded-full font-semibold text-sm transition-all duration-500 hover:bg-primary-gold/90 hover:shadow-lg hover:shadow-primary-gold/20 hover:scale-105 inline-flex items-center">
                        <i class="fas fa-heart mr-2 text-sm"></i>
                        Faire un don libre et volontaire
                        <i class="fas fa-arrow-right ml-2 text-xs group-hover:translate-x-1 transition-transform inline-block"></i>
                    </a>
                    <a href="https://linktr.ee/rcerennes" target="_blank" rel="noopener noreferrer"
                       class="group bg-white border border-gray-200 text-primary-navy px-7 py-3 rounded-full font-medium text-sm transition-all duration-500 hover:bg-primary-navy hover:text-white hover:scale-105 inline-flex items-center">
                        <i class="fas fa-external-link-alt mr-2 text-xs"></i>
                        Donner via Linktree
                    </a>
                    <p class="text-sm text-text-muted font-light mt-2">
                        Que Dieu benisse votre semence.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- ===================== CONTACT FORM ===================== -->
    <section id="contact" class="vn-reveal py-20 lg:py-28 bg-gray-50">
        <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <span class="inline-block text-primary-gold text-xs font-semibold uppercase tracking-widest mb-4">Restons en contact</span>
                <h2 class="text-3xl md:text-4xl font-bold text-primary-navy mb-4 font-serif">Contactez-nous</h2>
                <div class="vn-divider mb-4"></div>
                <p class="text-text-muted max-w-xl mx-auto leading-relaxed text-sm">
                    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.
                </p>
            </div>

            <div class="bg-white rounded-2xl shadow-sm p-8 md:p-10 border border-gray-100">
                {{-- Message de succes --}}
                @if(session('contact_success'))
                    <div class="mb-6 p-4 bg-emerald-50 border border-emerald-100 rounded-xl">
                        <div class="flex items-center">
                            <i class="fas fa-check-circle text-emerald-500 mr-3"></i>
                            <p class="text-emerald-700 font-medium text-sm">{{ session('contact_success') }}</p>
                        </div>
                    </div>
                @endif

                {{-- Erreurs de validation --}}
                @if($errors->any())
                    <div class="mb-6 p-4 bg-red-50 border border-red-100 rounded-xl">
                        <div class="flex items-start">
                            <i class="fas fa-exclamation-circle text-red-400 mr-3 mt-0.5"></i>
                            <ul class="text-red-600 text-sm space-y-1">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif

                <form action="{{ route('public.contact.submit') }}" method="POST" class="space-y-5">
                    @csrf

                    {{-- Honeypot anti-spam (champ invisible) --}}
                    <div class="absolute" style="left:-9999px;opacity:0;height:0;overflow:hidden;" aria-hidden="true" tabindex="-1">
                        <input type="text" name="honeypot" value="" autocomplete="off" tabindex="-1">
                    </div>

                    <div class="grid md:grid-cols-2 gap-5">
                        <div>
                            <label for="contact-name" class="block text-xs font-semibold text-primary-navy mb-1.5">Nom complet *</label>
                            <input type="text" id="contact-name" name="name" value="{{ old('name') }}" required maxlength="255"
                                   class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-gold/30 focus:border-primary-gold transition-all bg-gray-50/50"
                                   placeholder="Votre nom">
                        </div>
                        <div>
                            <label for="contact-email" class="block text-xs font-semibold text-primary-navy mb-1.5">Email *</label>
                            <input type="email" id="contact-email" name="email" value="{{ old('email') }}" required maxlength="255"
                                   class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-gold/30 focus:border-primary-gold transition-all bg-gray-50/50"
                                   placeholder="votre@email.com">
                        </div>
                    </div>

                    <div>
                        <label for="contact-phone" class="block text-xs font-semibold text-primary-navy mb-1.5">Téléphone</label>
                        <input type="tel" id="contact-phone" name="phone" value="{{ old('phone') }}" maxlength="30"
                               class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-gold/30 focus:border-primary-gold transition-all bg-gray-50/50"
                               placeholder="+33 6 12 34 56 78">
                    </div>

                    <div>
                        <label for="contact-subject" class="block text-xs font-semibold text-primary-navy mb-1.5">Sujet *</label>
                        <input type="text" id="contact-subject" name="subject" value="{{ old('subject') }}" required maxlength="255"
                               class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-gold/30 focus:border-primary-gold transition-all bg-gray-50/50"
                               placeholder="Objet de votre message">
                    </div>

                    <div>
                        <label for="contact-message" class="block text-xs font-semibold text-primary-navy mb-1.5">Message *</label>
                        <textarea id="contact-message" name="message" rows="5" required minlength="10" maxlength="5000"
                                  class="w-full px-4 py-3 text-sm border border-gray-200 rounded-xl focus:ring-2 focus:ring-primary-gold/30 focus:border-primary-gold transition-all resize-none bg-gray-50/50"
                                  placeholder="Ecrivez votre message ici...">{{ old('message') }}</textarea>
                    </div>

                    <div class="pt-2">
                        <button type="submit"
                                class="w-full bg-primary-gold hover:bg-primary-gold/90 text-white px-6 py-3.5 rounded-full font-semibold text-sm transition-all duration-500 hover:shadow-lg hover:scale-[1.01]">
                            <i class="fas fa-paper-plane mr-2"></i>Envoyer le message
                        </button>
                        <p class="text-xs text-text-muted text-center mt-3">
                            <i class="fas fa-lock mr-1"></i>Vos informations sont protégées et traitées de manière confidentielle
                        </p>
                    </div>
                </form>
            </div>

            <!-- Contact Info Cards -->
            <div class="grid md:grid-cols-3 gap-4 mt-8">
                <div class="vn-card bg-white rounded-2xl p-5 text-center border border-gray-100 shadow-sm hover:shadow-md transition-all duration-500">
                    <div class="w-10 h-10 bg-primary-gold/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-envelope text-primary-gold text-sm"></i>
                    </div>
                    <h4 class="font-semibold text-primary-navy text-sm mb-1">Email</h4>
                    <p class="text-xs text-text-muted break-all">rachetesdeleternel@gmail.com</p>
                </div>
                <div class="vn-card bg-white rounded-2xl p-5 text-center border border-gray-100 shadow-sm hover:shadow-md transition-all duration-500">
                    <div class="w-10 h-10 bg-primary-gold/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-map-marker-alt text-primary-gold text-sm"></i>
                    </div>
                    <h4 class="font-semibold text-primary-navy text-sm mb-1">Adresse</h4>
                    <p class="text-xs text-text-muted">1 Boulevard Gaston Birge<br>49100 Angers, France</p>
                </div>
                <a href="https://www.youtube.com/c/RACHET%C3%89SWEBTV" target="_blank" rel="noopener noreferrer"
                   class="block bg-white rounded-2xl p-5 text-center border border-gray-100 shadow-sm hover:shadow-md hover:border-primary-gold/30 transition-all duration-500 hover:scale-[1.02]">
                    <div class="w-10 h-10 bg-primary-gold/10 rounded-full flex items-center justify-center mx-auto mb-3">
                        <i class="fab fa-youtube text-primary-gold text-sm"></i>
                    </div>
                    <h4 class="font-semibold text-primary-navy text-sm mb-1">YouTube</h4>
                    <p class="text-xs text-text-muted">Suivez nos cultes en direct</p>
                </a>
            </div>
        </div>
    </section>

    <!-- ===================== COMMUNITY CTA ===================== -->
    <section class="vn-reveal relative py-24 lg:py-32 bg-gradient-to-br from-blue-50 via-indigo-50/50 to-blue-50 overflow-hidden">
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-10 right-20 w-72 h-72 bg-primary-gold/20 rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-20 w-96 h-96 bg-blue-200/20 rounded-full blur-3xl"></div>
        </div>

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

    @push('scripts')
    <script>
        // YouTube Live Display - Detection 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');

            // Elements 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 detect - Affichage du live');

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

                // Changer le contenu video
                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
                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 chargee
                    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 arreter la video
                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);
            }

            // Verifier le statut du live automatiquement
            function checkLiveStatus() {
                console.log('Verification 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 verification du live:', error);
                        // En cas d'erreur, afficher le placeholder par sécurité
                        showNoLive();
                    });
            }

            // Verifier immediatement au chargement
            checkLiveStatus();

            // Reverifier 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('Detection automatique du live YouTube activee');
        });

        // 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() {
                // Creer 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 deuxieme 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 montee)
                tl.fromTo('#hero-subtitle',
                    {
                        opacity: 0,
                        y: 30
                    },
                    {
                        opacity: 1,
                        y: 0,
                        duration: 1
                    },
                    '-=0.6'
                );

                // Animation du verset (apparition avec scale et rotation legere)
                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 sequentielle)
                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 dore
                gsap.to('#hero-title-2', {
                    scale: 1.05,
                    duration: 2,
                    repeat: -1,
                    yoyo: true,
                    ease: 'sine.inOut'
                });

                console.log('Animations GSAP du hero activees');
            };
            document.head.appendChild(gsapScript);
        });

        // Scroll Reveal - IntersectionObserver for .vn-reveal elements
        document.addEventListener('DOMContentLoaded', function() {
            const revealElements = document.querySelectorAll('.vn-reveal');
            if (revealElements.length === 0) return;

            const revealObserver = new IntersectionObserver(function(entries) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        revealObserver.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.15,
                rootMargin: '0px 0px -40px 0px'
            });

            revealElements.forEach(function(el) {
                revealObserver.observe(el);
            });

            console.log('Scroll reveal active pour', revealElements.length, 'sections');
        });
    </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 Ajoute</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