@props([
    'service',
    'slug',
    'contactSlug' => null,
    'locationSuffix' => '',
    'localizedRoute',
])

@php
    $ctaPrimaryLabel = trim((string) ($service['ctaText'] ?? ''));
    if ($ctaPrimaryLabel === '') {
        $ctaPrimaryLabel = __('messages.service_detail.start_your_project', ['location_suffix' => $locationSuffix]);
    }
@endphp

<section id="get-started" class="svc-section svc-section--cta scroll-mt-24" aria-labelledby="service-cta-heading">
    <div class="site-container svc-cta">
        <div class="svc-cta__layout svc-reveal">
            <header class="svc-section__header svc-cta__header">
                <p class="site-eyebrow text-criazo-primary mb-5">{{ __('messages.service_detail.start_project_today_section_label') }}</p>
                <h2 id="service-cta-heading" class="svc-section__title">
                    {{ __('messages.service_detail.start_project_today', ['service' => $service['name'], 'location_suffix' => $locationSuffix]) }}
                </h2>
                <p class="svc-section__desc">
                    {{ __('messages.service_detail.start_project_desc', ['service' => strtolower($service['name']), 'count' => 189, 'location_suffix' => $locationSuffix]) }}
                </p>
            </header>

            <div class="svc-cta__aside">
                @if(! empty($service['pricing']) || ! empty($service['deliveryTime']))
                <ul class="svc-cta__facts">
                    @if(! empty($service['pricing']))
                    <li>{{ $service['pricing'] }}</li>
                    @endif
                    @if(! empty($service['deliveryTime']))
                    <li>{{ __('messages.service_detail.delivery') }}: {{ $service['deliveryTime'] }}</li>
                    @endif
                </ul>
                @endif

                <div class="svc-cta__actions">
                    <a href="{{ $localizedRoute('contact.index') }}?service={{ $contactSlug ?? $slug }}" class="svc-btn">
                        {{ $ctaPrimaryLabel }}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                    @if(! empty($service['faqs']))
                    <a href="#faq" class="svc-cta__secondary">
                        {{ __('messages.service_detail.questions_answered', ['service' => '', 'location_suffix' => '']) }}
                    </a>
                    @endif
                </div>

                <p class="svc-cta__note">{{ __('messages.service_detail.no_commitment') }}</p>
            </div>
        </div>
    </div>
</section>