@extends('layouts.app')

@php
    $isRetired = !empty($isRetiredProduct) || request()->is('product/*');
    $mostLovedSarees = $mostLoved ?? app(\App\Repositories\StorefrontRepository::class)->getMostLovedForSlider(12);
@endphp

@section('title', ($isRetired ? 'This Saree Is No Longer Available' : 'Page Not Found') . ' | ' . ($storeConfig['brandName'] ?? 'Aangina'))

@section('content')
<div class="py-12 sm:py-20">
    <div class="container-boutique">
        {{-- =================================================================
             1. CENTERED 404 / RETIRED SAREE MESSAGE BOX (max-w-600px)
             ================================================================= --}}
        <div class="max-w-[600px] mx-auto bg-surface border border-border-subtle p-7 sm:p-10 text-center">
            <span class="type-overline text-text-muted block">
                {{ $isRetired ? 'HANDLOOM EDITION RETIRED' : 'PAGE NOT FOUND' }}
            </span>

            <h1 class="mt-2 type-h2 text-brand-primary">
                {{ $isRetired ? 'This Saree Is No Longer Available' : "We Couldn't Find That Page" }}
            </h1>

            <p class="mt-3 text-[15px] text-text-muted leading-relaxed">
                The link you followed may be outdated, or the saree may have been retired from our handwoven collection.
            </p>

            <div class="mt-6">
                <a href="{{ route('sarees.hub') }}" class="btn-primary px-8">
                    EXPLORE ALL SAREES →
                </a>
            </div>
        </div>

        {{-- =================================================================
             2. MOST LOVED SAREES 4-CARD SLIDER BELOW THE BOX
             ================================================================= --}}
        @if(!empty($mostLovedSarees))
            <section class="mt-14 lg:mt-20 pt-10 border-t border-border-subtle" aria-label="Most Loved Sarees">
                <div class="flex items-end justify-between gap-4 mb-6">
                    <div>
                        <span class="type-overline text-brand-primary block mb-1">Customer Favorites</span>
                        <h2 class="type-h2 text-text-primary">Most Loved Sarees</h2>
                    </div>
                    <a href="{{ route('collections.show', 'best-sellers') }}" class="text-[13px] font-semibold text-brand-primary hover:underline shrink-0">
                        View All Most Loved →
                    </a>
                </div>

                <x-product.slider
                    :products="$mostLovedSarees"
                    :viewAllUrl="route('collections.show', 'best-sellers')"
                    viewAllLabel="View All Most Loved Sarees"
                />
            </section>
        @endif
    </div>
</div>
@endsection