@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    use App\Helpers\MarketContent;
    $locale = app()->getLocale();
    $portfolioContent = $portfolioContent ?? MarketContent::portfolio($locale);
    $portfolioText = function (string $key, array $replace = []) use ($portfolioContent) {
        $value = data_get($portfolioContent, $key, '');
        foreach ($replace as $placeholder => $replacement) {
            $value = str_replace(':' . $placeholder, $replacement, (string) $value);
        }
        return $value;
    };
    $isGraficaAlcalima = ($project['slug'] ?? '') === 'grafica-alcalima';
    $isSquareFeedImage = static function (?string $path): bool {
        return is_string($path) && $path !== '' && str_contains($path, '/social-feed-');
    };
    $sectionImageFrameClasses = static function (?string $path) use ($isGraficaAlcalima, $isSquareFeedImage): string {
        if ($isGraficaAlcalima) {
            return 'h-[400px] bg-transparent';
        }
        if ($isSquareFeedImage($path)) {
            return 'aspect-square w-full max-w-sm md:max-w-md bg-white shadow-sm ring-1 ring-neutral-200/80';
        }

        return 'aspect-[4/3] bg-neutral-100';
    };
    $sectionImageClasses = static function (?string $path) use ($isGraficaAlcalima, $isSquareFeedImage): string {
        if ($isGraficaAlcalima || $isSquareFeedImage($path)) {
            return 'object-contain';
        }

        return 'object-cover';
    };
    $categoryItems = collect(preg_split('/\s*[•|,]\s*/u', $project['category'] ?? ''))
        ->filter()
        ->take(5)
        ->values()
        ->all();
    $servicesApplied = $servicesApplied ?? [];

    // Helper function to generate localized routes (English has no prefix)
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
@endphp

@section('title', $project['metadata']['title'] ?? $metaTitle)
@section('meta_description', $project['metadata']['description'] ?? $metaDescription)
@section('meta_keywords', $project['metadata']['keywords'] ?? implode(', ', $project['tags'] ?? []))
@section('og_image', asset($project['metadata']['image'] ?? $project['hero']['image'] ?? 'images/og-portfolio.jpg'))
@section('og_type', 'article')

@push('head')
@if(!empty($project['hero']['image']))
<link rel="preload" as="image" href="{{ asset($project['hero']['image']) }}" fetchpriority="high">
@endif
@endpush

@push('schema')
{{-- CreativeWork Schema for Portfolio Item --}}
<script type="application/ld+json">
{!! SeoHelper::generatePortfolioSchema($project) !!}
</script>
@foreach(($project['sections'] ?? []) as $schemaSection)
@if(($schemaSection['type'] ?? null) === 'video_walkthrough' && !empty($schemaSection['video']))
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": @json(($schemaSection['title'] ?? $project['title'] . ' website walkthrough')),
  "description": @json(($schemaSection['content'] ?? $project['hero']['subtitle'] ?? '')),
  "thumbnailUrl": @json(asset($schemaSection['poster'] ?? $project['hero']['image'] ?? 'images/og-portfolio.jpg')),
  "contentUrl": @json(asset($schemaSection['video'])),
  "uploadDate": @json(($project['year'] ?? date('Y')) . '-01-01'),
  "duration": @json($schemaSection['duration'] ?? 'PT55S')
}
</script>
@endif
@endforeach
@endpush

@section('content')
{{-- Portfolio Detail Page - Complete with ALL Sections --}}
<article class="min-h-screen bg-white" itemscope itemtype="https://schema.org/CreativeWork">
    
    {{-- Hero Section - Matching Service Pages Design --}}
    <section class="relative overflow-hidden bg-white">
        <div class="site-container pt-8 pb-6">

            {{-- Title & Description --}}
            <div class="max-w-4xl">
                <h1 class="page-hero__headline text-neutral-900 mb-6" itemprop="name">
                    {{ $project['title'] }}
                </h1>
                <p class="text-xl text-neutral-600 leading-[1.43] tracking-body" itemprop="description">
                    {{ $project['hero']['subtitle'] }}
                </p>
            </div>
        </div>
        
        {{-- Hero Image --}}
        <div class="site-container">
            <div class="relative rounded-2xl overflow-hidden aspect-[16/9]">
                <img src="{{ asset($project['hero']['image']) }}" 
                     alt="{{ $project['alt_text']['hero'] ?? ($project['title'] . ' - Criazo') }}"
                     title="{{ $project['title'] }} - {{ $portfolioText('detail.project_details') }}"
                     class="w-full h-full object-cover"
                     loading="eager"
                     width="1920"
                     height="1080"
                     itemprop="image"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                <div style="display:none;" class="w-full h-full bg-gradient-to-br from-criazo-400 to-criazo-700" aria-hidden="true"></div>
            </div>
        </div>
    </section>
    
    <!-- Project snapshot -->
    <div class="site-container py-16">
        <div class="border-y border-neutral-200 py-6 mb-16">
            <dl class="grid grid-cols-1 md:grid-cols-[1.6fr_0.7fr_0.7fr] gap-6">
                <div>
                    <dt class="text-sm text-neutral-500 mb-2">{{ $portfolioText('detail.category') }}</dt>
                    <dd class="flex flex-wrap gap-2">
                @if(count($categoryItems) > 0)
                    @foreach($categoryItems as $categoryItem)
                        <span class="inline-flex items-center rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1 text-xs font-semibold text-neutral-800">{{ $categoryItem }}</span>
                    @endforeach
                @else
                        <span class="inline-flex items-center rounded-full border border-neutral-200 bg-neutral-50 px-3 py-1 text-xs font-semibold text-neutral-800">{{ $project['category'] }}</span>
                @endif
                    </dd>
                </div>
                <div>
                    <dt class="text-sm text-neutral-500 mb-2">{{ $portfolioText('detail.year') }}</dt>
                    <dd class="text-sm font-semibold text-neutral-900">{{ $project['year'] }}</dd>
                </div>
                <div>
                    <dt class="text-sm text-neutral-500 mb-2">{{ $portfolioText('detail.duration') }}</dt>
                    <dd class="text-sm font-semibold text-neutral-900">{{ $project['duration'] }}</dd>
                </div>
            </dl>
        </div>
        
        <!-- Overview Section -->
        @if(isset($project['overview']))
        <div class="mb-20">
            <h2 class="section-intro__title mb-12">{{ $portfolioText('detail.project_overview') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-neutral-100 rounded-3xl p-8">
                    <h3 class="type-card-title mb-4">{{ $portfolioText('detail.challenge') }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $project['overview']['challenge'] }}</p>
                </div>
                <div class="bg-neutral-100 rounded-3xl p-8">
                    <h3 class="type-card-title mb-4">{{ $portfolioText('detail.solution') }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $project['overview']['solution'] }}</p>
                </div>
                <div class="bg-neutral-100 rounded-3xl p-8">
                    <h3 class="type-card-title mb-4">{{ $portfolioText('detail.results') }}</h3>
                    <p class="text-neutral-600 leading-[1.43] tracking-body">{{ $project['overview']['results'] }}</p>
                </div>
            </div>
        </div>
        @endif

        <!-- All Project Sections with Full Content -->
        @if(isset($project['sections']) && count($project['sections']) > 0)
        <div class="mb-20">
            <h2 class="section-intro__title mb-12">{{ $portfolioText('detail.project_details') }}</h2>
            @foreach($project['sections'] as $index => $section)
            @if(($section['type'] ?? null) === 'accountable_stats')
                @continue
            @endif
            @php
                $sectionType = $section['type'] ?? null;
                $isProductShowcase = $sectionType === 'product_showcase';
                $isSocialSection = in_array($sectionType, ['social_media_feed_wall', 'social_media_motion_duo', 'social_media_showcase', 'product_showcase'], true);
                $sectionSpacing = ($isSocialSection ? 'mb-12' : 'mb-24') . ($index > 0 ? ' ' . ($isSocialSection ? 'pt-12' : 'pt-24') . ' border-t border-neutral-300' : '');
            @endphp
            <div class="{{ $sectionSpacing }}">
                @if(($section['type'] ?? null) === 'video_walkthrough' && !empty($section['video']))
                @php
                    $walkthroughSizing = ($section['video_sizing'] ?? 'cover') === 'intrinsic' ? 'intrinsic' : 'cover';
                @endphp
                {{-- Chromeless: muted autoplay + loop, no native controls. Click or Space/Enter to pause/play (WCAG). --}}
                {{-- video_sizing intrinsic: do not upscale low-res masters (sharp, centered). cover: full-bleed crop when source is HD. --}}
                <div class="relative left-1/2 w-screen max-w-[100vw] -translate-x-1/2 bg-neutral-950">
                    @if($walkthroughSizing === 'intrinsic')
                    <div class="mx-auto flex max-w-full cursor-pointer justify-center px-3 py-2 outline-none select-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/30 sm:px-6 sm:py-4"
                         data-portfolio-chromeless-video
                         tabindex="0"
                         role="button"
                         aria-label="{{ $portfolioText('detail.chromeless_video_toggle') }}">
                        <video class="pointer-events-none block h-auto max-h-[min(85svh,90dvh)] w-auto max-w-full object-contain"
                               autoplay
                               muted
                               playsinline
                               loop
                               preload="auto"
                               disablePictureInPicture
                               poster="{{ asset($section['poster'] ?? $project['hero']['image']) }}">
                            <source src="{{ asset($section['video']) }}" type="video/mp4">
                        </video>
                    </div>
                    @else
                    <div class="relative h-[min(85svh,calc(100vw*9/16))] w-full cursor-pointer overflow-hidden outline-none select-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white/30"
                         data-portfolio-chromeless-video
                         tabindex="0"
                         role="button"
                         aria-label="{{ $portfolioText('detail.chromeless_video_toggle') }}">
                        <video class="pointer-events-none absolute inset-0 h-full w-full object-cover object-center"
                               autoplay
                               muted
                               playsinline
                               loop
                               preload="auto"
                               disablePictureInPicture
                               poster="{{ asset($section['poster'] ?? $project['hero']['image']) }}">
                            <source src="{{ asset($section['video']) }}" type="video/mp4">
                        </video>
                    </div>
                    @endif
                </div>
                @elseif(($section['type'] ?? null) === 'product_showcase' && !empty($section['image']))
                @if(!empty($section['title']))
                <div class="mb-4 max-w-3xl">
                    <h3 class="section-intro__title mb-6">{{ $section['title'] }}</h3>
                    @if(!empty($section['content']))
                    <div class="text-lg text-neutral-600 leading-[1.43] tracking-body mb-6 whitespace-pre-line">{{ $section['content'] }}</div>
                    @endif
                    @if(!empty($section['highlights']) && count($section['highlights']) > 0)
                    <ul class="space-y-3">
                        @foreach($section['highlights'] as $highlight)
                        <li class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-criazo-primary mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-neutral-700">{{ $highlight }}</span>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
                @endif
                <div class="portfolio-product-showcase">
                    <div class="portfolio-product-showcase__frame">
                        <img src="{{ asset_versioned(ltrim($section['image'], '/')) }}"
                             alt="{{ $portfolioText('detail.gallery_image_alt') }} - {{ $section['title'] ?? $project['title'] }} - {{ $project['title'] }}"
                             loading="lazy"
                             decoding="async">
                    </div>
                </div>
                @elseif(($section['type'] ?? null) === 'social_media_motion_duo' && !empty($section['feed_video']) && !empty($section['story_video']))
                @if(!empty($section['title']))
                <div class="mb-6 max-w-3xl">
                    <h3 class="section-intro__title mb-6">{{ $section['title'] }}</h3>
                    @if(!empty($section['content']))
                    <div class="text-lg text-neutral-600 leading-[1.43] tracking-body mb-6 whitespace-pre-line">{{ $section['content'] }}</div>
                    @endif
                </div>
                @endif
                <div class="portfolio-social-motion">
                    <div class="portfolio-social-motion__stage">
                        <div class="portfolio-social-motion__device portfolio-social-motion__device--feed">
                            <div class="portfolio-social-motion__frame portfolio-social-motion__frame--feed"
                                 data-portfolio-chromeless-video
                                 tabindex="0"
                                 role="button"
                                 aria-label="{{ $portfolioText('detail.chromeless_video_toggle') }}">
                                <video autoplay muted playsinline loop preload="auto" disablePictureInPicture
                                       poster="{{ asset($section['feed_poster'] ?? $project['hero']['image']) }}">
                                    <source src="{{ asset_versioned(ltrim($section['feed_video'], '/')) }}" type="video/mp4">
                                </video>
                            </div>
                            <span class="portfolio-social-motion__label">{{ $section['feed_label'] ?? 'Instagram feed' }}</span>
                        </div>
                        <div class="portfolio-social-motion__device portfolio-social-motion__device--story">
                            <div class="portfolio-social-motion__frame portfolio-social-motion__frame--story"
                                 data-portfolio-chromeless-video
                                 tabindex="0"
                                 role="button"
                                 aria-label="{{ $portfolioText('detail.chromeless_video_toggle') }}">
                                <video autoplay muted playsinline loop preload="auto" disablePictureInPicture
                                       poster="{{ asset($section['story_poster'] ?? $project['hero']['image']) }}">
                                    <source src="{{ asset_versioned(ltrim($section['story_video'], '/')) }}" type="video/mp4">
                                </video>
                            </div>
                            <span class="portfolio-social-motion__label">{{ $section['story_label'] ?? 'Instagram stories' }}</span>
                        </div>
                    </div>
                </div>
                @elseif(($section['type'] ?? null) === 'social_media_feed_wall' && !empty($section['images']) && is_array($section['images']))
                @if(!empty($section['title']))
                <div class="mb-6 max-w-3xl">
                    <h3 class="section-intro__title mb-6">{{ $section['title'] }}</h3>
                    @if(!empty($section['content']))
                    <div class="text-lg text-neutral-600 leading-[1.43] tracking-body mb-6 whitespace-pre-line">{{ $section['content'] }}</div>
                    @endif
                    @if(!empty($section['highlights']) && count($section['highlights']) > 0)
                    <ul class="space-y-3 mb-6">
                        @foreach($section['highlights'] as $highlight)
                        <li class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-criazo-primary mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-neutral-700">{{ $highlight }}</span>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
                @endif
                <div class="portfolio-social-feed-wall relative" data-portfolio-feed-wall-slider role="region" aria-label="{{ $section['title'] ?? $portfolioText('detail.project_gallery') }}">
                    <div class="portfolio-social-feed-wall__viewport overflow-hidden">
                        <div class="portfolio-social-feed-wall__track flex gap-3 md:gap-4 py-1">
                            @foreach($section['images'] as $socialImage)
                            <div class="portfolio-social-feed-wall__item flex-shrink-0">
                                <img src="{{ asset_versioned(ltrim($socialImage, '/')) }}"
                                     alt="{{ $portfolioText('detail.gallery_image_alt') }} - {{ $project['title'] }}"
                                     loading="lazy"
                                     decoding="async">
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="button"
                            class="portfolio-social-feed-wall__control absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 md:-translate-x-4 z-10 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 portfolio-feed-wall-controls"
                            data-feed-wall-prev
                            aria-label="{{ $portfolioText('detail.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 type="button"
                            class="portfolio-social-feed-wall__control absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 md:translate-x-4 z-10 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 portfolio-feed-wall-controls"
                            data-feed-wall-next
                            aria-label="{{ $portfolioText('detail.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 class="portfolio-social-feed-wall__dots" data-feed-wall-dots role="tablist" aria-label="{{ $section['title'] ?? $portfolioText('detail.project_gallery') }}" hidden></div>
                </div>
                @elseif(($section['type'] ?? null) === 'social_media_showcase' && !empty($section['images']) && is_array($section['images']))
                @php
                    $socialFormat = ($section['format'] ?? 'feed') === 'stories' ? 'stories' : 'feed';
                @endphp
                @if(!empty($section['title']))
                <div class="mb-10 max-w-3xl">
                    <h3 class="section-intro__title mb-6">{{ $section['title'] }}</h3>
                    @if(!empty($section['content']))
                    <div class="text-lg text-neutral-600 leading-[1.43] tracking-body mb-6 whitespace-pre-line">{{ $section['content'] }}</div>
                    @endif
                    @if(!empty($section['highlights']) && count($section['highlights']) > 0)
                    <ul class="space-y-3 mb-8">
                        @foreach($section['highlights'] as $highlight)
                        <li class="flex items-start space-x-3">
                            <svg class="w-5 h-5 text-criazo-primary mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                            </svg>
                            <span class="text-neutral-700">{{ $highlight }}</span>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
                @endif
                @if($socialFormat === 'feed')
                <div class="portfolio-social-showcase__grid portfolio-social-showcase__grid--feed">
                    @foreach($section['images'] as $socialImage)
                    <div class="portfolio-social-showcase__item">
                        <img src="{{ asset($socialImage) }}"
                             alt="{{ $project['alt_text']['gallery'] ?? ($project['title'] . ' - Criazo') }}"
                             loading="lazy"
                             decoding="async">
                    </div>
                    @endforeach
                </div>
                @else
                <div class="portfolio-social-showcase__stories">
                    @foreach($section['images'] as $socialImage)
                    <div class="portfolio-social-showcase__item">
                        <img src="{{ asset($socialImage) }}"
                             alt="{{ $project['alt_text']['gallery'] ?? ($project['title'] . ' - Criazo') }}"
                             loading="lazy"
                             decoding="async">
                    </div>
                    @endforeach
                </div>
                @endif
                @elseif(isset($section['type']) && $section['type'] === 'mockup_pair' && isset($section['images']) && count($section['images']) >= 2)
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center justify-items-center">
                    @foreach(array_slice($section['images'], 0, 2) as $mockupImage)
                    <div class="relative w-full max-w-lg rounded-2xl overflow-hidden bg-neutral-100 flex justify-center items-center">
                        <img src="{{ asset($mockupImage) }}"
                             alt="{{ $project['alt_text']['gallery'] ?? ($project['title'] . ' - Criazo') }}"
                             class="w-full h-auto object-contain max-h-[480px]"
                             loading="lazy">
                    </div>
                    @endforeach
                </div>
                @else
                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                    @if($section['imagePosition'] === 'left')
                        <!-- Image Left -->
                        <div class="relative overflow-hidden rounded-3xl {{ $sectionImageFrameClasses($section['image'] ?? null) }} {{ $isSquareFeedImage($section['image'] ?? null) ? 'mx-auto md:mx-0' : '' }}">
                            <img src="{{ asset($section['image']) }}" 
                                 alt="{{ $portfolioText('detail.gallery_image_alt') }} - {{ $section['title'] }} - {{ $project['title'] }}"
                                 class="w-full h-full {{ $sectionImageClasses($section['image'] ?? null) }} hover:scale-105 smooth-transition"
                                 onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #667eea 0%, #764ba2 100%)';">
                        </div>
                        <!-- Content Right -->
                        <div>
                            <h3 class="section-intro__title mb-6">
                                {{ $section['title'] }}
                            </h3>
                            <div class="text-lg text-neutral-600 leading-[1.43] tracking-body mb-6 whitespace-pre-line">{{ $section['content'] }}</div>
                            @if(isset($section['highlights']) && count($section['highlights']) > 0)
                            <ul class="space-y-3">
                                @foreach($section['highlights'] as $highlight)
                                <li class="flex items-start space-x-3">
                                    <svg class="w-5 h-5 text-criazo-primary mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span class="text-neutral-700">{{ $highlight }}</span>
                                </li>
                                @endforeach
                            </ul>
                            @endif
                        </div>
                    @else
                        <!-- Content Left -->
                        <div>
                            <h3 class="section-intro__title mb-6">
                                {{ $section['title'] }}
                            </h3>
                            <div class="text-lg text-neutral-600 leading-[1.43] tracking-body mb-6 whitespace-pre-line">{{ $section['content'] }}</div>
                            @if(isset($section['highlights']) && count($section['highlights']) > 0)
                            <ul class="space-y-3">
                                @foreach($section['highlights'] as $highlight)
                                <li class="flex items-start space-x-3">
                                    <svg class="w-5 h-5 text-criazo-primary mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                    </svg>
                                    <span class="text-neutral-700">{{ $highlight }}</span>
                                </li>
                                @endforeach
                            </ul>
                            @endif
                        </div>
                        <!-- Image Right -->
                        <div class="relative overflow-hidden rounded-3xl {{ $sectionImageFrameClasses($section['image'] ?? null) }} {{ $isSquareFeedImage($section['image'] ?? null) ? 'mx-auto md:mx-0' : '' }}">
                            <img src="{{ asset($section['image']) }}" 
                                 alt="{{ $portfolioText('detail.gallery_image_alt') }} - {{ $section['title'] }} - {{ $project['title'] }}"
                                 class="w-full h-full {{ $sectionImageClasses($section['image'] ?? null) }} hover:scale-105 smooth-transition"
                                 onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #667eea 0%, #764ba2 100%)';">
                        </div>
                    @endif
                </div>
                @endif
            </div>
            @endforeach
        </div>
        @endif

        @if(!empty($servicesApplied))
        <section class="mb-20 pt-16 border-t border-neutral-200">
            <div class="flex items-end justify-between gap-6 mb-8">
                <h2 class="section-intro__title">{{ $portfolioText('detail.services_applied') }}</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($servicesApplied as $service)
                <a href="{{ $localizedRoute('services.show', ['slug' => $service['slug']]) }}"
                   class="group block rounded-2xl border border-neutral-200 bg-white p-5 hover:border-criazo-primary/60 hover:shadow-lg smooth-transition"
                   title="{{ $service['name'] }}">
                    <h3 class="type-card-title mb-2 group-hover:text-criazo-primary smooth-transition">{{ $service['name'] }}</h3>
                    <p class="type-card-body mb-4">{{ $service['listingDescription'] ?? $service['heroSubtitle'] ?? '' }}</p>
                    <span class="inline-flex items-center text-sm font-semibold text-criazo-primary">
                        {{ $portfolioText('detail.view_service') }}
                        <svg class="w-4 h-4 ml-2 smooth-transition group-hover:translate-x-1" 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>
                    </span>
                </a>
                @endforeach
            </div>
        </section>
        @endif

        <!-- Testimonial -->
        @if(isset($project['testimonial']))
        <div class="bg-gradient-to-r from-criazo-600 to-criazo-800 rounded-3xl p-12 text-white mb-20">
            <h3 class="type-heading-sm mb-6">{{ $portfolioText('detail.what_client_says') }}</h3>
            <blockquote class="text-2xl font-medium mb-6 leading-relaxed">
                "{{ $project['testimonial']['quote'] }}"
            </blockquote>
            <div class="border-t border-white/20 pt-6">
                <p class="font-semibold text-lg">{{ $project['testimonial']['author'] }}</p>
                <p class="opacity-90">{{ $project['testimonial']['role'] }}, {{ $project['testimonial']['company'] }}</p>
            </div>
        </div>
        @endif
        
        <!-- Gallery -->
        @if(isset($project['gallery']) && count($project['gallery']) > 0)
            @if($isGraficaAlcalima)
        <div class="mb-20">
            <h2 class="section-intro__title mb-12">{{ $portfolioText('detail.project_gallery') }}</h2>
                {{-- Horizontal infinite slider: 5 visible at a time (Alcalima only) --}}
                <div class="relative" id="alcalima-gallery-slider-wrapper">
                    <div id="alcalima-gallery-slider" 
                         class="overflow-x-auto overflow-y-hidden snap-x snap-mandatory hide-scrollbar scroll-smooth"
                         style="scrollbar-width: none; -ms-overflow-style: none;"
                         role="region"
                         aria-label="{{ $portfolioText('detail.project_gallery') }}">
                        <div id="alcalima-gallery-track" class="flex gap-4 py-2" style="width: max-content;">
                            @foreach(array_merge($project['gallery'], $project['gallery']) as $galleryImage)
                            <div class="alcalima-gallery-item flex-shrink-0 w-[calc(20%-13px)] min-w-[220px] max-w-[300px] snap-center">
                                <div class="relative overflow-hidden rounded-3xl bg-transparent h-[500px] group">
                                    <img src="{{ asset($galleryImage) }}" 
                                         alt="{{ $project['alt_text']['gallery'] ?? ($project['title'] . ' - Criazo') }}"
                                         class="w-full h-full object-contain hover:scale-105 smooth-transition"
                                         loading="lazy"
                                         onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #667eea 0%, #764ba2 100%)';">
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="button" 
                            id="alcalima-gallery-prev" 
                            class="alcalima-gallery-control absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 md:-translate-x-4 z-10 w-10 h-10 rounded-full bg-white/95 border border-neutral-200 flex items-center justify-center shadow-lg hover:bg-neutral-50 smooth-transition opacity-0"
                            aria-label="{{ $portfolioText('detail.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 type="button" 
                            id="alcalima-gallery-next" 
                            class="alcalima-gallery-control absolute right-0 top-1/2 -translate-y-1/2 translate-x-2 md:translate-x-4 z-10 w-10 h-10 rounded-full bg-white/95 border border-neutral-200 flex items-center justify-center shadow-lg hover:bg-neutral-50 smooth-transition opacity-0"
                            aria-label="{{ $portfolioText('detail.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>
            @else
            @php
                $sectionImages = [];
                foreach (($project['sections'] ?? []) as $section) {
                    if (!empty($section['image'])) {
                        $sectionImages[] = $section['image'];
                    }
                    if (!empty($section['images']) && is_array($section['images'])) {
                        $sectionImages = array_merge($sectionImages, $section['images']);
                    }
                }
                $usedImages = array_filter(array_merge([($project['hero']['image'] ?? null)], $sectionImages));
                $galleryImages = array_values(array_unique(array_diff($project['gallery'], $usedImages)));
            @endphp
            @if(count($galleryImages) > 0)
        <div class="mb-20">
            <h2 class="section-intro__title mb-12">{{ $portfolioText('detail.project_gallery') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @foreach($galleryImages as $galleryImage)
                <div class="relative overflow-hidden rounded-3xl {{ $isSquareFeedImage($galleryImage) ? 'aspect-square bg-white shadow-sm ring-1 ring-neutral-200/80' : 'bg-neutral-100 aspect-[4/3]' }} group">
                    <img src="{{ asset($galleryImage) }}" 
                         alt="{{ $project['alt_text']['gallery'] ?? ($project['title'] . ' - Criazo') }}"
                         class="w-full h-full {{ $isSquareFeedImage($galleryImage) ? 'object-contain' : 'object-cover' }} hover:scale-110 smooth-transition"
                         onerror="this.style.display='none'; this.parentElement.style.background='linear-gradient(135deg, #667eea 0%, #764ba2 100%)';">
                </div>
                @endforeach
            </div>
        </div>
            @endif
            @endif
        @endif
        
        {{-- Back to Portfolio --}}
        <footer class="text-center pt-12 border-t border-neutral-300">
            <a href="{{ $localizedRoute('portfolio.index') }}" 
               class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-xl"
               title="{{ $portfolioText('aria.view_all_projects') }}">
                <svg class="w-5 h-5 mr-2" 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>
                {{ $portfolioText('detail.view_all_projects') }}
            </a>
        </footer>
        
        <meta itemprop="creator" content="Criazo">
        <meta itemprop="dateCreated" content="{{ $project['year'] ?? date('Y') }}">
    </div>
</article>

@if($isGraficaAlcalima && isset($project['gallery']) && count($project['gallery']) > 0)
@push('scripts')
<script>
(function() {
    const wrapper = document.getElementById('alcalima-gallery-slider-wrapper');
    const slider = document.getElementById('alcalima-gallery-slider');
    const track = document.getElementById('alcalima-gallery-track');
    const prevBtn = document.getElementById('alcalima-gallery-prev');
    const nextBtn = document.getElementById('alcalima-gallery-next');
    if (!wrapper || !slider || !track) return;

    const items = track.querySelectorAll('.alcalima-gallery-item');
    const total = items.length;
    const singleSetCount = total / 2;
    const visibleCount = 5;
    const gap = 16;

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

    function getStep() {
        return getItemWidth() + gap;
    }

    function scrollByPage(direction) {
        const step = getStep();
        const pageOffset = step * visibleCount;
        const target = direction === 'next'
            ? slider.scrollLeft + pageOffset
            : slider.scrollLeft - pageOffset;
        slider.scrollTo({ left: target, behavior: 'smooth' });
    }

    function handleInfiniteScroll() {
        const itemWidth = getItemWidth();
        const setWidth = (itemWidth + gap) * singleSetCount - gap;
        if (slider.scrollLeft >= setWidth - 10) {
            slider.scrollLeft -= setWidth;
        } else if (slider.scrollLeft <= 0 && singleSetCount > 0) {
            slider.scrollLeft += setWidth;
        }
    }

    let scrollTimeout;
    slider.addEventListener('scroll', function() {
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(handleInfiniteScroll, 50);
    }, { passive: true });

    wrapper.addEventListener('mouseenter', function() {
        [prevBtn, nextBtn].forEach(function(btn) {
            if (btn) btn.style.opacity = '1';
        });
    });
    wrapper.addEventListener('mouseleave', function() {
        [prevBtn, nextBtn].forEach(function(btn) {
            if (btn) btn.style.opacity = '0';
        });
    });

    if (prevBtn) prevBtn.addEventListener('click', function() { scrollByPage('prev'); });
    if (nextBtn) nextBtn.addEventListener('click', function() { scrollByPage('next'); });
})();
</script>
@endpush
@endif

@include('components.explore-site-section', [
    'projects' => collect(array_slice(MarketContent::portfolioProjects($locale), 0, 6)),
    'hideServicesSlider' => true,
    'explorePortfolioText' => $portfolioContent['explore'] ?? [],
])

@push('scripts')
<script>
(function () {
    document.querySelectorAll('[data-portfolio-chromeless-video]').forEach(function (root) {
        var v = root.querySelector('video');
        if (!v) return;
        function togglePlayback(e) {
            if (e.type === 'keydown' && e.key !== ' ' && e.key !== 'Enter') return;
            if (e.type === 'keydown') e.preventDefault();
            if (v.paused) {
                void v.play();
            } else {
                v.pause();
            }
        }
        root.addEventListener('click', togglePlayback);
        root.addEventListener('keydown', togglePlayback);
    });
})();

(function () {
    function visibleFeedWallCards() {
        if (window.innerWidth < 768) return 1;
        if (window.innerWidth < 1024) return 3;
        if (window.innerWidth < 1280) return 4;
        return 5;
    }

    document.querySelectorAll('[data-portfolio-feed-wall-slider]').forEach(function (wrapper) {
        var viewport = wrapper.querySelector('.portfolio-social-feed-wall__viewport');
        var track = wrapper.querySelector('.portfolio-social-feed-wall__track');
        var prevBtn = wrapper.querySelector('[data-feed-wall-prev]');
        var nextBtn = wrapper.querySelector('[data-feed-wall-next]');
        var dotsContainer = wrapper.querySelector('[data-feed-wall-dots]');
        if (!viewport || !track) return;

        var cards = track.querySelectorAll('.portfolio-social-feed-wall__item');
        if (cards.length === 0) return;

        var gap = 16;
        var cardWidth = 220;
        var cardStep = cardWidth + gap;
        var currentIndex = 0;
        var autoplayInterval = null;
        var autoplayResumeTimer = null;
        var autoplaySpeed = 4000;
        var prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

        function getVisibleCards() {
            return window.innerWidth < 768 ? 1 : visibleFeedWallCards();
        }

        function getMaxIndex() {
            return Math.max(0, cards.length - getVisibleCards());
        }

        function canSlide() {
            return window.innerWidth >= 768 && cards.length > getVisibleCards();
        }

        function readGap() {
            var styles = window.getComputedStyle(track);
            var parsed = parseFloat(styles.columnGap || styles.gap);
            return Number.isFinite(parsed) && parsed > 0 ? parsed : (window.innerWidth < 1024 ? 12 : 16);
        }

        function updateControls() {
            var slideable = canSlide();
            wrapper.classList.toggle('is-slideable', slideable);
            if (prevBtn) prevBtn.disabled = !slideable;
            if (nextBtn) nextBtn.disabled = !slideable;
        }

        function applyTransform() {
            if (!canSlide()) {
                track.style.transform = 'none';
                updateDots();
                updateControls();
                return;
            }
            track.style.transform = 'translate3d(' + (-currentIndex * cardStep) + 'px, 0, 0)';
            updateDots();
            updateControls();
        }

        function buildDots() {
            if (!dotsContainer) return;
            dotsContainer.innerHTML = '';

            if (!canSlide()) {
                dotsContainer.hidden = true;
                return;
            }

            dotsContainer.hidden = false;
            var maxIndex = getMaxIndex();
            var totalSteps = maxIndex + 1;
            var dotCount = Math.min(totalSteps, 9);

            for (var i = 0; i < dotCount; i++) {
                var targetIndex = dotCount === totalSteps
                    ? i
                    : Math.round(i * maxIndex / Math.max(dotCount - 1, 1));
                var dot = document.createElement('button');
                dot.type = 'button';
                dot.className = 'portfolio-social-feed-wall__dot';
                dot.setAttribute('role', 'tab');
                dot.setAttribute('aria-label', 'Slide ' + (i + 1));
                dot.dataset.index = String(targetIndex);
                dot.addEventListener('click', function () {
                    pauseAutoplayBriefly();
                    goTo(Number(this.dataset.index));
                });
                dotsContainer.appendChild(dot);
            }
        }

        function updateDots() {
            if (!dotsContainer || dotsContainer.hidden) return;
            var dots = dotsContainer.querySelectorAll('.portfolio-social-feed-wall__dot');
            if (dots.length === 0) return;

            var activeDot = 0;
            var minDiff = Infinity;
            dots.forEach(function (dot, index) {
                var targetIndex = Number(dot.dataset.index);
                var diff = Math.abs(currentIndex - targetIndex);
                dot.classList.toggle('is-active', false);
                dot.setAttribute('aria-selected', 'false');
                if (diff < minDiff) {
                    minDiff = diff;
                    activeDot = index;
                }
            });

            if (dots[activeDot]) {
                dots[activeDot].classList.add('is-active');
                dots[activeDot].setAttribute('aria-selected', 'true');
            }
        }

        function goTo(index) {
            var maxIndex = getMaxIndex();
            currentIndex = Math.max(0, Math.min(index, maxIndex));
            applyTransform();
        }

        function nextSlide() {
            if (!canSlide()) return;
            var maxIndex = getMaxIndex();
            currentIndex = currentIndex >= maxIndex ? 0 : currentIndex + 1;
            applyTransform();
        }

        function prevSlide() {
            if (!canSlide()) return;
            var maxIndex = getMaxIndex();
            currentIndex = currentIndex <= 0 ? maxIndex : currentIndex - 1;
            applyTransform();
        }

        function stopAutoplay() {
            clearInterval(autoplayInterval);
            autoplayInterval = null;
        }

        function startAutoplay() {
            stopAutoplay();
            if (prefersReducedMotion || !canSlide() || document.hidden) return;
            autoplayInterval = setInterval(nextSlide, autoplaySpeed);
        }

        function pauseAutoplayBriefly() {
            stopAutoplay();
            clearTimeout(autoplayResumeTimer);
            autoplayResumeTimer = setTimeout(startAutoplay, 5000);
        }

        function updateLayout() {
            if (window.innerWidth < 768) {
                cards.forEach(function (card) {
                    card.style.width = '';
                });
                track.style.transform = 'none';
                stopAutoplay();
                buildDots();
                updateControls();
                return;
            }

            gap = readGap();
            var visibleCards = getVisibleCards();
            var containerWidth = viewport.offsetWidth;
            if (containerWidth <= 0) return;

            cardWidth = (containerWidth - (gap * (visibleCards - 1))) / visibleCards;
            cardStep = cardWidth + gap;

            cards.forEach(function (card) {
                card.style.width = cardWidth + 'px';
            });

            if (currentIndex > getMaxIndex()) {
                currentIndex = getMaxIndex();
            }

            buildDots();
            applyTransform();
            startAutoplay();
        }

        window.addEventListener('resize', updateLayout);
        document.addEventListener('visibilitychange', function () {
            if (document.hidden) stopAutoplay();
            else startAutoplay();
        });

        if (typeof ResizeObserver !== 'undefined') {
            var resizeObserver = new ResizeObserver(function () {
                updateLayout();
            });
            resizeObserver.observe(viewport);
        }

        if (typeof IntersectionObserver !== 'undefined') {
            var visibilityObserver = new IntersectionObserver(function (entries) {
                entries.forEach(function (entry) {
                    if (entry.isIntersecting) startAutoplay();
                    else stopAutoplay();
                });
            }, { threshold: 0.2 });
            visibilityObserver.observe(wrapper);
        }

        wrapper.addEventListener('mouseenter', stopAutoplay);
        wrapper.addEventListener('mouseleave', startAutoplay);
        wrapper.addEventListener('focusin', stopAutoplay);
        wrapper.addEventListener('focusout', function (event) {
            if (!wrapper.contains(event.relatedTarget)) startAutoplay();
        });

        if (nextBtn) {
            nextBtn.addEventListener('click', function () {
                pauseAutoplayBriefly();
                nextSlide();
            });
        }

        if (prevBtn) {
            prevBtn.addEventListener('click', function () {
                pauseAutoplayBriefly();
                prevSlide();
            });
        }

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

        viewport.addEventListener('touchend', function (e) {
            if (window.innerWidth >= 768) {
                var touchEndX = e.changedTouches[0].screenX;
                var diff = touchStartX - touchEndX;
                if (Math.abs(diff) > 50) {
                    if (diff > 0) nextSlide();
                    else prevSlide();
                }
                pauseAutoplayBriefly();
            }
        }, { passive: true });

        if (document.readyState === 'complete') {
            updateLayout();
        } else {
            window.addEventListener('load', updateLayout, { once: true });
        }
        requestAnimationFrame(updateLayout);
    });
})();
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset_versioned('css/portfolio-showcase.css') }}">
@endpush

@endsection