@props(['blogs'])

<section class="v2-section v2-blogs" aria-labelledby="home2-blogs-title">
    <div class="v2-shell">
        <div class="v2-section-head">
            <div>
                <p class="v2-eyebrow">Insights</p>
                <h2 id="home2-blogs-title">Latest guidance for better purchase decisions.</h2>
            </div>
            <a href="{{ route('blog') }}">View blog</a>
        </div>
        <div class="v2-blog-grid">
            @foreach($blogs as $blog)
                <article class="v2-blog-card">
                    <img src="{{ $blog->image_url ?: '/assets/images/products/chart-collection.svg' }}" alt="{{ $blog->title }}" loading="lazy">
                    <div>
                        <span>{{ $blog->category }}</span>
                        <h3>{{ $blog->title }}</h3>
                        <p>{{ $blog->excerpt }}</p>
                        <a href="{{ route('blog.show', $blog->slug) }}">Read more</a>
                    </div>
                </article>
            @endforeach
        </div>
    </div>
</section>