@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    $locale = app()->getLocale();
    
    // Helper function to generate localized routes (English has no prefix)
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
    
    // Get localized slug for services (translates English slug to current locale)
    $getLocalizedSlug = function($slug) use ($locale) {
        return SeoHelper::getTranslatedSlug($slug, $locale);
    };
    
    // Service icons mapping
    $serviceIcons = [
        'web-development' => 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3',
        'ecommerce' => 'M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z',
        'digital-marketing' => 'M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783',
        'seo-sem' => 'm21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z',
        'social-media' => 'M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z',
        'branding' => 'M4.098 19.902a3.75 3.75 0 005.304 0l6.401-6.402M6.75 21A3.75 3.75 0 013 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 003.75-3.75V8.197',
        'advertising' => 'M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z',
        'hosting' => 'M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z',
        'optimization' => 'M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941',
    ];
    
    // Country flags mapping
    $countryFlags = [
        'PT' => '🇵🇹', 'ES' => '🇪🇸', 'FR' => '🇫🇷', 'DE' => '🇩🇪', 'IT' => '🇮🇹',
        'UK' => '🇬🇧', 'GB' => '🇬🇧', 'NL' => '🇳🇱', 'BE' => '🇧🇪', 'CH' => '🇨🇭',
        'AT' => '🇦🇹', 'PL' => '🇵🇱', 'SE' => '🇸🇪', 'DK' => '🇩🇰', 'NO' => '🇳🇴',
        'FI' => '🇫🇮', 'IE' => '🇮🇪', 'GR' => '🇬🇷', 'CZ' => '🇨🇿', 'US' => '🇺🇸',
        'CA' => '🇨🇦', 'AU' => '🇦🇺', 'BR' => '🇧🇷', 'MX' => '🇲🇽', 'AR' => '🇦🇷',
    ];
@endphp

@section('title', __('messages.all_services.meta_title'))
@section('meta_description', __('messages.all_services.meta_description'))
@section('meta_keywords', __('messages.all_services.meta_keywords'))
@php
    $firstServiceAll = $servicesWithIndustries ? collect($servicesWithIndustries)->first() : null;
    $firstListingImage = $firstServiceAll && isset($firstServiceAll['service']['listingImage']) ? $firstServiceAll['service']['listingImage'] : null;
    $allServicesOgImage = $firstListingImage ? asset($firstListingImage) : asset('images/og-services.jpg');
@endphp
@section('og_image', $allServicesOgImage)

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "@id": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}/#webpage",
  "url": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}",
  "name": "{{ __('messages.all_services.schema_name') }}",
  "description": "{{ __('messages.all_services.schema_description') }}",
  "isPartOf": { "@id": "{{ config('seo.site_url') }}/#website" },
  "about": { "@id": "{{ config('seo.site_url') }}/#organization" },
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}"
}
</script>
@endpush

@push('styles')
<style>
    details > summary::-webkit-details-marker { display: none; }
</style>
@endpush

@section('content')
<article class="min-h-screen bg-white pb-16 md:pb-24">

    {{-- Hero Section - Clean, Matching Site Design --}}
    <section class="relative overflow-hidden bg-white">
        <div class="site-container pt-10 md:pt-14 pb-12 md:pb-16">
            
            <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
                {{-- Left: Content --}}
                <div class="space-y-5">
                    <h1 class="text-4xl md:text-5xl lg:text-[3.25rem] font-semibold text-neutral-900 leading-[1.08]">
                        {{ __('messages.all_services.hero_title') }}
                    </h1>
                    
                    <p class="text-lg md:text-xl text-neutral-600 leading-[1.43] tracking-body">
                        {{ __('messages.all_services.hero_subtitle') }}
                    </p>
                    
                    {{-- Stats --}}
                    <div class="flex flex-wrap items-center gap-6 py-2">
                        <div class="flex items-center gap-2">
                            <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="M5 13l4 4L19 7"/></svg>
                            <span class="text-neutral-700 font-medium">{{ count($servicesData) }} {{ __('messages.all_services.services') }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <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="M5 13l4 4L19 7"/></svg>
                            <span class="text-neutral-700 font-medium">{{ count($locationsByCountry) }} {{ __('messages.all_services.countries') }}</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <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="M5 13l4 4L19 7"/></svg>
                            <span class="text-neutral-700 font-medium">{{ __('messages.all_services.industries_count', ['count' => 50]) }}</span>
                        </div>
                    </div>
                    
                    {{-- CTAs --}}
                    <div class="flex flex-wrap gap-3 pt-3">
                        <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.cta.get_free_consultation') }}
                            <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>
                </div>
                
                {{-- Right: Quick Navigation Cards --}}
                <div class="grid grid-cols-2 gap-3 md:gap-4">
                    <a href="#services-overview" class="group p-6 bg-neutral-50 rounded-2xl hover:bg-criazo-primary/5 border border-neutral-200 hover:border-criazo-primary/30 smooth-transition">
                        <div class="w-12 h-12 bg-criazo-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-criazo-primary/20 smooth-transition">
                            <svg class="w-6 h-6 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg>
                        </div>
                        <h3 class="font-semibold text-neutral-900 mb-1">{{ __('messages.all_services.nav_all_services') }}</h3>
                        <p class="text-sm text-neutral-500">{{ count($servicesData) }} {{ __('messages.all_services.services') }}</p>
                    </a>
                    <a href="#services-by-industry" class="group p-6 bg-neutral-50 rounded-2xl hover:bg-criazo-primary/5 border border-neutral-200 hover:border-criazo-primary/30 smooth-transition">
                        <div class="w-12 h-12 bg-criazo-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-criazo-primary/20 smooth-transition">
                            <svg class="w-6 h-6 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                        </div>
                        <h3 class="font-semibold text-neutral-900 mb-1">{{ __('messages.all_services.nav_by_industry') }}</h3>
                        <p class="text-sm text-neutral-500">{{ __('messages.all_services.industries_count', ['count' => 50]) }}</p>
                    </a>
                    <a href="#services-by-location" class="group p-6 bg-neutral-50 rounded-2xl hover:bg-criazo-primary/5 border border-neutral-200 hover:border-criazo-primary/30 smooth-transition">
                        <div class="w-12 h-12 bg-criazo-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-criazo-primary/20 smooth-transition">
                            <svg class="w-6 h-6 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                        </div>
                        <h3 class="font-semibold text-neutral-900 mb-1">{{ __('messages.all_services.nav_by_location') }}</h3>
                        <p class="text-sm text-neutral-500">{{ count($locationsByCountry) }} {{ __('messages.all_services.countries') }}</p>
                    </a>
                    <a href="#complete-matrix" class="group p-6 bg-neutral-50 rounded-2xl hover:bg-criazo-primary/5 border border-neutral-200 hover:border-criazo-primary/30 smooth-transition">
                        <div class="w-12 h-12 bg-criazo-primary/10 rounded-xl flex items-center justify-center mb-4 group-hover:bg-criazo-primary/20 smooth-transition">
                            <svg class="w-6 h-6 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
                        </div>
                        <h3 class="font-semibold text-neutral-900 mb-1">{{ __('messages.all_services.complete_directory') }}</h3>
                        <p class="text-sm text-neutral-500">{{ __('messages.all_services.complete_reference') }}</p>
                    </a>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================================================== --}}
    {{-- SECTION 1: ALL SERVICES OVERVIEW --}}
    {{-- ============================================================== --}}
    <section id="services-overview" class="py-16 md:py-20 bg-neutral-50">
        <div class="site-container">
            <div class="text-center mb-12">
                <span class="inline-block px-4 py-2 bg-criazo-primary/10 text-criazo-primary rounded-full text-sm font-semibold mb-4">
                    {{ __('messages.all_services.our_services') }}
                </span>
                <h2 class="section-intro__title mb-4">
                    {{ __('messages.all_services.digital_marketing_services') }}
                </h2>
                <p class="text-lg text-neutral-600 max-w-2xl mx-auto">
                    {{ __('messages.all_services.services_count', ['count' => count($servicesData)]) }}
                </p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach($servicesData as $serviceSlug => $service)
                    <a href="{{ $localizedRoute('services.show', ['slug' => $getLocalizedSlug($serviceSlug)]) }}" 
                       class="group bg-white rounded-2xl p-6 hover:shadow-xl smooth-transition border border-neutral-200 hover:border-criazo-primary/30">
                        <div class="flex items-start gap-4">
                            <div class="w-14 h-14 rounded-xl bg-gradient-to-br {{ $service['color'] ?? 'from-criazo-primary to-criazo-hover' }} flex items-center justify-center flex-shrink-0 group-hover:scale-110 smooth-transition shadow-lg">
                                <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $serviceIcons[$serviceSlug] ?? $serviceIcons['web-development'] }}"/>
                                </svg>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h3 class="type-card-title group-hover:text-criazo-primary smooth-transition mb-2">
                                    {{ $service['name'] }}
                                </h3>
                                <p class="text-sm text-neutral-500 line-clamp-2">
                                    {{ $service['listingDescription'] ?? '' }}
                                </p>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================================================== --}}
    {{-- SECTION 2: SERVICES BY INDUSTRY --}}
    {{-- ============================================================== --}}
    <section id="services-by-industry" class="py-16 md:py-20 bg-white">
        <div class="site-container">
            <div class="text-center mb-12">
                <span class="inline-block px-4 py-2 bg-criazo-primary/10 text-criazo-primary rounded-full text-sm font-semibold mb-4">
                    {{ __('messages.all_services.nav_by_industry') }}
                </span>
                <h2 class="section-intro__title mb-4">
                    {{ __('messages.all_services.section_by_industry') }}
                </h2>
                <p class="text-lg text-neutral-600 max-w-2xl mx-auto">
                    {{ __('messages.all_services.specialized_solutions') }}
                </p>
            </div>
            
            <div class="space-y-6">
                @foreach($servicesWithIndustries as $serviceSlug => $serviceData)
                    @php
                        $service = $serviceData['service'];
                        $industries = $serviceData['industries'];
                    @endphp
                    @if(count($industries) > 0)
                    <div class="bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200">
                        {{-- Service Header --}}
                        <div class="flex items-center justify-between gap-4 px-6 py-5 border-b border-neutral-200">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 rounded-xl bg-gradient-to-br {{ $service['color'] ?? 'from-criazo-primary to-criazo-hover' }} flex items-center justify-center flex-shrink-0 shadow-md">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $serviceIcons[$serviceSlug] ?? $serviceIcons['web-development'] }}"/>
                                    </svg>
                                </div>
                                <div>
                                    <h3 class="type-card-title">{{ $service['name'] }}</h3>
                                    <p class="text-sm text-neutral-500">{{ count($industries) }} {{ __('messages.all_services.industries') }}</p>
                                </div>
                            </div>
                            <a href="{{ $localizedRoute('services.show', ['slug' => $getLocalizedSlug($serviceSlug)]) }}" 
                               class="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 bg-neutral-900 text-white text-sm font-semibold rounded-full hover:bg-neutral-800 smooth-transition">
                                {{ __('messages.all_services.view_service') }}
                                <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>
                        
                        {{-- Industries Grid --}}
                        <div class="p-6">
                            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-2">
                                @foreach($industries as $industrySlug => $industry)
                                    <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $getLocalizedSlug($serviceSlug), 'industrySlug' => $getLocalizedSlug($industrySlug)]) }}" 
                                       class="text-[13px] text-neutral-600 py-2 px-3 rounded-lg hover:bg-white hover:text-criazo-primary hover:shadow-sm smooth-transition truncate border border-transparent hover:border-neutral-200"
                                       title="{{ __('messages.all_services.service_for_industry', ['service' => $service['name'], 'industry' => $industry['name']]) }}">
                                        {{ $industry['name'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================================================== --}}
    {{-- SECTION 3: SERVICES BY LOCATION --}}
    {{-- ============================================================== --}}
    <section id="services-by-location" class="py-16 md:py-20 bg-neutral-50">
        <div class="site-container">
            <div class="text-center mb-12">
                <span class="inline-block px-4 py-2 bg-criazo-primary/10 text-criazo-primary rounded-full text-sm font-semibold mb-4">
                    {{ __('messages.all_services.nav_by_location') }}
                </span>
                <h2 class="section-intro__title mb-4">
                    {{ __('messages.all_services.section_by_location') }}
                </h2>
                <p class="text-lg text-neutral-600 max-w-2xl mx-auto">
                    {{ __('messages.all_services.find_in_city') }}
                </p>
            </div>
            
            {{-- Country Quick Links --}}
            <div class="flex flex-wrap justify-center gap-2 mb-12">
                @foreach($locationsByCountry as $countrySlug => $country)
                    <a href="#country-{{ $countrySlug }}" 
                       class="inline-flex items-center gap-2 px-4 py-2.5 bg-white hover:bg-criazo-primary/5 border border-neutral-200 hover:border-criazo-primary/30 rounded-full text-sm font-medium text-neutral-700 hover:text-criazo-primary smooth-transition shadow-sm">
                        <span class="text-lg">{{ $countryFlags[$country['code']] ?? '🌍' }}</span>
                        {{ $country['name'] }}
                    </a>
                @endforeach
            </div>
            
            {{-- Countries with Cities --}}
            <div class="space-y-16">
                @foreach($locationsByCountry as $countrySlug => $country)
                <div id="country-{{ $countrySlug }}" class="scroll-mt-24">
                    {{-- Country Header --}}
                    <div class="flex items-center gap-4 mb-8">
                        <span class="text-4xl">{{ $countryFlags[$country['code']] ?? '🌍' }}</span>
                        <div>
                            <h3 class="type-heading-sm">{{ $country['name'] }}</h3>
                            <p class="text-neutral-500">{{ count($country['cities']) }} {{ __('messages.all_services.cities') }} • {{ count($servicesData) }} {{ __('messages.all_services.services_per_city') }}</p>
                        </div>
                    </div>
                    
                    {{-- Cities Grid --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
                        @foreach($country['cities'] as $city)
                        <div class="bg-white rounded-2xl border border-neutral-200 overflow-hidden hover:shadow-lg smooth-transition">
                            {{-- City Header --}}
                            <div class="flex items-center gap-3 px-5 py-4 bg-neutral-50 border-b border-neutral-200">
                                <div class="w-10 h-10 rounded-xl bg-criazo-primary/10 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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-semibold text-neutral-900">{{ $city['name'] }}</h4>
                                    @if(isset($city['native_name']) && $city['native_name'] !== $city['name'])
                                        <p class="text-xs text-neutral-500">{{ $city['native_name'] }}</p>
                                    @endif
                                </div>
                            </div>
                            
                            {{-- All Services for this City - Full SEO Links --}}
                            <div class="p-5 space-y-1">
                                @foreach($servicesData as $serviceSlug => $service)
                                    <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $getLocalizedSlug($serviceSlug), 'industrySlug' => $city['slug']]) }}" 
                                       class="block text-[13px] text-neutral-600 hover:text-criazo-primary py-1.5 smooth-transition"
                                       title="{{ $service['name'] }} {{ __('messages.service_location.in') }} {{ $city['name'] }}, {{ $country['name'] }}">
                                        {{ $service['name'] }} {{ __('messages.service_location.in') }} {{ $city['name'] }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================================================== --}}
    {{-- SECTION 4: COMPLETE SERVICE + LOCATION MATRIX --}}
    {{-- ============================================================== --}}
    <section id="complete-matrix" class="py-16 md:py-20 bg-white">
        <div class="site-container">
            <div class="text-center mb-12">
                <span class="inline-block px-4 py-2 bg-criazo-primary/10 text-criazo-primary rounded-full text-sm font-semibold mb-4">
                    {{ __('messages.all_services.complete_directory') }}
                </span>
                <h2 class="section-intro__title mb-4">
                    {{ __('messages.all_services.full_services_directory') }}
                </h2>
                <p class="text-lg text-neutral-600 max-w-2xl mx-auto">
                    {{ __('messages.all_services.complete_reference') }}
                </p>
            </div>
            
            {{-- Service-by-Service with all locations --}}
            <div class="space-y-5">
                @foreach($servicesData as $serviceSlug => $service)
                <details class="group bg-neutral-50 rounded-2xl border border-neutral-200 overflow-hidden">
                    <summary class="list-none cursor-pointer">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-5 sm:px-6 py-5 bg-white">
                            <div class="flex items-center gap-4 min-w-0">
                                <div class="w-12 h-12 rounded-xl bg-gradient-to-br {{ $service['color'] ?? 'from-criazo-primary to-criazo-hover' }} flex items-center justify-center flex-shrink-0 shadow-lg">
                                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ $serviceIcons[$serviceSlug] ?? $serviceIcons['web-development'] }}"/>
                                    </svg>
                                </div>
                                <div class="min-w-0">
                                    <h3 class="type-card-title truncate">{{ $service['name'] }}</h3>
                                    <p class="text-sm text-neutral-500">{{ __('messages.all_services.available_all_locations') }}</p>
                                </div>
                            </div>
                            <div class="flex items-center gap-3">
                                <a href="{{ $localizedRoute('services.show', ['slug' => $getLocalizedSlug($serviceSlug)]) }}"
                                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-criazo-primary text-white text-sm font-semibold rounded-full hover:bg-criazo-hover smooth-transition shadow-sm">
                                    {{ __('messages.all_services.learn_more') }}
                                </a>
                                <span class="inline-flex w-9 h-9 items-center justify-center rounded-full bg-neutral-100 text-neutral-500 group-open:rotate-180 smooth-transition">
                                    <svg class="w-5 h-5" 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>
                                </span>
                            </div>
                        </div>
                    </summary>
                    <div class="p-5 sm:p-6 border-t border-neutral-200">
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                            @foreach($locationsByCountry as $countrySlug => $country)
                            <div>
                                <div class="flex items-center gap-2 mb-2.5 pb-2 border-b border-neutral-200">
                                    <span class="text-lg">{{ $countryFlags[$country['code']] ?? '🌍' }}</span>
                                    <h4 class="font-semibold text-neutral-800">{{ $country['name'] }}</h4>
                                </div>
                                <div class="space-y-1">
                                    @foreach($country['cities'] as $city)
                                    <a href="{{ $localizedRoute('service.industry', ['serviceSlug' => $getLocalizedSlug($serviceSlug), 'industrySlug' => $city['slug']]) }}"
                                       class="block text-[13px] text-neutral-500 hover:text-criazo-primary smooth-transition py-0.5"
                                       title="{{ $service['name'] }} {{ __('messages.service_location.in') }} {{ $city['name'] }}, {{ $country['name'] }}">
                                        {{ $service['name'] }} {{ __('messages.service_location.in') }} {{ $city['name'] }}
                                    </a>
                                    @endforeach
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </details>
                @endforeach
            </div>
        </div>
    </section>

    {{-- CTA Section --}}
    <section class="py-16 md:py-20 bg-neutral-50">
        <div class="site-container">
            <div class="bg-white border border-neutral-200 rounded-3xl p-8 md:p-12 text-center">
                <div class="relative">
                    <h2 class="section-intro__title mb-5">
                        {{ __('messages.all_services.cta_title') }}
                    </h2>
                    <p class="text-lg text-neutral-600 mb-8 max-w-2xl mx-auto">
                        {{ __('messages.all_services.cant_find') }}
                    </p>
                    <div class="flex flex-col sm:flex-row gap-4 justify-center">
                        <a href="{{ $localizedRoute('contact.index') }}" 
                           class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-criazo-primary text-white font-semibold rounded-full hover:bg-criazo-hover smooth-transition shadow-lg hover:shadow-xl">
                            {{ __('messages.all_services.cta_button') }}
                            <svg class="w-5 h-5" 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('services.index') }}" 
                           class="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-neutral-800 font-semibold rounded-full hover:bg-neutral-100 smooth-transition border border-neutral-200">
                            {{ __('messages.all_services.view_all_services') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

</article>

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

@endsection