@extends('layouts.main')

@section('title', 'Blog - ' . setting('brand.name', 'Grace Family Church'))
@section('meta_description', 'Articles, teachings and reflections from ' . setting('brand.name', 'Grace Family Church') . '.')

@section('content')

<!-- HERO -->
<x-page-header section="header_blog">
    <h1 class="display-4 fw-bold">Our Blog</h1>
    <div class="section-divider" style="background: var(--gfc-accent);"></div>
    <p class="lead">Teachings, reflections, and stories from our church family.</p>
</x-page-header>

<section class="py-5">
    <div class="container">

        @if($blogs->isEmpty())
            <div class="text-center text-muted py-5">
                <i class="fas fa-feather-pointed fa-3x mb-3" style="color: var(--gfc-accent);"></i>
                <h4>No articles yet</h4>
                <p>Check back soon — new posts are on the way.</p>
            </div>
        @else
            <div class="row g-4">
                @foreach($blogs as $blog)
                    <div class="col-md-6 col-lg-4">
                        <a href="{{ route('blog.show', $blog->slug) }}" class="blog-card h-100">
                            <div class="blog-card-cover" @if(!$blog->coverUrl()) style="background: {{ $blog->gradientCss() }};" @endif>
                                @if($blog->coverUrl())
                                    <img src="{{ $blog->coverUrl() }}" alt="{{ $blog->title }}" loading="lazy">
                                @else
                                    <i class="fas fa-feather-pointed"></i>
                                @endif
                            </div>
                            <div class="blog-card-body">
                                <div class="blog-card-meta">
                                    <i class="fas fa-calendar me-1"></i> {{ $blog->published_at->format('d M Y') }}
                                </div>
                                <h5 class="blog-card-title">{{ $blog->title }}</h5>
                                <p class="blog-card-excerpt">{{ $blog->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($blog->body), 120) }}</p>
                                <span class="blog-card-readmore">Read more <i class="fas fa-arrow-right ms-1"></i></span>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>

            <div class="d-flex justify-content-center mt-5">
                {{ $blogs->links() }}
            </div>
        @endif

    </div>
</section>

@endsection