@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;

    $locale = app()->getLocale();
    $homeContent = $homeContent ?? \App\Helpers\MarketContent::home($locale);
    $homeText = function (string $key, array $replace = []) use ($homeContent) {
        $value = data_get($homeContent, $key, data_get($homeContent, 'copy.' . $key, ''));
        foreach ($replace as $placeholder => $replacement) {
            $value = str_replace(':' . $placeholder, $replacement, (string) $value);
        }
        return $value;
    };
    $pageSeo = $homeContent['metadata'] ?? [];

    // 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 service/industry URLs (translates English slug to current locale)
    $getLocalizedSlug = function($slug) use ($locale) {
        return \App\Helpers\SeoHelper::getTranslatedSlug($slug, $locale);
    };
@endphp

@section('title', $pageSeo['title'])
@section('meta_description', $pageSeo['description'])
@section('meta_keywords', $pageSeo['keywords'])
@section('og_image', isset($heroServices[0]['image']) ? $heroServices[0]['image'] : asset($pageSeo['image'] ?? 'images/og-home.jpg'))

@push('head')
{{-- Geo meta is output by layout (default PT) --}}

{{-- Preload LCP Image for Performance --}}
@if(isset($heroServices[0]['image']))
<link rel="preload" as="image" href="{{ $heroServices[0]['image'] }}" fetchpriority="high">
@endif
@endpush

@push('schema')
{{-- LocalBusiness Schema for Homepage --}}
<script type="application/ld+json">
{!! SeoHelper::generateLocalBusinessSchema() !!}
</script>

{{-- FAQ Schema --}}
@php
$homeFaqs = [
    ...array_slice($homeContent['faqs']['items'] ?? [], 0, 4),
];
@endphp
<script type="application/ld+json">
{!! SeoHelper::generateFaqSchema($homeFaqs, \App\Helpers\SeoHelper::getCanonicalUrl()) !!}
</script>

{{-- WebPage Schema --}}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "@id": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}/#webpage",
  "url": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}",
  "name": "{{ $pageSeo['title'] }}",
  "description": "{{ $pageSeo['description'] }}",
  "isPartOf": {
    "@id": "{{ config('seo.site_url') }}/#website"
  },
  "about": {
    "@id": "{{ config('seo.site_url') }}/#organization"
  },
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}",
  "primaryImageOfPage": {
    "@type": "ImageObject",
    "url": "{{ isset($heroServices[0]['image']) ? $heroServices[0]['image'] : asset('images/og-home.jpg') }}"
  },
  "datePublished": "2016-01-01",
  "dateModified": "{{ date('Y-m-d') }}"
}
</script>
@endpush

@section('content')

{{-- Hero Section - Clean Mobile-First Design --}}
<section class="home-hero-section relative md:min-h-screen flex flex-col justify-start md:justify-center overflow-hidden pb-3 md:pt-6 md:pb-20 hero-gradient" aria-labelledby="hero-heading">

    <div class="site-container">
        {{-- Hero Content - Mobile-first responsive grid --}}
        <div class="home-hero-copy-grid grid grid-cols-1 lg:grid-cols-[minmax(0,820px)_minmax(320px,440px)] gap-y-1 sm:gap-y-2 lg:gap-y-0 lg:gap-x-24 xl:gap-x-32 mb-3.5 md:mb-9 items-start justify-between md:pt-2">
            {{-- Left: Title --}}
            <div class="animate-slide-up min-w-0 max-w-[820px]">
                <h1 id="hero-heading" class="text-2xl sm:text-3xl md:text-4xl lg:text-4xl font-semibold text-slate-900 leading-tight mb-0 md:mb-2">
                    <span class="text-criazo-primary">{{ $homeText('hero.headline_1') }}</span><br>
                    {{ $homeText('hero.headline_2') }}
                </h1>
            </div>

            {{-- Right: Description & CTA (aligned to bottom on desktop) --}}
            <div class="animate-slide-up animation-delay-200 min-w-0 lg:self-end lg:justify-self-end lg:w-full max-w-[440px]">
                <p class="hero-subcopy text-slate-600 mb-2.5 md:mb-6">
                    {{ $homeText('hero.subheadline') }}
                </p>
                @if(false)
                {{-- Prominent CTAs - Desktop --}}
                <div class="hidden md:flex flex-wrap items-center gap-4">
                    <a href="{{ $localizedRoute('contact.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-criazo-primary text-white rounded-full text-base font-semibold hover:bg-criazo-hover smooth-transition shadow-lg shadow-criazo-primary/25 hover:shadow-xl hover:shadow-criazo-primary/30"
                       title="{{ $homeText('aria.schedule_consultation') }}">
                        {{ $homeText('hero.primary_cta') }}
                        <svg class="w-5 h-5" 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('portfolio.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-slate-900 rounded-full text-base font-semibold border-2 border-slate-200 hover:border-criazo-primary hover:text-criazo-primary smooth-transition shadow-md"
                       title="{{ $homeText('aria.view_all_projects') }}">
                        {{ $homeText('hero.secondary_cta') }}
                    </a>
                </div>
                {{-- Prominent CTAs - Mobile --}}
                <div class="flex flex-wrap items-center gap-3 md:hidden">
                    <a href="{{ $localizedRoute('contact.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-criazo-primary text-white rounded-full text-base font-semibold hover:bg-criazo-hover smooth-transition shadow-lg shadow-criazo-primary/25"
                       title="{{ $homeText('aria.schedule_consultation') }}">
                        {{ $homeText('hero.primary_cta') }}
                        <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="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                    <a href="{{ $localizedRoute('portfolio.index') }}"
                       class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-white text-slate-900 rounded-full text-base font-semibold border-2 border-slate-200 hover:border-criazo-primary hover:text-criazo-primary smooth-transition"
                       title="{{ $homeText('aria.view_all_projects') }}">
                        {{ $homeText('hero.secondary_cta') }}
                    </a>
                </div>
                @endif
            </div>
        </div>

        {{-- Expandable Sliding Portfolio Cards with Images - Full Width --}}
        <div class="animate-slide-up animation-delay-400">
            {{-- Desktop: Flex layout, Mobile: Horizontal scroll --}}
            <div id="hero-cards-slider" class="home-hero-cards hero-cards-slider hide-scrollbar pb-4 md:pb-0 h-[440px] sm:h-[500px] md:h-[560px] lg:h-[640px] overflow-x-auto md:overflow-visible snap-x snap-mandatory md:snap-none" data-hero-cards-slider data-rotate-ms="6000" role="region" aria-label="{{ $homeText('aria.featured_services') }}">
                @foreach($heroServices as $index => $card)
                @php
                    $benefits = $card['benefits'] ?? [];
                @endphp
                <article class="hero-card group bg-slate-200 snap-center {{ $index === 0 ? 'is-expanded is-revealed' : '' }}"
                     data-index="{{ $index }}"
                     aria-labelledby="hero-card-title-{{ $index }}">

                    <img src="{{ $card['image'] }}"
                         alt="{{ $card['alt_text'] ?? SeoHelper::generateImageAlt($card['title'], $homeText('alt_text.service_card_context'), $homeText('alt_text.author')) }}"
                         title="{{ SeoHelper::generateImageTitle($card['title'], $homeText('alt_text.portfolio_view')) }} {{ $homeText('alt_text.service') }} {{ $homeText('alt_text.details') }}"
                         loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                         decoding="{{ $index === 0 ? 'sync' : 'async' }}"
                         @if($index === 0) fetchpriority="high" @endif
                         width="800"
                         height="550"
                         sizes="(max-width: 640px) 280px, (max-width: 1024px) 400px, 600px">

                    <div class="hero-card__shade" aria-hidden="true"></div>
                    <div class="hero-card__shade-soft" aria-hidden="true"></div>

                    <div class="card-content-collapsed" aria-hidden="true">
                        <h3>{{ $card['title'] }}</h3>
                    </div>

                    <div class="card-content-expanded">
                        <div class="hero-card__layer hero-card__layer--1 mb-2">
                            <h2 id="hero-card-title-{{ $index }}" class="section-intro__title text-white mb-2">
                                {{ $card['title'] }}
                            </h2>
                            <p class="text-sm sm:text-base text-white/70 mb-3 line-clamp-2 max-w-lg">{{ $card['subtitle'] }}</p>
                        </div>

                        <div class="hero-card__layer hero-card__layer--2">
                            <p class="text-white/80 text-sm md:text-base leading-[1.43] tracking-body mb-5 max-w-xl">
                                {{ $card['description'] }}
                            </p>

                            <div class="hero-card__benefits">
                                @foreach($benefits as $benefit)
                                <span class="hero-card__benefit">
                                    <svg class="w-4 h-4 text-criazo-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                                    {{ $benefit }}
                                </span>
                                @endforeach
                            </div>
                        </div>

                        <div class="hero-card__layer hero-card__layer--3">
                            <a href="{{ $localizedRoute('services.show', ['slug' => $card['slug']]) }}"
                               class="hero-card__cta"
                               onclick="event.stopPropagation();"
                               title="{{ $homeText('aria.learn_service', ['service' => $card['title']]) }}">
                                {{ $homeText('copy.explore_service') }}
                                <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>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- Portfolio Showcase - Autoplay Slider with External Meta --}}
@if(isset($projects) && count($projects) > 0)
<section id="portfolio" class="home-portfolio-section pt-7 pb-20 md:py-24 bg-white overflow-hidden scroll-mt-24" aria-labelledby="portfolio-heading">
    <div class="site-container">
        {{-- Header --}}
        <div class="home-portfolio-intro flex flex-col md:flex-row md:items-end md:justify-between gap-6 md:gap-8 mb-4 md:mb-9">
            <div class="section-intro max-w-3xl">
                <p class="section-intro__eyebrow text-criazo-primary">{{ $homeText('portfolio.badge') }}</p>
                <h2 id="portfolio-heading" class="section-intro__title">
                    {{ $homeText('portfolio.title_1') }}<br class="hidden md:block"> {{ $homeText('portfolio.title_2') }}
                </h2>
                <p class="section-intro__desc">
                    {{ $homeText('portfolio.description') }}
                </p>
            </div>
            <a href="{{ $localizedRoute('portfolio.index') }}"
               class="text-criazo-primary hover:text-criazo-hover text-base font-semibold tracking-body smooth-transition hidden md:inline-flex items-center shrink-0 gap-1"
               title="{{ $homeText('aria.view_case_studies') }}">
                {{ $homeText('portfolio.view_all') }}
                <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="M9 5l7 7-7 7"/></svg>
            </a>
        </div>

        {{-- Portfolio Slider Container --}}
        <div class="relative" id="portfolio-slider-wrapper">
            {{-- Slider Wrapper --}}
            <div id="portfolio-slider">
                <div class="flex gap-4 md:gap-8 portfolio-slider-track smooth-transition py-2" style="transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
                    @foreach($projects as $index => $project)
                    @php
                        $projectTk = 'messages.portfolio_projects.' . str_replace('-', '_', $project['slug'] ?? '');
                        // Brand/project name: always use canonical name from data — never translate or re-case
                        $projectTitle = $project['title'] ?? '';
                        if (\App\Helpers\SeoHelper::requiresOwnPublicCopy($locale)) {
                            $projectCategory = $project['category'] ?? '';
                            $projectSubtitle = $project['hero']['subtitle'] ?? '';
                        } else {
                            $projectCategory = __($projectTk . '.category');
                            $projectCategory = ($projectCategory === $projectTk . '.category') ? ($project['category'] ?? '') : $projectCategory;
                            $projectSubtitle = __($projectTk . '.subtitle');
                            $projectSubtitle = ($projectSubtitle === $projectTk . '.subtitle') ? ($project['hero']['subtitle'] ?? '') : $projectSubtitle;
                        }
                    @endphp
                    <article class="portfolio-card group flex-shrink-0 w-[280px] md:w-[calc((100%-64px)/3)]" itemscope itemtype="https://schema.org/CreativeWork">
                        {{-- Image Card --}}
                        <a href="{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}"
                           class="portfolio-card__media"
                           title="{{ $homeText('aria.view_case_study', ['title' => $projectTitle]) }}">
                            <div class="portfolio-card__image-wrap hover:shadow-lg smooth-transition">
                                @if(isset($project['hero']['image']))
                                <img src="{{ $project['hero']['image'] }}"
                                     alt="{{ SeoHelper::generateImageAlt($projectTitle, $projectCategory ?: $homeText('alt_text.portfolio_project_context'), 'Criazo ' . $homeText('alt_text.portfolio_case_study')) }}"
                                     title="{{ SeoHelper::generateImageTitle($projectTitle, $homeText('alt_text.portfolio_view')) }}"
                                     class="w-full h-full object-cover group-hover:scale-105 smooth-transition duration-700"
                                     loading="lazy"
                                     decoding="async"
                                     width="400"
                                     height="300"
                                     sizes="(max-width: 768px) 280px, 350px"
                                     itemprop="image">
                                @else
                                <div class="w-full h-full bg-gradient-to-br from-criazo-primary/20 to-criazo-primary/40 flex items-center justify-center">
                                    <svg class="w-16 h-16 text-criazo-primary/50" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                                    </svg>
                                </div>
                                @endif
                            </div>
                        </a>

                        {{-- Meta Information Outside Card (for SEO) --}}
                        <div class="space-y-2">
                            {{-- Category (smaller, muted) --}}
                            @if($projectCategory)
                            <p class="portfolio-card__meta" itemprop="about">{{ $projectCategory }}</p>
                            @endif

                            {{-- Title (H3 for SEO) --}}
                            <h3 class="portfolio-card__title group-hover:text-criazo-primary smooth-transition" itemprop="name">
                                <a href="{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}"
                                   class="hover:text-inherit"
                                   title="{{ $homeText('aria.read_case_study', ['title' => $projectTitle]) }}">
                                    {{ $projectTitle }}
                                </a>
                            </h3>

                            {{-- Description: use project data only so brand/place names (e.g. Promoto Service, Odivelas) keep correct capitalization in all locales --}}
                            @php
                                $projectDescription = $project['hero']['description'] ?? $projectSubtitle ?? ($project['overview']['solution'] ?? null);
                            @endphp
                            @if($projectDescription)
                            <p class="portfolio-card__desc line-clamp-3" itemprop="description">{{ $projectDescription }}</p>
                            @else
                            <p class="portfolio-card__desc line-clamp-3" itemprop="description">{{ __('messages.portfolio.project_description_fallback', ['category' => strtolower($projectCategory ?: __('messages.portfolio.digital_solution'))]) }}</p>
                            @endif

                            <a href="{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}"
                               class="portfolio-card__cta group/link"
                               title="{{ $homeText('aria.view_case_study', ['title' => $projectTitle]) }}">
                                {{ $homeText('portfolio.view_project') }}
                                <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                        </div>
                        <meta itemprop="creator" content="{{ __('messages.brand_name') }}">
                    </article>
                    @endforeach
                </div>
            </div>

            {{-- Navigation Arrows --}}
            <button id="portfolio-prev"
                    class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center shadow-lg hover:bg-neutral-50 smooth-transition z-10 opacity-0 portfolio-controls"
                    aria-label="{{ $homeText('aria.previous_portfolio') }}">
                <svg class="w-5 h-5 text-neutral-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <button id="portfolio-next"
                    class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center shadow-lg hover:bg-neutral-50 smooth-transition z-10 opacity-0 portfolio-controls"
                    aria-label="{{ $homeText('aria.next_portfolio') }}">
                <svg class="w-5 h-5 text-neutral-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </div>

        {{-- Mobile CTA --}}
        <div class="text-center md:hidden mt-8">
            <a href="{{ $localizedRoute('portfolio.index') }}"
               class="inline-flex items-center px-6 py-3 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition"
               title="{{ $homeText('aria.view_all_projects') }}">
                {{ $homeText('portfolio.view_all_projects') }}
                <svg class="w-4 h-4 ml-2" 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>
        </div>
    </div>
</section>
@endif

{{-- Industries Highlights Carousel --}}
@php
    $localeBase = strtolower((string) \Illuminate\Support\Str::of((string) app()->getLocale())->before('_')->before('-'));
    $translateIndustryFallbackLabel = static function (string $label, string $locale): string {
        $trimmed = trim($label);
        if ($trimmed === '' || $locale === 'en') {
            return $trimmed;
        }
        $taxonomyTranslations = config("industry_taxonomy_translations.{$locale}", []);
        if (isset($taxonomyTranslations[$trimmed])) {
            return $taxonomyTranslations[$trimmed];
        }
        $slug = str_replace('-', '_', \Illuminate\Support\Str::slug($trimmed));
        $overrides = [
            'pt' => [
                'food_beverage' => 'Restauração e Bebidas',
                'home_local_services' => 'Serviços Locais e para Casa',
                'coffee_shops' => 'Cafetarias',
                'brunch_spots' => 'Espaços de brunch',
            ],
            'es' => [
                'food_beverage' => 'Restauración y Bebidas',
                'home_local_services' => 'Servicios Locales y del Hogar',
                'coffee_shops' => 'Cafeterías',
                'brunch_spots' => 'Espacios de brunch',
            ],
        ];
        return $overrides[$locale][$slug] ?? $trimmed;
    };
    $translateIndustryLabel = static function (?string $routeName, ?string $childSlug, string $fallbackLabel) use ($localeBase, $translateIndustryFallbackLabel): string {
        if (!is_string($routeName) || trim($routeName) === '') {
            return $translateIndustryFallbackLabel($fallbackLabel, $localeBase);
        }

        $base = str_replace('.', '_', preg_replace('/\.child$/', '', $routeName));
        $namespace = $childSlug !== null && trim($childSlug) !== ''
            ? $base . '_' . str_replace('-', '_', \Illuminate\Support\Str::slug($childSlug))
            : $base;
        $key = "messages.{$namespace}.hero_eyebrow";
        $translated = __($key);

        if ($translated !== $key && trim((string) $translated) !== '') {
            if (
                $localeBase !== 'en'
                && (
                    trim((string) $translated) === trim($fallbackLabel)
                    || \Illuminate\Support\Str::slug((string) $translated) === \Illuminate\Support\Str::slug($fallbackLabel)
                )
            ) {
                return $translateIndustryFallbackLabel($fallbackLabel, $localeBase);
            }
            return $translated;
        }
        return $translateIndustryFallbackLabel($fallbackLabel, $localeBase);
    };

    $industryCarouselItems = [];
    foreach (config('industry_taxonomy', []) as $section) {
        $routeName = $section['route'] ?? null;
        if (!is_string($routeName) || trim($routeName) === '') {
            continue;
        }
        $sectionLabel = $translateIndustryLabel($routeName, null, $section['label'] ?? 'Industry');
        $sectionNs = 'messages.' . str_replace('.', '_', $routeName);
        $sectionDescription = __($sectionNs . '.meta_description');
        if ($sectionDescription === $sectionNs . '.meta_description') {
            $sectionDescription = $homeText('industries.for_industry', ['industry' => $sectionLabel]);
        }

        $highlights = [];
        $childRoute = $section['child_route'] ?? null;
        foreach (array_slice($section['items'] ?? [], 0, 3) as $item) {
            if (is_string($item)) {
                $slug = \Illuminate\Support\Str::slug($item);
                $highlights[] = [
                    'slug' => $slug,
                    'label' => $translateIndustryLabel($childRoute, $slug, $item),
                ];
                continue;
            }
            if (!is_array($item)) {
                continue;
            }
            $slug = $item['child'] ?? \Illuminate\Support\Str::slug($item['label'] ?? '');
            $highlights[] = [
                'slug' => $slug,
                'label' => $translateIndustryLabel($childRoute, $slug, $item['label'] ?? ''),
            ];
        }

        $industryCarouselItems[] = [
            'label' => $sectionLabel,
            'route' => $routeName,
            'description' => \Illuminate\Support\Str::limit(strip_tags((string) $sectionDescription), 130),
            'highlights' => $highlights,
        ];
    }
@endphp
@if(!empty($industryCarouselItems))
<section id="industries" class="py-24 bg-neutral-50 overflow-hidden scroll-mt-24" aria-labelledby="industries-heading">
    <div class="site-container">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 md:gap-8 mb-8 md:mb-9">
            <div class="section-intro max-w-3xl">
                <h2 id="industries-heading" class="section-intro__title">
                    {{ $homeText('industries.title_1') }}<br class="hidden md:block"> {{ $homeText('industries.title_2') }}
                </h2>
                <p class="section-intro__desc">
                    {{ $homeText('industries.description') }}
                    <span class="font-semibold text-neutral-800">{{ $homeText('industries.description_2') }}</span>
                </p>
            </div>
            <a href="{{ $localizedRoute('services.all') }}"
               class="text-criazo-primary hover:text-criazo-hover text-base font-semibold tracking-body smooth-transition hidden md:inline-flex items-center shrink-0 gap-1">
                {{ $homeText('industries.view_all') }}
                <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="M9 5l7 7-7 7"/></svg>
            </a>
        </div>

        <div class="relative" id="industries-slider-wrapper">
            <div id="industries-slider" data-home-industries="v2">
                <div class="flex gap-4 md:gap-8 industries-slider-track smooth-transition py-2" style="transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
                    @foreach($industryCarouselItems as $industryCard)
                    <article class="industry-card group flex-shrink-0 w-[280px] md:w-[calc((100%-64px)/3)] border border-neutral-200 bg-white hover:shadow-md hover:-translate-y-0.5 smooth-transition">
                        <h3 class="industry-card__title group-hover:text-criazo-primary smooth-transition">
                            <a href="{{ $localizedRoute($industryCard['route']) }}" class="hover:text-inherit">{{ $industryCard['label'] }}</a>
                        </h3>
                        <p class="industry-card__desc line-clamp-3">{{ $industryCard['description'] }}</p>
                        <div class="industry-card__tags">
                            @foreach($industryCard['highlights'] as $highlight)
                            <span class="industry-card__tag">{{ $highlight['label'] }}</span>
                            @endforeach
                        </div>
                        <a href="{{ $localizedRoute($industryCard['route']) }}" class="industry-card__cta group/link">
                            {{ $homeText('nav.view_all') }}
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                            </svg>
                        </a>
                    </article>
                    @endforeach
                </div>
                <script>
                    (function () {
                        var root = document.getElementById('industries-slider');
                        if (!root) return;
                        root.querySelectorAll('article > div.flex.items-center.justify-between.mb-3').forEach(function (el) {
                            el.remove();
                        });
                    })();
                </script>
            </div>

            <button id="industries-prev"
                    class="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center shadow-lg hover:bg-neutral-50 smooth-transition z-10 opacity-0 industries-controls"
                    aria-label="{{ $homeText('aria.previous_portfolio') }}">
                <svg class="w-5 h-5 text-neutral-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <button id="industries-next"
                    class="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-10 h-10 rounded-full bg-white border border-neutral-200 flex items-center justify-center shadow-lg hover:bg-neutral-50 smooth-transition z-10 opacity-0 industries-controls"
                    aria-label="{{ $homeText('aria.next_portfolio') }}">
                <svg class="w-5 h-5 text-neutral-900" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </div>

        <div class="text-center md:hidden mt-8">
            <a href="{{ $localizedRoute('services.all') }}"
               class="inline-flex items-center px-6 py-3 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition">
                {{ $homeText('industries.view_all') }}
                <svg class="w-4 h-4 ml-2" 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>
        </div>
    </div>
</section>
@endif

{{-- How It Works - Hidden for now (not adding enough value). Re-enable by changing @if(false) to @if(true) --}}
@if(false)
<section class="py-16 lg:py-20 bg-neutral-50" aria-labelledby="process-heading">
    <div class="site-container">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-14">
            <div>
                <span class="inline-block text-xs font-semibold uppercase tracking-label text-criazo-primary mb-3">{{ $homeText('process.badge') }}</span>
                <h2 id="process-heading" class="section-intro__title">
                    {{ $homeText('process.title') }}
                </h2>
                <p class="section-intro__desc">
                    {{ $homeText('process.description') }}
                </p>
            </div>
        </div>

        <div class="relative" role="list">
            <div class="hidden md:block absolute top-[72px] left-0 right-0 h-0.5 bg-gradient-to-r from-criazo-primary/30 via-criazo-primary/60 to-criazo-primary/30" aria-hidden="true"></div>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-6">
                <article class="relative group p-6 md:pt-4 bg-white rounded-2xl border-2 border-neutral-200 hover:border-criazo-primary/40 smooth-transition hover:shadow-lg" role="listitem">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-14 h-14 bg-criazo-primary/10 rounded-xl flex items-center justify-center border border-criazo-primary/15 group-hover:scale-105 smooth-transition" aria-hidden="true">
                            <svg class="w-7 h-7 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="type-card-title mb-2">{{ $homeText('process.steps.0.title') }}</h3>
                            <p class="text-neutral-600 leading-[1.43] tracking-body text-sm md:text-base">{{ $homeText('process.steps.0.text') }}</p>
                        </div>
                    </div>
                </article>
                <article class="relative group p-6 md:pt-4 bg-white rounded-2xl border-2 border-neutral-200 hover:border-criazo-primary/40 smooth-transition hover:shadow-lg" role="listitem">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-14 h-14 bg-criazo-primary/10 rounded-xl flex items-center justify-center border border-criazo-primary/15 group-hover:scale-105 smooth-transition" aria-hidden="true">
                            <svg class="w-7 h-7 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="type-card-title mb-2">{{ $homeText('process.steps.1.title') }}</h3>
                            <p class="text-neutral-600 leading-[1.43] tracking-body text-sm md:text-base">{{ $homeText('process.steps.1.text') }}</p>
                        </div>
                    </div>
                </article>
                <article class="relative group p-6 md:pt-4 bg-white rounded-2xl border-2 border-neutral-200 hover:border-criazo-primary/40 smooth-transition hover:shadow-lg" role="listitem">
                    <div class="flex items-start gap-4">
                        <div class="flex-shrink-0 w-14 h-14 bg-criazo-primary/10 rounded-xl flex items-center justify-center border border-criazo-primary/15 group-hover:scale-105 smooth-transition" aria-hidden="true">
                            <svg class="w-7 h-7 text-criazo-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="type-card-title mb-2">{{ $homeText('process.steps.2.title') }}</h3>
                            <p class="text-neutral-600 leading-[1.43] tracking-body text-sm md:text-base">{{ $homeText('process.steps.2.text') }}</p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
        <div class="mt-12 text-center">
            <a href="{{ $localizedRoute('contact.index') }}" class="inline-flex items-center px-6 py-3 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-lg" title="{{ $homeText('aria.schedule_consultation') }}">
                {{ $homeText('hero.primary_cta') }}
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </div>
    </div>
</section>
@endif

{{-- Testimonials Section --}}
@if(isset($testimonials) && count($testimonials) > 0)
<section class="py-20 md:py-28 bg-neutral-100 overflow-hidden" aria-labelledby="testimonials-heading">
    <div class="site-container">
        {{-- Header --}}
        <div class="flex flex-col md:flex-row md:items-end md:justify-between gap-6 md:gap-8 mb-8 md:mb-9">
            <div class="section-intro">
                <p class="section-intro__eyebrow text-criazo-primary">{{ $homeText('testimonials.badge') }}</p>
                <h2 id="testimonials-heading" class="section-intro__title">
                    {{ $homeText('testimonials.title_1') }}<br class="hidden md:block"> {{ $homeText('testimonials.title_2') }}
                </h2>
                <p class="section-intro__desc">
                    {{ $homeText('testimonials.description') }}
                </p>
            </div>
            <a href="{{ $localizedRoute('contact.index') }}" class="hidden md:inline-flex items-center shrink-0 text-base font-semibold text-criazo-primary hover:text-criazo-hover tracking-body smooth-transition">
                {{ $homeText('testimonials.cta') }}
                <svg class="w-4 h-4 ml-1" 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>

        @php
        $testimonialsList = array_slice($testimonials, 0, 6);
        @endphp

        {{-- Testimonials Carousel --}}
        <div id="testimonials-slider-wrapper" class="relative">
            <div id="testimonials-slider">
                <div class="flex gap-5 testimonials-slider-track hide-scrollbar py-2">
                    @foreach($testimonialsList as $index => $testimonial)
                    <article class="testimonial-card flex-shrink-0 w-[85vw] md:w-[calc((100%-40px)/3)] bg-white rounded-2xl p-5 md:p-6 border border-neutral-200/50 hover:shadow-lg smooth-transition flex flex-col">
                        {{-- Header: Icon + Rating --}}
                        <div class="flex items-center justify-between mb-4">
                            <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="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                    <path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
                                </svg>
                            </div>
                            <div class="flex items-center gap-0.5" role="img" aria-label="{{ $testimonial['rating'] ?? 5 }} out of 5 stars">
                                @for($i = 0; $i < ($testimonial['rating'] ?? 5); $i++)
                                <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                @endfor
                            </div>
                        </div>

                        {{-- Quote --}}
                        <blockquote class="text-base md:text-lg text-neutral-600 leading-[1.43] tracking-body flex-grow mb-4">
                            "{{ $testimonial['content'] }}"
                        </blockquote>

                        {{-- Author --}}
                        <div class="testimonial-card__author">
                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-criazo-primary to-criazo-hover flex items-center justify-center text-white font-semibold text-xs flex-shrink-0">
                                {{ strtoupper(substr($testimonial['name'], 0, 1)) }}
                            </div>
                            <div class="testimonial-card__author-meta">
                                <p class="testimonial-card__name">{{ $testimonial['name'] }}</p>
                                @if(isset($testimonial['company']))
                                <p class="testimonial-card__role">{{ $testimonial['company'] }}</p>
                                @endif
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>
            </div>

            {{-- Navigation Arrows --}}
            <div class="flex items-center justify-end gap-3 mt-8">
                <button id="testimonials-prev" class="w-11 h-11 rounded-full bg-white border border-neutral-200 flex items-center justify-center text-neutral-400 hover:text-neutral-900 hover:border-neutral-400 smooth-transition disabled:opacity-30 disabled:cursor-not-allowed" aria-label="{{ $homeText('aria.previous_testimonial') }}">
                    <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="M15 19l-7-7 7-7"/></svg>
                </button>
                <button id="testimonials-next" class="w-11 h-11 rounded-full bg-white border border-neutral-200 flex items-center justify-center text-neutral-400 hover:text-neutral-900 hover:border-neutral-400 smooth-transition disabled:opacity-30 disabled:cursor-not-allowed" aria-label="{{ $homeText('aria.next_testimonial') }}">
                    <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="M9 5l7 7-7 7"/></svg>
                </button>
            </div>
        </div>
    </div>
</section>
@endif

{{-- FAQ Section - hidden for now --}}
@if(false)
<section class="py-24 bg-white" aria-labelledby="faq-heading" itemscope itemtype="https://schema.org/FAQPage">
    <div class="site-container">
        <div class="text-center mb-16">
            <span class="inline-block px-4 py-2 bg-criazo-primary/10 text-criazo-primary rounded-full text-sm font-semibold mb-6">
                {{ $homeText('faqs.badge') }}
            </span>
            <h2 id="faq-heading" class="section-intro__title mb-4">{{ $homeText('faqs.title_1') }}<br class="hidden md:block"> {{ $homeText('faqs.title_2') }}</h2>
            <p class="text-xl text-neutral-600 max-w-2xl mx-auto">
                {{ $homeText('faqs.description') }}
            </p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="space-y-4">
                @php
                $faqs = $homeContent['faqs']['items'] ?? [];
                @endphp

                @foreach($faqs as $index => $faq)
                <article class="faq-item bg-neutral-50 rounded-2xl overflow-hidden border border-neutral-200 hover:border-criazo-primary/30 smooth-transition" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
                    <button class="faq-question w-full px-6 py-5 text-left flex items-center justify-between group"
                            onclick="toggleFaq({{ $index }})"
                            aria-expanded="false"
                            aria-controls="faq-answer-{{ $index }}">
                        <span class="font-semibold text-lg text-neutral-900 pr-4" itemprop="name">{{ $faq['question'] }}</span>
                        <svg class="w-5 h-5 text-neutral-500 flex-shrink-0 transform transition-transform duration-200 faq-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <div id="faq-answer-{{ $index }}" class="faq-answer hidden px-6 pb-5" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                        <p class="text-neutral-600 leading-[1.43] tracking-body" itemprop="text">{{ $faq['answer'] }}</p>
                    </div>
                </article>
                @endforeach
            </div>

            <div class="text-center mt-12">
                <a href="{{ $localizedRoute('contact.index') }}"
                   class="inline-flex items-center text-criazo-primary hover:text-criazo-hover font-semibold smooth-transition"
                   title="{{ $homeText('aria.visit_contact_questions') }}">
                    {{ $homeText('faqs.more_questions') }}
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- Why Choose Criazo Section --}}
@if(isset($aboutUs))
<section id="about" class="py-24 bg-gradient-to-br from-neutral-50 to-white scroll-mt-24" aria-labelledby="about-heading">
    <div class="site-container">
        <div class="grid md:grid-cols-2 gap-16 items-center">
            <div>
                <span class="inline-block px-4 py-2 bg-criazo-primary/10 text-criazo-primary rounded-full text-sm font-semibold uppercase mb-6">
                    {{ $homeText('why.badge') }}
                </span>
                <h2 id="about-heading" class="section-intro__title uppercase mb-6">
                    {{ $homeText('why.title_1') }}<br>{{ $homeText('why.title_2') }}
                </h2>

                <p class="section-intro__desc mb-6">
                    {{ $homeText('why.description_1') }} <strong class="text-neutral-900">{{ $homeText('why.highlight_1') }}</strong> {{ $homeText('why.description_2') }}
                </p>

                <p class="section-intro__desc mb-8">
                    {{ $homeText('why.description_3') }} <strong class="text-neutral-900">{{ $homeText('why.highlight_2') }}</strong>
                </p>

                <div class="flex flex-col sm:flex-row gap-4">
                    <a href="{{ $localizedRoute('contact.index') }}"
                       class="inline-flex items-center justify-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"
                       title="{{ $homeText('aria.schedule_consultation') }}">
                        {{ $homeText('hero.primary_cta') }}
                        <svg class="w-5 h-5 ml-2" 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>
                </div>
            </div>

            <div>
                {{-- Values - Enhanced Design --}}
                @if(isset($aboutUs['values']))
                <div class="grid grid-cols-1 gap-4" role="list">
                    @foreach($aboutUs['values'] as $index => $value)
                    <article class="group relative p-6 bg-white rounded-2xl border-2 border-neutral-200 hover:border-criazo-primary/50 smooth-transition hover:shadow-lg" role="listitem">
                        <div class="flex items-start gap-4">
                            <div class="flex-shrink-0 w-14 h-14 bg-gradient-to-br from-criazo-primary/10 to-criazo-primary/5 rounded-xl flex items-center justify-center text-2xl group-hover:scale-110 smooth-transition" aria-hidden="true">
                                {{ $value['icon'] }}
                            </div>
                            <div class="flex-1">
                                <h3 class="type-card-title mb-2">{{ $value['title'] }}</h3>
                                <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $value['description'] }}</p>
                            </div>
                        </div>
                    </article>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endif

{{-- Final CTA Section --}}
<section id="contact" class="py-24 bg-gradient-to-br from-criazo-primary to-criazo-hover text-white scroll-mt-24" aria-labelledby="cta-heading">
    <div class="site-container text-center">
        <h2 id="cta-heading" class="section-intro__title mb-6">
            {{ $homeText('cta.title') }}
        </h2>
        <p class="section-intro__desc text-white/90 max-w-2xl mx-auto mb-10">
            {{ $homeText('cta.description_1') }}
            {{ $homeText('cta.description_2') }} <strong>{{ $homeText('cta.highlight') }}</strong> {{ $homeText('cta.description_3') }}
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <a href="{{ $localizedRoute('contact.index') }}"
               class="inline-flex items-center justify-center px-8 py-4 bg-white text-criazo-primary rounded-full type-btn hover:bg-neutral-100 smooth-transition shadow-lg"
               title="{{ $homeText('aria.schedule_consultation') }}">
                {{ $homeText('cta.primary') }}
                <svg class="w-5 h-5 ml-2" 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>
        </div>

        {{-- Trust Indicators --}}
        <div class="flex flex-wrap justify-center gap-8 text-white/80 text-sm">
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                {{ $homeText('cta.trust.0') }}
            </div>
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                {{ $homeText('cta.trust.1') }}
            </div>
            <div class="flex items-center gap-2">
                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
                {{ $homeText('cta.trust.2') }}
            </div>
        </div>
    </div>
</section>

@push('styles')
<link rel="stylesheet" href="{{ asset_versioned('css/home-hero-layout.css') }}">
<link rel="stylesheet" href="{{ asset_versioned('css/hero-cards-slider.css') }}">
<style>
    /* Hero Gradient Background - Light Mode */
    .hero-gradient {
        background: linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%);
    }

    /* Dark mode gradient */

    /* Animation Delays */
    .animation-delay-100 { animation-delay: 100ms; }
    .animation-delay-200 { animation-delay: 200ms; }
    .animation-delay-300 { animation-delay: 300ms; }
    .animation-delay-400 { animation-delay: 400ms; }

    /* Line Clamp Utilities */
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-4 {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Portfolio Slider Styles */
    .portfolio-slider-track {
        display: flex;
        will-change: transform;
    }

    .industries-slider-track {
        display: flex;
        will-change: transform;
    }

    @media (max-width: 768px) {
        #portfolio-slider-wrapper {
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
            width: 100vw !important;
            max-width: 100vw !important;
        }

        #portfolio-slider {
            overflow-x: auto !important;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 1rem !important;
        }

        .portfolio-slider-track {
            transform: none !important;
        }

        .portfolio-slider-track article {
            min-width: 85vw !important;
            flex: 0 0 85vw !important;
            scroll-snap-align: center;
        }

        .portfolio-controls {
            display: none;
        }

        #industries-slider-wrapper {
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
            width: 100vw !important;
            max-width: 100vw !important;
        }

        #industries-slider {
            overflow-x: auto !important;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 1rem !important;
        }

        .industries-slider-track {
            transform: none !important;
        }

        .industries-slider-track article {
            min-width: 85vw !important;
            flex: 0 0 85vw !important;
            scroll-snap-align: center;
        }

        .industries-controls {
            display: none;
        }
    }

    /* Testimonials Slider */
    .testimonials-slider-track {
        display: flex;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    @media (max-width: 768px) {
        #testimonials-slider-wrapper {
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw !important;
            margin-right: -50vw !important;
            width: 100vw !important;
            max-width: 100vw !important;
        }

        #testimonials-slider {
            overflow-x: auto !important;
            scroll-snap-type: x mandatory;
            scroll-behavior: smooth;
            padding: 1rem !important;
        }

        .testimonials-slider-track {
            transform: none !important;
        }

        .testimonial-card {
            min-width: 85vw !important;
            flex: 0 0 85vw !important;
            scroll-snap-align: center;
        }
    }

    /* FAQ Styles */
    .faq-answer {
        transition: all 0.3s ease;
    }

    .faq-icon {
        transition: transform 0.3s ease;
    }

    .faq-icon.rotate-180 {
        transform: rotate(180deg);
    }
</style>
@endpush

@push('scripts')
<script src="{{ asset('js/hero-cards-slider.js') }}?v=2"></script>
<script>
    // Portfolio Slider with Autoplay
    (function() {
        const slider = document.getElementById('portfolio-slider');
        const track = slider?.querySelector('.portfolio-slider-track');
        const prevBtn = document.getElementById('portfolio-prev');
        const nextBtn = document.getElementById('portfolio-next');

        if (!slider || !track) return;

        const cards = track.querySelectorAll('article');
        if (cards.length === 0) return;

        let cardWidth = 300;
        const gap = 32;
        let cardStep = cardWidth + gap;
        let currentIndex = 0;
        let autoplayInterval;
        let isPaused = false;
        const autoplaySpeed = 4000;

        function updateCardWidth() {
            if (window.innerWidth < 768) {
                cardWidth = 280;
            } else {
                const containerWidth = slider.offsetWidth;
                cardWidth = (containerWidth - (gap * 2)) / 3;
            }
            cardStep = cardWidth + gap;
            updateSlider();
        }

        window.addEventListener('resize', updateCardWidth);
        updateCardWidth();

        const sliderContainer = slider.closest('.relative');
        if (sliderContainer) {
            sliderContainer.addEventListener('mouseenter', () => {
                const controls = sliderContainer.querySelectorAll('.portfolio-controls');
                controls.forEach(btn => btn.style.opacity = '1');
            });

            sliderContainer.addEventListener('mouseleave', () => {
                const controls = sliderContainer.querySelectorAll('.portfolio-controls');
                controls.forEach(btn => btn.style.opacity = '0');
            });
        }

        function updateSlider() {
            const translateX = -currentIndex * cardStep;
            track.style.transform = `translateX(${translateX}px)`;
        }

        function nextSlide() {
            if (isPaused) return;

            const visibleCards = window.innerWidth < 768 ? 1 : (window.innerWidth < 1024 ? 2 : 3);
            const maxIndex = Math.max(0, cards.length - visibleCards);
            currentIndex = (currentIndex + 1) % (maxIndex + 1);
            if (maxIndex === 0) currentIndex = 0;
            updateSlider();
        }

        function prevSlide() {
            if (isPaused) return;

            const visibleCards = window.innerWidth < 768 ? 1 : (window.innerWidth < 1024 ? 2 : 3);
            const maxIndex = Math.max(0, cards.length - visibleCards);
            currentIndex = currentIndex === 0 ? maxIndex : currentIndex - 1;
            if (maxIndex === 0) currentIndex = 0;
            updateSlider();
        }

        function startAutoplay() {
            autoplayInterval = setInterval(nextSlide, autoplaySpeed);
        }

        function stopAutoplay() {
            clearInterval(autoplayInterval);
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                stopAutoplay();
                nextSlide();
                setTimeout(startAutoplay, 5000);
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                stopAutoplay();
                prevSlide();
                setTimeout(startAutoplay, 5000);
            });
        }

        slider.addEventListener('mouseenter', () => {
            isPaused = true;
            stopAutoplay();
        });

        slider.addEventListener('mouseleave', () => {
            isPaused = false;
            startAutoplay();
        });

        // Touch/swipe support
        let touchStartX = 0;
        let touchEndX = 0;

        track.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
            stopAutoplay();
        }, { passive: true });

        track.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
            setTimeout(startAutoplay, 3000);
        }, { passive: true });

        function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;

            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    nextSlide();
                } else {
                    prevSlide();
                }
            }
        }

        updateSlider();
        startAutoplay();

        window.addEventListener('beforeunload', () => {
            stopAutoplay();
        });
    })();

    // Industries Slider with Autoplay
    (function() {
        const slider = document.getElementById('industries-slider');
        const track = slider?.querySelector('.industries-slider-track');
        const prevBtn = document.getElementById('industries-prev');
        const nextBtn = document.getElementById('industries-next');

        if (!slider || !track) return;

        const cards = track.querySelectorAll('article');
        if (cards.length === 0) return;

        let cardWidth = 300;
        const gap = 32;
        let cardStep = cardWidth + gap;
        let currentIndex = 0;
        let autoplayInterval;
        let isPaused = false;
        const autoplaySpeed = 4500;

        function updateCardWidth() {
            if (window.innerWidth < 768) {
                cardWidth = 280;
            } else {
                const containerWidth = slider.offsetWidth;
                cardWidth = (containerWidth - (gap * 2)) / 3;
            }
            cardStep = cardWidth + gap;
            updateSlider();
        }

        function updateSlider() {
            const translateX = -currentIndex * cardStep;
            track.style.transform = `translateX(${translateX}px)`;
        }

        function nextSlide() {
            if (isPaused) return;
            const visibleCards = window.innerWidth < 768 ? 1 : (window.innerWidth < 1024 ? 2 : 3);
            const maxIndex = Math.max(0, cards.length - visibleCards);
            currentIndex = (currentIndex + 1) % (maxIndex + 1);
            if (maxIndex === 0) currentIndex = 0;
            updateSlider();
        }

        function prevSlide() {
            if (isPaused) return;
            const visibleCards = window.innerWidth < 768 ? 1 : (window.innerWidth < 1024 ? 2 : 3);
            const maxIndex = Math.max(0, cards.length - visibleCards);
            currentIndex = currentIndex === 0 ? maxIndex : currentIndex - 1;
            if (maxIndex === 0) currentIndex = 0;
            updateSlider();
        }

        function startAutoplay() {
            autoplayInterval = setInterval(nextSlide, autoplaySpeed);
        }

        function stopAutoplay() {
            clearInterval(autoplayInterval);
        }

        window.addEventListener('resize', updateCardWidth);
        updateCardWidth();

        const sliderContainer = slider.closest('.relative');
        if (sliderContainer) {
            sliderContainer.addEventListener('mouseenter', () => {
                const controls = sliderContainer.querySelectorAll('.industries-controls');
                controls.forEach(btn => btn.style.opacity = '1');
            });

            sliderContainer.addEventListener('mouseleave', () => {
                const controls = sliderContainer.querySelectorAll('.industries-controls');
                controls.forEach(btn => btn.style.opacity = '0');
            });
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                stopAutoplay();
                nextSlide();
                setTimeout(startAutoplay, 5000);
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                stopAutoplay();
                prevSlide();
                setTimeout(startAutoplay, 5000);
            });
        }

        slider.addEventListener('mouseenter', () => {
            isPaused = true;
            stopAutoplay();
        });

        slider.addEventListener('mouseleave', () => {
            isPaused = false;
            startAutoplay();
        });

        let touchStartX = 0;
        let touchEndX = 0;

        track.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
            stopAutoplay();
        }, { passive: true });

        track.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;
            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    nextSlide();
                } else {
                    prevSlide();
                }
            }
            setTimeout(startAutoplay, 3000);
        }, { passive: true });

        updateSlider();
        startAutoplay();

        window.addEventListener('beforeunload', () => {
            stopAutoplay();
        });
    })();


    // Testimonials Slider
    (function() {
        const slider = document.getElementById('testimonials-slider');
        const track = slider?.querySelector('.testimonials-slider-track');
        const prevBtn = document.getElementById('testimonials-prev');
        const nextBtn = document.getElementById('testimonials-next');

        if (!slider || !track) return;

        const cards = track.querySelectorAll('.testimonial-card');
        if (cards.length === 0) return;

        // Only run on desktop
        if (window.innerWidth < 768) return;

        const gap = 20;
        let currentIndex = 0;
        let autoplayInterval;
        let isPaused = false;
        const autoplaySpeed = 5000;
        const visibleCards = 3;

        // If we have 3 or fewer cards, no need to slide
        if (cards.length <= visibleCards) {
            if (prevBtn) prevBtn.style.display = 'none';
            if (nextBtn) nextBtn.style.display = 'none';
            return;
        }

        function getCardWidth() {
            const containerWidth = slider.offsetWidth;
            return (containerWidth - (gap * (visibleCards - 1))) / visibleCards;
        }

        function updateSlider() {
            const cardWidth = getCardWidth();
            const cardStep = cardWidth + gap;
            const translateX = -currentIndex * cardStep;
            track.style.transform = `translateX(${translateX}px)`;

            // Update button states
            const maxIndex = Math.max(0, cards.length - visibleCards);
            if (prevBtn) prevBtn.disabled = currentIndex === 0;
            if (nextBtn) nextBtn.disabled = currentIndex >= maxIndex;
        }

        function nextSlide() {
            const maxIndex = Math.max(0, cards.length - visibleCards);
            if (currentIndex < maxIndex) {
                currentIndex++;
                updateSlider();
            } else {
                currentIndex = 0;
                updateSlider();
            }
        }

        function prevSlide() {
            const maxIndex = Math.max(0, cards.length - visibleCards);
            if (currentIndex > 0) {
                currentIndex--;
                updateSlider();
            } else {
                currentIndex = maxIndex;
                updateSlider();
            }
        }

        function startAutoplay() {
            if (autoplayInterval) clearInterval(autoplayInterval);
            autoplayInterval = setInterval(nextSlide, autoplaySpeed);
        }

        // Handle resize
        window.addEventListener('resize', () => {
            if (window.innerWidth >= 768) {
                currentIndex = 0;
                updateSlider();
            }
        });

        function stopAutoplay() {
            clearInterval(autoplayInterval);
        }

        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                stopAutoplay();
                nextSlide();
                setTimeout(startAutoplay, 5000);
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                stopAutoplay();
                prevSlide();
                setTimeout(startAutoplay, 5000);
            });
        }

        slider.addEventListener('mouseenter', () => {
            isPaused = true;
            stopAutoplay();
        });

        slider.addEventListener('mouseleave', () => {
            isPaused = false;
            startAutoplay();
        });

        updateSlider();
        startAutoplay();
    })();

    // FAQ Accordion with Accessibility
    function toggleFaq(index) {
        const faqItem = document.querySelectorAll('.faq-item')[index];
        const answer = faqItem.querySelector('.faq-answer');
        const icon = faqItem.querySelector('.faq-icon');
        const button = faqItem.querySelector('.faq-question');

        const isOpen = !answer.classList.contains('hidden');

        // Close all FAQs
        document.querySelectorAll('.faq-answer').forEach(a => a.classList.add('hidden'));
        document.querySelectorAll('.faq-icon').forEach(i => i.classList.remove('rotate-180'));
        document.querySelectorAll('.faq-question').forEach(b => b.setAttribute('aria-expanded', 'false'));

        // Toggle current FAQ
        if (isOpen) {
            answer.classList.add('hidden');
            icon.classList.remove('rotate-180');
            button.setAttribute('aria-expanded', 'false');
        } else {
            answer.classList.remove('hidden');
            icon.classList.add('rotate-180');
            button.setAttribute('aria-expanded', 'true');
        }
    }
</script>
@endpush

@endsection