@php
    $roles = $ctx->hireRoles((int) ($data['limit'] ?? 6));
    $buttonText = filled($data['button_text'] ?? null) ? $data['button_text'] : $ctx->bookText();
@endphp
<section class="{{ $cls }}" {{ $attrs }}>
    <div class="container-page">
        <div class="home-split home-split--equal home-split--center">
            <div class="home-split-panel">
                @include('builder.partials.head', ['centered' => false])

                @if(filled($data['image'] ?? null))
                    <img src="{{ $url($data['image']) }}" alt="{{ $data['image_alt'] ?? '' }}" width="720" height="480" class="home-editorial-photo mt-8" loading="lazy" decoding="async">
                @endif

                <x-ui.button :href="$ctx->bookUrl()" class="home-btn mt-8" data-track-cta="talent-section">{{ $buttonText }}</x-ui.button>
            </div>

            <ul class="home-list home-list--panel">
                @forelse($roles as $role)
                    <li class="home-list__item">
                        <a href="{{ route('hire.show', $role->slug) }}" class="home-list__link">
                            <div class="min-w-0">
                                <h3 class="home-list__title">{{ $role->title }}</h3>
                                <p class="home-list__text">{{ \Illuminate\Support\Str::limit($role->description, 140) }}</p>
                            </div>
                            <span class="home-list__meta">Available</span>
                        </a>
                    </li>
                @empty
                    @foreach(['Virtual Assistant', 'Social Media Manager', 'Bookkeeper', 'Customer Support'] as $title)
                        <li class="home-list__item"><div class="home-list__static">{{ $title }}</div></li>
                    @endforeach
                @endforelse
            </ul>
        </div>
    </div>
</section>