{{--
    @intent Fragmento do widget `destaques.banner` (P5.S4.2): uma pilha **estática** de peças do
            slot em que o widget foi colocado — sem carrossel, sem rotação automática e sem JS.
    @description O `<x-layout::slot>` repassa o nome do slot como `layoutRegion`; o feed resolve
                 apenas aquele slot (segunda barreira: `DestaqueSlot::tryFrom`). O feed é resolvido
                 aqui, no render, para usar o `Clock` e o locale **da requisição** (a fonte do
                 widget é registrada no boot). Cada peça é um bloco semântico com `<picture>`
                 (AVIF/WebP, `width`/`height`, `alt` obrigatório — ADR-026); o slot vazio não
                 renderiza seção alguma. Caminho interno passa por `localized_url` (ADR-012).
--}}
@use('Modules\Portal\Destaques\Logic\Enums\DestaqueSlot')
@use('Modules\Portal\Destaques\Logic\Support\DestaqueSlotFeed')

@php
    $region = is_string($layoutRegion ?? null) ? $layoutRegion : '';
    $slot = DestaqueSlot::tryFrom($region);
    $items = $slot instanceof DestaqueSlot
        ? app(DestaqueSlotFeed::class)->items($slot, app()->getLocale())
        : [];
    // Acima da dobra (antes do conteúdo/cabeçalho) carrega cedo; o resto é preguiçoso.
    $loading = $slot === DestaqueSlot::Before || $slot === DestaqueSlot::Header ? 'eager' : 'lazy';
@endphp

@if ($items !== [])
    <section class="destaques-banner flex flex-col gap-4" aria-label="{{ __('destaques::widget.title') }}">
        <ul class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3" role="list">
            @foreach ($items as $item)
                @php
                    $href = $item->link === null
                        ? null
                        : (str_starts_with($item->link, '/') ? localized_url($item->link) : $item->link);
                    $external = $item->link !== null && ! str_starts_with($item->link, '/');
                @endphp

                <li class="flex">
                    <article class="flex w-full flex-col gap-3 rounded-2xl border-2 border-civic-border bg-civic-surface p-5">
                        @if ($href !== null)
                            <a class="flex flex-col gap-3 underline-offset-4 hover:text-civic-link hover:underline" href="{{ $href }}" @if ($external) rel="external noopener" @endif>
                                <x-media::picture
                                    :path="$item->path"
                                    :sources="$item->sources"
                                    :alt="$item->alt"
                                    :width="$item->width"
                                    :height="$item->height"
                                    sizes="(min-width: 64rem) 32rem, 100vw"
                                    :loading="$loading"
                                    figure-class="contents"
                                    img-class="w-full rounded-xl object-cover"
                                />
                                <h2 class="text-lg font-bold text-civic-ink">{{ $item->title }}</h2>
                            </a>
                        @else
                            <x-media::picture
                                :path="$item->path"
                                :sources="$item->sources"
                                :alt="$item->alt"
                                :width="$item->width"
                                :height="$item->height"
                                sizes="(min-width: 64rem) 32rem, 100vw"
                                :loading="$loading"
                                figure-class="contents"
                                img-class="w-full rounded-xl object-cover"
                            />
                            <h2 class="text-lg font-bold text-civic-ink">{{ $item->title }}</h2>
                        @endif
                    </article>
                </li>
            @endforeach
        </ul>
    </section>
@endif