@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);
    };
    // Use parent's $projects if provided (e.g. from service-industry), otherwise load portfolio; ensure Collection for ->count()
    if (!isset($projects) || !($projects instanceof \Illuminate\Support\Collection)) {
        if (SeoHelper::requiresOwnPublicCopy($locale)) {
            $projects = collect(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);
    $explorePortfolioText = $explorePortfolioText ?? [];
    $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

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

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

        @if(empty($hidePortfolioSlider) && 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">{{ $explorePortfolioText['portfolio_heading'] ?? __('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">
                    {{ $explorePortfolioText['view_portfolio'] ?? __('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="explore-portfolio-slider-wrapper">
                <div id="explore-portfolio-slider">
                    <div class="flex gap-4 md:gap-8 explore-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">
                                <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 = $projectSubtitle ?? ($project['hero']['description'] ?? ($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">
                                        {{ $explorePortfolioText['view_case_study'] ?? __('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="explore-portfolio-prev" class="explore-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="explore-portfolio-next" class="explore-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">{{ $explorePortfolioText['view_portfolio'] ?? __('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(empty($hideServicesSlider) && 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="explore-services-slider-wrapper">
                <div id="explore-services-slider">
                    <div class="flex gap-4 md:gap-8 explore-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="explore-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="type-card-title text-white mb-1">{{ $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="explore-services-prev" class="explore-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="explore-services-next" class="explore-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>

@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, .explore-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('explore-portfolio-slider', 'explore-portfolio-slider-track', 'explore-portfolio-prev', 'explore-portfolio-next', 'explore-portfolio-controls');
    initSlider('explore-services-slider', 'explore-services-slider-track', 'explore-services-prev', 'explore-services-next', 'explore-services-controls');
})();
</script>
@endpush