SkinbaseNova/resources/views/web/discover/index.blade.php

@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">
            @auth
            <a href="{{ route('discover.for-you') }}"
               class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white">
                <i class="fa-solid fa-wand-magic-sparkles text-xs text-yellow-400/80"></i>
                For You
            </a>
            @endauth
            @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 (React MasonryGallery) ── --}}
@php
    $galleryArtworks = collect($artworks->items())->map(fn ($art) => [
        'id'            => $art->id,
        'name'          => $art->name ?? null,
        'thumb'         => $art->thumb_url ?? $art->thumb ?? null,
        'thumb_srcset'  => $art->thumb_srcset ?? null,
        'uname'         => $art->uname ?? '',
        'username'      => $art->uname ?? '',
        'category_name' => $art->category_name ?? '',
        'category_slug' => $art->category_slug ?? '',
        'slug'          => $art->slug ?? '',
        'width'         => $art->width  ?? null,
        'height'        => $art->height ?? null,
    ])->values();
    $galleryNextPageUrl = method_exists($artworks, 'nextPageUrl') ? $artworks->nextPageUrl() : null;
@endphp
<div
    data-react-masonry-gallery
    data-artworks="{{ json_encode($galleryArtworks) }}"
    data-gallery-type="{{ $section ?? 'discover' }}"
    @if ($galleryNextPageUrl) data-next-page-url="{{ $galleryNextPageUrl }}" @endif
    data-limit="24"
    class="min-h-32"
></div>

@endsection

@push('styles')
<style>
    [data-nova-gallery].is-enhanced [data-gallery-grid] {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        grid-auto-rows: 8px;
        gap: 1rem;
    }
    @media (min-width: 768px) {
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        [data-gallery-grid].force-5 { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 1600px) {
        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        [data-gallery-grid].force-5 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
    }
    @media (min-width: 2600px) {
        [data-nova-gallery] [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(7, minmax(0, 1fr)); }
        [data-gallery-grid].force-5 { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
    }
    [data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1.5rem;
    }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] ul {
        display: inline-flex;
        gap: 0.25rem;
        align-items: center;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] li a,
    [data-nova-gallery].is-enhanced [data-gallery-pagination] li span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.25rem;
        height: 2.25rem;
        border-radius: 0.5rem;
        padding: 0 0.5rem;
        background: rgba(255,255,255,0.03);
        color: #e6eef8;
        border: 1px solid rgba(255,255,255,0.04);
        text-decoration: none;
        font-size: 0.875rem;
    }
    [data-gallery-skeleton].is-loading { display: grid !important; grid-template-columns: inherit; gap: 1rem; }
    .nova-skeleton-card {
        border-radius: 1rem;
        min-height: 180px;
        background: linear-gradient(110deg, rgba(255,255,255,.06) 8%, rgba(255,255,255,.12) 18%, rgba(255,255,255,.06) 33%);
        background-size: 200% 100%;
        animation: novaShimmer 1.2s linear infinite;
    }
    @keyframes novaShimmer {
        to { background-position-x: -200%; }
    }
</style>
@endpush

@push('scripts')
@vite('resources/js/entry-masonry-gallery.jsx')
@endpush