@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;
    };
    $pageSeo = $portfolioContent['meta'];
    
    // Helper function to generate localized routes (English has no prefix)
    $localizedRoute = function($routeName, $params = []) use ($locale) {
        return SeoHelper::localizedRoute($routeName, $params, $locale);
    };

    $compactCategory = static function (?string $category): string {
        $items = collect(preg_split('/\s*[•|,]\s*/u', $category ?? ''))
            ->filter()
            ->take(2)
            ->values();

        return $items->isNotEmpty() ? $items->implode(' • ') : (string) $category;
    };
@endphp

@section('title', $pageSeo['title'])
@section('meta_description', $pageSeo['description'])
@section('meta_keywords', $pageSeo['keywords'])
@section('og_image', $projects->isNotEmpty() && isset($projects->first()['hero']['image']) ? asset($projects->first()['hero']['image']) : asset($pageSeo['image']))

@push('head')
@if($projects->isNotEmpty() && isset($projects->first()['hero']['image']))
<link rel="preload" as="image" href="{{ $projects->first()['hero']['image'] }}" fetchpriority="high">
@endif
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset_versioned('css/portfolio-bento-grid.css') }}">
<style>
    /* Hero Gradient Background - Matching Homepage */
    .portfolio-hero-gradient {
        background: linear-gradient(to bottom, #ecf4f5 0%, #ffffff 100%);
        padding-bottom: calc(2.5rem * 1.15);
    }

    /* 30% tighter top breathing room (nav → title) vs site default */
    body.has-dynamic-navigation #main-content > section.portfolio-hero-gradient:first-of-type,
    body.has-dynamic-megamenu-navigation #main-content > section.portfolio-hero-gradient:first-of-type {
        padding-top: calc(var(--dn-top) + var(--dn-pill-h-mobile, var(--dn-pill-h)) + 2.45rem) !important;
    }

    @media (min-width: 769px) {
        body.has-dynamic-navigation #main-content > section.portfolio-hero-gradient:first-of-type,
        body.has-dynamic-megamenu-navigation #main-content > section.portfolio-hero-gradient:first-of-type {
            padding-top: calc(var(--dn-top) + var(--dn-pill-h) + 3.5rem) !important;
        }
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 2rem;
    }

    @media (max-width: 768px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

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

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(40px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-slide-up {
        animation: slideUp 0.8s ease-out forwards;
    }
</style>
@endpush

@section('content')

<!-- Schema.org Structured Data for SEO -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "name": "{{ $portfolioText('schema.name') }}",
  "description": "{{ $portfolioText('schema.description') }}",
  "url": "{{ \App\Helpers\SeoHelper::getCanonicalUrl() }}",
  "publisher": {
    "@type": "Organization",
    "name": "{{ __('messages.meta.author') }}",
    "logo": {
      "@type": "ImageObject",
      "url": "{{ asset('images/logo.webp') }}"
    }
  },
  "mainEntity": {
    "@type": "ItemList",
    "itemListElement": [
      @foreach($projects as $index => $project)
      {
        "@type": "CreativeWork",
        "position": {{ $index + 1 }},
        "name": "{{ $project['title'] }}",
        "description": "{{ $project['hero']['subtitle'] }}",
        "image": "{{ asset($project['hero']['image']) }}",
        "url": "{{ $localizedRoute('portfolio.show', ['slug' => $project['slug']]) }}"
      }{{ $loop->last ? '' : ',' }}
      @endforeach
    ]
  }
}
</script>

<!-- Hero Section - Compact & Balanced -->
<section class="relative pt-0 overflow-hidden portfolio-hero-gradient">
    <div class="site-container">
        <!-- Hero Content - Custom Layout: Title 50%, Space, Text 30% -->
        <div class="grid grid-cols-[50%_1fr_30%] gap-0 items-start max-md:grid-cols-1 max-md:gap-2">
            <!-- Left: Title (50%) -->
            <div class="animate-slide-up">
                <p class="section-intro__eyebrow text-criazo-primary mb-3 max-md:mb-2">{{ $portfolioText('page.hero_eyebrow') }}</p>
                <h1 class="text-3xl md:text-4xl lg:text-5xl font-semibold text-slate-900 leading-tight mb-4 max-md:mb-0">
                    {{ $portfolioText('page.hero_title_1') }}<br>
                    <span class="text-criazo-primary">{{ $portfolioText('page.hero_title_2') }}</span>
                </h1>
            </div>
            
            <!-- Middle: Empty Space -->
            <div class="max-md:hidden"></div>
            
            <!-- Right: Description & CTA (30%) -->
            <div class="animate-slide-up animation-delay-200">
                <p class="text-xs md:text-sm text-slate-600 leading-snug mb-3">
                    {{ $portfolioText('page.hero_description', ['count' => method_exists($projects, 'total') ? $projects->total() : count($projects)]) }}
                </p>
                
                <div class="flex flex-wrap gap-3">
                    <a href="{{ $localizedRoute('contact.index') }}" 
                       class="inline-flex items-center px-5 py-2.5 bg-criazo-primary text-white rounded-full text-xs font-semibold hover:bg-criazo-hover smooth-transition shadow-lg">
                        {{ $portfolioText('page.primary_cta') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Portfolio Grid — editorial bento rows -->
<section id="projects-grid" class="pt-0 pb-24 bg-white">
    <div class="site-container">
        @php
            $projectsList = $projects instanceof \Illuminate\Contracts\Pagination\Paginator
                ? $projects->items()
                : collect($projects)->values()->all();
            $bentoRows = [];
            $rowPatterns = ['wide-first', 'trio', 'narrow-first'];
            $cursor = 0;
            $totalProjects = count($projectsList);
            $patternIndex = 0;

            while ($cursor < $totalProjects) {
                $pattern = $rowPatterns[$patternIndex % 3];
                $cards = [];

                if ($pattern === 'trio') {
                    for ($slot = 0; $slot < 3 && $cursor < $totalProjects; $slot++) {
                        $cards[] = [
                            'project' => $projectsList[$cursor],
                            'size' => 'third',
                        ];
                        $cursor++;
                    }
                } else {
                    $sizes = $pattern === 'wide-first' ? ['wide', 'narrow'] : ['narrow', 'wide'];
                    foreach ($sizes as $size) {
                        if ($cursor >= $totalProjects) {
                            break;
                        }
                        $cards[] = [
                            'project' => $projectsList[$cursor],
                            'size' => $size,
                        ];
                        $cursor++;
                    }
                }

                if ($cards !== []) {
                    $bentoRows[] = [
                        'type' => $pattern,
                        'cards' => $cards,
                    ];
                }

                $patternIndex++;
            }

            $animIndex = 0;
        @endphp

        <div class="portfolio-bento" aria-label="{{ $portfolioText('aria.portfolio_grid') }}">
            @foreach($bentoRows as $row)
            <div class="portfolio-bento-row portfolio-bento-row--{{ $row['type'] }}" data-count="{{ count($row['cards']) }}">
                @foreach($row['cards'] as $card)
                    @include('components.portfolio-bento-card', [
                        'project' => $card['project'],
                        'size' => $card['size'],
                        'animIndex' => $animIndex,
                        'portfolioText' => $portfolioText,
                        'compactCategory' => $compactCategory,
                        'localizedRoute' => $localizedRoute,
                        'locale' => $locale,
                    ])
                    @php $animIndex++; @endphp
                @endforeach
            </div>
            @endforeach
        </div>
        @if(method_exists($projects, 'hasPages') && $projects->hasPages())
            <div class="mt-12 flex justify-center">
                {{ $projects->withQueryString()->links() }}
            </div>
        @endif
    </div>
</section>

<!-- CTA Section -->
<section class="py-24 bg-gradient-to-b from-neutral-100 to-white relative overflow-hidden">
    <div class="absolute inset-0 opacity-5">
        <div class="absolute inset-0" style="background-image: radial-gradient(circle, #000 1px, transparent 1px); background-size: 32px 32px;"></div>
    </div>
    
    <div class="relative z-10 site-container text-center">
        <h2 class="section-intro__title mb-6">
            {{ $portfolioText('cta.title') }}
        </h2>
        <p class="text-lg text-neutral-600 mb-8">
            {{ $portfolioText('cta.description') }}
        </p>
        <a href="{{ $localizedRoute('contact.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">
            {{ $portfolioText('cta.button') }}
            <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="M17 8l4 4m0 0l-4 4m4-4H3"/>
            </svg>
        </a>
    </div>
</section>

@include('components.explore-site-section', [
    'hidePortfolioSlider' => true,
    'explorePortfolioText' => $portfolioContent['explore'] ?? [],
])

@endsection