@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    use App\Helpers\MarketContent;
    $locale = app()->getLocale();
    $pageSeo = SeoHelper::getPageSeo('services');

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

@section('title', $pageSeo['title'] ?? __('messages.services.meta_title'))
@section('meta_description', $pageSeo['description'] ?? __('messages.services.meta_description'))
@section('meta_keywords', $pageSeo['keywords'] ?? __('messages.services.meta_keywords'))
@section('robots', 'index, follow')
@php
    $firstService = $servicesData ? collect($servicesData)->first() : null;
    $servicesOgImage = ($firstService && !empty($firstService['listingImage'])) ? asset($firstService['listingImage']) : asset('images/og-services.jpg');
@endphp
@section('og_image', $servicesOgImage)

@push('head')
@php
    $firstSvcImage = ($firstService && !empty($firstService['listingImage'])) ? asset($firstService['listingImage']) : null;
@endphp
@if($firstSvcImage)
<link rel="preload" as="image" href="{{ $firstSvcImage }}" fetchpriority="high">
@endif
@endpush

@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.services.schema_name') }}",
  "description": "{{ __('messages.services.schema_description') }}",
  "isPartOf": { "@id": "{{ config('seo.site_url') }}/#website" },
  "about": { "@id": "{{ config('seo.site_url') }}/#organization" },
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}",
  "breadcrumb": {
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "{{ __('messages.nav.home') }}", "item": "{{ $localizedRoute('home') }}" },
      { "@type": "ListItem", "position": 2, "name": "{{ __('messages.nav.services') }}", "item": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}" }
    ]
  }
}
</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ItemList",
  "name": "{{ __('messages.services.schema_list_name') }}",
  "description": "{{ __('messages.services.schema_list_description') }}",
  "numberOfItems": 10,
  "itemListElement": [
    { "@type": "Service", "position": 1, "name": "{{ __('messages.services.schema_web_development_name') }}", "description": "{{ __('messages.services.schema_web_development_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'web-development']) }}" },
    { "@type": "Service", "position": 2, "name": "{{ __('messages.services.schema_ecommerce_name') }}", "description": "{{ __('messages.services.schema_ecommerce_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'ecommerce']) }}" },
    { "@type": "Service", "position": 3, "name": "{{ __('messages.services.schema_shopify_name') }}", "description": "{{ __('messages.services.schema_shopify_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'shopify']) }}" },
    { "@type": "Service", "position": 4, "name": "{{ __('messages.services.schema_seo_name') }}", "description": "{{ __('messages.services.schema_seo_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'seo-sem']) }}" },
    { "@type": "Service", "position": 5, "name": "{{ __('messages.services.schema_social_media_name') }}", "description": "{{ __('messages.services.schema_social_media_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'social-media']) }}" },
    { "@type": "Service", "position": 6, "name": "{{ __('messages.services.schema_digital_marketing_name') }}", "description": "{{ __('messages.services.schema_digital_marketing_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'digital-marketing']) }}" },
    { "@type": "Service", "position": 7, "name": "{{ __('messages.services.schema_branding_name') }}", "description": "{{ __('messages.services.schema_branding_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'branding']) }}" },
    { "@type": "Service", "position": 8, "name": "{{ __('messages.services_page.schema_paid_traffic_name') }}", "description": "{{ __('messages.services.schema_advertising_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'paid-traffic']) }}" },
    { "@type": "Service", "position": 9, "name": "{{ __('messages.services.schema_hosting_name') }}", "description": "{{ __('messages.services.schema_hosting_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'hosting']) }}" },
    { "@type": "Service", "position": 10, "name": "{{ __('messages.services.schema_optimization_name') }}", "description": "{{ __('messages.services.schema_optimization_desc') }}", "provider": { "@id": "{{ config('seo.site_url') }}/#organization" }, "url": "{{ $localizedRoute('services.show', ['slug' => 'optimization']) }}" }
  ]
}
</script>
@endpush

@section('content')

<article>

{{-- ═══════════════════════════════════════════════════════════
     HERO — Light teal (matches homepage)
═══════════════════════════════════════════════════════════ --}}
<section class="pt-10 pb-7 lg:pt-10 lg:pb-8 hero-gradient" aria-labelledby="services-hero-heading">
    <div class="site-container">
        <div class="max-w-4xl">
            <h1 id="services-hero-heading" class="page-hero__headline text-neutral-900">
                {{ __('messages.services_page.grid_title') }}
            </h1>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════
     SERVICES GRID — Each service as a full card with image
═══════════════════════════════════════════════════════════ --}}
@if(isset($servicesData) && count($servicesData) > 0)
<section class="bg-white pt-10 pb-20 lg:pt-14 lg:pb-28" aria-label="{{ __('messages.nav.services') }}">
    <div class="site-container">

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($servicesData as $svc)
            @php
                $svcSlug = $svc['slug'] ?? $svc['id'] ?? '';
                $svcNameKey = 'messages.services_data.' . str_replace('-', '_', $svcSlug) . '.name';
                $svcNameTranslated = __($svcNameKey);
                $marketSvc = MarketContent::service($svcSlug, $locale);
                $svcName = $marketSvc['name'] ?? ($svcNameTranslated !== $svcNameKey ? $svcNameTranslated : ($svc['name'] ?? ''));
                $serviceCopy = [
                    'web-development' => [
                        'hook' => __('messages.services_page.service_copy.web-development.hook'),
                        'desc' => __('messages.services_page.service_copy.web-development.desc'),
                        'bullets' => trans('messages.services_page.service_copy.web-development.bullets'),
                        'cta' => __('messages.services_page.service_copy.web-development.cta'),
                    ],
                    'ecommerce' => [
                        'hook' => __('messages.services_page.service_copy.ecommerce.hook'),
                        'desc' => __('messages.services_page.service_copy.ecommerce.desc'),
                        'bullets' => trans('messages.services_page.service_copy.ecommerce.bullets'),
                        'cta' => __('messages.services_page.service_copy.ecommerce.cta'),
                    ],
                    'shopify' => [
                        'hook' => __('messages.services_page.service_copy.shopify.hook'),
                        'desc' => __('messages.services_page.service_copy.shopify.desc'),
                        'bullets' => trans('messages.services_page.service_copy.shopify.bullets'),
                        'cta' => __('messages.services_page.service_copy.shopify.cta'),
                    ],
                    'digital-marketing' => [
                        'hook' => __('messages.services_page.service_copy.digital-marketing.hook'),
                        'desc' => __('messages.services_page.service_copy.digital-marketing.desc'),
                        'bullets' => trans('messages.services_page.service_copy.digital-marketing.bullets'),
                        'cta' => __('messages.services_page.service_copy.digital-marketing.cta'),
                    ],
                    'seo-sem' => [
                        'hook' => __('messages.services_page.service_copy.seo-sem.hook'),
                        'desc' => __('messages.services_page.service_copy.seo-sem.desc'),
                        'bullets' => trans('messages.services_page.service_copy.seo-sem.bullets'),
                        'cta' => __('messages.services_page.service_copy.seo-sem.cta'),
                    ],
                    'paid-traffic' => [
                        'hook' => __('messages.services_page.service_copy.paid-traffic.hook'),
                        'desc' => __('messages.services_page.service_copy.paid-traffic.desc'),
                        'bullets' => trans('messages.services_page.service_copy.paid-traffic.bullets'),
                        'cta' => __('messages.services_page.service_copy.paid-traffic.cta'),
                    ],
                    'google-ads' => [
                        'hook' => __('messages.services_page.service_copy.google-ads.hook'),
                        'desc' => __('messages.services_page.service_copy.google-ads.desc'),
                        'bullets' => trans('messages.services_page.service_copy.google-ads.bullets'),
                        'cta' => __('messages.services_page.service_copy.google-ads.cta'),
                    ],
                    'social-media' => [
                        'hook' => __('messages.services_page.service_copy.social-media.hook'),
                        'desc' => __('messages.services_page.service_copy.social-media.desc'),
                        'bullets' => trans('messages.services_page.service_copy.social-media.bullets'),
                        'cta' => __('messages.services_page.service_copy.social-media.cta'),
                    ],
                    'branding' => [
                        'hook' => __('messages.services_page.service_copy.branding.hook'),
                        'desc' => __('messages.services_page.service_copy.branding.desc'),
                        'bullets' => trans('messages.services_page.service_copy.branding.bullets'),
                        'cta' => __('messages.services_page.service_copy.branding.cta'),
                    ],
                    'hosting' => [
                        'hook' => __('messages.services_page.service_copy.hosting.hook'),
                        'desc' => __('messages.services_page.service_copy.hosting.desc'),
                        'bullets' => trans('messages.services_page.service_copy.hosting.bullets'),
                        'cta' => __('messages.services_page.service_copy.hosting.cta'),
                    ],
                    'optimization' => [
                        'hook' => __('messages.services_page.service_copy.optimization.hook'),
                        'desc' => __('messages.services_page.service_copy.optimization.desc'),
                        'bullets' => trans('messages.services_page.service_copy.optimization.bullets'),
                        'cta' => __('messages.services_page.service_copy.optimization.cta'),
                    ],
                ];
                $currentCopy = $serviceCopy[$svcSlug] ?? null;
                $marketBenefits = array_map(
                    fn ($card) => is_array($card) ? ($card['title'] ?? '') : $card,
                    array_slice($marketSvc['benefit_cards'] ?? [], 0, 3)
                );
                $svcHook = $marketSvc['summary'] ?? ($currentCopy['hook'] ?? null);
                $baseDesc = $marketSvc['intro'] ?? ($currentCopy['desc'] ?? ($svc['listingDescription'] ?? ''));
                $svcBenefits = $marketBenefits ?: ($currentCopy['bullets'] ?? array_slice(($svc['features'] ?? []), 0, 3));
                $svcPrimaryCta = $marketSvc['cta_text'] ?? ($currentCopy['cta'] ?? __('messages.services_page.fallback_view_service'));
                $svcImage = !empty($svc['listingImage']) ? asset($svc['listingImage']) : null;
                $svcAlt = $marketSvc['alt_text'] ?? \App\Helpers\SeoHelper::generateImageAlt($svcName, __('messages.services.service'), __('messages.meta.author'));

                // Desktop priority layout (3-column grid), balanced to avoid holes.
                // Featured services: Web Development, SEO & SEM, Google Ads, Branding & Naming.
                $layoutMap = [
                    // Row 1 (2 + 1)
                    'web-development' => ['span' => 'lg:col-span-2', 'order' => 'lg:order-1', 'featured' => true, 'badge' => __('messages.services_page.badges.flagship'), 'extra' => __('messages.services_page.featured_extra.web-development')],
                    'paid-traffic' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-2', 'featured' => false, 'extra' => null],

                    // Row 2 (1 + 2)
                    'social-media' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-3', 'featured' => false, 'extra' => null],
                    'seo-sem' => ['span' => 'lg:col-span-2', 'order' => 'lg:order-4', 'featured' => true, 'badge' => __('messages.services_page.badges.most_requested'), 'extra' => __('messages.services_page.featured_extra.seo-sem')],

                    // Row 3 (2 + 1)
                    'google-ads' => ['span' => 'lg:col-span-2', 'order' => 'lg:order-5', 'featured' => true, 'badge' => __('messages.services_page.badges.performance_pick'), 'extra' => __('messages.services_page.featured_extra.google-ads')],
                    'ecommerce' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-6', 'featured' => false, 'extra' => null],

                    // Row 4 (1 + 2)
                    'digital-marketing' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-7', 'featured' => false, 'extra' => null],
                    'branding' => ['span' => 'lg:col-span-2', 'order' => 'lg:order-8', 'featured' => true, 'badge' => __('messages.services_page.badges.premium_choice'), 'extra' => __('messages.services_page.featured_extra.branding') ],

                    // Row 5 (1 + 1 + 1)
                    'optimization' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-9', 'featured' => false, 'extra' => null],
                    'shopify' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-10', 'featured' => false, 'extra' => null],
                    'hosting' => ['span' => 'lg:col-span-1', 'order' => 'lg:order-11', 'featured' => false, 'extra' => null],
                ];
                $layout = $layoutMap[$svcSlug] ?? ['span' => 'lg:col-span-1', 'order' => 'lg:order-99', 'featured' => false, 'badge' => null, 'extra' => null];
                $isFeatured = $layout['featured'];
                $featuredBadge = $layout['badge'] ?? null;
                $svcDesc = $baseDesc . (($isFeatured && !empty($layout['extra'])) ? ' ' . $layout['extra'] : '');
                $cardClass = $layout['span'] . ' ' . $layout['order'];
                $visibleBenefits = array_slice($svcBenefits, 0, 3);
                $imageWrapClass = 'relative overflow-hidden bg-neutral-100 h-64 md:h-72 lg:h-80';
                $imageObjectClass = 'w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500';
            @endphp
            <article class="group {{ $cardClass }} flex flex-col min-h-[560px] lg:min-h-[620px] bg-white border border-neutral-200 rounded-3xl overflow-hidden hover:shadow-xl hover:border-criazo-primary/30 smooth-transition">
                @if($svcImage)
                <div class="{{ $imageWrapClass }}">
                    <img src="{{ $svcImage }}"
                         alt="{{ $svcAlt }}"
                         class="{{ $imageObjectClass }}"
                         width="800"
                         height="450"
                         loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                         @if($loop->first) fetchpriority="high" @endif>
                    @if($isFeatured && !empty($featuredBadge))
                    <span class="absolute top-3 left-3 px-3 py-1.5 rounded-full bg-white/95 text-[11px] font-semibold uppercase tracking-label text-criazo-primary shadow-sm">
                        {{ $featuredBadge }}
                    </span>
                    @endif
                </div>
                @endif

                <div class="flex flex-col flex-1 p-6">
                    <h3 class="type-card-title mb-2 group-hover:text-criazo-primary smooth-transition">{{ $svcName }}</h3>
                    @if($svcHook)
                    <p class="text-neutral-800 text-sm font-semibold mb-2">{{ $svcHook }}</p>
                    @endif
                    <p class="text-neutral-500 text-sm leading-[1.43] tracking-body mb-5 flex-1">{{ $svcDesc }}</p>

                    @if(count($visibleBenefits) > 0)
                        @if($isFeatured)
                        <p class="mb-5 text-[13px] text-neutral-600 leading-[1.43] tracking-body">
                            @foreach($visibleBenefits as $f)
                                {{ is_array($f) ? ($f['title'] ?? '') : $f }}@if(!$loop->last) <span class="text-neutral-300">·</span> @endif
                            @endforeach
                        </p>
                        @else
                        <ul class="mb-5 space-y-1.5">
                            @foreach($visibleBenefits as $f)
                            <li class="type-card-body">
                                {{ is_array($f) ? ($f['title'] ?? '') : $f }}
                            </li>
                            @endforeach
                        </ul>
                        @endif
                    @endif

                    <div class="flex gap-3 pt-3 border-t border-neutral-100">
                        <a href="{{ $localizedRoute('services.show', ['slug' => $svcSlug]) }}"
                           class="flex-1 inline-flex items-center justify-center px-4 py-2.5 bg-criazo-primary text-white rounded-full text-sm font-semibold hover:bg-criazo-hover smooth-transition">
                            {{ $svcPrimaryCta }}
                        </a>
                        <a href="{{ $localizedRoute('calculator.index') }}?service={{ $svcSlug }}"
                           class="inline-flex items-center px-4 py-2.5 border border-neutral-200 text-neutral-700 rounded-full text-sm font-medium hover:border-criazo-primary hover:text-criazo-primary smooth-transition">
                            {{ __('messages.service_detail.get_estimate') }}
                        </a>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════════════════════════════════════════════════
     WHY CRIAZO — Light teal section
═══════════════════════════════════════════════════════════ --}}
<section class="bg-[#ecf4f5] py-20 lg:py-28" aria-labelledby="why-criazo-heading">
    <div class="site-container">

        <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-start mb-14">
            <div>
                <p class="type-eyebrow-label text-criazo-primary mb-4">{{ __('messages.services_page.why.badge') }}</p>
                <h2 id="why-criazo-heading" class="section-intro__title">{{ __('messages.services_page.why.title') }}</h2>
            </div>
            <div>
                <p class="section-intro__desc">{{ __('messages.services_page.why.description') }}</p>
            </div>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            <div class="bg-white border border-neutral-200 rounded-2xl p-6 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-criazo-primary/10 flex items-center justify-center mb-5">
                    <svg class="w-5 h-5 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                </div>
                <h3 class="font-semibold text-neutral-900 mb-2">{{ __('messages.services_page.why.cards.execution_speed.title') }}</h3>
                <p class="type-card-body">{{ __('messages.services_page.why.cards.execution_speed.description') }}</p>
            </div>
            <div class="bg-white border border-neutral-200 rounded-2xl p-6 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-criazo-primary/10 flex items-center justify-center mb-5">
                    <svg class="w-5 h-5 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                </div>
                <h3 class="font-semibold text-neutral-900 mb-2">{{ __('messages.services_page.why.cards.roi_first.title') }}</h3>
                <p class="type-card-body">{{ __('messages.services_page.why.cards.roi_first.description') }}</p>
            </div>
            <div class="bg-white border border-neutral-200 rounded-2xl p-6 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-criazo-primary/10 flex items-center justify-center mb-5">
                    <svg class="w-5 h-5 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <h3 class="font-semibold text-neutral-900 mb-2">{{ __('messages.services_page.why.cards.specialist_team.title') }}</h3>
                <p class="type-card-body">{{ __('messages.services_page.why.cards.specialist_team.description') }}</p>
            </div>
            <div class="bg-white border border-neutral-200 rounded-2xl p-6 shadow-sm">
                <div class="w-10 h-10 rounded-xl bg-criazo-primary/10 flex items-center justify-center mb-5">
                    <svg class="w-5 h-5 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                </div>
                <h3 class="font-semibold text-neutral-900 mb-2">{{ __('messages.services_page.why.cards.long_term.title') }}</h3>
                <p class="type-card-body">{{ __('messages.services_page.why.cards.long_term.description') }}</p>
            </div>
        </div>
    </div>
</section>

<section class="bg-white py-20 lg:py-24 border-b border-neutral-100" aria-labelledby="how-it-works-heading">
    <div class="site-container">
        <div class="mb-12">
            <p class="type-eyebrow-label text-criazo-primary mb-4">{{ __('messages.services_page.how.badge') }}</p>
            <h2 id="how-it-works-heading" class="section-intro__title">{{ __('messages.services_page.how.title') }}</h2>
        </div>
        <div class="grid md:grid-cols-3 gap-6">
            <article class="border border-neutral-200 rounded-2xl p-6">
                <p class="type-eyebrow-label text-criazo-primary mb-3">{{ __('messages.services_page.how.steps.analyze.label') }}</p>
                <h3 class="type-card-title mb-2">{{ __('messages.services_page.how.steps.analyze.title') }}</h3>
                <p class="text-neutral-600 text-sm">{{ __('messages.services_page.how.steps.analyze.description') }}</p>
            </article>
            <article class="border border-neutral-200 rounded-2xl p-6">
                <p class="type-eyebrow-label text-criazo-primary mb-3">{{ __('messages.services_page.how.steps.strategy.label') }}</p>
                <h3 class="type-card-title mb-2">{{ __('messages.services_page.how.steps.strategy.title') }}</h3>
                <p class="text-neutral-600 text-sm">{{ __('messages.services_page.how.steps.strategy.description') }}</p>
            </article>
            <article class="border border-neutral-200 rounded-2xl p-6">
                <p class="type-eyebrow-label text-criazo-primary mb-3">{{ __('messages.services_page.how.steps.execute.label') }}</p>
                <h3 class="type-card-title mb-2">{{ __('messages.services_page.how.steps.execute.title') }}</h3>
                <p class="text-neutral-600 text-sm">{{ __('messages.services_page.how.steps.execute.description') }}</p>
            </article>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════
     SERVICE CATEGORIES NAV — Clean navigation by category
═══════════════════════════════════════════════════════════ --}}
<section class="bg-white py-20 lg:py-24 border-b border-neutral-100" aria-labelledby="categories-heading">
    <div class="site-container">

        <div class="mb-14">
            <p class="type-eyebrow-label text-criazo-primary mb-4">{{ __('messages.services.development') }} · {{ __('messages.services.marketing') }} · {{ __('messages.services.strategy') }}</p>
            <h2 id="categories-heading" class="section-intro__title">{{ __('messages.services.categories_title') }}</h2>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
            {{-- Development --}}
            <div>
                <div class="flex items-center gap-3 mb-6 pb-4 border-b border-neutral-200">
                    <div class="w-9 h-9 rounded-xl bg-criazo-primary flex items-center justify-center">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
                    </div>
                    <h3 class="font-semibold text-neutral-900 text-lg">{{ __('messages.services.development') }}</h3>
                </div>
                <nav aria-label="{{ __('messages.services.aria_development_services') }}">
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'web-development']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.web_development') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'ecommerce']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.ecommerce_solutions') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'hosting']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.managed_hosting') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                    </ul>
                </nav>
            </div>

            {{-- Marketing --}}
            <div>
                <div class="flex items-center gap-3 mb-6 pb-4 border-b border-neutral-200">
                    <div class="w-9 h-9 rounded-xl bg-criazo-primary flex items-center justify-center">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"/></svg>
                    </div>
                    <h3 class="font-semibold text-neutral-900 text-lg">{{ __('messages.services.marketing') }}</h3>
                </div>
                <nav aria-label="{{ __('messages.services.aria_marketing_services') }}">
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'digital-marketing']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.digital_marketing') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'seo-sem']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.seo_sem') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'social-media']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.social_media') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'paid-traffic']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.service_detail.paid_traffic_management') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                    </ul>
                </nav>
            </div>

            {{-- Strategy --}}
            <div>
                <div class="flex items-center gap-3 mb-6 pb-4 border-b border-neutral-200">
                    <div class="w-9 h-9 rounded-xl bg-criazo-primary flex items-center justify-center">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                    </div>
                    <h3 class="font-semibold text-neutral-900 text-lg">{{ __('messages.services.strategy') }}</h3>
                </div>
                <nav aria-label="{{ __('messages.services.aria_strategy_services') }}">
                    <ul class="space-y-3">
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'branding']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.branding_naming') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                        <li>
                            <a href="{{ $localizedRoute('services.show', ['slug' => 'optimization']) }}" class="group flex items-center justify-between p-3 rounded-xl hover:bg-neutral-50 smooth-transition">
                                <span class="font-medium text-neutral-800 group-hover:text-criazo-primary smooth-transition text-sm">{{ __('messages.services.optimization_growth') }}</span>
                                <svg class="w-4 h-4 text-neutral-300 group-hover:text-criazo-primary smooth-transition" 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>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════════════════════════════════════════════════
     FINAL CTA — Light teal
═══════════════════════════════════════════════════════════ --}}
<section class="bg-[#ecf4f5] py-20 lg:py-28" aria-labelledby="cta-heading">
    <div class="site-container max-w-[800px] text-center">
        <p class="type-eyebrow-label text-criazo-primary mb-6">{{ __('messages.services_page.cta.badge') }}</p>
        <h2 id="cta-heading" class="section-intro__title mb-6">{{ __('messages.services_page.cta.title') }}</h2>
        <p class="text-neutral-600 text-lg mb-12 max-w-xl mx-auto">{{ __('messages.services_page.cta.description') }}</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 gap-2 px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-lg shadow-criazo-primary/20">
                {{ __('messages.services_page.cta.primary') }}
                <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>
            <a href="{{ $localizedRoute('calculator.index') }}"
               class="inline-flex items-center gap-2 px-8 py-4 bg-white border border-neutral-300 text-neutral-900 rounded-full font-semibold hover:border-criazo-primary hover:text-criazo-primary smooth-transition">
                {{ __('messages.services_page.cta.secondary') }}
            </a>
        </div>

        <p class="mt-8 text-neutral-500 text-sm">{{ __('messages.services_page.cta.reassurance') }}</p>
    </div>
</section>

</article>
@push('styles')
<style>
    /* Hero Gradient Background - Light Mode */
    .hero-gradient {
        background: linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%);
    }
</style>
@endpush
@include('components.sticky-cta-bar', [
    'stickyCtaTitle' => __('messages.services.ready_transform'),
    'stickyCtaContactUrl' => $localizedRoute('contact.index'),
    'stickyCtaSimulateUrl' => $localizedRoute('calculator.index'),
])

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

@endsection