@php
    $href = function ($item) {
        $v = data_get($item, 'action_value') ?: data_get($item, 'value');
        return match (data_get($item, 'action', 'none')) {
            'tel'      => 'tel:' . preg_replace('/\s+/', '', $v),
            'mailto'   => 'mailto:' . $v,
            'whatsapp' => 'https://wa.me/' . preg_replace('/\D/', '', $v),
            'maps'     => 'https://www.google.com/maps/search/?api=1&query=' . urlencode($v),
            'url'      => safe_url($v),
            default    => null,
        };
    };
    $card = match ($variant) {
        'bordered'    => 'border rounded-2xl p-6',
        'icon_circle' => 'flex-col items-center text-center gap-3 p-6',
        'inline'      => 'flex-row items-center gap-3',
        default       => 'ec-surface rounded-2xl p-6 shadow-sm',
    };
@endphp
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('title'))
        <h2 class="ec-heading text-2xl sm:text-3xl font-bold text-center mb-8">{{ $block->get('title') }}</h2>
    @endif
    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        @foreach ($items as $i => $item)
            @php $link = $href($item); @endphp
            <{{ $link ? 'a' : 'div' }} @if ($link) href="{{ $link }}" @if (in_array(data_get($item, 'action'), ['whatsapp', 'maps', 'url'])) target="_blank" rel="noopener noreferrer" @endif @endif
                class="ec-stagger-item flex {{ $card }} gap-4 {{ $link ? 'transition hover:-translate-y-0.5' : '' }}">
                @if (data_get($item, 'icon'))
                    <span class="ec-accent inline-flex items-center justify-center w-12 h-12 rounded-full border shrink-0">
                        <x-website.icon :name="data_get($item, 'icon')" class="w-5 h-5" />
                    </span>
                @endif
                <div class="min-w-0">
                    <p class="ec-muted text-sm">{{ $block->get("items.{$i}.label") ?: data_get($item, 'label') }}</p>
                    <p class="font-semibold break-words" @if (in_array(data_get($item, 'action'), ['tel', 'whatsapp'])) dir="ltr" @endif>
                        {{ $block->get("items.{$i}.value") ?: data_get($item, 'value') }}
                    </p>
                </div>
            </{{ $link ? 'a' : 'div' }}>
        @endforeach
    </div>
</div>
