@extends('layouts.app')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Header --}}
        <div class="text-center mb-12">
            <h1 class="text-4xl font-bold text-gray-900 mb-4">Parenting Tips & Guides</h1>
            <p class="text-gray-600 max-w-2xl mx-auto">Expert advice on child development, educational play, and parenting tips to help your child grow.</p>
        </div>

        {{-- Featured Post --}}
        @if($blogs->count() > 0)
        @php $featured = $blogs->first(); @endphp
        <div class="bg-white rounded-2xl shadow-sm overflow-hidden mb-12">
            <div class="grid md:grid-cols-2">
                <img src="{{ $featured->featured_image_url }}" alt="{{ $featured->title }}" 
                     class="w-full h-64 md:h-full object-cover">
                <div class="p-8 flex flex-col justify-center">
                    <span class="text-blue-600 font-medium text-sm uppercase tracking-wide">{{ $featured->category }}</span>
                    <h2 class="text-2xl font-bold text-gray-900 mt-2 mb-4">
                        <a href="{{ route('blog.show', $featured->slug) }}" class="hover:text-blue-600 transition">
                            {{ $featured->title }}
                        </a>
                    </h2>
                    <p class="text-gray-600 mb-6">{{ $featured->excerpt }}</p>
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                            <span class="text-blue-600 font-bold">{{ substr($featured->author?->name ?? 'A', 0, 1) }}</span>
                        </div>
                        <div>
                            <p class="font-medium text-gray-900">{{ $featured->author?->name ?? 'Admin' }}</p>
                            <p class="text-sm text-gray-500">{{ $featured->published_at?->format('M d, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Blog Grid --}}
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($blogs->skip(1) as $blog)
            <article class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-lg transition">
                <a href="{{ route('blog.show', $blog->slug) }}">
                    <img src="{{ $blog->featured_image_url }}" alt="{{ $blog->title }}" 
                         class="w-full h-48 object-cover hover:scale-105 transition duration-500">
                </a>
                <div class="p-6">
                    <span class="text-blue-600 text-sm font-medium">{{ $blog->category }}</span>
                    <h3 class="text-xl font-bold text-gray-900 mt-2 mb-3 line-clamp-2">
                        <a href="{{ route('blog.show', $blog->slug) }}" class="hover:text-blue-600 transition">
                            {{ $blog->title }}
                        </a>
                    </h3>
                    <p class="text-gray-600 text-sm line-clamp-3 mb-4">{{ $blog->excerpt }}</p>
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">{{ $blog->published_at?->format('M d, Y') }}</span>
                        <a href="{{ route('blog.show', $blog->slug) }}" class="text-blue-600 font-medium text-sm hover:underline">
                            Read More →
                        </a>
                    </div>
                </div>
            </article>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-12">
            {{ $blogs->links() }}
        </div>
        @else
        <div class="text-center py-16">
            <p class="text-gray-600">No blog posts available yet.</p>
        </div>
        @endif
    </div>
</div>
@endsection