@extends('layouts.public-layout')

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

@section('content')
    <!-- Hero Section -->
    <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">
                    <i class="fas fa-hand-holding-heart mr-3"></i>Faire un Don
                </h1>
                <p class="text-xl text-blue-100 max-w-2xl mx-auto">
                    Soutenez notre mission et participez à l'œuvre de Dieu par vos dons
                </p>
            </div>
        </div>
    </section>

    <!-- Verset biblique -->
    <section class="py-8 bg-gradient-to-br from-blue-50 to-purple-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-xl p-6 md:p-8 shadow-lg border-l-4 border-blue-600">
                <div class="flex items-start">
                    <i class="fas fa-quote-left text-blue-600 text-3xl mr-4 mt-1 opacity-50"></i>
                    <div>
                        <p class="text-lg text-gray-700 italic mb-2">
                            "Que chacun donne comme il l'a résolu en son cœur, sans tristesse ni contrainte; car Dieu aime celui qui donne avec joie."
                        </p>
                        <p class="text-blue-600 font-semibold">
                            — 2 Corinthiens 9:7
                        </p>
                    </div>
                    <i class="fas fa-quote-right text-blue-600 text-3xl ml-4 mt-1 opacity-50 self-end"></i>
                </div>
            </div>
        </div>
    </section>

    <!-- Donations Grid -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            @if($donations->count() > 0)
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                    @foreach($donations as $donation)
                        <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition duration-300 transform hover:-translate-y-2">
                            <!-- Header with icon -->
                            <div class="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-center">
                                <div class="inline-flex items-center justify-center w-16 h-16 bg-white bg-opacity-20 backdrop-blur-sm rounded-full mb-4">
                                    <i class="fas fa-hand-holding-heart text-white text-3xl"></i>
                                </div>
                                <h3 class="text-2xl font-bold text-white">{{ $donation->title }}</h3>
                            </div>

                            <!-- Body -->
                            <div class="p-6">
                                @if($donation->description)
                                    <p class="text-gray-700 leading-relaxed mb-6">
                                        {{ $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-4 px-6 rounded-xl shadow-lg hover:shadow-xl transition duration-300 text-center">
                                    <i class="fas fa-heart mr-2"></i>{{ $donation->button_text }}
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <!-- Empty State -->
                <div class="text-center py-16">
                    <div class="inline-flex items-center justify-center w-24 h-24 bg-gradient-to-br from-blue-100 to-purple-100 rounded-full mb-6">
                        <i class="fas fa-hand-holding-heart text-blue-600 text-5xl"></i>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">Aucune campagne de don active pour le moment</h3>
                    <p class="text-gray-600 max-w-2xl mx-auto mb-8">
                        Nous vous remercions pour votre générosité. De nouvelles campagnes de don seront bientôt disponibles.
                    </p>
                    <a href="{{ route('public.home') }}"
                       class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold rounded-xl shadow-lg hover:shadow-xl transition">
                        <i class="fas fa-home mr-2"></i>Retour à l'accueil
                    </a>
                </div>
            @endif
        </div>
    </section>

@endsection