{{--
    404 — Generic Not Found
    Returned when a route has no match.
    Includes: trending artworks (6), top tags (10), discover CTA.
--}}
@extends('errors._layout', [
    'error_code'    => 404,
    'error_title'   => '404 — Lost in the Nova',
    'error_message' => 'This page drifted into deep space. Let\'s get you back on track.',
])

@section('badge', 'Page Not Found')

@section('primary-cta')
<a href="/discover/trending"
   class="inline-flex items-center gap-2 rounded-xl bg-sky-500 hover:bg-sky-400 text-white font-semibold px-6 py-3 text-sm shadow-lg shadow-sky-900/30 transition-colors">
    <i class="fas fa-compass" aria-hidden="true"></i>
    Explore Discover
</a>
@endsection

@section('secondary-ctas')
<a href="/explore/wallpapers" class="rounded-xl border border-white/10 hover:border-white/25 text-white/70 hover:text-white px-4 py-2 text-sm transition-colors">
    Browse Wallpapers
</a>
<a href="/search" class="rounded-xl border border-white/10 hover:border-white/25 text-white/70 hover:text-white px-4 py-2 text-sm transition-colors">
    <i class="fas fa-search mr-1.5" aria-hidden="true"></i> Search
</a>
<a href="/" class="rounded-xl border border-white/10 hover:border-white/25 text-white/70 hover:text-white px-4 py-2 text-sm transition-colors">
    Home
</a>
@endsection

@section('recovery')

{{-- Trending artworks --}}
@if(isset($trendingArtworks) && $trendingArtworks->count())
<div class="mb-12">
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Trending Right Now</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
        @foreach($trendingArtworks->take(6) as $artwork)
            @include('errors._artwork-card', ['artwork' => $artwork])
        @endforeach
    </div>
</div>
@endif

{{-- Top tags --}}
@if(isset($trendingTags) && $trendingTags->count())
<div class="mb-12">
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Popular Tags</h2>
    <div class="flex flex-wrap gap-2">
        @foreach($trendingTags->take(10) as $tag)
        <a href="/tag/{{ $tag->slug }}"
           class="rounded-full bg-white/5 hover:bg-sky-500/20 border border-white/8 hover:border-sky-500/30 text-white/70 hover:text-sky-300 px-3 py-1 text-xs font-medium transition-colors">
            #{{ $tag->name }}
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- Explore categories --}}
<div>
    <h2 class="text-sm font-semibold text-white/40 uppercase tracking-widest mb-4">Explore Categories</h2>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
        <a href="/explore/wallpapers"
           class="rounded-xl bg-white/3 hover:bg-sky-500/10 border border-white/5 hover:border-sky-500/20 px-4 py-3 flex items-center gap-3 transition-all group">
            <i class="fas fa-image text-sky-400/60 group-hover:text-sky-400 text-lg" aria-hidden="true"></i>
            <span class="text-sm font-medium text-white/80 group-hover:text-white">Wallpapers</span>
        </a>
        <a href="/explore/skins"
           class="rounded-xl bg-white/3 hover:bg-sky-500/10 border border-white/5 hover:border-sky-500/20 px-4 py-3 flex items-center gap-3 transition-all group">
            <i class="fas fa-paint-brush text-sky-400/60 group-hover:text-sky-400 text-lg" aria-hidden="true"></i>
            <span class="text-sm font-medium text-white/80 group-hover:text-white">Skins</span>
        </a>
        <a href="/explore/photography"
           class="rounded-xl bg-white/3 hover:bg-sky-500/10 border border-white/5 hover:border-sky-500/20 px-4 py-3 flex items-center gap-3 transition-all group">
            <i class="fas fa-camera text-sky-400/60 group-hover:text-sky-400 text-lg" aria-hidden="true"></i>
            <span class="text-sm font-medium text-white/80 group-hover:text-white">Photography</span>
        </a>
        <a href="/explore/other"
           class="rounded-xl bg-white/3 hover:bg-sky-500/10 border border-white/5 hover:border-sky-500/20 px-4 py-3 flex items-center gap-3 transition-all group">
            <i class="fas fa-layer-group text-sky-400/60 group-hover:text-sky-400 text-lg" aria-hidden="true"></i>
            <span class="text-sm font-medium text-white/80 group-hover:text-white">Other</span>
        </a>
    </div>
</div>

@endsection