@php
    $talent = $home['talent'] ?? [];
    $imgPath = $talent['image'] ?? '/images/home/professional-support.png';
    $imgSrc = str_starts_with($imgPath, 'http') ? $imgPath : asset(ltrim($imgPath, '/'));
@endphp
<section class="home-section bg-white">
    <div class="container-page">
        <div class="home-split home-split--equal home-split--center">
            <div class="home-split-panel">
                @include('pages.home._section-head', [
                    'kicker' => $talent['kicker'] ?? '',
                    'title' => $talent['title'] ?? '',
                    'lead' => $talent['lead'] ?? '',
                ])

                <img
                    src="{{ $imgSrc }}"
                    alt="{{ $talent['image_alt'] ?? '' }}"
                    width="720"
                    height="480"
                    class="home-editorial-photo mt-8"
                    loading="lazy"
                    decoding="async"
                >

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

            <ul class="home-list home-list--panel">
                @forelse($hireRoles 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">{{ 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>