{{--
    Blog index — uses ContentLayout.
--}}
@extends('layouts.nova.content-layout')

@php
    $hero_title = 'Blog';
    $hero_description = 'News, tutorials and community stories from the Skinbase team.';
@endphp

@section('page-content')

@if($posts->isNotEmpty())
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($posts as $post)
            <a href="{{ $post->url }}"
               class="group block rounded-xl border border-white/[0.06] bg-white/[0.02] overflow-hidden hover:bg-white/[0.05] transition-colors">
                @if($post->featured_image)
                    <div class="aspect-video bg-nova-800 overflow-hidden">
                        <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
                    </div>
                @else
                    <div class="aspect-video bg-gradient-to-br from-sky-900/30 to-purple-900/30 flex items-center justify-center">
                        <i class="fa-solid fa-newspaper text-3xl text-white/20"></i>
                    </div>
                @endif
                <div class="p-5">
                    <h2 class="text-lg font-semibold text-white group-hover:text-sky-300 transition-colors line-clamp-2">
                        {{ $post->title }}
                    </h2>
                    @if($post->excerpt)
                        <p class="mt-2 text-sm text-white/50 line-clamp-3">{{ $post->excerpt }}</p>
                    @endif
                    @if($post->published_at)
                        <time class="mt-3 block text-xs text-white/30" datetime="{{ $post->published_at->toIso8601String() }}">
                            {{ $post->published_at->format('M j, Y') }}
                        </time>
                    @endif
                </div>
            </a>
        @endforeach
    </div>

    <div class="mt-10 flex justify-center">
        {{ $posts->withQueryString()->links() }}
    </div>
@else
    <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
        <i class="fa-solid fa-newspaper text-4xl text-white/20 mb-4"></i>
        <p class="text-white/40 text-sm">No blog posts published yet. Check back soon!</p>
    </div>
@endif

@endsection