@extends('layouts.app')

@section('title', 'Блог — Placeo')

@section('content')
<div class="mx-auto max-w-[1100px]">
    <nav aria-label="breadcrumb" class="mb-4 text-sm text-muted">
        <a href="{{ route('home') }}" class="hover:text-brand-700">Главная</a>
        <span class="mx-1">/</span>
        <span class="text-ink">Блог</span>
    </nav>

    <h1 class="mb-2 text-3xl font-extrabold tracking-[-0.02em] text-ink">Блог Placeo</h1>
    <p class="mb-8 max-w-2xl text-muted">Советы, инструкции и новости: как покупать и продавать безопасно и выгодно.</p>

    @if ($articles->isEmpty())
        <div class="card p-10 text-center text-muted">Пока нет опубликованных статей.</div>
    @else
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($articles as $article)
                <article class="card group flex flex-col overflow-hidden">
                    <a href="{{ route('blog.show', $article) }}" class="block aspect-[16/9] overflow-hidden bg-gray-100">
                        @if ($article->hasCover())
                            <img src="{{ $article->coverPreviewUrl() }}" alt="{{ $article->title }}" loading="lazy"
                                 class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105">
                        @endif
                    </a>
                    <div class="flex flex-1 flex-col p-5">
                        @if ($article->published_at)
                            <time datetime="{{ $article->published_at->toDateString() }}" class="mb-2 text-xs text-muted">
                                {{ $article->published_at->isoFormat('D MMMM YYYY') }}
                            </time>
                        @endif
                        <h2 class="mb-2 text-lg font-bold leading-snug text-ink">
                            <a href="{{ route('blog.show', $article) }}" class="hover:text-brand-700">{{ $article->title }}</a>
                        </h2>
                        <p class="line-clamp-3 text-sm text-muted">{{ $article->summary(180) }}</p>
                        <a href="{{ route('blog.show', $article) }}" class="mt-4 inline-flex text-sm font-semibold text-brand-700 hover:underline">Читать →</a>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="mt-10">{{ $articles->links() }}</div>
    @endif
</div>
@endsection