@extends('layouts.nova')

@php
    use Illuminate\Support\Str;

    // One accent colour set per content-type (cycles if more than 4)
    $accents = [
        ['ring' => 'ring-sky-500/30',     'bg' => 'bg-sky-500/10',    'text' => 'text-sky-400',    'badge' => 'bg-sky-500/15 text-sky-300',    'pill' => 'hover:bg-sky-500/15 hover:text-sky-300',    'dot' => 'bg-sky-400',    'border' => 'border-sky-500/25'],
        ['ring' => 'ring-violet-500/30',  'bg' => 'bg-violet-500/10', 'text' => 'text-violet-400', 'badge' => 'bg-violet-500/15 text-violet-300', 'pill' => 'hover:bg-violet-500/15 hover:text-violet-300', 'dot' => 'bg-violet-400', 'border' => 'border-violet-500/25'],
        ['ring' => 'ring-amber-500/30',   'bg' => 'bg-amber-500/10',  'text' => 'text-amber-400',  'badge' => 'bg-amber-500/15 text-amber-300',  'pill' => 'hover:bg-amber-500/15 hover:text-amber-300',  'dot' => 'bg-amber-400',  'border' => 'border-amber-500/25'],
        ['ring' => 'ring-emerald-500/30', 'bg' => 'bg-emerald-500/10','text' => 'text-emerald-400','badge' => 'bg-emerald-500/15 text-emerald-300','pill' => 'hover:bg-emerald-500/15 hover:text-emerald-300','dot' => 'bg-emerald-400','border' => 'border-emerald-500/25'],
    ];

    // Map content-type slug → icon SVG paths
    $typeIcons = [
        'photography' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>',
        'wallpapers'  => '<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"/>',
        'skins'       => '<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
        'other'       => '<path stroke-linecap="round" stroke-linejoin="round" d="M5 3a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7.414A2 2 0 0020.414 6L15 .586A2 2 0 0013.586 0H5z"/>',
    ];
    $defaultIcon = '<path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>';
@endphp

@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-end sm:justify-between gap-4">
        <div>
            <p class="text-xs font-semibold uppercase tracking-widest text-white/30 mb-1">Skinbase</p>
            <h1 class="text-3xl font-bold text-white leading-tight">Browse Sections</h1>
            <p class="mt-1 text-sm text-white/50">Explore all artwork categories — photography, wallpapers, skins and more.</p>
        </div>

        {{-- Quick-jump anchor links --}}
        <nav class="flex flex-wrap gap-2" aria-label="Section jump links">
            @foreach ($contentTypes as $i => $ct)
                @php $a = $accents[$i % count($accents)]; @endphp
                <a href="#section-{{ $ct->slug }}"
                   class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-medium border border-white/[0.08] bg-white/[0.04] {{ $a['text'] }} hover:{{ $a['bg'] }} transition-colors">
                    <span class="w-1.5 h-1.5 rounded-full {{ $a['dot'] }}"></span>
                    {{ $ct->name }}
                </a>
            @endforeach
        </nav>
    </div>
</div>

{{-- ── Content type sections ── --}}
<div class="px-6 pb-16 md:px-10 space-y-14">

    @forelse ($contentTypes as $i => $ct)
        @php
            $a          = $accents[$i % count($accents)];
            $icon       = $typeIcons[strtolower($ct->slug)] ?? $defaultIcon;
            $totalCount = $artworkCountsByType[$ct->id] ?? 0;
            $roots      = $ct->rootCategories;
        @endphp

        <section id="section-{{ $ct->slug }}" class="scroll-mt-20">

            {{-- Section heading ── --}}
            <div class="flex items-center gap-3 mb-6">
                <div class="flex-shrink-0 w-10 h-10 rounded-xl {{ $a['bg'] }} {{ $a['text'] }} flex items-center justify-center ring-1 {{ $a['ring'] }}">
                    <svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
                        {!! $icon !!}
                    </svg>
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-3 flex-wrap">
                        <h2 class="text-xl font-bold text-white">{{ $ct->name }}</h2>
                        @if ($totalCount > 0)
                            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $a['badge'] }}">
                                {{ number_format($totalCount) }} artworks
                            </span>
                        @endif
                    </div>
                    @if (!empty($ct->description))
                        <p class="mt-0.5 text-sm text-white/45 leading-snug">{{ $ct->description }}</p>
                    @endif
                </div>
                <a href="/{{ strtolower($ct->slug) }}"
                   class="hidden sm:inline-flex flex-shrink-0 items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium border {{ $a['border'] }} {{ $a['text'] }} {{ $a['bg'] }} hover:brightness-110 transition-all">
                    Browse all
                    <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                </a>
            </div>

            {{-- Separator line --}}
            <div class="h-px bg-white/[0.06] mb-6"></div>

            @if ($roots->isEmpty())
                <div class="rounded-xl border border-white/[0.06] bg-white/[0.02] px-6 py-8 text-center text-sm text-white/35">
                    No categories available yet.
                </div>
            @else
                {{-- Root category cards grid --}}
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                    @foreach ($roots as $root)
                        @php $subCats = $root->children; @endphp
                        <div class="group flex flex-col rounded-xl border border-white/[0.06] bg-white/[0.03] hover:border-white/[0.12] hover:bg-white/[0.05] transition-all duration-200 overflow-hidden">

                            {{-- Card header --}}
                            <div class="px-4 pt-4 pb-3 border-b border-white/[0.05]">
                                <div class="flex items-start justify-between gap-2">
                                    <div class="min-w-0">
                                        <a href="{{ $root->url }}"
                                           class="block text-sm font-semibold text-white/90 group-hover:{{ $a['text'] }} transition-colors leading-snug truncate">
                                            {{ $root->name }}
                                        </a>
                                        @if (!empty($root->description))
                                            <p class="mt-1 text-xs text-white/40 leading-relaxed line-clamp-2">{{ $root->description }}</p>
                                        @endif
                                    </div>
                                    @if (($root->artwork_count ?? 0) > 0)
                                        <span class="flex-shrink-0 rounded-full px-2 py-0.5 text-[10px] font-medium {{ $a['badge'] }} whitespace-nowrap">
                                            {{ number_format($root->artwork_count) }}
                                        </span>
                                    @endif
                                </div>
                            </div>

                            {{-- Sub-category pills --}}
                            <div class="px-4 py-3 flex-1">
                                @if ($subCats->isEmpty())
                                    <span class="text-xs text-white/25 italic">No subcategories</span>
                                @else
                                    <div class="flex flex-wrap gap-1.5">
                                        @foreach ($subCats as $sub)
                                            <a href="{{ $sub->url }}"
                                               title="{{ $sub->name }}{{ ($sub->artwork_count ?? 0) > 0 ? ' · ' . number_format($sub->artwork_count) . ' artworks' : '' }}"
                                               class="inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-white/55 bg-white/[0.04] border border-white/[0.06] transition-colors {{ $a['pill'] }}">
                                                {{ $sub->name }}
                                                @if (($sub->artwork_count ?? 0) > 0)
                                                    <span class="text-white/30 text-[10px]">{{ number_format($sub->artwork_count) }}</span>
                                                @endif
                                            </a>
                                        @endforeach
                                    </div>
                                @endif
                            </div>

                            {{-- Card footer link --}}
                            <div class="px-4 pb-3 pt-1">
                                <a href="{{ $root->url }}"
                                   class="text-xs {{ $a['text'] }} opacity-60 hover:opacity-100 transition-opacity inline-flex items-center gap-1">
                                    View all
                                    <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- Mobile browse-all link --}}
                <div class="mt-4 sm:hidden text-center">
                    <a href="/{{ strtolower($ct->slug) }}"
                       class="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-sm font-medium border {{ $a['border'] }} {{ $a['text'] }} {{ $a['bg'] }}">
                        Browse all {{ $ct->name }}
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"/></svg>
                    </a>
                </div>
            @endif

        </section>
    @empty
        <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 sections available.</p>
        </div>
    @endforelse

</div>

@endsection