@php
    $plans = json_decode($section->getSetting('plans', '[]'), true) ?? [];
@endphp

<div class="site-section">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'الباقات والأسعار' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        @if(count($plans))
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
                @foreach($plans as $index => $plan)
                    @php $highlighted = !empty($plan['highlighted']); @endphp
                    <div class="relative rounded-2xl p-6 border transition-all reveal reveal--delay-{{ ($index % 3) + 1 }}
                        {{ $highlighted
                            ? 'bg-blue-50 border-[var(--site-accent)] scale-105 shadow-2xl shadow-[var(--site-accent)]/10'
                            : 'bg-white border-gray-200 hover:border-gray-300 shadow-sm' }}">

                        @if($highlighted)
                            <div class="absolute -top-3 start-1/2 -translate-x-1/2 px-4 py-1 bg-[var(--site-accent)] text-white text-xs font-bold rounded-full">
                                الأكثر طلباً
                            </div>
                        @endif

                        <h3 class="text-xl font-bold text-gray-900">{{ $plan['name'] ?? '' }}</h3>

                        <div class="mt-4 flex items-baseline gap-1">
                            <span class="text-3xl font-bold {{ $highlighted ? 'text-[var(--site-accent)]' : 'text-gray-900' }}">
                                {{ $plan['price'] ?? '' }}
                            </span>
                            <span class="text-gray-400 text-sm">{{ $plan['period'] ?? '/شهر' }}</span>
                        </div>

                        @if(!empty($plan['features']))
                            <ul class="mt-6 space-y-3">
                                @foreach($plan['features'] as $feature)
                                    <li class="flex items-start gap-2 text-sm text-gray-600">
                                        <svg class="w-4 h-4 mt-0.5 text-[var(--site-accent)] shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                        </svg>
                                        {{ $feature }}
                                    </li>
                                @endforeach
                            </ul>
                        @endif

                        <a href="#section-contact"
                           class="mt-6 block text-center site-btn {{ $highlighted ? 'site-btn--primary' : 'site-btn--outline' }} w-full justify-center">
                            {{ $plan['cta'] ?? 'اشترك الآن' }}
                        </a>
                    </div>
                @endforeach
            </div>
        @else
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-5xl mx-auto">
                @for($i = 0; $i < 3; $i++)
                    <div class="skeleton-card p-6 space-y-4 {{ $i === 1 ? 'ring-2 ring-gray-200' : '' }}">
                        <div class="skeleton-block h-5 w-24"></div>
                        <div class="skeleton-block h-8 w-20"></div>
                        <div class="space-y-2 pt-2">
                            <div class="skeleton-block h-3 w-full"></div>
                            <div class="skeleton-block h-3 w-3/4"></div>
                            <div class="skeleton-block h-3 w-5/6"></div>
                        </div>
                        <div class="skeleton-block h-10 w-full !rounded-lg mt-4"></div>
                    </div>
                @endfor
            </div>
            <div class="empty-state mt-4">
                <p class="text-sm">لم تُضف باقات أسعار بعد</p>
            </div>
        @endif
    </div>
</div>
