@extends('website.app')

@section('content')
    <section class="page-hero">
        <div class="container">
            <div class="page-hero-content" data-aos="fade-up">
                <h1>Swiftec Insights</h1>
                <ul class="breadcrumbs">
                    <li><a href="https://old-swit.test">Home</a></li>
                    <li>Blogs</li>
                </ul>
            </div>
        </div>
    </section>

    <!-- Blogs Listing -->
    <section class="section-padding bg-white">
        <div class="container">

            <div class="section-header text-center mx-auto" style="max-width: 600px;" data-aos="fade-up">
                <span class="tag">Knowledge Hub</span>
                <h2>Swiftec Industrial Blog</h2>
                <p>Stay informed with technical tutorials, fluid analysis advice, and company announcements from our
                    chemists.</p>
            </div>

            <!-- Blogs Grid -->
            @if ($blogs->isEmpty())
                <p class="text-center" data-aos="fade-up">No blogs available at the moment. Please check back later.</p>
            @else
                <div class="blog-grid">
                    @foreach ($blogs as $blog)
                        <div class="blog-card" data-aos="fade-up" data-aos-delay="100">
                            <div class="blog-img">
                                <img src="{{ $blog->image }}" alt="{{ $blog->title }}">
                            </div>
                            <div class="blog-body">
                                <h3>{{ $blog->title }}</h3>
                                <p>{{ $blog->short_description }}</p>
                                <a href="{{ route('blog.details', $blog->id) }}" class="read-more">Read Full Post</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    </section>
@endsection