@extends('layouts.nova')

@section('content')

{{-- ── Hero header ── --}}
<div class="px-6 pt-10 pb-6 md:px-10">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Downloads</p>
            <h1 class="text-3xl font-bold text-white leading-tight">Most Downloaded Today</h1>
            <p class="mt-1 text-sm text-white/50">
                Artworks downloaded the most on <time datetime="{{ now()->toDateString() }}">{{ now()->format('d F Y') }}</time>.
            </p>
        </div>
        <div class="flex-shrink-0 flex items-center gap-2">
            <span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium bg-emerald-500/10 text-emerald-300 ring-1 ring-emerald-500/25">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                Live today
            </span>
        </div>
    </div>
</div>

{{-- ── Artwork grid ── --}}
<div class="px-6 pb-16 md:px-10">
    @if ($artworks && $artworks->isNotEmpty())
        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 gap-4 md:gap-5">
            @foreach ($artworks as $art)
                @php
                    $card = (object)[
                        'id'            => $art->id ?? null,
                        'name'          => $art->name ?? 'Artwork',
                        'thumb'         => $art->thumb ?? null,
                        'thumb_srcset'  => $art->thumb_srcset ?? null,
                        'uname'         => $art->uname ?? '',
                        'category_name' => $art->category_name ?? '',
                        'slug'          => $art->slug ?? \Illuminate\Support\Str::slug($art->name ?? 'artwork'),
                    ];
                    $downloads = (int) ($art->num_downloads ?? 0);
                @endphp

                {{-- Wrap card to overlay download badge --}}
                <div class="relative">
                    <x-artwork-card :art="$card" />
                    @if ($downloads > 0)
                        <div class="absolute top-2 left-2 z-40 pointer-events-none">
                            <span class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px] font-semibold bg-black/60 text-emerald-300 backdrop-blur-sm ring-1 ring-emerald-500/30">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                                </svg>
                                {{ number_format($downloads) }}
                            </span>
                        </div>
                    @endif
                </div>
            @endforeach
        </div>

        <div class="mt-10 flex justify-center">
            {{ $artworks->withQueryString()->links() }}
        </div>
    @else
        <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-8 py-12 text-center">
            <svg class="mx-auto mb-3 w-10 h-10 text-white/20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
            </svg>
            <p class="text-white/40 text-sm">No downloads recorded today yet.</p>
            <p class="text-white/25 text-xs mt-1">Check back later as the day progresses.</p>
        </div>
    @endif
</div>

@endsection