@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/portfolio/promoto-service/ux-ui-web-development-hero-developed-by-criazo-for-promoto-service.webp');
@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 INDEX: Dynamic service groups with subservice links
═══════════════════════════════════════════════════════════ --}}
@php
    $serviceGroups = $megaNavData['serviceGroups'] ?? \App\Helpers\DynamicMegamenuNavData::prepare()['serviceGroups'] ?? [];
    $serviceIndexLocale = in_array($locale, ['en', 'us', 'pt', 'br', 'es', 'fr'], true) ? $locale : 'en';
    $serviceIndexImages = [
        'web-development' => 'images/portfolio/promoto-service/ux-ui-web-development-hero-developed-by-criazo-for-promoto-service.webp',
        'ecommerce' => 'images/portfolio/demace/ecommerce-hero-developed-by-criazo-for-demace.webp',
        'performance-marketing' => 'images/portfolio/digital-marketing/strategic-meta-ads-tiktok-ads-linkedin-ads-campaigns.jpg',
        'branding-creative' => 'images/portfolio/vovo-que-fez/brand-identity-hero-developed-by-criazo-for-vovo-que-fez.webp',
        'social-media' => 'images/portfolio/grafica-alcalima/social-media-paid-traffic-hero-developed-by-criazo-for-grafica-alcalima.webp',
        'growth-optimization' => 'images/portfolio/zaplead/form-conversion-optimization-developed-by-criazo-for-zaplead.webp',
    ];
    $serviceIndexCopy = [
        'en' => [
            'web-development' => ['desc' => 'Websites, landing pages and stores built to explain the offer clearly, generate qualified leads and turn more visitors into customers.', 'line' => 'Built to bring more enquiries, calls and sales opportunities from the traffic you already have and the traffic you want to win.'],
            'ecommerce' => ['desc' => 'Online stores shaped around product clarity, trust, checkout confidence and repeat purchases.', 'line' => 'Designed to help shoppers understand the product, trust the business and complete the purchase with less friction.'],
            'performance-marketing' => ['desc' => 'Search and ad systems focused on demand, lead quality, stronger conversion and measurable revenue growth.', 'line' => 'Planned to attract buyers with intent, convert them on better pages and show which campaigns create real opportunities.'],
            'branding-creative' => ['desc' => 'Brand, identity and creative work that makes the business easier to recognise, trust and choose.', 'line' => 'Created to help customers understand the value faster and remember the business when they are ready to buy.'],
            'social-media' => ['desc' => 'Social media planned with commercial purpose: more visibility, stronger trust and more people ready to contact the business.', 'line' => 'Built to turn attention into demand, demand into conversations and conversations into sales opportunities.'],
            'growth-optimization' => ['desc' => 'Conversion, CRM, email and automation systems that help more existing interest become customers and repeat revenue.', 'line' => 'Focused on making every visit, lead and customer relationship more valuable for the business.'],
        ],
        'us' => [
            'web-development' => ['desc' => 'Websites, landing pages and stores built to explain the offer clearly, generate qualified leads and turn more visitors into customers.', 'line' => 'Built to bring more enquiries, calls and sales opportunities from the traffic you already have and the traffic you want to win.'],
            'ecommerce' => ['desc' => 'Online stores shaped around product clarity, trust, checkout confidence and repeat purchases.', 'line' => 'Designed to help shoppers understand the product, trust the business and complete the purchase with less friction.'],
            'performance-marketing' => ['desc' => 'Search and ad systems focused on demand, lead quality, stronger conversion and measurable revenue growth.', 'line' => 'Planned to attract buyers with intent, convert them on better pages and show which campaigns create real opportunities.'],
            'branding-creative' => ['desc' => 'Brand, identity and creative work that makes the business easier to recognize, trust and choose.', 'line' => 'Created to help customers understand the value faster and remember the business when they are ready to buy.'],
            'social-media' => ['desc' => 'Social media planned with commercial purpose: more visibility, stronger trust and more people ready to contact the business.', 'line' => 'Built to turn attention into demand, demand into conversations and conversations into sales opportunities.'],
            'growth-optimization' => ['desc' => 'Conversion, CRM, email and automation systems that help more existing interest become customers and repeat revenue.', 'line' => 'Focused on making every visit, lead and customer relationship more valuable for the business.'],
        ],
        'pt' => [
            'web-development' => ['desc' => 'Websites, landing pages e lojas criadas para explicar a oferta, gerar contactos qualificados e transformar mais visitantes em clientes.', 'line' => 'Pensado para trazer mais pedidos, chamadas e oportunidades comerciais a partir do tráfego que já existe e do tráfego que a empresa quer conquistar.'],
            'ecommerce' => ['desc' => 'Lojas online organizadas para valorizar os produtos, gerar confiança, facilitar a compra e aumentar vendas recorrentes.', 'line' => 'Desenhado para ajudar o cliente a perceber o produto, confiar na marca e concluir a compra com menos fricção.'],
            'performance-marketing' => ['desc' => 'Sistemas de pesquisa e anúncios focados em procura, qualidade dos leads, conversão e crescimento mensurável.', 'line' => 'Planeado para atrair compradores com intenção, converter em páginas melhores e mostrar que campanhas criam oportunidades reais.'],
            'branding-creative' => ['desc' => 'Marca, identidade e criatividade para tornar o negócio mais fácil de reconhecer, confiar e escolher.', 'line' => 'Criado para ajudar os clientes a perceber o valor mais depressa e lembrar a empresa quando estão prontos para comprar.'],
            'social-media' => ['desc' => 'Redes sociais com objetivo comercial: mais visibilidade, mais confiança e mais pessoas prontas para contactar.', 'line' => 'Feito para transformar atenção em procura, procura em conversas e conversas em oportunidades de venda.'],
            'growth-optimization' => ['desc' => 'Conversão, CRM, email e automações para transformar mais interesse em clientes e receita recorrente.', 'line' => 'Focado em tornar cada visita, lead e relação com o cliente mais valiosa para o negócio.'],
        ],
        'br' => [
            'web-development' => ['desc' => 'Sites, landing pages e lojas criadas para explicar a oferta, gerar leads qualificados e transformar mais visitantes em clientes.', 'line' => 'Pensado para trazer mais orçamentos, chamadas e oportunidades comerciais a partir do tráfego que já existe e do tráfego que a empresa quer conquistar.'],
            'ecommerce' => ['desc' => 'Lojas online organizadas para valorizar os produtos, gerar confiança, facilitar a compra e aumentar vendas recorrentes.', 'line' => 'Desenhado para ajudar o cliente a entender o produto, confiar na marca e finalizar a compra com menos fricção.'],
            'performance-marketing' => ['desc' => 'Sistemas de busca e anúncios focados em demanda, qualidade dos leads, conversão e crescimento mensurável.', 'line' => 'Planejado para atrair compradores com intenção, converter em páginas melhores e mostrar quais campanhas criam oportunidades reais.'],
            'branding-creative' => ['desc' => 'Marca, identidade e criatividade para tornar o negócio mais fácil de reconhecer, confiar e escolher.', 'line' => 'Criado para ajudar os clientes a entender o valor mais rápido e lembrar da empresa quando estiverem prontos para comprar.'],
            'social-media' => ['desc' => 'Redes sociais com objetivo comercial: mais visibilidade, mais confiança e mais pessoas prontas para chamar.', 'line' => 'Feito para transformar atenção em demanda, demanda em conversas e conversas em oportunidades de venda.'],
            'growth-optimization' => ['desc' => 'Conversão, CRM, email e automações para transformar mais interesse em clientes e receita recorrente.', 'line' => 'Focado em tornar cada visita, lead e relacionamento com o cliente mais valioso para o negócio.'],
        ],
        'es' => [
            'web-development' => ['desc' => 'Sitios web, landing pages y tiendas creadas para explicar la oferta, generar leads cualificados y convertir más visitantes en clientes.', 'line' => 'Pensado para traer más consultas, llamadas y oportunidades comerciales desde el tráfico actual y el tráfico que la empresa quiere ganar.'],
            'ecommerce' => ['desc' => 'Tiendas online orientadas a claridad de producto, confianza, compra sencilla y ventas recurrentes.', 'line' => 'Diseñado para que el cliente entienda el producto, confíe en la marca y complete la compra con menos fricción.'],
            'performance-marketing' => ['desc' => 'Sistemas de búsqueda y anuncios enfocados en demanda, calidad de leads, conversión y crecimiento medible.', 'line' => 'Planificado para atraer compradores con intención, convertirlos en mejores páginas y mostrar qué campañas crean oportunidades reales.'],
            'branding-creative' => ['desc' => 'Marca, identidad y creatividad para que el negocio sea más fácil de reconocer, confiar y elegir.', 'line' => 'Creado para que los clientes entiendan el valor más rápido y recuerden la empresa cuando estén listos para comprar.'],
            'social-media' => ['desc' => 'Redes sociales con propósito comercial: más visibilidad, más confianza y más personas listas para contactar.', 'line' => 'Hecho para convertir atención en demanda, demanda en conversaciones y conversaciones en oportunidades de venta.'],
            'growth-optimization' => ['desc' => 'Conversión, CRM, email y automatización para convertir más interés existente en clientes e ingresos recurrentes.', 'line' => 'Enfocado en hacer que cada visita, lead y relación con el cliente valga más para el negocio.'],
        ],
        'fr' => [
            'web-development' => ['desc' => 'Sites web, landing pages et boutiques conçus pour clarifier l’offre, générer des leads qualifiés et convertir plus de visiteurs en clients.', 'line' => 'Pensé pour créer plus de demandes, d’appels et d’opportunités commerciales avec le trafic actuel et le trafic à gagner.'],
            'ecommerce' => ['desc' => 'Boutiques en ligne construites autour de la clarté produit, de la confiance, du passage à l’achat et des ventes récurrentes.', 'line' => 'Conçu pour aider les acheteurs à comprendre le produit, faire confiance à l’entreprise et acheter avec moins de friction.'],
            'performance-marketing' => ['desc' => 'Systèmes search et publicitaires centrés sur la demande, la qualité des leads, la conversion et la croissance mesurable.', 'line' => 'Planifié pour attirer des acheteurs intentionnistes, les convertir sur de meilleures pages et identifier les campagnes rentables.'],
            'branding-creative' => ['desc' => 'Marque, identité et création pour rendre l’entreprise plus reconnaissable, plus crédible et plus facile à choisir.', 'line' => 'Créé pour aider les clients à comprendre la valeur plus vite et se souvenir de l’entreprise au moment d’acheter.'],
            'social-media' => ['desc' => 'Réseaux sociaux avec objectif commercial: plus de visibilité, plus de confiance et plus de personnes prêtes à contacter.', 'line' => 'Construit pour transformer l’attention en demande, la demande en conversations et les conversations en opportunités de vente.'],
            'growth-optimization' => ['desc' => 'Conversion, CRM, email et automatisations pour transformer plus d’intérêt existant en clients et revenus récurrents.', 'line' => 'Centré sur la valeur de chaque visite, lead et relation client pour l’entreprise.'],
        ],
    ];
@endphp
@if(!empty($serviceGroups))
<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="services-index">
            @foreach($serviceGroups as $group)
            @php
                $groupId = $group['id'] ?? '';
                $groupCopy = $serviceIndexCopy[$serviceIndexLocale][$groupId] ?? $serviceIndexCopy['en'][$groupId] ?? ['desc' => '', 'line' => ''];
                $groupImage = asset($serviceIndexImages[$groupId] ?? 'images/portfolio/promoto-service/ux-ui-web-development-hero-developed-by-criazo-for-promoto-service.webp');
                $groupItems = array_values(array_filter(array_merge($group['discover'] ?? [], $group['more'] ?? []), fn ($item) => !empty($item['label']) && !empty($item['href'])));
            @endphp
            <article class="services-index__row">
                <div class="services-index__title">
                    <a href="{{ $group['href'] }}" class="services-index__main-link">
                        <h2>{{ $group['label'] }}</h2>
                    </a>
                    <p>{{ $groupCopy['desc'] }}</p>
                </div>

                <a href="{{ $group['href'] }}" class="services-index__media" aria-label="{{ $group['label'] }}">
                    <img src="{{ $groupImage }}"
                         alt="{{ $group['label'] }} services by Criazo"
                         width="720"
                         height="640"
                         loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                         @if($loop->first) fetchpriority="high" @endif>
                </a>

                <nav class="services-index__nav" aria-label="{{ $group['label'] }}">
                    @foreach(array_slice($groupItems, 0, 8) as $item)
                        <a href="{{ $item['href'] }}" class="services-index__service">
                            <span>{{ $item['label'] }}</span>
                            <small>{{ $groupCopy['line'] }}</small>
                        </a>
                    @endforeach
                </nav>
            </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%);
    }

    .services-index {
        display: grid;
        gap: clamp(3.25rem, 7vw, 6.5rem);
    }

    .services-index__row {
        display: grid;
        grid-template-columns: minmax(13rem, .72fr) minmax(17rem, .9fr) minmax(17rem, 1fr);
        align-items: center;
        gap: clamp(2rem, 5vw, 4.75rem);
        padding: clamp(1.5rem, 3vw, 2.4rem) 0;
        border-top: 0px solid rgba(15, 23, 42, .1);
    }

    .services-index__title h2 {
        margin: 0;
        max-width: 8.5ch;
        color: #101828;
        font-size: clamp(2.05rem, 3.5vw, 4.35rem);
        font-weight: 700;
        line-height: .92;
        letter-spacing: -.06em;
    }

    .services-index__title p {
        margin: 1.2rem 0 0;
        max-width: 27rem;
        color: #4b5563;
        font-size: clamp(.95rem, 1.2vw, 1.08rem);
        line-height: 1.45;
        letter-spacing: -.025em;
    }

    .services-index__main-link {
        display: inline-block;
        text-decoration: none;
    }

    .services-index__main-link:hover h2 {
        color: var(--color-criazo-primary, #08aaa5);
    }

    .services-index__media {
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 10px;
        background: #eef3f4;
    }

    .services-index__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

    .services-index__media:hover img {
        transform: scale(1.035);
    }

    .services-index__nav {
        display: grid;
        align-content: center;
    }

    .services-index__service {
        display: grid;
        gap: .48rem;
        padding: .78rem 0;
        color: #101828;
        text-decoration: none;
        border-bottom: 0px solid rgba(15, 23, 42, .12);
    }

    .services-index__service span {
        font-size: .98rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -.035em;
    }

    .services-index__service small {
        max-width: 31rem;
        color: #667085;
        font-size: .82rem;
        line-height: 1.35;
        letter-spacing: -.02em;
    }

    .services-index__service:hover span {
        color: var(--color-criazo-primary, #08aaa5);
    }

    @media (max-width: 1023px) {
        .services-index__row {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.6rem;
        }

        .services-index__title h2 {
            max-width: 12ch;
        }

        .services-index__media {
            aspect-ratio: 16 / 10;
        }
    }

    @media (max-width: 640px) {
        .services-index {
            gap: 3.25rem;
        }

        .services-index__row {
            padding: 1.25rem 0;
        }

        .services-index__title h2 {
            font-size: clamp(2.3rem, 13vw, 3.2rem);
        }
    }
</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