@extends('layouts.nova')

@php
    use App\Banner;
@endphp

@section('content')
<div class="container-fluid legacy-page">
    @php Banner::ShowResponsiveAd(); @endphp

    <div class="pt-0">
        <div class="mx-auto w-full">
            <div class="flex min-h-[calc(100vh-64px)]">

                <!-- SIDEBAR -->
                <aside id="sidebar" class="hidden md:block w-72 shrink-0 border-r border-neutral-800 bg-nova-900/60 backdrop-blur-sm">
                    <div class="p-4">
                        <button class="w-full h-12 rounded-xl bg-white/5 hover:bg-white/7 border border-white/5 flex items-center gap-3 px-4">
                            <span class="w-8 h-8 rounded-lg bg-white/5 inline-flex items-center justify-center">
                                <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
                            </span>
                            <span class="text-sm text-white/90">Menu</span>
                        </button>

                        <div class="mt-6 text-sm text-neutral-400">
                            <div class="font-semibold text-white/80 mb-2">Main Categories:</div>
                            <ul class="space-y-2">
                                @foreach($rootCategories as $root)
                                    <li>
                                        <a class="flex items-center gap-2 hover:text-white" href="{{ $root->url }}"><span class="opacity-70">📁</span> {{ $root->name }}</a>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="mt-6 font-semibold text-white/80 mb-2">Browse Subcategories:</div>
                            <ul class="space-y-2 sb-scrollbar max-h-56 overflow-auto pr-2">
                                @foreach($subcategories as $sub)
                                    <li><a class="hover:text-white {{ $sub->id === $category->id ? 'font-semibold text-white' : 'text-neutral-400' }}" href="{{ $sub->url }}">{{ $sub->name }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </aside>

                <!-- MAIN -->
                <main class="flex-1">
                    <div class="relative overflow-hidden nb-hero-radial">
                        <div class="absolute inset-0 opacity-35"></div>

                        <div class="relative px-6 py-8 md:px-10 md:py-10">
                                <div class="text-sm text-neutral-400">
                                <a class="hover:text-white" href="/{{ $contentType->slug }}">{{ $contentType->name }}</a>
                                @foreach ($category->breadcrumbs as $crumb)
                                    <span class="opacity-50">›</span> <a class="hover:text-white" href="{{ $crumb->url }}">{{ $crumb->name }}</a>
                                @endforeach
                            </div>

                            @php
                                // Use the current (last) breadcrumb as the header so
                                // the page shows the leaf category name (e.g. "Winamp").
                                $breadcrumbs = is_array($category->breadcrumbs) ? $category->breadcrumbs : [$category];
                                $headerCategory = end($breadcrumbs) ?: $category;
                            @endphp

                            <h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight text-white/95">{{ $headerCategory->name }}</h1>

                            <section class="mt-5 bg-white/5 border border-white/10 rounded-2xl shadow-lg">
                                <div class="p-5 md:p-6">
                                    <div class="text-lg font-semibold text-white/90">{{ $headerCategory->name }}</div>
                                    <p class="mt-2 text-sm leading-6 text-neutral-400">{!! $headerCategory->description ?? ($contentType->name . ' artworks on Skinbase.') !!}</p>
                                </div>
                            </section>
                            {{-- soft fade at bottom of hero to blend into main background --}}
                            <div class="absolute left-0 right-0 bottom-0 h-36 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
                        </div>
                    </div>

                    <!-- Grid -->
                    <section class="px-6 pb-10 md:px-10" data-nova-gallery data-gallery-type="category-slug">
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6" data-gallery-grid>
                            @forelse ($artworks as $art)
                                @include('legacy._artwork_card', ['art' => $art])
                            @empty
                                <div class="panel panel-default effect2">
                                    <div class="panel-heading"><strong>No Artworks Yet</strong></div>
                                    <div class="panel-body">
                                        <p>Once uploads arrive they will appear here. Check back soon.</p>
                                    </div>
                                </div>
                            @endforelse
                        </div>

                        <div class="flex justify-center mt-10" data-gallery-pagination>
                            @if ($artworks instanceof \Illuminate\Contracts\Pagination\Paginator)
                                {{ $artworks->links() }}
                            @endif
                        </div>
                        <div class="hidden mt-8" data-gallery-skeleton></div>
                    </section>
                </main>
            </div>
        </div>
    </div>
</div> <!-- end .legacy-page -->
@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) {
        /* From 768px up to ~991px show 2 columns */
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 1024px) {
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (min-width: 2600px) {
        /* Very large displays: 5 columns */
        [data-nova-gallery].is-enhanced [data-gallery-grid] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    }
    [data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }
    [data-nova-gallery].is-enhanced [data-gallery-pagination] { display: none; }
    [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%; }
    }
    .nb-hero-fade {
        background: linear-gradient(180deg, rgba(17,24,39,0) 0%, rgba(7,10,15,0.9) 60%, rgba(7,10,15,1) 100%);
        /* tweak the colors above if the page background differs */
    }
</style>
@endpush

@push('scripts')
<script src="/js/legacy-gallery-init.js" defer></script>
@endpush