@extends('layouts.app')
@section('title', 'Blog')

@section('content')
<section class="bg-gradient-to-br from-brand-600 to-brand-800 text-white">
    <div class="max-w-5xl mx-auto px-4 py-14">
        <h1 class="text-3xl lg:text-4xl font-extrabold">Blog {{ $brandName }}</h1>
        <p class="text-brand-100 mt-2">Tips desain, inspirasi merchandise, dan panduan custom printing.</p>
    </div>
</section>
<div class="max-w-5xl mx-auto px-4 py-10">
    @if ($posts->count())
        <div class="grid md:grid-cols-3 gap-5">
            @foreach ($posts as $post)
                <a href="{{ route('blog.show', $post) }}" class="block bg-white border border-slate-100 rounded-2xl p-6 hover:shadow-soft transition">
                    <p class="text-xs text-slate-400 mb-2">{{ $post->created_at->format('d M Y') }}</p>
                    <h2 class="font-bold text-slate-800">{{ $post->title }}</h2>
                    <p class="text-sm text-slate-500 mt-2 line-clamp-3">{{ $post->excerpt ?? \Illuminate\Support\Str::limit(strip_tags($post->body), 120) }}</p>
                    <span class="inline-block mt-3 text-xs font-semibold text-brand-600">Baca →</span>
                </a>
            @endforeach
        </div>
        <div class="mt-8">{{ $posts->links() }}</div>
    @else
        <p class="text-center text-slate-400 py-10">Belum ada artikel.</p>
    @endif
</div>
@endsection