{{-- Public Loan Products Index --}}
<x-site-layout title="Loan Products">
    
    {{-- Hero Section --}}
    <section class="relative min-h-[50vh] bg-gradient-to-r from-green-600 to-green-700">
        <div class="absolute inset-0 bg-black/30"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6">
                    Loan Products
                </h1>
                <p class="text-xl text-green-100 max-w-5xl mx-auto">
                    Explore our range of loan products designed to meet your financial needs with competitive interest rates and flexible terms.
                </p>
            </div>
        </div>
    </section>

    {{-- Breadcrumb --}}
    <div class="bg-gray-50 border-b border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
            <nav class="flex items-center space-x-2 text-sm text-gray-600" aria-label="Breadcrumb">
                <a href="{{ url('/') }}" class="hover:text-green-600 transition flex items-center">
                    <i class="fas fa-home mr-1"></i>Home
                </a>
                <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
                <span class="text-gray-900 font-medium">Loan Products</span>
            </nav>
        </div>
    </div>

    {{-- Main Content --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            {{-- Featured Products --}}
            @if($featuredProducts->count() > 0)
                <div class="mb-12">
                    <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
                        <i class="fas fa-star text-yellow-500 mr-3"></i>
                        Featured Products
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        @foreach($featuredProducts as $product)
                            <div class="theme-card rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-2 border-yellow-200">
                                <div class="bg-gradient-to-r from-green-600 to-green-700 p-6 text-white relative">
                                    @if($product->is_featured)
                                        <span class="absolute top-4 right-4 bg-yellow-400 text-yellow-900 text-xs px-2 py-1 rounded-full font-semibold">
                                            Featured
                                        </span>
                                    @endif
                                    <h3 class="text-2xl font-bold mb-2">{{ $product->name }}</h3>
                                    <p class="text-green-100">{{ $product->interest_rate_display ?? $product->interest_rate . '% APR' }}</p>
                                </div>
                                <div class="p-6">
                                    <p class="text-gray-600 mb-4 line-clamp-2">
                                        {{ $product->description ?? 'Competitive loan terms for our valued members.' }}
                                    </p>
                                    <div class="space-y-3 mb-6">
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-500">Amount Range</span>
                                            <span class="font-semibold text-gray-900">{{ $product->formatted_amount_range }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-500">Term Range</span>
                                            <span class="font-semibold text-gray-900">{{ $product->min_term_months }} - {{ $product->max_term_months }} months</span>
                                        </div>
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-500">Currency</span>
                                            <span class="font-semibold text-gray-900">{{ $product->currency }}</span>
                                        </div>
                                    </div>
                                    <a href="{{ route('loans.show', $product) }}" 
                                       class="block text-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                                        View Details
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- Regular Products --}}
            @if($regularProducts->count() > 0)
                <div>
                    <h2 class="text-2xl font-bold text-gray-900 mb-6">
                        All Loan Products
                    </h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        @foreach($regularProducts as $product)
                            <div class="theme-card rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                                <div class="bg-gradient-to-r from-green-600 to-green-700 p-5 text-white">
                                    <h3 class="text-xl font-bold mb-1">{{ $product->name }}</h3>
                                    <p class="text-green-100 text-sm">{{ $product->interest_rate_display ?? $product->interest_rate . '% APR' }}</p>
                                </div>
                                <div class="p-5">
                                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                                        {{ $product->description ?? 'Competitive loan terms for our valued members.' }}
                                    </p>
                                    <div class="space-y-2 mb-4">
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-500">Amount</span>
                                            <span class="font-medium text-gray-900">{{ $product->formatted_amount_range }}</span>
                                        </div>
                                        <div class="flex justify-between text-sm">
                                            <span class="text-gray-500">Term</span>
                                            <span class="font-medium text-gray-900">{{ $product->min_term_months }}-{{ $product->max_term_months }} mo</span>
                                        </div>
                                    </div>
                                    <a href="{{ route('loans.show', $product) }}" 
                                       class="block text-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm font-medium">
                                        Learn More
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            {{-- No Products Message --}}
            @if($products->isEmpty())
                <div class="theme-card rounded-xl shadow-md p-12 text-center">
                    <i class="fas fa-box-open text-6xl text-gray-300 mb-4"></i>
                    <h3 class="text-xl font-semibold text-gray-700 mb-2">No Loan Products Available</h3>
                    <p class="text-gray-500">Please check back later for available loan products.</p>
                </div>
            @endif

        </div>
    </section>

    {{-- CTA Section --}}
    <section class="py-16 bg-gradient-to-r from-green-600 to-green-700">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold text-white mb-4">
                Ready to Apply?
            </h2>
            <p class="text-green-100 mb-8 max-w-5xl mx-auto">
                Become a member today to access our exclusive loan products with competitive rates and flexible repayment terms.
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="{{ route('membership.apply') }}" 
                   class="px-8 py-4 bg-white text-green-700 rounded-lg hover:bg-green-50 transition font-semibold shadow-lg">
                    <i class="fas fa-user-plus mr-2"></i>
                    Apply for Membership
                </a>
                <a href="{{ route('membership.categories.index') }}" 
                   class="px-8 py-4 bg-transparent border-2 border-white text-white rounded-lg hover:bg-white/10 transition font-semibold">
                    <i class="fas fa-tags mr-2"></i>
                    View Categories
                </a>
            </div>
        </div>
    </section>

</x-site-layout>
