@extends('layouts.public-layout')

@section('title', $church->name . ' - Nos Églises - MMPV')

@section('content')
    <!-- Breadcrumb -->
    <section class="bg-gray-100 py-3 md:py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <nav class="flex flex-wrap items-center text-gray-600 text-xs md:text-sm">
                <a href="{{ route('public.home') }}" class="hover:text-blue-600">
                    <i class="fas fa-home mr-1"></i>Accueil
                </a>
                <span class="mx-1 md:mx-2">/</span>
                <a href="{{ route('public.churches') }}" class="hover:text-blue-600">Églises</a>
                <span class="mx-1 md:mx-2">/</span>
                <span class="text-gray-900 break-words">{{ $church->name }}</span>
            </nav>
        </div>
    </section>

    <!-- Church Header -->
    <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-12 md:py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                @if($church->image)
                    <div class="inline-block mb-4 md:mb-6">
                        <img src="{{ $church->image }}"
                             alt="{{ $church->name }}"
                             class="w-24 h-24 md:w-32 md:h-32 rounded-full object-cover border-4 border-white shadow-xl">
                    </div>
                @else
                    <div class="inline-block bg-white bg-opacity-20 w-20 h-20 md:w-24 md:h-24 rounded-full flex items-center justify-center mb-4 md:mb-6">
                        <i class="fas fa-church text-4xl md:text-6xl"></i>
                    </div>
                @endif
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-3 md:mb-4 px-4 break-words">{{ $church->name }}</h1>
                <div class="flex items-center justify-center text-base md:text-xl text-blue-100 px-4">
                    <i class="fas fa-map-marker-alt mr-2"></i>
                    <span class="break-words text-center">{{ $church->city }}, {{ $church->country }}</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Church Information -->
    <section class="py-8 md:py-12 lg:py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid lg:grid-cols-3 gap-6 md:gap-8">
                <!-- Main Info -->
                <div class="lg:col-span-2">
                    <!-- Description -->
                    @if($church->description)
                        <div class="bg-white rounded-2xl shadow-md p-4 md:p-8 mb-8">
                            <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-3 md:mb-4">
                                <i class="fas fa-info-circle mr-1 md:mr-2 text-blue-600"></i>À propos
                            </h2>
                            <p class="text-gray-700 leading-relaxed text-sm md:text-base lg:text-lg break-words">{{ $church->description }}</p>
                        </div>
                    @endif

                    <!-- Ongoing Events -->
                    @php
                        $now = \Carbon\Carbon::now();
                        $ongoingEvents = $church->events->filter(function($event) use ($now) {
                            $eventDate = \Carbon\Carbon::parse($event->event_date);
                            $endDate = $event->end_date ? \Carbon\Carbon::parse($event->end_date) : null;

                            // Un événement est "en cours" si:
                            // 1. Il a une end_date et on est entre event_date et end_date
                            if ($endDate && $now->between($eventDate, $endDate)) {
                                return true;
                            }

                            // 2. OU si l'événement est aujourd'hui (sans end_date)
                            if (!$endDate && $eventDate->isToday()) {
                                return true;
                            }

                            return false;
                        });
                    @endphp
                    @if($ongoingEvents->count() > 0)
                        <div class="bg-gradient-to-br from-amber-50 to-orange-50 rounded-2xl shadow-lg p-4 md:p-8 mb-8 border-2 border-amber-400">
                            <div class="flex items-center gap-2 md:gap-3 mb-4 md:mb-6">
                                <span class="relative flex h-3 w-3 md:h-4 md:w-4">
                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-600 opacity-75"></span>
                                    <span class="animate-pulse relative inline-flex rounded-full h-3 w-3 md:h-4 md:w-4 bg-amber-600"></span>
                                </span>
                                <h2 class="text-xl md:text-2xl font-bold text-amber-900">
                                    <i class="fas fa-calendar-check mr-1 md:mr-2"></i>Événements en cours
                                </h2>
                            </div>
                            <div class="space-y-4">
                                @foreach($ongoingEvents as $event)
                                    <div class="bg-white border-l-4 border-amber-500 p-4 md:p-5 rounded-r-xl hover:shadow-lg transition-all duration-300">
                                        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-3 md:gap-4">
                                            <div class="flex-1 min-w-0">
                                                <div class="flex items-center gap-2 mb-2">
                                                    <span class="relative flex h-2 w-2 md:h-2.5 md:w-2.5">
                                                        <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-amber-500 opacity-75"></span>
                                                        <span class="relative inline-flex rounded-full h-2 w-2 md:h-2.5 md:w-2.5 bg-amber-500"></span>
                                                    </span>
                                                    <span class="text-xs font-bold uppercase tracking-wider text-amber-700 bg-amber-100 px-2 py-1 rounded">En cours</span>
                                                </div>
                                                <h3 class="font-bold text-lg md:text-xl text-gray-900 mb-2 break-words">{{ $event->title }}</h3>
                                                @if($event->description)
                                                    <div class="mb-3">
                                                        <p class="text-gray-600 text-sm md:text-base break-all overflow-hidden line-clamp-3" id="desc-ongoing-{{ $event->id }}">{{ $event->description }}</p>
                                                        @if(strlen($event->description) > 150)
                                                            <button
                                                                onclick="toggleDescription('ongoing-{{ $event->id }}')"
                                                                id="btn-ongoing-{{ $event->id }}"
                                                                class="text-amber-600 hover:text-amber-700 text-xs md:text-sm mt-1 font-medium flex items-center">
                                                                <span class="show-more">Voir plus</span>
                                                                <span class="show-less hidden">Voir moins</span>
                                                                <i class="fas fa-chevron-down ml-1 show-more"></i>
                                                                <i class="fas fa-chevron-up ml-1 show-less hidden"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                @endif
                                                <div class="flex flex-wrap gap-2 md:gap-3 text-xs md:text-sm text-gray-700">
                                                    <span class="flex items-center gap-1 flex-shrink-0">
                                                        <i class="fas fa-calendar-day text-amber-600"></i>
                                                        <span class="hidden md:inline">{{ \Carbon\Carbon::parse($event->event_date)->locale('fr')->isoFormat('dddd D MMMM YYYY') }}</span>
                                                        <span class="md:hidden">{{ \Carbon\Carbon::parse($event->event_date)->locale('fr')->isoFormat('D MMM YYYY') }}</span>
                                                    </span>
                                                    @if($event->event_time)
                                                        <span class="flex items-center gap-1 flex-shrink-0">
                                                            <i class="fas fa-clock text-amber-600"></i>
                                                            {{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                                                            @if($event->end_time)
                                                                - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                                                            @endif
                                                        </span>
                                                    @endif
                                                    @if($event->location)
                                                        <span class="flex items-center gap-1 min-w-0">
                                                            <i class="fas fa-map-marker-alt text-amber-600 flex-shrink-0"></i>
                                                            <span class="truncate">{{ $event->location }}</span>
                                                        </span>
                                                    @endif
                                                </div>
                                            </div>
                                            <a href="{{ route('public.event.show', $event->slug) }}" class="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 text-white px-4 md:px-5 py-2 md:py-2.5 rounded-lg text-xs md:text-sm font-bold hover:shadow-lg transition-all duration-300 whitespace-nowrap self-start">
                                                <i class="fas fa-info-circle mr-1"></i>Détails
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <!-- Upcoming Events -->
                    @php
                        $upcomingEvents = $church->events->filter(function($event) use ($now) {
                            $eventDate = \Carbon\Carbon::parse($event->event_date);
                            $endDate = $event->end_date ? \Carbon\Carbon::parse($event->end_date) : null;

                            // Event is upcoming if start date is in the future
                            if ($eventDate->isFuture()) {
                                return true;
                            }

                            // Or if it has an end_date and we're not in the event period yet
                            return false;
                        })->sortBy('event_date')->take(5);
                    @endphp
                    <div class="bg-white rounded-2xl shadow-md p-4 md:p-8 mb-8">
                        <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4 md:mb-6">
                            <i class="fas fa-calendar-alt mr-1 md:mr-2 text-blue-600"></i>Événements à venir
                        </h2>
                        @if($upcomingEvents->count() > 0)
                            <div class="space-y-4">
                                @foreach($upcomingEvents as $event)
                                    <div class="border-l-4 border-blue-500 bg-blue-50 p-3 md:p-4 rounded-r-lg hover:bg-blue-100 transition">
                                        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-3">
                                            <div class="flex-1 min-w-0">
                                                <h3 class="font-bold text-base md:text-lg text-gray-900 mb-2 break-words">{{ $event->title }}</h3>
                                                @if($event->description)
                                                    <div class="mb-2">
                                                        <p class="text-gray-600 text-xs md:text-sm break-all overflow-hidden line-clamp-2" id="desc-upcoming-{{ $event->id }}">{{ $event->description }}</p>
                                                        @if(strlen($event->description) > 100)
                                                            <button
                                                                onclick="toggleDescription('upcoming-{{ $event->id }}')"
                                                                id="btn-upcoming-{{ $event->id }}"
                                                                class="text-blue-600 hover:text-blue-700 text-xs mt-1 font-medium flex items-center">
                                                                <span class="show-more">Voir plus</span>
                                                                <span class="show-less hidden">Voir moins</span>
                                                                <i class="fas fa-chevron-down ml-1 show-more"></i>
                                                                <i class="fas fa-chevron-up ml-1 show-less hidden"></i>
                                                            </button>
                                                        @endif
                                                    </div>
                                                @endif
                                                <div class="flex flex-wrap gap-2 md:gap-3 text-xs md:text-sm text-gray-600">
                                                    @if($event->is_recurring)
                                                        <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded font-semibold flex-shrink-0">
                                                            <i class="fas fa-repeat mr-1"></i>Récurrent
                                                        </span>
                                                    @endif
                                                    <span class="flex items-center gap-1 flex-shrink-0">
                                                        <i class="fas fa-calendar text-blue-600"></i>
                                                        {{ \Carbon\Carbon::parse($event->event_date)->format('d M Y') }}
                                                    </span>
                                                    @if($event->event_time)
                                                        <span class="flex items-center gap-1 flex-shrink-0">
                                                            <i class="fas fa-clock text-blue-600"></i>
                                                            {{ \Carbon\Carbon::parse($event->event_time)->format('H:i') }}
                                                            @if($event->end_time)
                                                                - {{ \Carbon\Carbon::parse($event->end_time)->format('H:i') }}
                                                            @endif
                                                        </span>
                                                    @endif
                                                    @if($event->location)
                                                        <span class="flex items-center gap-1 min-w-0">
                                                            <i class="fas fa-location-dot text-blue-600 flex-shrink-0"></i>
                                                            <span class="truncate">{{ $event->location }}</span>
                                                        </span>
                                                    @endif
                                                </div>
                                                @if($event->is_recurring && $event->getRecurrenceDescription())
                                                    <p class="text-xs text-indigo-600 mt-2 font-medium">
                                                        <i class="fas fa-info-circle mr-1"></i>{{ $event->getRecurrenceDescription() }}
                                                    </p>
                                                @endif
                                            </div>
                                            <a href="{{ route('public.event.show', $event->slug) }}" class="bg-blue-600 text-white px-3 md:px-4 py-2 rounded-lg text-xs md:text-sm font-semibold hover:bg-blue-700 transition whitespace-nowrap self-start">
                                                Détails
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if($church->events->where('status', 'upcoming')->count() > 5)
                                <div class="mt-4 md:mt-6 text-center">
                                    <a href="{{ route('public.events') }}" class="text-blue-600 hover:text-blue-700 font-semibold text-sm md:text-base">
                                        Voir tous les événements <i class="fas fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            @endif
                        @else
                            <div class="bg-blue-50 rounded-lg p-6 md:p-8 text-center">
                                <i class="fas fa-calendar-xmark text-blue-300 text-4xl md:text-5xl mb-3 md:mb-4"></i>
                                <p class="text-gray-600 text-base md:text-lg">Aucun événement à venir pour le moment</p>
                                <p class="text-gray-500 mt-2 text-sm md:text-base">Revenez bientôt pour découvrir nos prochaines activités</p>
                            </div>
                        @endif
                    </div>

                    <!-- Media -->
                    <div class="bg-white rounded-2xl shadow-md p-4 md:p-8 mb-8">
                        <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4 md:mb-6">
                            <i class="fas fa-photo-film mr-1 md:mr-2 text-blue-600"></i>Médiathèque
                        </h2>
                        @if($church->media->count() > 0)
                            <div class="grid sm:grid-cols-2 gap-3 md:gap-4">
                                @foreach($church->media->take(4) as $media)
                                    <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition group">
                                        @php
                                            $icon = $media->media_type === 'video' ? 'video' : ($media->media_type === 'audio' ? 'headphones' : 'image');
                                            $color = $media->media_type === 'video' ? 'red' : ($media->media_type === 'audio' ? 'purple' : 'green');
                                        @endphp

                                        <!-- Image/Thumbnail -->
                                        <div class="relative aspect-video bg-gradient-to-br from-purple-100 to-blue-100 overflow-hidden">
                                            @if($media->media_type === 'image' && $media->file_path)
                                                <img src="{{ $media->file_path }}"
                                                     alt="{{ $media->title }}"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                            @elseif($media->media_type === 'video' && $media->thumbnail)
                                                <img src="{{ $media->thumbnail }}"
                                                     alt="{{ $media->title }}"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 group-hover:bg-opacity-40 transition">
                                                    <i class="fas fa-play-circle text-white text-5xl opacity-90"></i>
                                                </div>
                                            @elseif($media->media_type === 'video' && $media->youtube_id)
                                                <img src="https://img.youtube.com/vi/{{ $media->youtube_id }}/mqdefault.jpg"
                                                     alt="{{ $media->title }}"
                                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                                <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 group-hover:bg-opacity-40 transition">
                                                    <i class="fas fa-play-circle text-white text-5xl opacity-90"></i>
                                                </div>
                                            @else
                                                <div class="w-full h-full flex items-center justify-center">
                                                    <i class="fas fa-{{ $icon }} text-{{ $color }}-500 text-4xl md:text-5xl"></i>
                                                </div>
                                            @endif
                                        </div>

                                        <!-- Info -->
                                        <div class="p-3 md:p-4">
                                            <h3 class="font-semibold text-gray-900 mb-2 text-sm md:text-base break-words line-clamp-2">{{ $media->title }}</h3>
                                            <span class="inline-block text-xs bg-{{ $color }}-100 text-{{ $color }}-800 px-2 py-1 rounded-full font-medium">
                                                <i class="fas fa-{{ $icon }} mr-1"></i>{{ $media->media_type === 'video' ? 'Vidéo' : ($media->media_type === 'image' ? 'Image' : 'Audio') }}
                                            </span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if($church->media->count() > 4)
                                <div class="mt-4 md:mt-6 text-center">
                                    <a href="{{ route('public.media') }}" class="text-blue-600 hover:text-blue-700 font-semibold text-sm md:text-base">
                                        Voir toute la médiathèque <i class="fas fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            @endif
                        @else
                            <div class="bg-purple-50 rounded-lg p-6 md:p-8 text-center">
                                <i class="fas fa-photo-film text-purple-300 text-4xl md:text-5xl mb-3 md:mb-4"></i>
                                <p class="text-gray-600 text-base md:text-lg">Aucun média disponible pour le moment</p>
                                <p class="text-gray-500 mt-2 text-sm md:text-base">Des vidéos et audios seront bientôt ajoutés</p>
                            </div>
                        @endif
                    </div>

                    <!-- Testimonials -->
                    <div class="bg-white rounded-2xl shadow-md p-4 md:p-8">
                        <h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4 md:mb-6">
                            <i class="fas fa-quote-right mr-1 md:mr-2 text-blue-600"></i>Témoignages
                        </h2>
                        @if($church->testimonials->where('status', 'approved')->count() > 0)
                            <div class="space-y-4 md:space-y-6">
                                @foreach($church->testimonials->where('status', 'approved')->take(3) as $testimonial)
                                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl p-4 md:p-6 border-l-4 border-purple-500">
                                        @if($testimonial->title)
                                            <h3 class="font-bold text-base md:text-lg text-gray-900 mb-2 break-words">{{ $testimonial->title }}</h3>
                                        @endif
                                        <p class="text-gray-700 mb-3 md:mb-4 italic text-sm md:text-base break-words">"{{ Str::limit($testimonial->content, 200) }}"</p>
                                        <div class="flex items-center text-gray-600 text-sm md:text-base">
                                            <i class="fas fa-user-circle mr-2 text-purple-600"></i>
                                            <span class="font-semibold break-words">{{ $testimonial->author_name }}</span>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if($church->testimonials->where('status', 'approved')->count() > 3)
                                <div class="mt-4 md:mt-6 text-center">
                                    <a href="{{ route('public.testimonials') }}" class="text-blue-600 hover:text-blue-700 font-semibold text-sm md:text-base">
                                        Voir tous les témoignages <i class="fas fa-arrow-right ml-1"></i>
                                    </a>
                                </div>
                            @endif
                        @else
                            <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6 md:p-8 text-center">
                                <i class="fas fa-quote-right text-purple-300 text-4xl md:text-5xl mb-3 md:mb-4"></i>
                                <p class="text-gray-600 text-base md:text-lg">Aucun témoignage disponible pour le moment</p>
                                <p class="text-gray-500 mt-2 text-sm md:text-base">Soyez le premier à partager votre témoignage</p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-1">
                    <!-- Contact Card -->
                    <div class="bg-white rounded-2xl shadow-md p-4 md:p-6 mb-6 md:mb-8 lg:sticky lg:top-4">
                        <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-4 md:mb-6">
                            <i class="fas fa-address-book mr-1 md:mr-2 text-blue-600"></i>Informations de contact
                        </h3>

                        <div class="space-y-3 md:space-y-4">
                            <!-- Address -->
                            @if($church->address)
                                <div class="flex items-start">
                                    <div class="bg-blue-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-2 md:mr-3">
                                        <i class="fas fa-location-dot text-blue-600 text-sm md:text-base"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-semibold text-gray-900 mb-1 text-sm md:text-base">Adresse</p>
                                        <p class="text-gray-600 text-xs md:text-sm break-words">{{ $church->address }}</p>
                                        <p class="text-gray-600 text-xs md:text-sm break-words">{{ $church->city }}, {{ $church->country }}</p>
                                    </div>
                                </div>
                            @endif

                            <!-- Phone -->
                            @if($church->phone)
                                <div class="flex items-start">
                                    <div class="bg-green-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-2 md:mr-3">
                                        <i class="fas fa-phone text-green-600 text-sm md:text-base"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-semibold text-gray-900 mb-1 text-sm md:text-base">Téléphone</p>
                                        <a href="tel:{{ $church->phone }}" class="text-blue-600 hover:text-blue-700 text-xs md:text-sm break-words">
                                            {{ $church->phone }}
                                        </a>
                                    </div>
                                </div>
                            @endif

                            <!-- Email -->
                            @if($church->email)
                                <div class="flex items-start">
                                    <div class="bg-purple-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-2 md:mr-3">
                                        <i class="fas fa-envelope text-purple-600 text-sm md:text-base"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-semibold text-gray-900 mb-1 text-sm md:text-base">Email</p>
                                        <a href="mailto:{{ $church->email }}" class="text-blue-600 hover:text-blue-700 break-words text-xs md:text-sm">
                                            {{ $church->email }}
                                        </a>
                                    </div>
                                </div>
                            @endif

                            <!-- Pastor -->
                            @if($church->pastor)
                                <div class="flex items-start">
                                    <div class="bg-orange-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center flex-shrink-0 mr-2 md:mr-3">
                                        <i class="fas fa-user-tie text-orange-600 text-sm md:text-base"></i>
                                    </div>
                                    <div class="min-w-0 flex-1">
                                        <p class="font-semibold text-gray-900 mb-1 text-sm md:text-base">Responsable</p>
                                        <p class="text-gray-600 text-xs md:text-sm break-words">{{ $church->pastor }}</p>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <!-- Action Buttons -->
                        <div class="mt-4 md:mt-6 pt-4 md:pt-6 border-t space-y-2 md:space-y-3">
                            @if($church->phone)
                                <a href="tel:{{ $church->phone }}" class="block w-full bg-blue-600 text-white text-center px-3 md:px-4 py-2 md:py-3 rounded-lg text-sm md:text-base font-semibold hover:bg-blue-700 transition">
                                    <i class="fas fa-phone mr-1 md:mr-2"></i>Appeler
                                </a>
                            @endif

                            @if($church->email)
                                <a href="mailto:{{ $church->email }}" class="block w-full bg-purple-600 text-white text-center px-3 md:px-4 py-2 md:py-3 rounded-lg text-sm md:text-base font-semibold hover:bg-purple-700 transition">
                                    <i class="fas fa-envelope mr-1 md:mr-2"></i>Envoyer un email
                                </a>
                            @endif
                        </div>
                    </div>

                    <!-- Statistics Card -->
                    <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl shadow-md p-4 md:p-6">
                        <h3 class="text-lg md:text-xl font-bold text-gray-900 mb-4 md:mb-6">
                            <i class="fas fa-chart-bar mr-1 md:mr-2 text-blue-600"></i>Statistiques
                        </h3>

                        <div class="space-y-3 md:space-y-4">
                            <div class="bg-white rounded-lg p-3 md:p-4 flex items-center justify-between">
                                <div class="flex items-center min-w-0">
                                    <div class="bg-blue-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center mr-2 md:mr-3 flex-shrink-0">
                                        <i class="fas fa-calendar-alt text-blue-600 text-sm md:text-base"></i>
                                    </div>
                                    <span class="text-gray-700 font-medium text-xs md:text-sm truncate">Événements</span>
                                </div>
                                <span class="text-xl md:text-2xl font-bold text-blue-600 flex-shrink-0 ml-2">{{ $church->events->count() }}</span>
                            </div>

                            <div class="bg-white rounded-lg p-3 md:p-4 flex items-center justify-between">
                                <div class="flex items-center min-w-0">
                                    <div class="bg-purple-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center mr-2 md:mr-3 flex-shrink-0">
                                        <i class="fas fa-photo-film text-purple-600 text-sm md:text-base"></i>
                                    </div>
                                    <span class="text-gray-700 font-medium text-xs md:text-sm truncate">Médias</span>
                                </div>
                                <span class="text-xl md:text-2xl font-bold text-purple-600 flex-shrink-0 ml-2">{{ $church->media->count() }}</span>
                            </div>

                            <div class="bg-white rounded-lg p-3 md:p-4 flex items-center justify-between">
                                <div class="flex items-center min-w-0">
                                    <div class="bg-green-100 w-8 h-8 md:w-10 md:h-10 rounded-full flex items-center justify-center mr-2 md:mr-3 flex-shrink-0">
                                        <i class="fas fa-quote-right text-green-600 text-sm md:text-base"></i>
                                    </div>
                                    <span class="text-gray-700 font-medium text-xs md:text-sm truncate">Témoignages</span>
                                </div>
                                <span class="text-xl md:text-2xl font-bold text-green-600 flex-shrink-0 ml-2">{{ $church->testimonials->where('status', 'approved')->count() }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Back Button -->
            <div class="mt-8 md:mt-12 text-center">
                <a href="{{ route('public.churches') }}" class="inline-block bg-gray-200 text-gray-700 px-6 md:px-8 py-3 md:py-4 rounded-lg text-sm md:text-base font-bold hover:bg-gray-300 transition">
                    <i class="fas fa-arrow-left mr-1 md:mr-2"></i>Retour à la liste des églises
                </a>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="py-12 md:py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-2xl md:text-3xl font-bold mb-3 md:mb-4 px-4">
                <i class="fas fa-hands-praying mr-2 md:mr-3"></i>Rejoignez notre famille
            </h2>
            <p class="text-base md:text-xl text-blue-100 mb-6 md:mb-8 px-4">
                Vous êtes les bienvenus pour participer à nos cultes et activités
            </p>
            <div class="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center px-4">
                <a href="{{ route('public.events') }}" class="bg-white text-blue-600 px-5 md:px-6 py-2.5 md:py-3 rounded-lg text-sm md:text-base font-bold hover:bg-blue-50 transition inline-flex items-center justify-center">
                    <i class="fas fa-calendar-alt mr-2"></i>Voir les événements
                </a>
                <a href="{{ route('public.testimonials') }}" class="bg-white text-purple-600 px-5 md:px-6 py-2.5 md:py-3 rounded-lg text-sm md:text-base font-bold hover:bg-purple-50 transition inline-flex items-center justify-center">
                    <i class="fas fa-pen mr-2"></i>Partager un témoignage
                </a>
            </div>
        </div>
    </section>

    <!-- Church-Specific Donations -->
    @if($churchDonations->count() > 0)
        <section class="py-12 md:py-16 bg-gradient-to-br from-blue-50 to-purple-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-8 md:mb-12">
                    <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3 md:mb-4 px-4">
                        <i class="fas fa-hand-holding-heart text-blue-600 mr-2 md:mr-3"></i>Soutenir Cette Église
                    </h2>
                    <p class="text-gray-600 text-sm md:text-base lg:text-lg max-w-2xl mx-auto px-4">
                        Participez aux projets et besoins spécifiques de l'église {{ $church->name }}
                    </p>
                </div>

                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
                    @foreach($churchDonations as $donation)
                        <div class="bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition duration-300 md:transform md:hover:-translate-y-2">
                            <!-- Header -->
                            <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-4 md:p-6 text-center">
                                <div class="inline-flex items-center justify-center w-12 h-12 md:w-16 md:h-16 bg-white bg-opacity-20 backdrop-blur-sm rounded-full mb-3 md:mb-4">
                                    <i class="fas fa-hand-holding-heart text-white text-2xl md:text-3xl"></i>
                                </div>
                                <h3 class="text-xl md:text-2xl font-bold text-white break-words px-2">{{ $donation->title }}</h3>
                            </div>

                            <!-- Body -->
                            <div class="p-4 md:p-6">
                                @if($donation->description)
                                    <p class="text-gray-700 leading-relaxed mb-4 md:mb-6 text-sm md:text-base break-words">
                                        {{ $donation->description }}
                                    </p>
                                @endif

                                <!-- CTA Button -->
                                <a href="{{ $donation->donation_link }}"
                                   target="_blank"
                                   class="block w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 md:py-4 px-4 md:px-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 text-center text-sm md:text-base">
                                    <i class="fas fa-heart mr-2"></i>{{ $donation->button_text }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif
@endsection

@push('scripts')
<script>
    // Toggle description visibility
    function toggleDescription(eventId) {
        const description = document.getElementById('desc-' + eventId);
        const button = document.getElementById('btn-' + eventId);
        const showMoreElements = button.querySelectorAll('.show-more');
        const showLessElements = button.querySelectorAll('.show-less');

        description.classList.toggle('line-clamp-3');
        description.classList.toggle('line-clamp-2');

        showMoreElements.forEach(el => el.classList.toggle('hidden'));
        showLessElements.forEach(el => el.classList.toggle('hidden'));
    }
</script>
@endpush