@extends('layouts.app')

@section('content')
<section class="py-16 md:py-24 bg-[#1a1614]">
    <div class="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-4xl font-light text-white mb-8">{{ __('blog') }}</h1>

        @if($categories->isNotEmpty())
            <div class="flex flex-wrap gap-3 mb-10">
                <a href="{{ localized_route('blog.index') }}" class="text-sm px-4 py-2 border border-white/20 text-white/80 hover:border-[#c77d4a] hover:text-[#c77d4a] transition {{ !request('category') ? 'border-[#c77d4a] text-[#c77d4a]' : '' }}">
                    {{ __('all') }}
                </a>
                @foreach($categories as $category)
                    <a href="{{ localized_route('blog.index', ['category' => $category->slug]) }}" class="text-sm px-4 py-2 border border-white/20 text-white/80 hover:border-[#c77d4a] hover:text-[#c77d4a] transition {{ request('category') === $category->slug ? 'border-[#c77d4a] text-[#c77d4a]' : '' }}">
                        {{ $category->name }}
                    </a>
                @endforeach
            </div>
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($posts as $post)
                <article class="group bg-[#231e1b] rounded-xl overflow-hidden">
                    @if($post->image)
                        <a href="{{ localized_route('blog.show', $post->slug) }}" class="block aspect-[16/10] overflow-hidden">
                            <picture>
                                @if(image_has_webp($post->image))
                                    <source type="image/webp" srcset="{{ image_webp_url($post->image) }}">
                                @endif
                                <img src="{{ asset('images/' . $post->image) }}" alt="{{ $post->title }}" loading="lazy" decoding="async" class="w-full h-full object-cover transition duration-700 group-hover:scale-105">
                            </picture>
                        </a>
                    @endif
                    <div class="p-6">
                        @if($post->category)
                            <span class="text-xs text-[#c77d4a] uppercase tracking-wider">{{ $post->category->name }}</span>
                        @endif
                        <h2 class="text-xl font-light text-white mt-2 mb-3">
                            <a href="{{ localized_route('blog.show', $post->slug) }}" class="hover:text-[#c77d4a] transition">{{ $post->title }}</a>
                        </h2>
                        <p class="text-sm text-white/60 line-clamp-3">{{ \Illuminate\Support\Str::limit(strip_tags($post->excerpt ?: $post->content), 140) }}</p>
                        <a href="{{ localized_route('blog.show', $post->slug) }}" class="inline-flex items-center mt-4 text-sm text-[#c77d4a] hover:text-white transition">
                            {{ __('read_more') }}
                            <svg class="w-4 h-4 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/>
                            </svg>
                        </a>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="mt-12">
            {{ $posts->links() }}
        </div>
    </div>
</section>
@endsection