@php
    $variant = $section['settings']['variant'] ?? 'search';
    $bgImage = $section['settings']['background_image'] ?? null;
    $data = $section['data'] ?? [];
@endphp
<section class="v-hero v-hero--{{ $variant }}"
         @if($bgImage) style="--v-hero-image: url('{{ asset('storage/' . ltrim($bgImage, '/')) }}')" @endif>
    <div class="v-hero__backdrop"></div>
    <div class="v-container v-hero__inner">
        @if(!empty($data['badge']))
            <span class="v-hero__badge"><x-voyage.icon name="sparkle" /> {{ $data['badge'] }}</span>
        @endif
        <h1 class="v-hero__title">{{ $data['title'] ?? $agency->name }}</h1>
        @if(!empty($data['subtitle']))
            <p class="v-hero__subtitle">{{ $data['subtitle'] }}</p>
        @endif

        @if($variant === 'search')
            @include('site.templates.voyage.partials.search-band', [
                'tourTypes' => $section['resolved']['tourTypes'] ?? collect(),
                'compact' => false,
                'popular' => collect($section['resolved']['tourTypes'] ?? [])->map(fn ($t) => [
                    'label' => $t->name,
                    'url' => $preview ? '#' : route('customer.agency.tours.list', ['agency' => $agency->slug, 'type' => $t->route_slug]),
                ])->all(),
            ])
        @elseif(!empty($data['button_text']))
            <a href="{{ $preview ? '#' : route('customer.agency.tours.index', $agency->slug) }}" class="v-btn v-btn--cta v-hero__cta">
                {{ $data['button_text'] }} <x-voyage.icon name="arrow-right" />
            </a>
        @endif
    </div>
</section>