@extends('layouts.public')
@section('content')
<main class="inner-page">
    <section class="inner-hero compact-hero"><div><span class="section-badge">Resources</span><h1>Blog</h1><p>Guides for product selection, training infrastructure, education aids and GIS projects.</p></div></section>
    <section class="inner-section compact"><div class="pill-grid refined-pills"><a href="{{ route('blog') }}">All</a>@foreach($categories as $category)<a href="{{ route('blog', ['category' => $category]) }}">{{ $category }}</a>@endforeach</div></section>
    <section class="inner-section"><div class="blog-grid refined-blog-grid">@foreach($posts as $post)<article class="blog-card refined-blog-card"><div class="refined-card-image"><img src="{{ $post->image_url ?: '/assets/images/products/chart-collection.svg' }}" alt="{{ $post->title }}" loading="lazy"><span>{{ $post->category }}</span></div><div class="refined-card-body"><p class="eyebrow">{{ $post->category }}</p><h2>{{ $post->title }}</h2><p>{{ $post->excerpt }}</p><a href="{{ route('blog.show', $post->slug) }}">Read article <span>→</span></a></div></article>@endforeach</div></section>
</main>
@endsection