@php
    $cols = ['1' => 'md:grid-cols-1', '2' => 'sm:grid-cols-2', '3' => 'sm:grid-cols-2 lg:grid-cols-3', '4' => 'sm:grid-cols-2 lg:grid-cols-4'][$block->get('columns', '3')] ?? 'sm:grid-cols-2 lg:grid-cols-3';
    $cardClass = match ($variant) {
        'bordered' => 'border rounded-2xl p-7',
        'glass'    => 'rounded-2xl p-7 backdrop-blur bg-white/10 border border-white/20',
        'minimal'  => 'p-2',
        'numbered' => 'rounded-2xl p-7 ec-surface relative',
        default    => 'ec-surface rounded-2xl p-7 shadow-sm',
    };
    $iconInline = $variant === 'icon_start';
@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-4 text-lg">{{ $block->get('subtitle') }}</p>
            @endif
        </header>
    @endif

    <div class="grid grid-cols-1 {{ $cols }} gap-6">
        @foreach ($items as $i => $item)
            @php $url = safe_url(data_get($item, 'url')); $tag = $url ? 'a' : 'div'; @endphp
            <{{ $tag }} @if ($url) href="{{ $url }}" @endif
                class="ec-stagger-item {{ $cardClass }} flex {{ $iconInline ? 'flex-row gap-4' : 'flex-col gap-4' }} {{ $url ? 'transition hover:-translate-y-1' : '' }}"
                @if (data_get($item, 'accent')) style="--card-accent:{{ data_get($item, 'accent') }}" @endif>

                @if ($variant === 'numbered')
                    <span class="ec-accent text-5xl font-extrabold opacity-25 leading-none">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
                @elseif (data_get($item, 'image'))
                    <img src="{{ data_get($item, 'image') }}" alt="" loading="lazy" class="w-full h-44 object-cover rounded-xl">
                @elseif (data_get($item, 'icon'))
                    <span class="ec-accent shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-xl">
                        <x-website.icon :name="data_get($item, 'icon')" class="w-6 h-6" />
                    </span>
                @endif

                <div class="flex flex-col gap-2 min-w-0">
                    @if (data_get($item, 'title'))
                        <h3 class="ec-heading text-xl font-semibold">{{ $block->get("items.{$i}.title") ?: data_get($item, 'title') }}</h3>
                    @endif
                    @if (data_get($item, 'body'))
                        <div class="ec-muted leading-relaxed">{!! clean_html($block->get("items.{$i}.body") ?: data_get($item, 'body')) !!}</div>
                    @endif
                </div>
            </{{ $tag }}>
        @endforeach
    </div>
</div>
