{{--
    ExploreLayout — hero header + mode tabs + filters + paginated grid.
    Used by /explore/*, /tag/:slug, and gallery pages.

    Expected variables:
      $hero_title, $hero_description, $breadcrumbs (collection),
      $current_sort, $sort_options, $artworks,
      $contentTypes (collection, optional), $activeType (string, optional)
      $page_title, $page_meta_description, $page_canonical, $page_robots
--}}
@extends('layouts.nova')

@php
    use App\Banner;

    $seoPage = max(1, (int) request()->query('page', 1));
    $seoBase = url()->current();
    $seoQ    = request()->query(); unset($seoQ['page']);
    $seoUrl  = fn(int $p) => $seoBase . ($p > 1
        ? '?' . http_build_query(array_merge($seoQ, ['page' => $p]))
        : (count($seoQ) ? '?' . http_build_query($seoQ) : ''));
    $seoPrev = $seoPage > 1 ? $seoUrl($seoPage - 1) : null;
    $seoNext = (isset($artworks) && method_exists($artworks, 'nextPageUrl'))
                 ? $artworks->nextPageUrl() : null;
@endphp

@push('head')
    <link rel="canonical" href="{{ $page_canonical ?? $seoUrl($seoPage) }}">
    @if($seoPrev)<link rel="prev" href="{{ $seoPrev }}">@endif
    @if($seoNext)<link rel="next" href="{{ $seoNext }}">@endif
    <meta name="robots" content="{{ $page_robots ?? 'index,follow' }}">
    <meta property="og:type"        content="website" />
    <meta property="og:url"         content="{{ $page_canonical ?? $seoUrl(1) }}" />
    <meta property="og:title"       content="{{ $page_title ?? ($hero_title ?? 'Skinbase') }}" />
    <meta property="og:description" content="{{ $page_meta_description ?? '' }}" />
    <meta property="og:site_name"   content="Skinbase" />

    {{-- Breadcrumb structured data --}}
    @if(isset($breadcrumbs) && $breadcrumbs->isNotEmpty())
    <script type="application/ld+json">
    {!! json_encode([
        '@context' => 'https://schema.org',
        '@type'    => 'BreadcrumbList',
        'itemListElement' => $breadcrumbs->values()->map(fn ($crumb, $i) => [
            '@type'    => 'ListItem',
            'position' => $i + 1,
            'name'     => $crumb->name,
            'item'     => url($crumb->url),
        ])->all(),
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
    @endif
@endpush

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

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

                    {{-- ══ HERO HEADER ══ --}}
                    <div class="relative overflow-hidden nb-hero-radial">
                        <div class="absolute inset-0 nb-hero-gradient" aria-hidden="true"></div>
                        <div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_80%_60%_at_50%_-10%,#E07A2130,transparent)]" aria-hidden="true"></div>

                        <div class="relative px-6 py-10 md:px-10 md:py-14">

                            {{-- Breadcrumbs --}}
                            @include('components.breadcrumbs', ['breadcrumbs' => $breadcrumbs ?? collect()])

                            {{-- Title panel --}}
                            <div class="mt-4 py-5">
                                <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white/95 leading-tight">
                                    {{ $hero_title ?? 'Explore' }}
                                </h1>
                                @if(!empty($hero_description))
                                <p class="mt-2 text-sm leading-6 text-neutral-400 max-w-xl">{!! $hero_description !!}</p>
                                @endif

                                @if(is_object($artworks) && method_exists($artworks, 'total') && $artworks->total() > 0)
                                <div class="mt-3 flex items-center gap-1.5 text-xs text-neutral-500">
                                    <svg class="h-3.5 w-3.5 text-accent/70" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    <span>{{ number_format($artworks->total()) }} artworks</span>
                                </div>
                                @endif
                            </div>

                            {{-- Content type chips (Explore only) --}}
                            @if(isset($contentTypes) && $contentTypes->isNotEmpty())
                            <div class="flex flex-wrap gap-2 mt-2">
                                @foreach($contentTypes as $ct)
                                    <a href="{{ $ct->url }}"
                                       class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium transition-colors
                                              {{ ($activeType ?? '') === $ct->slug
                                                  ? 'bg-sky-600 text-white'
                                                  : 'bg-white/[0.05] text-white/60 hover:bg-white/[0.1] hover:text-white' }}">
                                        {{ $ct->name }}
                                    </a>
                                @endforeach
                            </div>
                            @endif

                        </div>
                        <div class="absolute left-0 right-0 bottom-0 h-16 nb-hero-fade pointer-events-none" aria-hidden="true"></div>
                    </div>

                    {{-- ══ RANKING TABS ══ --}}
                    @php
                        $rankingTabs = $sort_options ?? [
                            ['value' => 'trending', 'label' => '🔥 Trending'],
                            ['value' => 'new-hot',  'label' => '🚀 New & Hot'],
                            ['value' => 'best',     'label' => '⭐ Best'],
                            ['value' => 'latest',   'label' => '🕐 Latest'],
                        ];
                        $activeTab = $current_sort ?? 'trending';
                    @endphp

                    <div class="sticky top-0 z-30 border-b border-white/10 bg-nova-900/90 backdrop-blur-md" id="gallery-ranking-tabs">
                        <div class="px-6 md:px-10">
                            <div class="flex items-center justify-between gap-4">
                                <nav class="flex items-center gap-0 -mb-px nb-scrollbar-none overflow-x-auto" role="tablist">
                                    @foreach($rankingTabs as $tab)
                                        @php $isActive = $activeTab === $tab['value']; @endphp
                                        <button
                                            role="tab"
                                            aria-selected="{{ $isActive ? 'true' : 'false' }}"
                                            data-rank-tab="{{ $tab['value'] }}"
                                            class="gallery-rank-tab relative flex items-center gap-1.5 whitespace-nowrap px-5 py-4 text-sm font-medium transition-colors focus-visible:outline-none {{ $isActive ? 'text-white' : 'text-neutral-400 hover:text-white' }}"
                                        >
                                            {{ $tab['label'] }}
                                            <span class="nb-tab-indicator absolute bottom-0 left-0 right-0 h-0.5 {{ $isActive ? 'bg-accent scale-x-100' : 'bg-transparent scale-x-0' }} transition-transform duration-300 origin-left rounded-full"></span>
                                        </button>
                                    @endforeach
                                </nav>

                                <button id="gallery-filter-panel-toggle" type="button"
                                    class="hidden md:flex items-center gap-2 shrink-0 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80 hover:bg-white/10 hover:text-white transition-colors"
                                    aria-haspopup="dialog" aria-expanded="false">
                                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" /></svg>
                                    Filters
                                </button>
                            </div>
                        </div>
                    </div>

                    {{-- ══ ARTWORK GRID ══ --}}
                    @yield('explore-grid')

                    {{-- ══ PAGINATION ══ --}}
                    @if(is_object($artworks) && method_exists($artworks, 'links'))
                    <div class="px-6 md:px-10 py-8 flex justify-center">
                        {{ $artworks->withQueryString()->links() }}
                    </div>
                    @endif

                </main>
            </div>
        </div>
    </div>
</div>
@endsection