<section id="benefits" class="relative py-20 lg:py-28 bg-gradient-to-b from-primary-800 to-primary-900 text-white overflow-hidden">
    <!-- Background Pattern -->
    <div class="absolute inset-0 opacity-5" style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 40px 40px;"></div>
    <div class="absolute top-0 right-0 w-96 h-96 bg-accent-500/10 rounded-full -translate-y-1/3 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-white/10 text-primary-200 px-4 py-1.5 rounded-full text-sm font-medium mb-4">
                <i class="fas fa-award text-xs"></i>
                <span>Benefits &amp; Target Audience</span>
            </div>
            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 font-display">
                Privileges &amp; <span class="text-accent-400">Who Should Study</span>
            </h2>
            <div class="max-w-24 mx-auto mb-6 h-0.5 bg-gradient-to-r from-primary-400 to-accent-400"></div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16">
            <!-- Left: Privileges -->
            <div class="reveal-left">
                <h3 class="text-2xl font-bold mb-6 font-display flex items-center space-x-3">
                    <div class="w-10 h-10 bg-accent-500/20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-crown text-accent-400"></i>
                    </div>
                    <span>Privileges of Accredited Mediators</span>
                </h3>

                <div class="space-y-4">
                    @foreach([
                        ['title' => 'Court-Annexed Mediation Roles', 'desc' => 'Appointment to Mediation Panels and case referrals from Kenyan courts under the Court-Annexed Mediation (CAM) program for civil, commercial, employment, land, and family disputes.', 'icon' => 'fa-landmark'],
                        ['title' => 'Professional Recognition & Status', 'desc' => 'Certification by the Judiciary and authorization to practice in specialized areas such as Civil, Commercial, Land, Employment, Family, and other specified disputes.', 'icon' => 'fa-certificate'],
                        ['title' => 'Remuneration & Fees', 'desc' => 'Entitled to remuneration for mediation services with payment rates set by the Judiciary or negotiated in private mediations based on case value, complexity, and time.', 'icon' => 'fa-money-bill-wave'],
                        ['title' => 'Legal Immunity & Privileges', 'desc' => 'Confidentiality protections under Kenyan law and legal immunity from being sued for actions taken in good faith within the scope of mediator authority.', 'icon' => 'fa-shield-alt'],
                        ['title' => 'Professional Development', 'desc' => 'Access to Judiciary-sponsored workshops, seminars, and training sessions plus networking opportunities in local and international mediation networks.', 'icon' => 'fa-chart-line'],
                        ['title' => 'Access to Court Records', 'desc' => 'Entitled to access necessary case documents and information from courts to prepare for mediation sessions effectively.', 'icon' => 'fa-folder-open'],
                        ['title' => 'Recognition in Private Practice', 'desc' => 'Conduct private mediations and charge for services independently. Accreditation enhances credibility and marketability in the marketplace.', 'icon' => 'fa-briefcase'],
                    ] as $privilege)
                        <div class="bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10 hover:bg-white/10 transition-all duration-300 group">
                            <div class="flex items-start space-x-3">
                                <div class="w-10 h-10 bg-accent-500/20 group-hover:bg-accent-500/30 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors duration-300">
                                    <i class="fas {{ $privilege['icon'] }} text-accent-400 text-sm"></i>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-white text-sm mb-1">{{ $privilege['title'] }}</h4>
                                    <p class="text-primary-200 text-xs leading-relaxed">{{ $privilege['desc'] }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <!-- Right: Who Should Attend -->
            <div class="reveal-right">
                <h3 class="text-2xl font-bold mb-6 font-display flex items-center space-x-3">
                    <div class="w-10 h-10 bg-primary-400/20 rounded-xl flex items-center justify-center">
                        <i class="fas fa-user-graduate text-primary-300"></i>
                    </div>
                    <span>Who Should Study Mediation?</span>
                </h3>

                <p class="text-primary-200 text-sm mb-6 leading-relaxed">
                    The mediation program is designed for professionals from all fields who are eager to engage in shared learning and enhance their mediation skills.
                </p>

                <div class="space-y-5">
                    <!-- Administrative Professionals -->
                    <div class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="w-10 h-10 bg-blue-500/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-building text-blue-400 text-sm"></i>
                            </div>
                            <h4 class="font-semibold text-white text-sm">Administrative Professionals</h4>
                        </div>
                        <div class="flex flex-wrap gap-2 ml-13">
                            @foreach(['Accountants', 'Office Manager', 'Executive Assistant', 'Receptionist', 'HR Manager', 'Procurement Officers'] as $role)
                                <span class="bg-blue-500/10 text-blue-300 px-3 py-1 rounded-full text-xs">{{ $role }}</span>
                            @endforeach
                        </div>
                    </div>

                    <!-- Legal Professionals -->
                    <div class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="w-10 h-10 bg-accent-500/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-gavel text-accent-400 text-sm"></i>
                            </div>
                            <h4 class="font-semibold text-white text-sm">Legal Professionals</h4>
                        </div>
                        <div class="flex flex-wrap gap-2 ml-13">
                            @foreach(['Advocates', 'Paralegal', 'Legal Secretary', 'Judge', 'Magistrate', 'Legal Consultant'] as $role)
                                <span class="bg-accent-500/10 text-accent-300 px-3 py-1 rounded-full text-xs">{{ $role }}</span>
                            @endforeach
                        </div>
                    </div>

                    <!-- Professional Advisors -->
                    <div class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="w-10 h-10 bg-green-500/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-lightbulb text-green-400 text-sm"></i>
                            </div>
                            <h4 class="font-semibold text-white text-sm">Professional Advisors</h4>
                        </div>
                        <div class="flex flex-wrap gap-2 ml-13">
                            @foreach(['Financial Advisor', 'Management Consultant', 'Business Consultant', 'Tax Advisor', 'Healthcare Consultant', 'IT Consultant'] as $role)
                                <span class="bg-green-500/10 text-green-300 px-3 py-1 rounded-full text-xs">{{ $role }}</span>
                            @endforeach
                        </div>
                    </div>

                    <!-- Church Leaders -->
                    <div class="bg-white/5 backdrop-blur-sm rounded-xl p-5 border border-white/10">
                        <div class="flex items-center space-x-3 mb-3">
                            <div class="w-10 h-10 bg-purple-500/20 rounded-lg flex items-center justify-center">
                                <i class="fas fa-church text-purple-400 text-sm"></i>
                            </div>
                            <h4 class="font-semibold text-white text-sm">Church Leaders</h4>
                        </div>
                        <div class="flex flex-wrap gap-2 ml-13">
                            @foreach(['Pastor', 'Bishop', 'Deacon', 'Youth Minister', 'Worship Leader', 'Clergy'] as $role)
                                <span class="bg-purple-500/10 text-purple-300 px-3 py-1 rounded-full text-xs">{{ $role }}</span>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
