{{--
    @intent Bloco `cards-numbered`: cards numerados (dados/serviços em grade).
    @description A numeração vem do **`<ol>`** (ordem do documento), nunca de posição absoluta ou
                 de campo do editor: reordenar a lista renumera sem JS.
--}}
@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $title = is_string($props['title'] ?? null) ? $props['title'] : null;
    $items = [];

    foreach (is_array($props['items'] ?? null) ? $props['items'] : [] as $item) {
        if (! is_array($item) || ! is_string($item['title'] ?? null)) {
            continue;
        }

        $items[] = [
            'title' => $item['title'],
            'summary' => is_string($item['summary'] ?? null) ? $item['summary'] : null,
        ];
    }

    $headingId = is_string($blockId) && $blockId !== ''
        ? preg_replace('/[^a-z0-9-]/', '', strtolower($blockId)).'-title'
        : null;
@endphp

@if ($title !== null && $items !== [])
    <section
        @if ($headingId !== null) aria-labelledby="{{ $headingId }}" @else aria-label="{{ $title }}" @endif
        class="flex flex-col gap-4"
    >
        <h2 id="{{ $headingId }}" class="text-2xl font-bold tracking-tight text-civic-ink">{{ $title }}</h2>

        <ol class="grid list-decimal grid-cols-1 gap-4 ps-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($items as $item)
                <li class="rounded-2xl border-2 border-civic-border bg-civic-surface p-5 ps-3">
                    <h3 class="text-lg font-bold text-civic-ink">{{ $item['title'] }}</h3>

                    @if ($item['summary'] !== null)
                        <p class="mt-2 text-civic-outline">{{ $item['summary'] }}</p>
                    @endif
                </li>
            @endforeach
        </ol>
    </section>
@endif