{{--
    Hero (PRD §9.1). Owns the page's single H1 when it is the first block. At most three CTAs with distinct
    weights; without a photo the text column simply takes the full width (graceful layout).
--}}
@inject('ctas', 'App\Domain\Site\Support\CtaResolver')
@php
    $photo = $vm->resolved('photo');
    $buttons = $ctas->resolveAll(array_slice($vm->get('ctas', []), 0, 3), 'hero');
    $tag = ($isFirst ?? false) ? 'h1' : 'h2';
@endphp
<x-section :vm="$vm" class="pt-10 lg:pt-16">
    <div @class(['container-site grid items-center gap-10', 'lg:grid-cols-12' => $photo])>
        <div @class(['lg:col-span-7' => $photo, 'max-w-4xl' => ! $photo])>
            @if ($vm->get('eyebrow'))
                <p class="mb-4 text-eyebrow font-semibold uppercase text-muted">{{ $vm->get('eyebrow') }}</p>
            @endif
            <{{ $tag }} class="text-h1">{{ $vm->get('name') }}</{{ $tag }}>
            @if ($vm->get('title'))
                <p class="mt-3 font-heading text-h3 text-muted">{{ $vm->get('title') }}</p>
            @endif
            @if ($vm->get('value_proposition'))
                <p class="mt-6 max-w-[var(--container-prose)] text-lead text-ink">{{ $vm->get('value_proposition') }}</p>
            @endif
            @if ($buttons !== [])
                <div class="mt-8 flex flex-wrap items-center gap-3">
                    @foreach ($buttons as $cta)
                        <x-cta-link :cta="$cta" location="hero" />
                    @endforeach
                </div>
            @endif
        </div>
        @if ($photo)
            <div class="lg:col-span-5">
                <x-media.image :media="$photo" :alt="$vm->get('photo_alt')" conversion="hero" :priority="$isFirst ?? false"
                               sizes="(min-width: 1024px) 40vw, 100vw" class="aspect-[4/5] w-full rounded-[var(--radius-card)] object-cover" />
            </div>
        @endif
    </div>
</x-section>