{{--
    @intent Bloco `hero` (catálogo fechado — emenda ADR-016): abertura da página com o **único**
            `<h1>` permitido na composição.
    @description Fragmento semântico puro (sem editor, sem JS). Os dados chegam sanitizados pelo
                 `Layout\Blocks\BlocksSchema`; a mídia é resolvida pelo chamador (id Media →
                 `<x-media::picture>`, ADR-026). Sem JS, a imagem e o CTA continuam funcionando.
--}}
@props([
    'props' => [],
    'media' => [],
    'blockId' => null,
])

@php
    $title = is_string($props['title'] ?? null) ? $props['title'] : null;
    $lead = is_string($props['lead'] ?? null) ? $props['lead'] : null;
    $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'];
    }
    $image = is_array($media['image'] ?? null) && is_string($media['image']['path'] ?? null) ? $media['image'] : null;
    $alt = is_string($props['image_alt'] ?? null) ? $props['image_alt'] : '';
    $headingId = is_string($blockId) && $blockId !== ''
        ? preg_replace('/[^a-z0-9-]/', '', strtolower($blockId)).'-title'
        : null;
@endphp

@if ($title !== null)
    <section
        @if ($headingId !== null) aria-labelledby="{{ $headingId }}" @else aria-label="{{ $title }}" @endif
        class="flex flex-col gap-4"
    >
        <div class="flex flex-col gap-3">
            <h1 id="{{ $headingId }}" class="text-3xl font-extrabold tracking-tight text-civic-ink sm:text-4xl">
                {{ $title }}
            </h1>

            @if ($lead !== null)
                <p class="max-w-2xl text-lg text-civic-outline">{{ $lead }}</p>
            @endif

            @if ($cta !== null)
                <p>
                    <a
                        href="{{ $ctaHref }}"
                        class="inline-flex items-center gap-2 rounded-xl font-bold text-civic-link underline-offset-4 hover:underline"
                    >
                        {{ $cta['label'] }}
                        <x-ui::icon name="arrow-right" class="h-4 w-4" />
                    </a>
                </p>
            @endif
        </div>

        @if ($image !== null)
            <x-media::picture
                :path="$image['path']"
                :sources="$image['sources'] ?? []"
                :alt="$alt"
                :width="$image['width'] ?? 0"
                :height="$image['height'] ?? 0"
                loading="eager"
                fetchpriority="high"
                figure-class="contents"
                img-class="w-full rounded-2xl object-cover"
            />
        @endif
    </section>
@endif