@extends('layouts.public-layout')

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

@section('content')
    <!-- Page Header -->
    <section class="bg-gradient-to-r from-slate-800 via-slate-700 to-slate-800 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">
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
                    <i class="fas fa-church mr-2 md:mr-3 text-amber-400"></i>Nos Églises
                </h1>
                <p class="text-base md:text-xl text-slate-200 max-w-2xl mx-auto px-4">
                    Découvrez nos églises à travers le monde et trouvez une famille près de chez vous
                </p>
            </div>
        </div>
    </section>

    <!-- Churches Grid -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if($churches->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($churches as $church)
                        <a href="{{ route('public.church.show', $church->slug) }}" class="block bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition transform hover:-translate-y-1 cursor-pointer border border-slate-200">
                            <!-- Church Header -->
                            <div class="bg-gradient-to-br from-slate-800 to-slate-700 p-4 md:p-6 text-white">
                                <div class="flex items-center justify-center mb-3 md:mb-4">
                                    @if($church->image)
                                        <img src="{{ $church->image }}"
                                             alt="{{ $church->name }}"
                                             class="w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-amber-400 shadow-lg">
                                    @else
                                        <div class="bg-amber-600 bg-opacity-20 w-14 h-14 md:w-16 md:h-16 rounded-full flex items-center justify-center">
                                            <i class="fas fa-church text-2xl md:text-3xl text-amber-400"></i>
                                        </div>
                                    @endif
                                </div>
                                <h3 class="text-lg md:text-xl font-bold text-center mb-2 uppercase break-words px-2">{{ $church->name }}</h3>
                                <div class="flex items-center justify-center text-slate-200 text-sm md:text-base">
                                    <i class="fas fa-map-marker-alt mr-2 text-amber-400"></i>
                                    <span class="break-words text-center">{{ $church->city }}, {{ $church->country }}</span>
                                </div>
                            </div>

                            <!-- Church Details -->
                            <div class="p-4 md:p-6">
                                <!-- Address -->
                                <div class="mb-4">
                                    <div class="flex items-start">
                                        <i class="fas fa-location-dot text-amber-600 mt-1 mr-2 md:mr-3 flex-shrink-0"></i>
                                        <div class="flex-1 min-w-0">
                                            <p class="text-slate-800 font-medium mb-1 text-sm md:text-base">Adresse</p>
                                            <p class="text-slate-600 text-sm md:text-base break-words">{{ $church->address }}</p>
                                        </div>
                                    </div>
                                </div>

                                <!-- Pastor -->
                                @if($church->pastor)
                                    <div class="mb-4">
                                        <div class="flex items-start">
                                            <i class="fas fa-user-tie text-slate-600 mt-1 mr-2 md:mr-3 flex-shrink-0"></i>
                                            <div class="flex-1 min-w-0">
                                                <p class="text-slate-800 font-medium mb-1 text-sm md:text-base">Responsable</p>
                                                <p class="text-slate-600 text-sm md:text-base break-words">{{ $church->pastor }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                <!-- Contact -->
                                @if($church->phone || $church->email)
                                    <div class="border-t pt-4 mt-4">
                                        <p class="text-slate-800 font-medium mb-3 text-sm md:text-base">
                                            <i class="fas fa-address-book text-emerald-600 mr-2"></i>Contact
                                        </p>

                                        @if($church->phone)
                                            <div class="flex items-center mb-2">
                                                <i class="fas fa-phone text-slate-400 w-5 mr-2 flex-shrink-0"></i>
                                                <span class="text-slate-600 text-sm md:text-base break-words">{{ $church->phone }}</span>
                                            </div>
                                        @endif

                                        @if($church->email)
                                            <div class="flex items-center">
                                                <i class="fas fa-envelope text-slate-400 w-5 mr-2 flex-shrink-0"></i>
                                                <span class="text-slate-600 truncate text-xs md:text-sm break-all">{{ $church->email }}</span>
                                            </div>
                                        @endif
                                    </div>
                                @endif
                            </div>

                            <!-- Footer Stats -->
                            <div class="bg-slate-50 px-4 md:px-6 py-3 md:py-4 border-t">
                                <div class="grid grid-cols-2 gap-3 md:gap-4 text-center">
                                    <div>
                                        <p class="text-xl md:text-2xl font-bold text-amber-600">{{ $church->events->count() }}</p>
                                        <p class="text-slate-600 text-xs md:text-sm">Événements</p>
                                    </div>
                                    <div>
                                        <p class="text-xl md:text-2xl font-bold text-slate-600">{{ $church->testimonials->count() }}</p>
                                        <p class="text-slate-600 text-xs md:text-sm">Témoignages</p>
                                    </div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                <!-- Statistics Summary -->
                <div class="mt-12 bg-white rounded-lg shadow-md p-4 md:p-8 border border-slate-200">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 text-center">
                        <div>
                            <div class="bg-amber-100 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
                                <i class="fas fa-church text-amber-600 text-lg md:text-2xl"></i>
                            </div>
                            <p class="text-2xl md:text-3xl font-bold text-slate-900">{{ $churches->count() }}</p>
                            <p class="text-slate-600 text-sm md:text-base">Églises</p>
                        </div>

                        <div>
                            <div class="bg-emerald-100 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
                                <i class="fas fa-globe text-emerald-600 text-lg md:text-2xl"></i>
                            </div>
                            <p class="text-2xl md:text-3xl font-bold text-slate-900">{{ $churches->pluck('country')->unique()->count() }}</p>
                            <p class="text-slate-600 text-sm md:text-base">Pays</p>
                        </div>

                        <div>
                            <div class="bg-slate-100 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
                                <i class="fas fa-city text-slate-600 text-lg md:text-2xl"></i>
                            </div>
                            <p class="text-2xl md:text-3xl font-bold text-slate-900">{{ $churches->pluck('city')->unique()->count() }}</p>
                            <p class="text-slate-600 text-sm md:text-base">Villes</p>
                        </div>

                        <div>
                            <div class="bg-amber-100 w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center mx-auto mb-2 md:mb-3">
                                <i class="fas fa-user-tie text-amber-700 text-lg md:text-2xl"></i>
                            </div>
                            <p class="text-2xl md:text-3xl font-bold text-slate-900">{{ $churches->whereNotNull('pastor')->count() }}</p>
                            <p class="text-slate-600 text-sm md:text-base">Responsables</p>
                        </div>
                    </div>
                </div>
            @else
                <!-- Empty State -->
                <div class="bg-white rounded-lg shadow-md p-16 text-center">
                    <div class="bg-slate-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-church text-slate-400 text-5xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-slate-900 mb-3">Aucune église disponible</h3>
                    <p class="text-slate-600 mb-6">
                        Il n'y a pas encore d'église enregistrée dans notre système.
                    </p>
                    <a href="{{ route('public.home') }}" class="inline-block bg-amber-600 text-white px-6 py-3 rounded-lg hover:bg-amber-700 transition">
                        <i class="fas fa-home mr-2"></i>Retour à l'accueil
                    </a>
                </div>
            @endif
        </div>
    </section>

    <!-- Call to Action -->
    @if($churches->count() > 0)
        <section class="py-12 md:py-16 bg-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 text-slate-900 mb-4">Vous souhaitez nous rejoindre ?</h2>
                <p class="text-base md:text-xl text-slate-600 mb-6 md:mb-8 px-2">
                    Contactez l'église la plus proche de chez vous pour plus d'informations sur les horaires de culte et les activités
                </p>
                <div class="flex flex-col sm:flex-row gap-3 md:gap-4 justify-center">
                    <a href="{{ route('public.events') }}" class="bg-amber-600 text-white px-6 md:px-8 py-3 md:py-4 rounded-lg font-semibold hover:bg-amber-700 transition text-sm md:text-base">
                        <i class="fas fa-calendar-alt mr-2"></i>Voir les événements
                    </a>
                    <a href="{{ route('public.testimonials') }}" class="bg-slate-700 text-white px-6 md:px-8 py-3 md:py-4 rounded-lg font-semibold hover:bg-slate-800 transition text-sm md:text-base">
                        <i class="fas fa-quote-right mr-2"></i>Lire les témoignages
                    </a>
                </div>
            </div>
        </section>
    @endif
@endsection