@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">Discover</p>
            <h1 class="text-3xl font-bold text-white leading-tight flex items-center gap-3">
                <i class="fa-solid {{ $icon ?? 'fa-compass' }} text-sky-400 text-2xl"></i>
                {{ $page_title ?? 'Discover' }}
            </h1>
            @isset($description)
            <p class="mt-1 text-sm text-white/50">{{ $description }}</p>
            @endisset
        </div>

        {{-- Section switcher pills --}}
        <div class="flex flex-wrap items-center gap-2 text-sm">
            @php
                $sections = [
                    'trending'        => ['label' => 'Trending',        'icon' => 'fa-fire'],
                    'fresh'           => ['label' => 'Fresh',           'icon' => 'fa-bolt'],
                    'top-rated'       => ['label' => 'Top Rated',       'icon' => 'fa-medal'],
                    'most-downloaded' => ['label' => 'Most Downloaded', 'icon' => 'fa-download'],
                    'on-this-day'     => ['label' => 'On This Day',     'icon' => 'fa-calendar-day'],
                ];
                $active = $section ?? '';
            @endphp
            @foreach($sections as $slug => $meta)
                <a href="{{ route('discover.' . $slug) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
                          {{ $active === $slug ? 'bg-sky-600 text-white' : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}">
                    <i class="fa-solid {{ $meta['icon'] }} text-xs"></i>
                    {{ $meta['label'] }}
                </a>
            @endforeach
        </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,
                        'name'          => $art->name,
                        'thumb'         => $art->thumb_url ?? $art->thumb ?? null,
                        'thumb_srcset'  => $art->thumb_srcset ?? null,
                        'uname'         => $art->uname ?? '',
                        'category_name' => $art->category_name ?? '',
                    ];
                @endphp
                <x-artwork-card :art="$card" />
            @endforeach
        </div>

        {{-- Pagination --}}
        <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">
            <p class="text-white/40 text-sm">No artworks found for this section yet.</p>
        </div>
    @endif
</div>

@endsection