{{--
    @intent Bloco `video`: vídeo como **link externo** (D12), com thumbnail local.
    @description Sem `<iframe>`, sem autoplay e sem player de terceiro: a CSP do portal não abre
                 `frame-src` e a allowlist de assets é fechada (ADR-002). O aviso de nova aba é
                 textual (não só por ícone) e o fluxo funciona sem JS.
--}}
@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $title = is_string($props['title'] ?? null) ? $props['title'] : null;
    $label = is_string($props['label'] ?? null) ? $props['label'] : null;
    $url = is_string($props['url'] ?? null) ? $props['url'] : null;
    // Caminho interno recebe o locale vigente; URL externa é externa (ADR-012).
    $href = $url === null ? null : (str_starts_with($url, '/') ? localized_url($url) : $url);
    $description = is_string($props['description'] ?? null) ? $props['description'] : null;
    $thumbnail = is_array($media['thumbnail'] ?? null) && is_string($media['thumbnail']['path'] ?? null)
        ? $media['thumbnail']
        : null;
    $alt = is_string($props['thumbnail_alt'] ?? null) ? $props['thumbnail_alt'] : '';
    $headingId = is_string($blockId) && $blockId !== ''
        ? preg_replace('/[^a-z0-9-]/', '', strtolower($blockId)).'-title'
        : null;
@endphp

@if ($title !== null && $label !== null && $url !== null)
    <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>

        <figure class="flex flex-col gap-3">
            @if ($thumbnail !== null)
                <x-media::picture
                    :path="$thumbnail['path']"
                    :sources="$thumbnail['sources'] ?? []"
                    :alt="$alt"
                    :width="$thumbnail['width'] ?? 0"
                    :height="$thumbnail['height'] ?? 0"
                    figure-class="contents"
                    img-class="w-full rounded-2xl object-cover"
                />
            @endif

            <figcaption class="flex flex-col gap-2">
                <a
                    href="{{ $href }}"
                    target="_blank"
                    rel="noopener noreferrer"
                    class="inline-flex items-center gap-2 font-bold text-civic-link underline-offset-4 hover:underline"
                >
                    {{ $label }}
                    <x-ui::icon name="external-link" class="h-4 w-4" />
                    <span class="sr-only">({{ __('layout::shell.new_tab') }})</span>
                </a>

                @if ($description !== null)
                    <p class="text-civic-outline">{{ $description }}</p>
                @endif
            </figcaption>
        </figure>
    </section>
@endif