@extends('frontend.layouts.master')

@section('title', 'Blog & Insights | FBA UK LTD')
@section('meta_description', 'Expert advice, guides and news to help you navigate your UK university journey with FBA UK LTD.')
@section('meta_keywords', 'UK university blog, student finance guides, admissions advice')
@section('canonical', route('blog'))

@section('content')
@include('frontend.partials.page-hero', [
  'currentPage' => 'Blog',
  'title' => 'From Our <span class="text-gradient">Blog</span>',
  'subtitle' => 'Expert advice, guides, and news for your UK university journey.',
])

<section class="section blog-section blog-listing-section" aria-labelledby="blog-listing-heading">
  <div class="container blog-wrap">
    <h2 id="blog-listing-heading" class="visually-hidden">Blog articles</h2>
    <div class="row g-4">
      <div class="col-lg-8">
        <div class="row g-4 blog-grid">
          @forelse($blogs as $post)
            <div class="col-md-6 reveal-up">
              <article class="blog-card">
                <a href="{{ route('blog.details', $post->slug) }}" class="blog-image-link" aria-label="Read: {{ $post->title }}">
                  <div class="blog-image">
                    <img src="{{ $post->imageUrl() ?: \App\Support\BreadcrumbImage::FALLBACK }}" alt="{{ $post->title }}" width="600" height="360" loading="lazy" class="lazy-img">
                    <div class="blog-image-overlay" aria-hidden="true"></div>
                    @if($post->category)
                      <span class="blog-category">{{ $post->category->name }}</span>
                    @endif
                  </div>
                </a>
                <div class="blog-body">
                  <div class="blog-meta">
                    <time class="blog-date" datetime="{{ optional($post->published_at)->toDateString() }}">
                      <i class="far fa-calendar" aria-hidden="true"></i>
                      {{ optional($post->published_at)->format('j F Y') ?: 'Draft' }}
                    </time>
                    <span class="blog-read-time"><i class="far fa-clock" aria-hidden="true"></i> {{ $post->estimatedReadTime() }}</span>
                  </div>
                  <h3 class="blog-title"><a href="{{ route('blog.details', $post->slug) }}">{{ $post->title }}</a></h3>
                  <p class="blog-excerpt">{{ \Illuminate\Support\Str::limit(strip_tags($post->excerpt ?: $post->content), 110) }}</p>
                  <a href="{{ route('blog.details', $post->slug) }}" class="blog-link">Read Article <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
                </div>
              </article>
            </div>
          @empty
            <div class="col-12"><p class="text-muted text-center py-5">No articles published yet.</p></div>
          @endforelse
        </div>
        <div class="mt-4">{{ $blogs->links() }}</div>
      </div>
      <aside class="col-lg-4">
        <div class="course-sidebar-card">
          <div class="course-sidebar-card__body">
            <h3 class="course-sidebar-card__title">Categories</h3>
            <ul class="course-career-list mb-0">
              @foreach($categories as $category)
                <li><i class="fas fa-folder" aria-hidden="true"></i> {{ $category->name }} ({{ $category->blogs_count }})</li>
              @endforeach
            </ul>
            <a href="{{ route('contact') }}" class="btn btn-primary w-100 course-sidebar-cta mt-3">
              <i class="fas fa-paper-plane" aria-hidden="true"></i> Enquire Now
            </a>
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>
@endsection