@extends('layouts.app')
@section('title', 'Blog - AutoPart')

@section('content')
<div class="bg-gray-50 min-h-screen pb-16">
    <div class="bg-brand-dark text-white py-12 mb-8">
        <div class="container mx-auto px-4 text-center">
            <h1 class="text-4xl font-extrabold uppercase tracking-widest mb-4">Our Blog</h1>
            <div class="flex items-center justify-center space-x-2 text-sm text-gray-400">
                <a href="{{ url('/') }}" class="hover:text-brand-red transition-colors">Home</a>
                <i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
                <span class="text-white">Blog</span>
            </div>
        </div>
    </div>

    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
            @php
                $posts = [
                    ['title' => 'Top 10 Engine Maintenance Tips', 'excerpt' => 'Keep your engine running smoothly with these essential maintenance guidelines every car owner should know.', 'date' => 'March 15, 2024', 'img' => 'bernd-dittrich-s21cj56_TuU-unsplash.jpg'],
                    ['title' => 'How to Choose the Right Brake Pads', 'excerpt' => 'A comprehensive guide to selecting brake pads that match your driving style and vehicle requirements.', 'date' => 'March 10, 2024', 'img' => 'jack-lucas-smith-l9brPcxp-pM-unsplash.jpg'],
                    ['title' => 'Ultimate Guide to Car Lighting', 'excerpt' => 'Upgrade your visibility and style with our guide to modern automotive lighting solutions.', 'date' => 'March 05, 2024', 'img' => 'manuel-e-sankitts-i2kOA2p0DTo-unsplash.jpg'],
                ];
            @endphp
            @foreach($posts as $post)
            <article class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden hover:shadow-xl transition-all group">
                <div class="h-48 overflow-hidden">
                    <img src="{{ asset('images/' . $post['img']) }}" alt="{{ $post['title'] }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
                </div>
                <div class="p-6">
                    <span class="text-xs text-brand-red font-bold uppercase tracking-widest">{{ $post['date'] }}</span>
                    <h3 class="text-lg font-extrabold text-brand-dark mt-2 mb-3 group-hover:text-brand-red transition-colors">{{ $post['title'] }}</h3>
                    <p class="text-sm text-gray-600 mb-4 leading-relaxed">{{ $post['excerpt'] }}</p>
                    <span class="inline-flex items-center text-brand-red text-sm font-bold hover:underline cursor-pointer">
                        Read More <i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
                    </span>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</div>
@endsection