{{--
    @intent Bloco `highlights`: destaques editoriais (imagem + título + link) em grade.
    @description Lista semântica estática: **sem rotação automática** e sem carrossel (ADR-025); a
                 mídia usa o fluxo único `<x-media::picture>` com `alt` obrigatório (ADR-026).
--}}
@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 $index => $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,
            'alt' => is_string($item['image_alt'] ?? null) ? $item['image_alt'] : '',
            'image' => is_array($media['items.'.$index.'.image'] ?? null)
                && is_string($media['items.'.$index.'.image']['path'] ?? null)
                    ? $media['items.'.$index.'.image']
                    : 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="flex flex-col gap-3 rounded-2xl border-2 border-civic-border bg-civic-surface p-5">
                    @if ($item['image'] !== null)
                        <x-media::picture
                            :path="$item['image']['path']"
                            :sources="$item['image']['sources'] ?? []"
                            :alt="$item['alt']"
                            :width="$item['image']['width'] ?? 0"
                            :height="$item['image']['height'] ?? 0"
                            figure-class="contents"
                            img-class="w-full rounded-xl object-cover"
                        />
                    @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="text-civic-outline">{{ $item['summary'] }}</p>
                    @endif
                </li>
            @endforeach
        </ul>
    </section>
@endif