{{--
    @intent Bloco `cards-links`: grade de cards que levam a páginas/serviços.
    @description Cada card tem **um** link com propósito explícito (título do card — WCAG 2.4.4) e
                 ícone Lucide decorativo. Lista semântica; sem carrossel e 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) || ! is_string($item['url'] ?? null)) {
            continue;
        }

        $items[] = [
            'title' => $item['title'],
            // Caminho interno recebe o locale vigente; URL externa é externa (ADR-012).
            'href' => str_starts_with($item['url'], '/') ? localized_url($item['url']) : $item['url'],
            'summary' => is_string($item['summary'] ?? null) ? $item['summary'] : null,
            'icon' => is_string($item['icon'] ?? null) ? $item['icon'] : 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>

        <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
            @foreach ($items as $item)
                <li class="rounded-2xl border-2 border-civic-border bg-civic-surface p-5">
                    @if ($item['icon'] !== null)
                        <x-ui::icon :name="$item['icon']" class="mb-3 h-6 w-6 text-civic-link" />
                    @endif

                    <h3 class="text-lg font-bold text-civic-ink">
                        <a href="{{ $item['href'] }}" class="underline-offset-4 hover:text-civic-link hover:underline">
                            {{ $item['title'] }}
                        </a>
                    </h3>

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