<x-guest-layout>
    <div class="min-h-screen bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="text-center mb-12">
                <h1 class="text-4xl font-extrabold text-gray-900 sm:text-5xl">Nos projets</h1>
                <p class="mt-4 text-xl text-gray-500">Découvrez les projets publics du GIE</p>
            </div>

            @if($projects->count() > 0)
                <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach($projects as $project)
                        <div class="bg-white overflow-hidden shadow rounded-lg">
                            <div class="p-6">
                                <h3 class="text-lg font-medium text-gray-900 mb-2">{{ $project->name }}</h3>
                                <p class="text-sm text-gray-500 mb-4">{{ Str::limit($project->description, 150) }}</p>

                                <div class="mt-4 space-y-2">
                                    <div class="flex justify-between">
                                        <span
                                            class="text-sm font-medium text-gray-900">{{ \App\Models\Setting::format($project->amount) }}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-gray-500">Fréquence:</span>
                                        <span
                                            class="text-sm font-medium text-gray-900">{{ ucfirst($project->frequency) }}</span>
                                    </div>
                                    <div class="flex justify-between">
                                        <span class="text-sm text-gray-500">Type:</span>
                                        <span
                                            class="text-sm font-medium text-gray-900">{{ ucfirst($project->contribution_type) }}</span>
                                    </div>
                                </div>

                                <div class="mt-6">
                                    <a href="{{ route('public.project.show', $project) }}"
                                        class="block w-full text-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                                        Voir les détails
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class="mt-8">
                    {{ $projects->links() }}
                </div>
            @else
                <div class="text-center py-12">
                    <p class="text-gray-500">Aucun projet public disponible pour le moment.</p>
                </div>
            @endif
        </div>
    </div>
</x-guest-layout>