@extends('layouts.app')

@section('title', $title ?? __('pages.blog_title'))

@section('content')
@include('sections.blog.hero')

{{-- Breadcrumb --}}
<x-blog.breadcrumb :items="[
    ['label' => __('navigation.home'), 'url' => localized_route('home')],
    ['label' => 'Blog'],
]" />

{{-- Category filter --}}
<x-blog.category-filter :tags="$tags" :activeTag="$activeTag" :locale="$locale" />

{{-- Article grid --}}
<div class="max-w-7xl mx-auto px-4 py-8">
    @if($articles->isNotEmpty())
    {{-- Featured article (first) --}}
    <x-blog.blog-card :article="$articles->first()" variant="featured" :locale="$locale" />

    {{-- Compact cards grid with GSAP stagger --}}
    @if($articles->count() > 1)
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" data-display-wrapped>
        @foreach($articles->skip(1) as $article)
        <x-blog.blog-card :article="$article" variant="compact" :locale="$locale" />
        @endforeach
    </div>
    @endif

    {{-- Pagination --}}
    <nav aria-label="Pagination" class="mt-12">
        {{ $articles->withPath(localized_route('blog.index'))->links() }}
    </nav>
    @else
    {{-- Empty state --}}
    <div class="text-center py-20">
        <p class="text-muted-foreground text-lg mb-8">{{ __('blog.empty_state') }}</p>
        <x-atoms.button-link href="{{ localized_route('contact') }}">
            {{ __('navigation.contact_us') }}
        </x-atoms.button-link>
    </div>
    @endif
</div>
@endsection