<section id="experts" class="relative py-20 lg:py-28 bg-white overflow-hidden">
    <!-- Background Decoration -->
    <div class="absolute top-1/4 left-0 w-72 h-72 bg-primary-50 rounded-full -translate-x-1/2"></div>
    <div class="absolute bottom-0 right-0 w-96 h-96 bg-accent-50 rounded-full translate-x-1/3"></div>

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center mb-16 reveal">
            <div class="inline-flex items-center space-x-2 bg-primary-50 text-primary-600 px-4 py-1.5 rounded-full text-sm font-medium mb-4">
                <i class="fas fa-user-tie text-xs"></i>
                <span>Our Team</span>
            </div>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 font-display">
                Our Mediation <span class="gradient-text">Experts</span>
            </h2>
            <div class="section-divider max-w-24 mx-auto mb-6"></div>
            <p class="text-gray-600 text-lg max-w-3xl mx-auto">
                Our team of expert trainers excels in educating aspiring mediators from different parts of the country. With extensive experience and a compassionate approach, we provide comprehensive training programs that equip individuals with essential mediation skills.
            </p>
        </div>

        <!-- Experts Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 lg:gap-8">
            @foreach($experts as $expert)
                <div class="expert-card bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden reveal-scale" style="transition-delay: {{ $loop->index * 0.1 }}s;">
                    <!-- Expert Image -->
                    <div class="relative h-56 bg-gradient-to-br from-primary-100 to-primary-50 overflow-hidden">
                        @if($expert->passport_path && $expert->hasPassport())
                            <img src="{{ $expert->getPassportUrl() }}" alt="{{ $expert->staff_name }}" class="w-full h-full object-cover">
                        @else
                            <div class="w-full h-full flex items-center justify-center">
                                <div class="w-28 h-28 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full flex items-center justify-center shadow-lg">
                                    <span class="text-white text-3xl font-bold font-display">
                                        {{ strtoupper(substr($expert->staff_name, 0, 1)) }}
                                    </span>
                                </div>
                            </div>
                        @endif
                        <!-- Decorative overlay -->
                        <div class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-white to-transparent"></div>
                        <!-- Status badge -->
                        <div class="absolute top-3 right-3 bg-green-500 text-white text-xs px-2.5 py-1 rounded-full font-medium">
                            <i class="fas fa-circle text-xs mr-1" style="font-size: 6px; vertical-align: middle;"></i> Active
                        </div>
                    </div>

                    <!-- Expert Info -->
                    <div class="p-5 pt-2">
                        <h4 class="font-bold text-gray-900 text-base mb-1 leading-tight">{{ $expert->staff_name }}</h4>
                        <div class="inline-flex items-center space-x-1.5 bg-primary-50 text-primary-600 px-3 py-1 rounded-full text-xs font-medium mb-3">
                            <i class="fas fa-briefcase text-xs"></i>
                            <span>{{ $expert->position }}</span>
                        </div>
                        <p class="text-gray-500 text-xs leading-relaxed">
                            Accredited by Mediation Accreditation Committee (MAC) to provide training for aspiring mediators.
                        </p>
                        @if($expert->employment_start_date)
                            <div class="mt-3 pt-3 border-t border-gray-50 text-xs text-gray-400 flex items-center space-x-1">
                                <i class="fas fa-calendar-alt"></i>
                                <span>Since {{ $expert->employment_start_date->format('Y') }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
