@extends('layouts.public')

@section('title', 'Blogs - ' . config('app.name'))
@section('meta_description', 'Read the latest study abroad articles, visa guidance, and destination insights.')

@push('styles')
<style>
    .blog-wrap { width: min(1180px, calc(100% - 28px)); margin: 0 auto; }
    .blog-hero { padding: 34px 0 24px; }
    .blog-hero-card { display:grid; grid-template-columns:1.1fr .9fr; gap:28px; padding:30px; border-radius:28px; background:linear-gradient(135deg,#f8fafc,#eef2ff); border:1px solid #dbe4f0; box-shadow:0 18px 45px rgba(15,23,42,.08); }
    .blog-hero h1 { margin:0 0 12px; font-size:clamp(2.2rem,4vw,3.8rem); line-height:1.02; font-weight:900; color:#0f172a; }
    .blog-hero p { margin:0; color:#475569; line-height:1.7; font-size:1rem; max-width:58ch; }
    .blog-hero img { width:100%; height:280px; object-fit:cover; border-radius:24px; }
    .blog-toolbar { display:grid; grid-template-columns: 1fr auto; gap:16px; align-items:center; margin:24px 0 18px; }
    .blog-search { display:flex; gap:12px; }
    .blog-search input { flex:1; padding:12px 14px; border:1px solid #d7dfeb; border-radius:14px; }
    .blog-search button { padding:12px 18px; border:0; border-radius:14px; background:#0f172a; color:#fff; font-weight:700; }
    .blog-cats { display:flex; gap:10px; flex-wrap:wrap; }
    .blog-cats a { padding:10px 16px; border:1px solid #d7dfeb; border-radius:999px; text-decoration:none; color:#334155; font-weight:700; background:#fff; }
    .blog-cats a.is-active { background:#0f172a; color:#fff; border-color:#0f172a; }
    .blog-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:22px; padding-bottom:42px; }
    .blog-card { background:#fff; border:1px solid #e2e8f0; border-radius:22px; overflow:hidden; box-shadow:0 16px 36px rgba(15,23,42,.06); }
    .blog-card img { width:100%; height:220px; object-fit:cover; display:block; }
    .blog-card__body { padding:20px; }
    .blog-meta { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#64748b; }
    .blog-card h3 { margin:0 0 10px; font-size:1.25rem; line-height:1.3; }
    .blog-card h3 a { color:#0f172a; text-decoration:none; }
    .blog-card p { margin:0 0 16px; color:#475569; line-height:1.7; }
    .blog-read { color:#c1121f; font-weight:800; text-decoration:none; }
    @media (max-width: 960px) {
        .blog-hero-card { grid-template-columns:1fr; }
        .blog-grid { grid-template-columns: 1fr 1fr; }
        .blog-toolbar { grid-template-columns:1fr; }
    }
    @media (max-width: 640px) {
        .blog-grid { grid-template-columns: 1fr; }
        .blog-search { flex-direction:column; }
        .blog-hero-card { padding:20px; }
    }
</style>
@endpush

@section('content')
<section class="blog-hero">
    <div class="blog-wrap">
        <div class="blog-hero-card">
            <div>
                <p class="pro-eyebrow" style="margin-bottom:10px;">Fresh Articles</p>
                <h1>Study abroad insights, visa tips, and practical admissions advice.</h1>
                <p>Browse destination guides, counselor strategies, and approved articles published by the GPS team.</p>
            </div>
            @if($featuredArticle && $featuredArticle->featured_image_url)
                <img src="{{ $featuredArticle->featured_image_url }}" alt="{{ $featuredArticle->title }}">
            @endif
        </div>

        <div class="blog-toolbar">
            <form method="GET" class="blog-search">
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search blog articles...">
                @if(request('category'))
                    <input type="hidden" name="category" value="{{ request('category') }}">
                @endif
                <button type="submit">Search</button>
            </form>
            <div class="blog-cats">
                <a href="{{ route('blogs.index') }}" class="{{ request('category') ? '' : 'is-active' }}">All</a>
                @foreach($categories as $category)
                    <a href="{{ route('blogs.index', ['category' => $category->slug]) }}" class="{{ request('category') === $category->slug ? 'is-active' : '' }}">{{ $category->name }}</a>
                @endforeach
            </div>
        </div>

        <div class="blog-grid">
            @forelse($articles as $article)
                <article class="blog-card">
                    @if($article->featured_image_url)
                        <a href="{{ route('blogs.show', $article->slug) }}"><img src="{{ $article->featured_image_url }}" alt="{{ $article->title }}"></a>
                    @endif
                    <div class="blog-card__body">
                        <div class="blog-meta">
                            <span>{{ $article->category?->name }}</span>
                            <span>{{ optional($article->published_at)->format('d M Y') }}</span>
                        </div>
                        <h3><a href="{{ route('blogs.show', $article->slug) }}">{{ $article->title }}</a></h3>
                        <p>{{ $article->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($article->content), 140) }}</p>
                        <a class="blog-read" href="{{ route('blogs.show', $article->slug) }}">Read article</a>
                    </div>
                </article>
            @empty
                <div class="blog-card__body" style="grid-column:1/-1;background:#fff;border:1px solid #e2e8f0;border-radius:22px;padding:28px;">
                    <h3 style="margin:0 0 8px;">No articles found</h3>
                    <p style="margin:0;color:#64748b;">Try a different keyword or category filter.</p>
                </div>
            @endforelse
        </div>

        {{ $articles->links() }}
    </div>
</section>
@endsection