{{-- Public Membership Categories Page --}}
<x-site-layout title="Membership Categories">
    
    {{-- 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">
                    Membership Categories
                </h1>
                <p class="text-xl text-green-100 max-w-5xl mx-auto">
                    Choose the membership category that best suits your needs and join our community today.
                </p>
            </div>
        </div>
    </section>

    {{-- Breadcrumb Navigation --}}
    <div class="bg-gray-50 border-b border-gray-200" aria-label="Breadcrumb">
        <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">Membership Categories</span>
            </nav>
        </div>
    </div>

    {{-- Categories Grid --}}
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            {{-- Section Header --}}
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">
                    Choose Your Membership
                </h2>
                <p class="text-gray-600 max-w-5xl mx-auto">
                    We offer various membership categories designed to meet the diverse needs of our community members. 
                    Each category comes with unique benefits and fee structures.
                </p>
            </div>

            {{-- Categories Grid --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                @foreach($categories as $category)
                    <div class="theme-card rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 group">
                        {{-- Category Header --}}
                        <div class="bg-gradient-to-r from-green-600 to-green-700 p-6 text-white">
                            <div class="flex items-center justify-between mb-4">
                                @if($category->icon)
                                    <i class="fas {{ $category->icon }} text-3xl opacity-80"></i>
                                @else
                                    <i class="fas fa-users text-3xl opacity-80"></i>
                                @endif
                                @if($category->members_count > 0)
                                    <span class="text-sm bg-white/20 px-3 py-1 rounded-full">
                                        {{ $category->members_count }} Members
                                    </span>
                                @endif
                            </div>
                            <h3 class="text-2xl font-bold">{{ $category->name }}</h3>
                        </div>

                        {{-- Category Body --}}
                        <div class="p-6">
                            {{-- Description --}}
                            <p class="text-gray-600 mb-6 line-clamp-3">
                                {{ $category->description ?? 'Join our community and enjoy exclusive member benefits.' }}
                            </p>

                            {{-- Benefits --}}
                            @if($category->benefits && count($category->benefits) > 0)
                                <div class="mb-6">
                                    <h4 class="font-semibold text-gray-900 mb-3">Key Benefits:</h4>
                                    <ul class="space-y-2">
                                        @foreach(array_slice($category->benefits, 0, 4) as $benefit)
                                            <li class="flex items-start text-sm text-gray-600">
                                                <i class="fas fa-check-circle text-green-500 mt-1 mr-2 flex-shrink-0"></i>
                                                <span>{{ $benefit }}</span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            {{-- Subscription Fee --}}
                            @php
                                $fee = $category->subscriptionFees->first();
                            @endphp
                            @if($fee)
                                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                                    <div class="flex items-center justify-between">
                                        <span class="text-sm text-gray-500">Subscription Fee</span>
                                        <span class="text-2xl font-bold text-green-600">
                                            {{ $fee->formatted_amount }}
                                        </span>
                                    </div>
                                    <p class="text-xs text-gray-400 mt-1 text-right">
                                        {{ $fee->billing_cycle_display }}
                                    </p>
                                </div>
                            @endif

                            {{-- Action Button --}}
                            <div class="flex gap-3">
                                <a href="{{ route('membership.categories.show', $category) }}" 
                                   class="flex-1 text-center px-4 py-3 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                                    View Details
                                </a>
                                <a href="{{ route('membership.apply') }}?category={{ $category->id }}" 
                                   class="flex-1 text-center px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition font-medium">
                                    Apply Now
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- No Categories Message --}}
            @if($categories->isEmpty())
                <div class="text-center py-12">
                    <i class="fas fa-folder-open text-6xl text-gray-300 mb-4"></i>
                    <h3 class="text-xl font-semibold text-gray-700 mb-2">No Membership Categories Available</h3>
                    <p class="text-gray-500">Please check back later for available membership options.</p>
                </div>
            @endif
        </div>
    </section>

    {{-- Loan Products Section --}}
    @if($loanProducts->isNotEmpty())
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            
            {{-- Section Header --}}
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">
                    Available Loan Products
                </h2>
                <p class="text-gray-600 max-w-5xl mx-auto">
                    As a member, you'll have access to our exclusive loan products with competitive interest rates.
                </p>
            </div>

            {{-- Loan Products Carousel/Grid --}}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($loanProducts->take(6) as $product)
                    <div class="theme-card rounded-xl shadow-md hover:shadow-lg transition-shadow overflow-hidden">
                        {{-- Product Header --}}
                        <div class="p-6 border-b border-gray-100">
                            <div class="flex items-start justify-between">
                                <div>
                                    <h3 class="text-lg font-semibold text-gray-900">{{ $product->name }}</h3>
                                    <p class="text-sm text-green-600 font-medium mt-1">
                                        {{ $product->formatted_interest_rate }}
                                    </p>
                                </div>
                                @if($product->is_featured)
                                    <span class="bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded-full font-medium">
                                        Featured
                                    </span>
                                @endif
                            </div>
                        </div>

                        {{-- Product Body --}}
                        <div class="p-6">
                            <p class="text-gray-600 text-sm mb-4 line-clamp-2">
                                {{ $product->description ?? 'Competitive loan terms for our valued members.' }}
                            </p>

                            {{-- Loan Details --}}
                            <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-medium 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-medium text-gray-900">{{ $product->min_term_months }} - {{ $product->max_term_months }} months</span>
                                </div>
                            </div>

                            {{-- CTA --}}
                            <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">
                                Learn More
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- View All Button --}}
            @if($loanProducts->count() > 6)
                <div class="text-center mt-8">
                    <a href="{{ route('loans.index') }}" 
                       class="inline-flex items-center px-6 py-3 border-2 border-green-600 text-green-600 rounded-lg hover:bg-green-600 hover:text-white transition font-medium">
                        View All Loan Products
                        <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            @endif
        </div>
    </section>
    @endif

    {{-- 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 Join Our Community?
            </h2>
            <p class="text-green-100 mb-8 max-w-5xl mx-auto">
                Take the first step towards becoming a valued member. Our team is ready to guide you through 
                the application process and answer any questions you may have.
            </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="#" 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-info-circle mr-2"></i>
                    Learn More
                </a>
            </div>
        </div>
    </section>

</x-site-layout>