@props([
    'relatedServices',
    'localizedRoute',
    'currentSlug' => null,
])

@php
    use App\Helpers\ServiceContentKeys;

    $items = collect($relatedServices)
        ->reject(fn ($service) => $currentSlug && ServiceContentKeys::isSameService($currentSlug, (string) ($service['slug'] ?? '')))
        ->values();
@endphp

@if($items->count() > 0)
<section id="related" class="svc-section svc-section--white scroll-mt-24">
    <div class="site-container">
        <header class="svc-related__intro svc-section__header svc-reveal">
            <p class="site-eyebrow text-criazo-primary mb-5">{{ __('messages.service_detail.related_services_section_label') }}</p>
            <h2 id="svc-related-heading" class="svc-section__title">{{ __('messages.service_detail.related_services') }}</h2>
            <p class="svc-section__desc">{{ __('messages.service_detail.related_services_desc') }}</p>
        </header>

        <div class="svc-related__grid">
            @foreach($items as $i => $relatedService)
            @php
                $relatedSlug = ServiceContentKeys::canonicalPublicSlug((string) ($relatedService['slug'] ?? ''));
            @endphp
            <a href="{{ $localizedRoute('services.show', ['slug' => $relatedSlug]) }}"
               class="svc-related__card svc-reveal {{ $i > 0 ? 'svc-reveal--delay-' . min($i, 3) : '' }}">
                <div class="svc-related__media">
                    @if(! empty($relatedService['listingImage']))
                    <img src="{{ asset($relatedService['listingImage']) }}"
                         alt="{{ $relatedService['name'] }}"
                         loading="lazy"
                         decoding="async">
                    @endif
                </div>
                <h3 class="svc-related__name">{{ $relatedService['name'] }}</h3>
                <p class="svc-related__desc">{{ $relatedService['listingDescription'] }}</p>
            </a>
            @endforeach
        </div>

        <a href="{{ $localizedRoute('services.index') }}" class="svc-link svc-reveal md:hidden mt-10">
            {{ __('messages.service_detail.view_all') }}
            <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="M9 5l7 7-7 7"/></svg>
        </a>
    </div>
</section>
@endif