@extends('layouts.nova')

@section('content')

{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
    <div>
        <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">History</p>
        <h1 class="text-3xl font-bold text-white leading-tight">{{ $page_title ?? 'Today in History' }}</h1>
        <p class="mt-1 text-sm text-white/50">
            Featured artworks uploaded on
            <span class="text-white/80 font-medium">{{ $todayLabel ?? now()->format('F j') }}</span>
            in past years.
        </p>
    </div>
</div>

{{-- ── Gallery ── --}}
<div class="px-6 pb-16 md:px-10">
    @if($artworks && $artworks->count())
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
            @foreach($artworks as $ar)
                <a href="{{ $ar->art_url ?? ('/art/' . $ar->id) }}"
                   class="group relative block overflow-hidden rounded-xl ring-1 ring-white/5 bg-black/20 shadow-md transition-all duration-200 hover:-translate-y-0.5">
                    <div class="relative aspect-square overflow-hidden bg-neutral-900">
                        <img src="{{ $ar->thumb_url ?? 'https://files.skinbase.org/default/missing_md.webp' }}"
                             alt="{{ $ar->name ?? '' }}"
                             loading="lazy"
                             decoding="async"
                             class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.06]"
                             onerror="this.src='https://files.skinbase.org/default/missing_md.webp'">
                        {{-- Title overlay on hover --}}
                        <div class="pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent px-2 py-2
                                    opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                            <p class="truncate text-xs font-medium text-white">{{ $ar->name ?? 'Untitled' }}</p>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>

        {{-- Pagination --}}
        <div class="mt-10 flex justify-center">
            {{ $artworks->withQueryString()->links('pagination::bootstrap-4') }}
        </div>
    @else
        <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-16 text-center">
            <p class="text-4xl mb-4">📅</p>
            <p class="text-white/60 text-sm">No featured artworks found for this day in history.</p>
            <p class="text-white/30 text-xs mt-1">Check back tomorrow!</p>
        </div>
    @endif
</div>

@endsection