@extends('layouts.app')
@section('title','Blog - Journey of Life GCC')
@section('content')
<section style="background:#e0f2fe;padding:3rem 0">
  <div class="container"><h1 style="font-size:2.5rem;font-weight:800;color:#1e3a8a">Our Blog</h1></div>
</section>
<section style="padding:4rem 0;background:white">
  <div class="container">
    <div class="blog-grid">
      @forelse($posts as $post)
      <div class="blog-card">
        @if($post->featured_image)
        <img src="/storage/{{ $post->featured_image }}" alt="{{ $post->title }}" class="blog-image" onerror="this.style.display='none'">
        @endif
        <div class="blog-content">
          <div class="blog-date"><i class="fas fa-calendar"></i> {{ $post->published_at?->format('M d, Y') }}</div>
          <h3 class="blog-title">{{ $post->title }}</h3>
          <p class="blog-excerpt">{{ Str::limit($post->excerpt, 150) }}</p>
          <a href="{{ route('blog.show', $post->slug) }}" class="read-more">Read More <i class="fas fa-arrow-right"></i></a>
        </div>
      </div>
      @empty
      <p style="text-align:center;color:#6b7280;padding:3rem;grid-column:span 2">No posts yet.</p>
      @endforelse
    </div>
    <div style="margin-top:2rem">{{ $posts->links() }}</div>
  </div>
</section>
@endsection