@props(['settings'])

@if($settings['benefits_enabled'] ?? true)
<section class="py-12 relative overflow-hidden">
    {{-- Subtle Gradient Background --}}
    <div class="absolute inset-0 bg-gradient-to-b from-transparent via-white/5 to-transparent pointer-events-none">
    </div>

    <div class="max-w-[1400px] mx-auto px-6 relative z-10">
        <div class="text-center mb-8 space-y-4">
            <h2 class="text-4xl lg:text-6xl font-black text-white font-bricolage tracking-tight leading-tight">
                {{ $settings['benefits_title'] ?? 'Why partner with us?' }}
            </h2>
            <p class="text-text-dim max-w-2xl mx-auto font-medium text-lg">
                {{ $settings['benefits_subtitle'] ?? 'We provide everything you need to build a sustainable, recurring
                income stream.' }}
            </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @php
            $defaultBenefits = [
            ['icon' => 'currency-dollar', 'title' => 'High Commissions', 'description' => 'Earn up to 40% commission on
            every sale you refer, with no earning caps.'],
            ['icon' => 'clock', 'title' => '90-Day Cookies', 'description' => 'We attribute the sale to you even if they
            purchase up to 90 days after clicking.'],
            ['icon' => 'zap', 'title' => 'Instant Tracking', 'description' => 'Real-time analytics for every click,
            conversion, and commission earned.'],
            ['icon' => 'credit-card', 'title' => 'Fast Payouts', 'description' => 'Get paid your hard-earned commissions
            monthly via PayPal, Wire, or Crypto.'],
            ['icon' => 'tool', 'title' => 'Resource Center', 'description' => 'Access professional banners, social kits,
            and copy that converts.'],
            ['icon' => 'users', 'title' => 'Partner Manager', 'description' => 'Dedicated support team to help you
            optimize your promotional strategies.'],
            ];
            $benefits = !empty($settings['benefits']) ? $settings['benefits'] : $defaultBenefits;
            @endphp

            @foreach ($benefits as $benefit)
            <div
                class="group p-10 bg-[#0A0A0A]/80 border border-white/5 rounded-[3rem] hover:bg-neutral-900/50 transition-all duration-700 hover:-translate-y-3 backdrop-blur-xl">
                <div
                    class="w-20 h-20 rounded-3xl bg-indigo-500/10 flex items-center justify-center text-indigo-400 mb-10 border border-indigo-500/20 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-500 shadow-2xl shadow-indigo-500/0 group-hover:shadow-indigo-500/30">
                    <i data-lucide="{{ $benefit['icon'] ?? 'star' }}" class="w-10 h-10"></i>
                </div>
                <h3 class="text-2xl font-black text-white mb-6 uppercase tracking-wider font-bricolage leading-tight">{{
                    $benefit['title'] }}</h3>
                <p
                    class="text-text-dim leading-relaxed font-medium text-lg group-hover:text-neutral-300 transition-colors">
                    {{ $benefit['description'] }}
                </p>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif