@extends('layouts.app')

@section('robots', 'noindex, follow')

@php
    use App\Helpers\SeoHelper;
    $locale = app()->getLocale();
    $isLocationPage = isset($withLocation) && $withLocation;
    $locationSuffix = $locationSuffix ?? '';

    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
@endphp

@section('title', $isLocationPage ? ($pageTitle . __('messages.meta.title_suffix')) : __('messages.service_detail.page_title', ['name' => $service['name'], 'location_suffix' => '']))
@section('meta_description', $isLocationPage ? $metaDescription : $service['heroDescription'])
@section('og_image', asset($service['listingImage'] ?? 'images/og-services.jpg'))

@push('head')
<meta name="keywords" content="{{ $service['name'] }}, {{ __('messages.service_detail.meta_keywords_extra') }}, {{ implode(', ', array_slice($service['features'], 0, 5)) }}{{ $isLocationPage && isset($locationData['keywords']) ? ', ' . implode(', ', $locationData['keywords']) : '' }}">
@if($isLocationPage && isset($locationData))
{{-- Geo meta is output by layout from controller $geo_region, $geo_placename, $geo_position --}}
@endif

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "{{ $service['name'] }}",
  "description": "{{ $isLocationPage ? $metaDescription : $service['heroDescription'] }}",
  "provider": {
    "@type": "Organization",
    "name": "{{ __('messages.brand_name') }}",
    "url": "{{ url('/') }}"
  },
  "areaServed": {!! $isLocationPage && isset($locationDisplayName) ? json_encode($locationDisplayName) : json_encode(SeoHelper::getAreaServedForSchema()) !!},
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}"
}
</script>
@if($isLocationPage && isset($locationData))
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "{{ __('messages.nav.services') }}", "item": "{{ $localizedRoute('services.index') }}" },
    { "@type": "ListItem", "position": 2, "name": "{{ $service['name'] }}", "item": "{{ $localizedRoute('services.show', ['slug' => $slug]) }}" },
    { "@type": "ListItem", "position": 3, "name": "{{ $locationDisplayName ?? $locationData['name'] }}", "item": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}" }
  ]
}
</script>
@endif
@endpush

@section('content')
<article class="min-h-screen bg-white" itemscope itemtype="https://schema.org/Service">
    
    <!-- Hero Section - Value-First, Conversion Focused -->
    <section class="relative overflow-hidden bg-white">
        <div class="max-w-[1300px] mx-auto px-6 pt-8 pb-16 lg:pb-20">
            
            <!-- Breadcrumb -->
            <div class="flex flex-wrap items-center gap-3 mb-8">
                <a href="{{ $localizedRoute('services.index') }}" class="text-sm text-neutral-500 hover:text-criazo-primary smooth-transition">{{ __('messages.nav.services') }}</a>
                <span class="text-neutral-300">/</span>
                @if($isLocationPage && isset($locationData))
                <a href="{{ $localizedRoute('services.show', ['slug' => $slug]) }}" class="text-sm text-neutral-500 hover:text-criazo-primary smooth-transition">{{ $service['name'] }}</a>
                <span class="text-neutral-300">/</span>
                <span class="text-sm font-medium text-criazo-primary">{{ $locationDisplayName ?? $locationData['name'] }}</span>
                @else
                <span class="text-sm font-medium text-criazo-primary">{{ $service['categoryLabel'] }}</span>
                @endif
            </div>
            
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                <!-- Left: Compelling Copy -->
                <div class="space-y-6">
                    @if($isLocationPage && isset($locationData))
                    <p class="text-sm font-medium text-criazo-primary">{{ __('messages.service_location.in') }} {{ $locationDisplayName ?? $locationData['name'] }}, {{ $locationData['country_name'] ?? '' }}</p>
                    @endif
                    <h1 class="page-hero__headline text-neutral-900" itemprop="name">
                        {{ $service['heroTitle'] }}
                    </h1>
                    
                    @if(!empty($service['heroDescription']))
                    <p class="text-xl text-neutral-600 leading-[1.43] tracking-body" itemprop="description">
                        {{ $service['heroDescription'] }}
                    </p>
                    @endif
                    
                    @if(!empty($service['heroSubtitle']))
                    <p class="text-lg text-neutral-600 leading-[1.43] tracking-body">
                        {{ $service['heroSubtitle'] }}
                    </p>
                    @endif
                    
                    <!-- Value Props - What they GET -->
                    <div class="flex flex-wrap items-center gap-2 py-2">
                        <span class="text-neutral-600 text-sm">{{ __('messages.service_detail.results_guaranteed') }}</span>
                        <span class="text-neutral-400">·</span>
                        <span class="text-neutral-600 text-sm">{{ $service['deliveryTime'] }} {{ __('messages.service_detail.delivery') }}</span>
                        <span class="text-neutral-400">·</span>
                        <span class="text-neutral-600 text-sm">{{ __('messages.service_detail.dedicated_support') }}</span>
                    </div>
                    
                    <!-- CTAs -->
                    <div class="flex flex-wrap gap-4 pt-4">
                        <a href="{{ $localizedRoute('contact.index') }}" 
                           class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-lg hover:shadow-xl">
                            {{ __('messages.service_detail.start_your_project', ['location_suffix' => $locationSuffix]) }}
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                        </a>
                        <a href="{{ $localizedRoute('portfolio.index') }}?service={{ $slug }}" 
                           class="inline-flex items-center px-6 py-4 bg-white border-2 border-neutral-200 text-neutral-900 rounded-full font-semibold hover:border-criazo-primary hover:text-criazo-primary smooth-transition">
                            {{ __('messages.service_detail.see_our_work') }}
                            <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                        </a>
                    </div>
                    
                    <!-- Social Proof Micro -->
                    <div class="flex items-center gap-4 pt-4">
                        <div class="flex -space-x-2">
                            <div class="w-8 h-8 rounded-full bg-criazo-primary flex items-center justify-center text-white text-xs font-semibold ring-2 ring-white">{{ __('messages.service_common.avatar_initial_a') }}</div>
                            <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-semibold ring-2 ring-white">{{ __('messages.service_common.avatar_initial_m') }}</div>
                            <div class="w-8 h-8 rounded-full bg-orange-500 flex items-center justify-center text-white text-xs font-semibold ring-2 ring-white">{{ __('messages.service_common.avatar_initial_r') }}</div>
                            <div class="w-8 h-8 rounded-full bg-neutral-800 flex items-center justify-center text-white text-xs font-semibold ring-2 ring-white">{{ __('messages.service_common.avatar_initial_more') }}</div>
                        </div>
                        <p class="text-sm text-neutral-600">
                            {{ __('messages.service_detail.businesses_trust', ['count' => 189]) }}
                        </p>
                    </div>
                </div>
                
                <!-- Right: Image -->
                <div class="relative">
                    <div class="relative rounded-2xl overflow-hidden shadow-2xl aspect-[4/3] bg-neutral-100">
                        <img src="{{ asset($service['listingImage']) }}" 
                             alt="{{ __('messages.service_detail.image_alt_services', ['name' => $service['name']]) }}" 
                             class="w-full h-full object-cover"
                             itemprop="image" 
                             loading="eager">
                    </div>
                    
                </div>
            </div>
        </div>
    </section>
    
    <!-- Problem/Solution Section - Create Desire -->
    <section class="py-20 bg-neutral-50">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="grid lg:grid-cols-2 gap-16 items-center">
                <!-- The Problem -->
                <div>
                    <p class="text-sm font-semibold text-red-500 tracking-wide mb-4">{{ __('messages.service_detail.without_professional', ['service' => $service['name']]) }}</p>
                    <h2 class="section-intro__title mb-6">
                        {{ __('messages.service_detail.businesses_without', ['service' => strtolower($service['name'])]) }}
                    </h2>
                    <div class="space-y-4">
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            <p class="text-neutral-600">{{ __('messages.service_detail.lost_visibility') }}</p>
                        </div>
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            <p class="text-neutral-600">{{ __('messages.service_detail.diy_solutions') }}</p>
                        </div>
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-red-400 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                            <p class="text-neutral-600">{{ __('messages.service_detail.outdated_strategies') }}</p>
                        </div>
                    </div>
                </div>
                
                <!-- The Solution -->
                <div class="bg-white rounded-2xl p-8 shadow-lg">
                    <p class="text-sm font-semibold text-green-500 tracking-wide mb-4">{{ __('messages.service_detail.with_criazo', ['service' => $service['name']]) }}</p>
                    <h3 class="type-heading-sm mb-6">
                        {{ __('messages.service_detail.professional_services', ['service' => strtolower($service['name'])]) }}
                    </h3>
                    <div class="space-y-4">
                        @foreach(array_slice($service['outcomes'], 0, 4) as $outcome)
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-green-500 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <p class="text-neutral-700">{{ $outcome }}</p>
                        </div>
                        @endforeach
                    </div>
                    <a href="{{ $localizedRoute('contact.index') }}" class="inline-flex items-center mt-6 text-criazo-primary font-semibold hover:opacity-70 smooth-transition">
                        {{ __('messages.service_detail.get_free_consultation', ['service' => strtolower($service['name']), 'location_suffix' => $locationSuffix]) }}
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </section>
    
    <!-- What You Get - Clear Value -->
    <section class="py-20 bg-white">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="section-intro__title mb-4">{{ __('messages.service_detail.complete_services', ['service' => $service['name'], 'location_suffix' => $locationSuffix]) }}</h2>
                <p class="text-xl text-neutral-600">{{ __('messages.service_detail.complete_services_desc', ['service' => strtolower($service['name']), 'location_suffix' => $locationSuffix]) }}</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
                @foreach($service['features'] as $feature)
                <div class="flex items-center gap-4 p-5 bg-neutral-50 rounded-xl">
                    <svg class="w-5 h-5 text-criazo-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                    </svg>
                    <span class="text-neutral-800">{{ $feature }}</span>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    
    <!-- Why It Works - Benefits as Transformation -->
    <section class="py-20 bg-neutral-50">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="text-center max-w-3xl mx-auto mb-16">
                <h2 class="text-3xl md:text-4xl font-semibold uppercase text-neutral-900 mb-4">{{ __('messages.service_detail.why_choose', ['service' => $service['name'], 'location_suffix' => $locationSuffix]) }}</h2>
                <p class="text-xl text-neutral-600">{{ __('messages.service_detail.why_choose_desc', ['service' => strtolower($service['name'])]) }}</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                @foreach($service['benefits'] as $index => $benefit)
                <div class="bg-white rounded-xl p-6 hover:shadow-lg smooth-transition flex flex-col">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-10 h-10 bg-criazo-primary/10 rounded-lg flex items-center justify-center">
                            <svg class="w-5 h-5 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                        </div>
                        <p class="text-neutral-800 leading-relaxed pt-1 flex-1">{{ $benefit }}</p>
                    </div>
                    <div class="mt-5 relative h-28 md:h-32 shrink-0 rounded-2xl bg-[#f6f7f7] border border-neutral-100 overflow-hidden" aria-hidden="true">
                        <x-service-outcome-visual :body="$benefit" />
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    
    <!-- For Whom - Qualification Grid -->
    <section class="py-16 lg:py-20 bg-white">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="mb-10 md:mb-12 max-w-4xl">
                <p class="text-xs font-semibold uppercase tracking-label text-criazo-primary mb-4">{{ __('messages.service_detail.for_whom') }}</p>
                <h2 class="section-intro__title leading-[1.08] tracking-heading mb-4">
                    {{ __('messages.service_detail.right_for_you', ['service' => $service['name']]) }}
                </h2>
                <p class="text-base md:text-lg text-neutral-600 leading-[1.43] tracking-body max-w-3xl">{{ $service['heroDescription'] ?? '' }}</p>
            </div>

            @php
                $useCaseIcons = [
                    0 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"/>',
                    1 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
                    2 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>',
                    3 => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>',
                ];
            @endphp

            @php
                $v1ForWhomSlice = array_values(array_slice($service['features'], 0, 4));
            @endphp

            <div class="grid md:grid-cols-2 xl:grid-cols-4 gap-5 lg:gap-6">
                @foreach($v1ForWhomSlice as $fi => $feature)
                @php
                    $useCaseContext = $service['benefits'][$fi] ?? ($service['outcomes'][$fi] ?? $service['heroSubtitle'] ?? $service['name']);
                @endphp
                <article class="group relative min-h-[290px] rounded-2xl border-0 bg-white p-6 md:p-7 shadow-[0_8px_30px_-12px_rgba(15,23,42,0.12)] hover:-translate-y-0.5 hover:shadow-[0_20px_50px_-20px_rgba(15,23,42,0.18)] smooth-transition flex flex-col">
                    <div class="flex items-start gap-3 mb-6">
                        <span class="inline-flex items-center justify-center w-11 h-11 rounded-xl bg-criazo-primary/10 text-criazo-primary shrink-0">
                            <svg class="w-[22px] h-[22px]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                {!! $useCaseIcons[$fi % count($useCaseIcons)] !!}
                            </svg>
                        </span>
                    </div>
                    <h3 class="text-lg md:text-xl font-semibold text-neutral-950 leading-tight mb-3">{{ $feature }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body text-sm md:text-[15px] flex-1">{{ $useCaseContext }}</p>
                    <div class="mt-6 relative h-36 md:h-40 shrink-0 rounded-2xl bg-[#f6f7f7] border border-neutral-100 overflow-hidden" aria-hidden="true">
                        <x-service-outcome-visual :title="$feature" :body="$useCaseContext" />
                    </div>
                </article>
                @endforeach
            </div>

            @if(count($service['features']) > 4)
            @php
                $v1ForWhomMore = array_values(array_slice($service['features'], 4));
            @endphp
            <div class="mt-8 md:mt-10 grid sm:grid-cols-2 xl:grid-cols-4 gap-5 lg:gap-6">
                @foreach($v1ForWhomMore as $fj => $feature)
                @php
                    $idx = $fj + 4;
                    $useCaseContext = $service['benefits'][$idx] ?? ($service['outcomes'][$idx] ?? $service['heroSubtitle'] ?? $service['name']);
                @endphp
                <article class="group relative min-h-[220px] rounded-2xl border-0 bg-white p-6 md:p-7 shadow-[0_8px_30px_-12px_rgba(15,23,42,0.12)] hover:-translate-y-0.5 hover:shadow-[0_20px_50px_-20px_rgba(15,23,42,0.18)] smooth-transition flex flex-col">
                    <div class="flex items-start gap-3 mb-6">
                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-criazo-primary/10 text-criazo-primary shrink-0">
                            <svg class="w-4.5 h-4.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                {!! $useCaseIcons[$idx % count($useCaseIcons)] !!}
                            </svg>
                        </span>
                    </div>
                    <h3 class="text-lg md:text-xl font-semibold text-neutral-950 leading-tight mb-3">{{ $feature }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body text-sm md:text-[15px] flex-1">{{ $useCaseContext }}</p>
                    <div class="mt-6 relative h-36 md:h-40 shrink-0 rounded-2xl bg-[#f6f7f7] border border-neutral-100 overflow-hidden" aria-hidden="true">
                        <x-service-outcome-visual :title="$feature" :body="$useCaseContext" />
                    </div>
                </article>
                @endforeach
            </div>
            @endif
        </div>
    </section>

    <!-- Process - Show Professionalism -->
    @if(!empty($service['process']))
    <section class="py-16 lg:py-20 bg-white">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="text-center max-w-3xl mx-auto mb-12 md:mb-16">
                <p class="text-xs font-semibold uppercase tracking-label text-criazo-primary mb-4">{{ __('messages.service_detail.our_process_section_label') }}</p>
                <h2 class="section-intro__title mb-4">{{ __('messages.service_detail.our_process', ['service' => $service['name']]) }}</h2>
                <p class="text-xl text-neutral-600">{{ __('messages.service_detail.our_process_desc') }}</p>
            </div>
            
            @php
                $processHeaderIcons = [
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>',
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>',
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>',
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>',
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>',
                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>',
                ];
            @endphp
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-7">
                @foreach($service['process'] as $i => $step)
                <article class="group rounded-2xl border border-neutral-200/80 bg-white p-7 md:p-8 shadow-[0_2px_10px_rgba(0,0,0,0.03)] hover:shadow-[0_18px_45px_rgba(0,0,0,0.08)] smooth-transition flex flex-col">
                    <div class="flex items-start justify-end mb-6">
                        <span class="w-12 h-12 rounded-2xl bg-criazo-primary/10 flex items-center justify-center flex-shrink-0">
                            <svg class="w-6 h-6 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                {!! $processHeaderIcons[$i % count($processHeaderIcons)] !!}
                            </svg>
                        </span>
                    </div>
                    <h3 class="type-card-title mb-3">{{ $step['title'] }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body flex-1">{{ $step['description'] }}</p>
                    <div class="mt-6 relative h-36 md:h-40 shrink-0 rounded-2xl bg-[#f6f7f7] border border-neutral-100 overflow-hidden" aria-hidden="true">
                        <x-service-outcome-visual :title="$step['title']" :body="$step['description']" />
                    </div>
                </article>
                @endforeach
            </div>
        </div>
    </section>
    @endif
    
    <!-- Success Stories - Proof -->
    @if(!empty($miniSuccessStories))
    <section class="pt-5 pb-14 md:py-14 bg-neutral-50">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-3 mb-2 md:mb-6">
                <div>
                    <h2 class="section-intro__title mb-2">{{ __('messages.service_detail.case_studies', ['service' => $service['name']]) }}</h2>
                    <p class="text-xl text-neutral-600">{{ __('messages.service_detail.case_studies_desc', ['service' => strtolower($service['name'])]) }}</p>
                </div>
                <a href="{{ $localizedRoute('portfolio.index') }}" 
                   class="inline-flex items-center gap-2 text-criazo-primary font-semibold hover:opacity-70 smooth-transition">
                    {{ __('messages.service_detail.view_all_case_studies') }}
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                @foreach($miniSuccessStories as $story)
                <div class="bg-white rounded-2xl p-8 hover:shadow-xl smooth-transition">
                    <div class="flex items-start justify-between gap-4 mb-4">
                        <div>
                            <h3 class="type-card-title">{{ $story['client'] }}</h3>
                            <p class="text-sm text-neutral-500">{{ $story['industry'] }}</p>
                        </div>
                        <div class="text-right">
                            <p class="text-3xl font-semibold text-green-500">{{ $story['result'] }}</p>
                            <p class="text-xs text-neutral-500">{{ $story['timeframe'] }}</p>
                        </div>
                    </div>
                    <p class="text-neutral-600">{{ $story['description'] }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
    
    <!-- Tools - Credibility with Logos -->
    @if(!empty($extendedFeatures['tools']))
    <section class="py-20 bg-white">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="text-center max-w-3xl mx-auto mb-12">
                <h2 class="section-intro__title mb-4">{{ __('messages.service_detail.tools_technology', ['service' => $service['name']]) }}</h2>
                <p class="text-neutral-600">{{ __('messages.service_detail.tools_technology_desc', ['service' => strtolower($service['name'])]) }}</p>
            </div>
            
            <!-- Tool Logos Grid -->
            <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
                @php
                $toolLogos = [
                    'Google Analytics' => 'https://www.vectorlogo.zone/logos/google_analytics/google_analytics-icon.svg',
                    'Google Ads' => 'https://www.vectorlogo.zone/logos/google_ads/google_ads-icon.svg',
                    'WordPress' => 'https://www.vectorlogo.zone/logos/wordpress/wordpress-icon.svg',
                    'WooCommerce' => 'https://www.vectorlogo.zone/logos/woocommerce/woocommerce-icon.svg',
                    'Shopify' => 'https://www.vectorlogo.zone/logos/shopify/shopify-icon.svg',
                    'Meta Ads' => 'https://www.vectorlogo.zone/logos/facebook/facebook-icon.svg',
                    'Facebook' => 'https://www.vectorlogo.zone/logos/facebook/facebook-icon.svg',
                    'Instagram' => 'https://www.vectorlogo.zone/logos/instagram/instagram-icon.svg',
                    'LinkedIn' => 'https://www.vectorlogo.zone/logos/linkedin/linkedin-icon.svg',
                    'Mailchimp' => 'https://www.vectorlogo.zone/logos/mailchimp/mailchimp-icon.svg',
                    'HubSpot' => 'https://www.vectorlogo.zone/logos/hubspot/hubspot-icon.svg',
                    'Stripe' => 'https://www.vectorlogo.zone/logos/stripe/stripe-icon.svg',
                    'PayPal' => 'https://www.vectorlogo.zone/logos/paypal/paypal-icon.svg',
                    'Slack' => 'https://www.vectorlogo.zone/logos/slack/slack-icon.svg',
                    'Figma' => 'https://www.vectorlogo.zone/logos/figma/figma-icon.svg',
                    'Semrush' => 'https://cdn.worldvectorlogo.com/logos/semrush.svg',
                    'Ahrefs' => 'https://cdn.worldvectorlogo.com/logos/ahrefs.svg',
                    'Hotjar' => 'https://www.vectorlogo.zone/logos/hotaborcom/hotaborcom-icon.svg',
                    'Zapier' => 'https://www.vectorlogo.zone/logos/zapier/zapier-icon.svg',
                    'Notion' => 'https://www.vectorlogo.zone/logos/notion/notion-icon.svg',
                    'Trello' => 'https://www.vectorlogo.zone/logos/trello/trello-icon.svg',
                    'AWS' => 'https://www.vectorlogo.zone/logos/amazon_aws/amazon_aws-icon.svg',
                    'Cloudflare' => 'https://www.vectorlogo.zone/logos/cloudflare/cloudflare-icon.svg',
                ];
                @endphp
                
                @foreach(array_slice($extendedFeatures['tools'], 0, 12) as $tool)
                <div class="group flex flex-col items-center justify-center p-4 bg-neutral-50 rounded-xl hover:bg-white hover:shadow-lg smooth-transition border border-transparent hover:border-neutral-200">
                    @if(isset($toolLogos[$tool]))
                    <img src="{{ $toolLogos[$tool] }}" alt="{{ $tool }}" class="w-10 h-10 mb-2 grayscale group-hover:grayscale-0 smooth-transition" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <div class="w-10 h-10 mb-2 bg-criazo-primary/10 rounded-lg items-center justify-center hidden">
                        <span class="text-criazo-primary font-semibold text-lg">{{ substr($tool, 0, 1) }}</span>
                    </div>
                    @else
                    <div class="w-10 h-10 mb-2 bg-criazo-primary/10 rounded-lg flex items-center justify-center">
                        <span class="text-criazo-primary font-semibold text-lg">{{ substr($tool, 0, 1) }}</span>
                    </div>
                    @endif
                    <span class="text-xs font-medium text-neutral-600 text-center">{{ $tool }}</span>
                </div>
                @endforeach
            </div>
            
            <!-- Additional Tools as Pills -->
            @if(count($extendedFeatures['tools']) > 12)
            <div class="flex flex-wrap justify-center gap-2 pt-4 border-t border-neutral-200">
                <span class="text-sm text-neutral-500 mr-2">{{ __('messages.service_detail.plus') }}</span>
                @foreach(array_slice($extendedFeatures['tools'], 12) as $tool)
                <span class="px-4 py-1.5 bg-neutral-100 rounded-full text-neutral-600 text-sm">
                    {{ $tool }}
                </span>
                @endforeach
            </div>
            @endif
        </div>
    </section>
    @endif
    
    <!-- Testimonials - Trust -->
    @if(isset($testimonials) && count($testimonials) > 0)
    <section class="py-20 bg-neutral-50">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="text-center max-w-3xl mx-auto mb-12">
                <h2 class="section-intro__title mb-4">{{ __('messages.service_detail.client_reviews', ['service' => $service['name']]) }}</h2>
                <p class="text-neutral-600">{{ __('messages.service_detail.client_reviews_desc', ['service' => strtolower($service['name']), 'rating' => '4.9']) }}</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                @foreach($testimonials as $testimonial)
                <div class="bg-white rounded-2xl p-6">
                    <div class="flex items-center gap-1 mb-4">
                        @for($i = 0; $i < ($testimonial['rating'] ?? 5); $i++)
                        <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        @endfor
                    </div>
                    <p class="text-neutral-700 mb-6 leading-relaxed">"{{ $testimonial['content'] ?? $testimonial['quote'] ?? '' }}"</p>
                    <div class="flex items-center gap-3 pt-4 border-t border-neutral-100">
                        <div class="w-10 h-10 rounded-full bg-criazo-primary/10 flex items-center justify-center text-criazo-primary font-semibold text-sm">
                            {{ strtoupper(substr($testimonial['name'] ?? $testimonial['author'] ?? 'C', 0, 1)) }}
                        </div>
                        <div>
                            <p class="font-semibold text-neutral-900 text-sm">{{ $testimonial['name'] ?? $testimonial['author'] ?? '' }}</p>
                            <p class="text-xs text-neutral-500">{{ $testimonial['company'] ?? '' }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
    
    <!-- Comparison - Why Us -->
    @if($competitiveAdvantage)
    <section class="py-20 bg-white">
        <div class="max-w-[1100px] mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="section-intro__title mb-4">{{ $competitiveAdvantage['title'] }}</h2>
                <p class="text-neutral-600">{{ __('messages.service_detail.compare_services', ['service' => strtolower($service['name']), 'count' => 189]) }}</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <!-- Criazo Column -->
                <div class="bg-gradient-to-br from-criazo-50 to-white rounded-2xl p-8 border-2 border-criazo-200 relative">
                    <div class="absolute -top-3 left-6 px-4 py-1 bg-criazo-primary text-white text-sm font-semibold rounded-full">
                        {{ __('messages.service_detail.recommended') }}
                    </div>
                    <div class="flex items-center gap-3 mb-6 pt-2">
                        <div class="w-10 h-10 bg-criazo-primary rounded-xl flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                        </div>
                        <h3 class="type-heading-sm">{{ __('messages.meta.author') }}</h3>
                    </div>
                    <div class="space-y-4">
                        @foreach($competitiveAdvantage['comparisons'] as $comparison)
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <div>
                                <p class="font-medium text-neutral-900">{{ $comparison['feature'] }}</p>
                                <p class="text-sm text-criazo-primary font-semibold">{{ $comparison['us'] }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <a href="{{ $localizedRoute('contact.index') }}" class="mt-8 w-full inline-flex items-center justify-center px-6 py-3 bg-criazo-primary text-white rounded-xl font-semibold hover:bg-criazo-hover smooth-transition">
                        {{ __('messages.service_detail.get_started_with') }}
                    </a>
                </div>
                
                <!-- Others Column -->
                <div class="bg-neutral-50 rounded-2xl p-8 border border-neutral-200">
                    <div class="flex items-center gap-3 mb-6 pt-2">
                        <div class="w-10 h-10 bg-neutral-300 rounded-xl flex items-center justify-center">
                            <svg class="w-5 h-5 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <h3 class="type-heading-sm text-neutral-500">{{ __('messages.service_detail.other_agencies') }}</h3>
                    </div>
                    <div class="space-y-4">
                        @foreach($competitiveAdvantage['comparisons'] as $comparison)
                        <div class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-neutral-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"/></svg>
                            <div>
                                <p class="font-medium text-neutral-500">{{ $comparison['feature'] }}</p>
                                <p class="text-sm text-neutral-400">{{ $comparison['others'] }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    
    <!-- Service Comparison Section -->
    @if(!empty($service['comparison']) && isset($service['comparison']['services']))
    <section class="py-20 bg-white">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="mb-12">
                <p class="text-sm font-medium text-criazo-primary tracking-wide mb-3">{{ $service['categoryLabel'] ?? __('messages.service_detail.paid_traffic_management') }}</p>
                <h2 class="section-intro__title mb-4">{{ $service['comparison']['title'] }}</h2>
                <p class="text-lg text-neutral-600 mb-4">{{ $service['comparison']['intro'] }}</p>
                <p class="text-neutral-600">{{ $service['comparison']['conclusion'] }}</p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                @foreach($service['comparison']['services'] as $comparisonService)
                @php
                    $isCurrentService = ($comparisonService['slug'] === $slug);
                    $comparisonServiceData = isset($comparisonServiceDataMap) ? ($comparisonServiceDataMap[$comparisonService['slug']] ?? null) : null;
                @endphp
                <div class="bg-neutral-50 rounded-2xl p-8 border-2 {{ $isCurrentService ? 'border-criazo-primary' : 'border-neutral-200' }} hover:shadow-lg smooth-transition">
                    <h3 class="type-heading-sm mb-3">{{ $comparisonService['name'] }}</h3>
                    <p class="text-neutral-700 font-medium mb-4">{{ $comparisonService['description'] }}</p>
                    
                    <div class="space-y-2 mb-4">
                        @foreach($comparisonService['examples'] as $example)
                        <div class="flex items-center gap-2">
                            <svg class="w-5 h-5 text-criazo-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                            <span class="text-neutral-700 text-sm">{{ $example }}</span>
                        </div>
                        @endforeach
                    </div>
                    
                    <p class="text-neutral-600 text-sm mb-6">{{ $comparisonService['detail'] }}</p>
                    
                    @if(!$isCurrentService && $comparisonServiceData)
                    <a href="{{ $localizedRoute('services.show', ['slug' => $comparisonService['slug']]) }}" 
                       class="inline-flex items-center gap-2 text-criazo-primary font-semibold hover:opacity-70 smooth-transition">
                        {{ __('messages.service_detail.learn_more_about', ['name' => $comparisonService['name']]) }}
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                    </a>
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif
    
    <!-- FAQ - SEO Optimized -->
    @if(!empty($service['faqs']))
    <section class="py-20 bg-neutral-50">
        <div class="max-w-[800px] mx-auto px-6">
            <div class="text-center mb-12">
                <h2 class="section-intro__title mb-4">{{ __('messages.service_detail.questions_answered', ['service' => $service['name'], 'location_suffix' => $locationSuffix]) }}</h2>
                <p class="text-neutral-600">{{ __('messages.service_detail.questions_answered_desc', ['service' => strtolower($service['name']), 'location_suffix' => $locationSuffix]) }}</p>
            </div>
            
            <div class="space-y-3">
                @foreach($service['faqs'] as $faq)
                <details class="group bg-white rounded-xl" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                    <summary class="px-6 py-4 cursor-pointer list-none font-medium flex justify-between items-center gap-4" itemprop="name">
                        <span>{{ $faq['question'] }}</span>
                        <svg class="w-5 h-5 text-neutral-400 flex-shrink-0 transition transform group-open:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </summary>
                    <div class="px-6 pb-4 text-neutral-600 leading-[1.43] tracking-body" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                        <div itemprop="text">{{ $faq['answer'] }}</div>
                    </div>
                </details>
                @endforeach
            </div>
            
            <div class="mt-10 text-center p-6 bg-white rounded-xl">
                <p class="text-neutral-700 mb-4">{{ __('messages.service_detail.still_have_questions', ['service' => strtolower($service['name']), 'location_suffix' => $locationSuffix]) }}</p>
                <a href="{{ $localizedRoute('contact.index') }}" class="inline-flex items-center text-criazo-primary font-semibold hover:opacity-70 smooth-transition">
                    {{ __('messages.service_detail.talk_to_specialist', ['service' => $service['name'], 'location_suffix' => $locationSuffix]) }}
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </section>
    @endif
    
    <!-- Related Services -->
    <section class="py-20 bg-white">
        <div class="max-w-[1300px] mx-auto px-6">
            <div class="flex items-center justify-between mb-12">
                <h2 class="section-intro__title">{{ __('messages.service_detail.related_services') }}</h2>
                <a href="{{ $localizedRoute('services.index') }}" 
                   class="hidden md:flex items-center gap-2 text-criazo-primary font-medium hover:opacity-70 smooth-transition">
                    {{ __('messages.service_detail.view_all') }}
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                @foreach($relatedServices as $relatedService)
                <a href="{{ $localizedRoute('services.show', ['slug' => $relatedService['slug']]) }}" class="group block">
                    <div class="relative overflow-hidden rounded-2xl bg-neutral-100 aspect-[4/3] mb-4">
                        <img src="{{ asset($relatedService['listingImage']) }}" alt="{{ $relatedService['name'] }}" class="w-full h-full object-cover group-hover:scale-105 smooth-transition duration-500" loading="lazy">
                    </div>
                    <h3 class="type-card-title mb-2 group-hover:text-criazo-primary smooth-transition">{{ $relatedService['name'] }}</h3>
                    <p class="text-neutral-600 text-sm line-clamp-2">{{ $relatedService['listingDescription'] }}</p>
                </a>
                @endforeach
            </div>
        </div>
    </section>
    
    <!-- Final CTA - Clean & Minimal -->
    <section class="py-24 bg-neutral-50">
        <div class="max-w-[800px] mx-auto px-6 text-center">
            <h2 class="section-intro__title mb-4">
                {{ __('messages.service_detail.start_project_today', ['service' => $service['name'], 'location_suffix' => $locationSuffix]) }}
            </h2>
            <p class="text-lg text-neutral-600 mb-8">
                {{ __('messages.service_detail.start_project_desc', ['service' => strtolower($service['name']), 'count' => 189, 'location_suffix' => $locationSuffix]) }}
            </p>
            
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ $localizedRoute('contact.index') }}" 
                   class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-lg hover:shadow-xl">
                    {{ __('messages.service_detail.start_your_project', ['location_suffix' => $locationSuffix]) }}
                    <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
            </div>
            
            <p class="mt-6 text-sm text-neutral-500">{{ __('messages.service_detail.no_commitment') }}</p>
        </div>
    </section>

    @if($isLocationPage && ((isset($sameCountryLocations) && count($sameCountryLocations) > 0) || (isset($otherCountriesLocations) && count($otherCountriesLocations) > 0)))
    <section class="py-16 bg-white border-t border-neutral-200">
        <div class="max-w-[1300px] mx-auto px-6">
            <h3 class="type-card-title mb-4">{{ __('messages.service_location.also_serving') }}</h3>
            @if(isset($sameCountryLocations) && count($sameCountryLocations) > 0)
            <div class="flex flex-wrap gap-3 mb-6">
                @foreach($sameCountryLocations as $loc)
                <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $slug, 'industrySlug' => $loc['slug']]) }}"
                   class="px-4 py-2 bg-neutral-100 border border-neutral-200 rounded-full text-neutral-700 hover:border-criazo-primary hover:text-criazo-primary smooth-transition text-sm font-medium">
                    {{ $loc['name'] }}{!! !empty($loc['is_capital']) ? ' <span class="text-neutral-400 text-xs">•</span>' : '' !!}
                </a>
                @endforeach
            </div>
            @endif
            @if(isset($otherCountriesLocations) && count($otherCountriesLocations) > 0)
            <div>
                <p class="text-sm font-medium text-neutral-500 mb-3">{{ __('messages.service_location.also_available_in') }}:</p>
                <div class="flex flex-wrap gap-3">
                    @foreach($otherCountriesLocations as $loc)
                    <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $slug, 'industrySlug' => $loc['slug']]) }}"
                       class="px-4 py-2 bg-neutral-50 border border-neutral-200 rounded-full text-neutral-600 hover:border-criazo-primary hover:text-criazo-primary smooth-transition text-sm">
                        {{ $loc['name'] }}, {{ $loc['country'] }}
                    </a>
                    @endforeach
                </div>
            </div>
            @endif
        </div>
    </section>
    @endif

</article>

@include('components.explore-site-section', ['hideServicesSlider' => true])

@endsection