@props(['categories' => collect()])

{{-- Membership Section — Section 3 --}}
<section class="py-20 bg-white dark:bg-gray-900">
    <div class="container mx-auto px-4 lg:px-6">

        {{-- Hero Banner --}}
        <div class="rounded-2xl bg-gradient-to-r from-teal-600 to-blue-700 p-8 sm:p-10 text-white mb-12 relative overflow-hidden">
            {{-- Decorative background circles --}}
            <div class="absolute -top-10 -right-10 w-48 h-48 rounded-full bg-white/10 pointer-events-none"></div>
            <div class="absolute -bottom-8 -left-8 w-36 h-36 rounded-full bg-white/5 pointer-events-none"></div>

            <div class="relative z-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
                <div>
                    <div class="flex items-center gap-3 mb-3">
                        <div class="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center">
                            <i class="fa-solid fa-id-card text-white text-lg"></i>
                        </div>
                        <span class="text-white/80 text-sm font-medium uppercase tracking-widest">Membership</span>
                    </div>
                    <h2 class="text-3xl sm:text-4xl font-bold mb-2">Join SSHIA Today</h2>
                    <p class="text-white/80 text-base sm:text-lg max-w-5xl mx-auto">
                        Become part of South Sudan's leading health informatics community. Choose the membership tier that fits your goals.
                    </p>
                </div>
                <a href="{{ route('register.role.member') }}"
                   class="shrink-0 inline-flex items-center gap-2 bg-white text-teal-700 hover:bg-gray-100 font-semibold px-6 py-3 rounded-xl transition-colors focus:outline-none focus:ring-2 focus:ring-white/50">
                    <i class="fa-solid fa-arrow-right-to-bracket"></i>
                    Apply Now
                </a>
            </div>
        </div>

        @if($categories->isEmpty())
            {{-- Empty state --}}
            <div class="text-center py-16">
                <div class="w-16 h-16 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
                    <i class="fa-solid fa-layer-group text-gray-400 text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-theme-heading mb-2">Categories Coming Soon</h3>
                <p class="text-theme-body text-sm max-w-sm mx-auto">
                    Membership categories are being set up. Check back soon or apply directly.
                </p>
                <a href="{{ route('register.role.member') }}"
                   class="inline-flex items-center gap-2 mt-6 theme-btn-primary px-6 py-2.5 rounded-xl font-medium text-sm focus:outline-none focus:ring-2 focus:ring-offset-2">
                    <i class="fa-solid fa-pen-to-square"></i>
                    Apply for Membership
                </a>
            </div>
        @else
            {{-- Section intro --}}
            <div class="text-center mb-10">
                <h3 class="text-2xl font-bold text-theme-heading mb-2">Choose Your Membership Tier</h3>
                <p class="text-theme-body max-w-5xl mx-auto">
                    Each membership category is designed to support different levels of engagement with SSHIA's mission and activities.
                </p>
            </div>

            {{-- Categories Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                @foreach($categories as $category)
                    <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden depth-md border border-theme-divider flex flex-col">

                        {{-- Dynamic top accent bar --}}
                        <div class="h-2" style="background-color: {{ $category->theme_color ?? '#0ea5e9' }}"></div>

                        {{-- Category Hero Header --}}
                        <div class="px-5 py-4 flex items-center gap-3"
                             style="background-color: {{ $category->theme_color ?? '#0ea5e9' }}18">
                            <div class="w-10 h-10 rounded-full flex items-center justify-center shrink-0"
                                 style="background-color: {{ $category->theme_color ?? '#0ea5e9' }}30">
                                @if($category->icon)
                                    <i class="{{ $category->icon }} text-lg"
                                       style="color: {{ $category->theme_color ?? '#0ea5e9' }}"></i>
                                @else
                                    <i class="fa-solid fa-id-badge text-lg"
                                       style="color: {{ $category->theme_color ?? '#0ea5e9' }}"></i>
                                @endif
                            </div>
                            <h3 class="text-base font-bold leading-tight text-theme-heading">{{ $category->name }}</h3>
                        </div>

                        <div class="p-6 flex flex-col flex-1">

                            {{-- Description --}}
                            @if($category->description)
                                <p class="text-sm text-theme-body line-clamp-2 mb-3">{{ $category->description }}</p>
                            @endif

                            {{-- Benefits (first 3) --}}
                            @if(!empty($category->benefits) && count($category->benefits) > 0)
                                <ul class="space-y-1.5 mt-1 mb-4 flex-1">
                                    @foreach(array_slice($category->benefits, 0, 3) as $benefit)
                                        <li class="flex items-start gap-2 text-sm text-theme-body">
                                            <i class="fa-solid fa-check text-green-500 mt-0.5 shrink-0"></i>
                                            <span>{{ $benefit }}</span>
                                        </li>
                                    @endforeach
                                    @if(count($category->benefits) > 3)
                                        <li class="text-xs text-theme-body opacity-60 pl-5">
                                            +{{ count($category->benefits) - 3 }} more benefits
                                        </li>
                                    @endif
                                </ul>
                            @else
                                <div class="flex-1"></div>
                            @endif

                            {{-- CTA Button --}}
                            <a href="{{ route('register.role.member') }}"
                               class="mt-auto theme-btn-primary text-center rounded-lg py-2 px-4 text-sm block font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-opacity">
                                Become a Member
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>

            {{-- Bottom CTA --}}
            <div class="text-center mt-12">
                <p class="text-theme-body text-sm mb-4">Not sure which tier is right for you?</p>
                <a href="{{ route('membership.categories.index') }}"
                   class="inline-flex items-center gap-2 text-sm font-medium text-theme-primary hover:underline focus:outline-none">
                    <i class="fa-solid fa-circle-info"></i>
                    Compare all membership categories
                </a>
            </div>
        @endif

    </div>
</section>