@extends('layouts.app')

@section('title', 'Blog | IBS')
@section('description', 'Stay updated with the latest news, insights, and tips from International Building Services LLC on plumbing, general contracting, and interior design.')

@section('content')

<x-subpage-hero 
    title="Our Blog" 
    description="Stay updated with the latest news, insights, and tips from International Building Services LLC."
/>

<x-breadcrumbs :items="$breadcrumbs" />

<section class="bg-gray-100 py-20">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($posts as $index => $post)
                <a href="{{ route('blog.show', $post->slug) }}" class="bg-white rounded-lg shadow hover:shadow-lg transition duration-300" data-aos="fade-up" data-aos-delay="{{ 100 * $index }}">
                    <img src="{{ asset('storage/images/blogs/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-48 object-cover rounded-t-lg" loading="lazy">
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-800 mb-2">{{ $post->title }}</h3>
                        <p class="text-gray-600 text-sm mb-4">{{ $post->published_at->format('F d, Y') }}</p>
                        <p class="text-gray-700">{{ $post->description }}</p>
                    </div>
                </a>
            @endforeach
        </div>
    </div>
</section>

@endsection