@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    use App\Helpers\CachedData;
    use App\Helpers\MarketContent;
    use App\Helpers\ServiceTranslationHelper;
    $locale = app()->getLocale();
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };
    if (SeoHelper::requiresOwnPublicCopy($locale)) {
        $projects = array_slice(MarketContent::portfolioProjects($locale), 0, 6);
    } else {
        $portfolioRaw = CachedData::load('portfolio-data');
        $projects = ServiceTranslationHelper::translatePortfolioProjects(array_slice(array_values($portfolioRaw), 0, 6));
    }
    $projects = collect($projects);
    $heroServices = [
        ['title' => __('messages.services.web_development'), 'subtitle' => __('messages.hero_services.web_subtitle'), 'description' => __('messages.hero_services.web_description'), 'image' => asset('images/portfolio/rede-norte-energia/ux-ui-web-design-developed-by-criazo-for-rede-norte-energia.webp'), 'slug' => 'web-development'],
        ['title' => __('messages.services.social_media'), 'subtitle' => __('messages.hero_services.social_subtitle'), 'description' => __('messages.hero_services.social_description'), 'image' => asset('images/portfolio/grafica-alcalima/social-media-paid-traffic-hero-developed-by-criazo-for-grafica-alcalima.webp'), 'slug' => 'social-media'],
        ['title' => __('messages.services.ecommerce'), 'subtitle' => __('messages.hero_services.ecommerce_subtitle'), 'description' => __('messages.hero_services.ecommerce_description'), 'image' => asset('images/portfolio/demace/ecommerce-hero-developed-by-criazo-for-demace.webp'), 'slug' => 'ecommerce'],
        ['title' => __('messages.services.seo_sem'), 'subtitle' => __('messages.hero_services.seo_subtitle'), 'description' => __('messages.hero_services.seo_description'), 'image' => asset('images/portfolio/seo/seo-analysis-optimization.webp'), 'slug' => 'seo-sem'],
        ['title' => __('messages.services.branding'), 'subtitle' => __('messages.hero_services.branding_subtitle'), 'description' => __('messages.hero_services.branding_description'), 'image' => asset('images/portfolio/doce-ary/brand-positioning-identity-developed-by-criazo-for-doce-ary.webp'), 'slug' => 'branding'],
        ['title' => __('messages.services.digital_marketing'), 'subtitle' => __('messages.hero_services.marketing_subtitle'), 'description' => __('messages.hero_services.marketing_description'), 'image' => asset('images/portfolio/grafica-alcalima/social-media-paid-traffic-hero-developed-by-criazo-for-grafica-alcalima.webp'), 'slug' => 'digital-marketing'],
    ];
@endphp

@section('title', __('messages.errors.404_title') . ' | ' . (config('seo.site_name') ?: __('messages.meta.author')))
@section('meta_description', __('messages.errors.404_message'))
@section('robots', 'noindex, follow')

@push('styles')
<style>
    .error-404-hero-gradient {
        background: linear-gradient(135deg, #ecf4f5 0%, #e0f2f1 50%, #ffffff 100%);
    }
    .e404-portfolio-slider-track { display: flex; will-change: transform; }
    @media (max-width: 768px) {
        #e404-portfolio-slider-wrapper {
            position: relative; left: 50%; right: 50%;
            margin-left: -50vw !important; margin-right: -50vw !important;
            width: 100vw !important; max-width: 100vw !important;
        }
        #e404-portfolio-slider {
            overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 1rem !important;
        }
        .e404-portfolio-slider-track { transform: none !important; }
        .e404-portfolio-slider-track article { min-width: 85vw !important; flex: 0 0 85vw !important; scroll-snap-align: center; }
        .e404-portfolio-controls { display: none; }
    }
    .e404-services-slider-track { display: flex; will-change: transform; }
    @media (max-width: 768px) {
        #e404-services-slider-wrapper {
            position: relative; left: 50%; right: 50%;
            margin-left: -50vw !important; margin-right: -50vw !important;
            width: 100vw !important; max-width: 100vw !important;
        }
        #e404-services-slider {
            overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 1rem !important;
        }
        .e404-services-slider-track { transform: none !important; }
        .e404-services-slider-track .e404-service-card { min-width: 85vw !important; flex: 0 0 85vw !important; scroll-snap-align: center; }
        .e404-services-controls { display: none; }
    }
</style>
@endpush

@section('content')

{{-- Hero: same style as thank-you page --}}
<section class="relative pt-20 sm:pt-24 pb-16 sm:pb-20 overflow-hidden error-404-hero-gradient" aria-labelledby="404-heading">
    <div class="site-container">
        <div class="max-w-2xl mx-auto text-center">
            <div class="mx-auto w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-amber-100 flex items-center justify-center mb-6 sm:mb-8 shadow-inner">
                <svg class="w-10 h-10 sm:w-12 sm:h-12 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <p class="text-criazo-primary font-semibold text-sm tracking-wider mb-2" aria-hidden="true">404</p>
            <h1 id="404-heading" class="text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 mb-4">
                {{ __('messages.errors.404_title') }}
            </h1>
            <p class="text-lg sm:text-xl text-slate-600 mb-2">
                {{ __('messages.errors.404_message') }}
            </p>
            <p class="text-sm text-slate-500 mb-10">{{ __('messages.errors.404_help') }}</p>
            <div class="flex flex-wrap items-center justify-center gap-3">
                <a href="{{ $localizedRoute('home') }}" 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 shadow-criazo-primary/20">{{ __('messages.errors.404_cta') }}</a>
                <a href="{{ $localizedRoute('contact.index') }}" class="inline-flex items-center px-6 py-3 bg-white border-2 border-neutral-200 text-neutral-700 rounded-full font-semibold hover:border-criazo-primary hover:text-criazo-primary smooth-transition">{{ __('messages.nav.contact') }}</a>
            </div>
        </div>
    </div>
</section>

{{-- Explore: same portfolio + services cards as thank-you page --}}
<section class="py-16 sm:py-24 bg-white overflow-hidden" aria-labelledby="e404-explore-heading">
    <div class="site-container">
        <header class="text-center mb-12 sm:mb-16">
            <span class="inline-block text-criazo-primary font-semibold text-sm tracking-wide mb-3">{{ __('messages.errors.404_explore') }}</span>
            <h2 id="e404-explore-heading" class="section-intro__title mb-3">{{ __('messages.homepage.portfolio_title_1') }} {{ __('messages.homepage.portfolio_title_2') }}</h2>
            <p class="text-neutral-600 max-w-xl mx-auto">{{ __('messages.contact.thank_you_explore_subtitle') }}</p>
        </header>

        @if(isset($projects) && count($projects) > 0)
        <div class="mb-16 sm:mb-20">
            <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-8">
                <h3 class="type-card-title">{{ __('messages.nav.portfolio') }}</h3>
                <a href="{{ $localizedRoute('portfolio.index') }}" class="text-criazo-primary hover:text-criazo-hover font-medium smooth-transition hidden md:inline-flex items-center gap-1 mt-4 md:mt-0">
                    {{ __('messages.contact.thank_you_view_portfolio') }}
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            <div class="relative" id="e404-portfolio-slider-wrapper">
                <div id="e404-portfolio-slider">
                    <div class="flex gap-4 md:gap-8 e404-portfolio-slider-track smooth-transition py-4" style="transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
                        @foreach($projects as $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 (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="group flex-shrink-0 w-[280px] md:w-[calc((100%-64px)/3)]" itemscope itemtype="https://schema.org/CreativeWork">
                            <a href="{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}" class="block mb-4" title="{{ $projectTitle }}">
                                <div class="relative overflow-hidden rounded-3xl bg-neutral-100 aspect-[4/3] hover:shadow-2xl smooth-transition">
                                    @if(isset($project['hero']['image']))
                                    <img src="{{ asset(ltrim($project['hero']['image'], '/')) }}" alt="{{ $projectTitle }}" class="w-full h-full object-cover group-hover:scale-105 smooth-transition duration-700" loading="lazy" width="400" height="300" sizes="(max-width: 768px) 280px, 350px">
                                    @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"><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>
                            <div class="space-y-2">
                                @if($projectCategory)<div class="text-xs text-neutral-500">{{ $projectCategory }}</div>@endif
                                <h4 class="type-card-title group-hover:text-criazo-primary smooth-transition" itemprop="name">
                                    <a href="{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}" title="{{ $projectTitle }}">{{ $projectTitle }}</a>
                                </h4>
                                @php $projectDescription = $project['hero']['description'] ?? $projectSubtitle ?? ($project['overview']['solution'] ?? null); @endphp
                                <p class="type-card-body line-clamp-3" itemprop="description">{{ $projectDescription ?: __('messages.portfolio.project_description_fallback', ['category' => strtolower($projectCategory ?: __('messages.portfolio.digital_solution'))]) }}</p>
                                <div class="pt-2">
                                    <a href="{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}" class="inline-flex items-center text-sm font-medium text-criazo-primary hover:text-criazo-hover smooth-transition group/link">
                                        {{ __('messages.homepage.view_case_study') }}
                                        <svg class="w-4 h-4 ml-1 group-hover/link:translate-x-1 smooth-transition" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                    </a>
                                </div>
                            </div>
                        </article>
                        @endforeach
                    </div>
                </div>
                <button type="button" id="e404-portfolio-prev" class="e404-portfolio-controls 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" aria-label="{{ __('messages.accessibility.previous_portfolio') }}">
                    <svg class="w-5 h-5 text-neutral-900" 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 type="button" id="e404-portfolio-next" class="e404-portfolio-controls 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" aria-label="{{ __('messages.accessibility.next_portfolio') }}">
                    <svg class="w-5 h-5 text-neutral-900" 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 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">{{ __('messages.homepage.view_all_projects') }} <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>
        @endif

        @if(count($heroServices) > 0)
        <div>
            <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-8">
                <h3 class="type-card-title">{{ __('messages.nav.services') }}</h3>
                <a href="{{ $localizedRoute('services.index') }}" class="text-criazo-primary hover:text-criazo-hover font-medium smooth-transition hidden md:inline-flex items-center gap-1 mt-4 md:mt-0">
                    {{ __('messages.contact.thank_you_browse_services') }}
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>
            <div class="relative" id="e404-services-slider-wrapper">
                <div id="e404-services-slider">
                    <div class="flex gap-4 md:gap-8 e404-services-slider-track smooth-transition py-4" style="transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
                        @foreach($heroServices as $card)
                        <a href="{{ $localizedRoute('services.show', ['slug' => $card['slug']]) }}" class="e404-service-card group relative overflow-hidden rounded-2xl md:rounded-3xl bg-slate-200 flex-shrink-0 w-[280px] md:w-[calc((100%-64px)/3)] aspect-[4/3] block" title="{{ $card['title'] }}">
                            <img src="{{ $card['image'] }}" alt="{{ $card['title'] }}" class="absolute inset-0 w-full h-full object-cover" loading="lazy" width="400" height="300">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent" aria-hidden="true"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-5 sm:p-6 flex flex-col justify-end">
                                <h4 class="text-xl sm:text-2xl font-semibold text-white mb-1 leading-tight">{{ $card['title'] }}</h4>
                                <p class="text-sm text-white/80 mb-4 line-clamp-2">{{ $card['subtitle'] }}</p>
                                <span class="inline-flex items-center text-sm font-semibold text-white group-hover:text-criazo-primary smooth-transition">
                                    {{ __('messages.homepage.explore_service') }}
                                    <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 smooth-transition" 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>
                                </span>
                            </div>
                        </a>
                        @endforeach
                    </div>
                </div>
                <button type="button" id="e404-services-prev" class="e404-services-controls 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" aria-label="{{ __('messages.accessibility.previous_portfolio') }}">
                    <svg class="w-5 h-5 text-neutral-900" 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 type="button" id="e404-services-next" class="e404-services-controls 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" aria-label="{{ __('messages.accessibility.next_portfolio') }}">
                    <svg class="w-5 h-5 text-neutral-900" 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 class="text-center md:hidden mt-8">
                <a href="{{ $localizedRoute('services.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">{{ __('messages.services.view_all') }} <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>
        @endif
    </div>
</section>

{{-- Bottom CTA --}}
<section class="py-16 sm:py-20 bg-neutral-50 border-t border-neutral-200">
    <div class="site-container text-center">
        <p class="text-neutral-600 mb-6">{{ __('messages.errors.404_help') }}</p>
        <a href="{{ $localizedRoute('home') }}" class="inline-flex items-center px-8 py-4 bg-criazo-primary text-white rounded-full font-semibold hover:bg-criazo-hover smooth-transition shadow-lg">{{ __('messages.nav.home') }} <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg></a>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function() {
    function initSlider(sliderId, trackClass, prevId, nextId, controlsClass) {
        const slider = document.getElementById(sliderId);
        const track = slider?.querySelector('.' + trackClass);
        const prevBtn = document.getElementById(prevId);
        const nextBtn = document.getElementById(nextId);
        if (!slider || !track) return;
        const cards = track.querySelectorAll('article, .e404-service-card');
        if (cards.length === 0) return;
        let cardWidth = 300, gap = 32, cardStep = cardWidth + gap, currentIndex = 0;
        let autoplayInterval, isPaused = false;
        function updateCardWidth() {
            if (window.innerWidth < 768) { cardWidth = 280; } else { const containerWidth = slider.offsetWidth; cardWidth = (containerWidth - (gap * 2)) / 3; }
            cardStep = cardWidth + gap;
            updateSlider();
        }
        function updateSlider() { track.style.transform = 'translateX(' + (-currentIndex * cardStep) + '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();
        }
        window.addEventListener('resize', updateCardWidth);
        updateCardWidth();
        var container = slider.closest('.relative');
        if (container) {
            container.addEventListener('mouseenter', function() { container.querySelectorAll('.' + controlsClass).forEach(function(b){ b.style.opacity = '1'; }); });
            container.addEventListener('mouseleave', function() { container.querySelectorAll('.' + controlsClass).forEach(function(b){ b.style.opacity = '0'; }); });
        }
        if (nextBtn) { nextBtn.addEventListener('click', function(){ clearInterval(autoplayInterval); nextSlide(); setTimeout(function(){ autoplayInterval = setInterval(nextSlide, 4000); }, 5000); }); }
        if (prevBtn) { prevBtn.addEventListener('click', function(){ clearInterval(autoplayInterval); prevSlide(); setTimeout(function(){ autoplayInterval = setInterval(nextSlide, 4000); }, 5000); }); }
        slider.addEventListener('mouseenter', function(){ isPaused = true; clearInterval(autoplayInterval); });
        slider.addEventListener('mouseleave', function(){ isPaused = false; autoplayInterval = setInterval(nextSlide, 4000); });
        var touchStartX = 0, touchEndX = 0;
        track.addEventListener('touchstart', function(e){ touchStartX = e.changedTouches[0].screenX; clearInterval(autoplayInterval); }, { passive: true });
        track.addEventListener('touchend', function(e){ touchEndX = e.changedTouches[0].screenX; var d = touchStartX - touchEndX; if (Math.abs(d) > 50) { if (d > 0) nextSlide(); else prevSlide(); } setTimeout(function(){ autoplayInterval = setInterval(nextSlide, 4000); }, 3000); }, { passive: true });
        updateSlider();
        autoplayInterval = setInterval(nextSlide, 4000);
    }
    initSlider('e404-portfolio-slider', 'e404-portfolio-slider-track', 'e404-portfolio-prev', 'e404-portfolio-next', 'e404-portfolio-controls');
    initSlider('e404-services-slider', 'e404-services-slider-track', 'e404-services-prev', 'e404-services-next', 'e404-services-controls');
})();
</script>
@endpush