@extends('layouts.frontend')

@section('title', 'Blog')

@section('content')
    <section class="bg-slate-100 py-20 border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 text-center">
            <h1 class="text-4xl md:text-5xl font-extrabold text-slate-900 mb-4">Latest News & Insights</h1>
            <p class="text-xl text-slate-600 max-w-2xl mx-auto">Stay updated with our latest stories, tutorials, and announcements.</p>
        </div>
    </section>

    <div class="max-w-7xl mx-auto px-4 py-20">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
            @foreach($posts as $post)
                <article class="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-slate-100 group">
                    <div class="aspect-video relative overflow-hidden">
                        @if($post->hasMedia('featured_images'))
                            <img src="{{ $post->getFirstMediaUrl('featured_images') }}" 
                                 alt="{{ $post->title }}" 
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                        @else
                            <div class="w-full h-full bg-slate-200 flex items-center justify-center">
                                <svg class="w-12 h-12 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                </svg>
                            </div>
                        @endif
                        <div class="absolute top-4 left-4">
                            <span class="bg-white/90 backdrop-blur px-3 py-1 rounded-full text-xs font-bold text-indigo-600 uppercase tracking-wider">
                                {{ $post->category->name ?? 'Uncategorized' }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="p-8">
                        <div class="flex items-center text-xs text-slate-400 mb-4 space-x-4">
                            <span>{{ $post->published_at->format('M d, Y') }}</span>
                            <span>•</span>
                            <span>{{ $post->author->name }}</span>
                        </div>
                        <h2 class="text-2xl font-bold text-slate-900 mb-4 leading-tight hover:text-indigo-600 transition">
                            <a href="{{ route('blog.show', $post->slug) }}">{{ $post->title }}</a>
                        </h2>
                        <p class="text-slate-600 line-clamp-3 mb-6 leading-relaxed">
                            {{ $post->excerpt ?: Str::limit(strip_tags($post->content), 120) }}
                        </p>
                        <a href="{{ route('blog.show', $post->slug) }}" class="inline-flex items-center font-bold text-indigo-600 group-hover:translate-x-1 transition-transform">
                            Read More
                            <svg class="w-4 h-4 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                            </svg>
                        </a>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="mt-20">
            {{ $posts->links() }}
        </div>
    </div>
@endsection