@extends('layouts.app')

@section('seo')
    <x-seo :title="'Blog - Instagram Download Guides | '.setting('site_name', 'InstaGrab')"
           description="Guides, safety tips and honest answers about downloading Instagram videos, Reels, photos and carousels." />
@endsection

@section('content')
<section class="page-head">
    <div class="container">
        <x-breadcrumbs :items="[['name' => 'Home', 'url' => route('home')], ['name' => 'Blog', 'url' => route('blog.index')]]" />
        <h1 class="page-title">Blog</h1>
        <p class="text-body-secondary">Guides, safety tips and honest answers about downloading Instagram content.</p>
    </div>
</section>

<section class="section pt-4">
    <div class="container">
        @if($posts->isEmpty())
            <p class="text-body-secondary">No articles yet - check back soon.</p>
        @else
            <div class="row g-4">
                @foreach($posts as $post)
                    <div class="col-md-6 col-lg-4">
                        <x-blog-card :post="$post" />
                    </div>
                @endforeach
            </div>
            <div class="mt-4">
                {{ $posts->links('pagination::bootstrap-5') }}
            </div>
        @endif
    </div>
</section>
@endsection