@php
    $href = function ($item) {
        $v = website_text(data_get($item, 'action_value')) ?: website_text(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,
        };
    };
    // A stacked list reads as contact details rather than as a set of cards:
    // one row per channel, aligned to the leading edge.
    $stacked = $variant === 'stacked';

    $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',
        'stacked'     => 'flex-row items-center gap-4',
        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="{{ $stacked ? 'flex flex-col gap-6' : '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 shrink-0
                                 {{ $stacked ? 'rounded-xl border-0' : 'rounded-full border' }}"
                          @if ($stacked) style="background: color-mix(in srgb, var(--site-accent) 15%, transparent)" @endif>
                        <x-website.icon :name="data_get($item, 'icon')" class="w-5 h-5" />
                    </span>
                @endif
                <div class="min-w-0">
                    <p class="ec-muted {{ $stacked ? 'text-xs font-bold uppercase tracking-widest' : 'text-sm' }}">{{ $block->get("items.{$i}.label") ?: website_text(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") ?: website_text(data_get($item, 'value')) }}
                    </p>
                </div>
            </{{ $link ? 'a' : 'div' }}>
        @endforeach
    </div>
</div>
