@php
    $plans = collect($block->get('plans') ?: []);
    $currency = $block->get('currency_label') ?: 'ج.م';
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('title') || $block->get('subtitle'))
        <header class="text-center max-w-3xl mx-auto mb-12">
            @if ($block->get('title'))
                <h2 class="ec-heading text-3xl sm:text-4xl font-bold">{{ $block->get('title') }}</h2>
            @endif
            @if ($block->get('subtitle'))
                <p class="ec-muted mt-3 text-lg">{{ $block->get('subtitle') }}</p>
            @endif
        </header>
    @endif

    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-{{ min(max($plans->count(), 1), 4) }}">
        @foreach ($plans as $i => $plan)
            @php $featured = (bool) data_get($plan, 'featured'); @endphp
            <div class="ec-stagger-item relative flex flex-col gap-5 rounded-2xl p-8 {{ $featured ? 'ec-surface ring-2 shadow-lg lg:-translate-y-3' : 'border' }}">
                @if (data_get($plan, 'badge'))
                    <span class="absolute -top-3 start-8 ec-accent text-xs font-bold px-3 py-1 rounded-full border bg-white">{{ $block->get("plans.{$i}.badge") ?: data_get($plan, 'badge') }}</span>
                @endif

                <div>
                    <h3 class="ec-heading text-xl font-bold">{{ $block->get("plans.{$i}.name") ?: data_get($plan, 'name') }}</h3>
                    @if (data_get($plan, 'description'))
                        <p class="ec-muted text-sm mt-2">{{ $block->get("plans.{$i}.description") ?: data_get($plan, 'description') }}</p>
                    @endif
                </div>

                <p class="flex items-baseline gap-2">
                    <span class="ec-heading text-4xl font-extrabold" dir="ltr">{{ data_get($plan, 'price') }}</span>
                    <span class="ec-muted text-sm">{{ $currency }}{{ data_get($plan, 'period') ? ' / ' . (($block->get("plans.{$i}.period")) ?: data_get($plan, 'period')) : '' }}</span>
                </p>

                @if ($features = collect(data_get($plan, 'features') ?: []))
                    <ul class="flex flex-col gap-2.5 flex-1">
                        @foreach ($features as $f)
                            @php $inc = data_get($f, 'included', true); @endphp
                            <li class="flex items-start gap-2.5 {{ $inc ? '' : 'opacity-45 line-through' }}">
                                <x-website.icon :name="$inc ? 'check' : 'x-mark'" class="w-4 h-4 mt-1 shrink-0 ec-accent" />
                                <span class="text-sm">{{ data_get($f, 'text') }}</span>
                            </li>
                        @endforeach
                    </ul>
                @endif

                @php $planHref = safe_url(data_get($plan, 'button_url')); @endphp
                @if ($planHref)
                    <a href="{{ $planHref }}"
                       class="ec-btn ec-btn--{{ $featured ? 'primary' : 'outline' }} mt-auto text-center rounded-full px-6 py-3 font-semibold transition">
                        {{ $block->get("plans.{$i}.button_label") ?: data_get($plan, 'button_label') ?: __('اشترك الآن') }}
                    </a>
                @endif
            </div>
        @endforeach
    </div>
</div>
