@props([
    'slug',
    'sameCountryLocations' => [],
    'otherCountriesLocations' => [],
    'localizedRoute',
])

@if(count($sameCountryLocations) > 0 || count($otherCountriesLocations) > 0)
<section id="locations" class="svc-section svc-section--soft scroll-mt-24">
    <div class="site-container">
        <x-service-detail.section-intro
            :title="__('messages.service_location.also_serving')"
        />

        @if(count($sameCountryLocations) > 0)
        <div class="svc-locations__group svc-reveal">
            <ul class="svc-locations__list">
                @foreach($sameCountryLocations as $loc)
                <li>
                    <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $slug, 'industrySlug' => $loc['slug']]) }}"
                       class="svc-locations__link">
                        {{ $loc['name'] }}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
        @endif

        @if(count($otherCountriesLocations) > 0)
        <div class="svc-locations__group svc-reveal svc-reveal--delay-2">
            <p class="svc-locations__eyebrow">{{ __('messages.service_location.also_available_in') }}</p>
            <ul class="svc-locations__list">
                @foreach($otherCountriesLocations as $loc)
                <li>
                    <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $slug, 'industrySlug' => $loc['slug']]) }}"
                       class="svc-locations__link">
                        {{ $loc['name'] }}, {{ $loc['country'] }}
                    </a>
                </li>
                @endforeach
            </ul>
        </div>
        @endif
    </div>
</section>
@endif