@props([
    'title' => 'Ready to build your remote team?',
    'subtitle' => 'Book a free consultation and get matched with vetted talent in days.',
    'ctaText' => null,
    'ctaUrl' => null,
    'image' => null,
    'imageAlt' => 'Book a consultation with Apex Admins',
])

@php
    $ps = $publicSettings ?? $themeSettings ?? [];
    $url = $ctaUrl ?? $ps['cta.primary_url'] ?? '/book';
    $text = $ctaText ?? $ps['cta.primary_text'] ?? 'Book Consultation';
    $media = $image ?? asset('images/home/team-collaboration.jpg');
@endphp

<section class="home-section bg-white">
    <div class="container-page">
        <div class="home-cta-panel">
            <div class="home-cta-panel__content text-center lg:text-left">
                <p class="home-kicker">Get started</p>
                <h2 class="home-section-title mt-3">{{ $title }}</h2>
                <p class="home-lead !max-w-none mt-4">{{ $subtitle }}</p>
                <x-ui.button :href="$url" size="lg" class="home-btn mt-8" data-track-cta="page-cta-band">{{ $text }}</x-ui.button>
            </div>
            <div class="home-cta-panel__media">
                <img
                    src="{{ $media }}"
                    alt="{{ $imageAlt }}"
                    width="720"
                    height="480"
                    loading="lazy"
                    decoding="async"
                >
            </div>
        </div>
    </div>
</section>