{{--
    @intent Bloco `banner`: peça editorial única (imagem + CTA), sem rotação automática.
    @description Sem `position`, sem carrossel e sem autoplay (ADR-025). A imagem usa o fluxo único
                 `<x-media::picture>` com `alt` obrigatório; o CTA tem propósito textual explícito
                 e, quando há link, o texto do botão complementa o nome acessível da imagem.
--}}
@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $image = is_array($media['image'] ?? null) && is_string($media['image']['path'] ?? null) ? $media['image'] : null;
    $alt = is_string($props['alt'] ?? null) ? $props['alt'] : '';
    $cta = is_array($props['cta'] ?? null) && is_string($props['cta']['label'] ?? null) && is_string($props['cta']['url'] ?? null)
        ? $props['cta']
        : null;
    // Caminho interno recebe o locale vigente; URL externa é externa (ADR-012).
    $ctaHref = null;

    if ($cta !== null) {
        $ctaHref = str_starts_with($cta['url'], '/') ? localized_url($cta['url']) : $cta['url'];
    }
@endphp

@if ($image !== null && $alt !== '')
    <figure class="overflow-hidden rounded-2xl border-2 border-civic-border bg-civic-surface">
        @if ($cta !== null)
            <a href="{{ $ctaHref }}" class="block">
                <x-media::picture
                    :path="$image['path']"
                    :sources="$image['sources'] ?? []"
                    :alt="$alt"
                    :width="$image['width'] ?? 0"
                    :height="$image['height'] ?? 0"
                    figure-class="contents"
                    img-class="w-full object-cover"
                />
                <span class="sr-only">{{ $cta['label'] }}</span>
            </a>
        @else
            <x-media::picture
                :path="$image['path']"
                :sources="$image['sources'] ?? []"
                :alt="$alt"
                :width="$image['width'] ?? 0"
                :height="$image['height'] ?? 0"
                figure-class="contents"
                img-class="w-full object-cover"
            />
        @endif
    </figure>
@endif