@extends('layouts.app')

@section('title', __('app.blog.title'))
@section('meta_description', __('app.blog.meta_description'))

@section('content')
    @include('partials.page-hero', [
        'crumbs' => [
            ['name' => __('app.nav.home'), 'url' => lroute('home')],
            ['name' => __('app.nav.blog')],
        ],
        'title' => __('app.blog.h1'),
        'lead' => __('app.blog.lead'),
    ])

    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
        @if ($posts->isEmpty())
            <p class="rounded-2xl bg-white p-8 text-center text-ink-soft ring-1 ring-black/5">{{ __('app.blog.empty') }}</p>
        @else
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($posts as $post)
                    <a href="{{ lroute('blog.show', ['slug' => $post->slug]) }}" class="group flex flex-col rounded-2xl bg-white p-6 shadow-sm ring-1 ring-black/5 transition hover:ring-brand/40">
                        @if ($post->featured_image)
                            <img src="{{ asset('storage/'.$post->featured_image) }}" alt="{{ $post->title }}" class="-mx-6 -mt-6 mb-4 aspect-[1200/630] w-[calc(100%+3rem)] max-w-none rounded-t-2xl object-cover" width="1200" height="630" loading="lazy">
                        @endif
                        <time class="text-xs text-ink-soft" datetime="{{ $post->published_at->toDateString() }}">{{ $post->published_at->format('Y-m-d') }}</time>
                        <h2 class="mt-2 text-base font-bold text-brand-deep group-hover:text-brand">{{ $post->title }}</h2>
                        <p class="mt-2 text-sm leading-relaxed text-ink-soft">{{ $post->excerpt }}</p>
                    </a>
                @endforeach
            </div>
        @endif
    </section>
@endsection