@extends('layouts.app')

@section('content')
{{-- ========================================================================
     1. COMPACT PAGE HEADER (Breadcrumb + H1 + Quick Category Switcher Pills)
     Reference: frontend/all_sarees_category_showcase_plan.md (Section 3)
     ======================================================================== --}}
<section class="pt-[20px] lg:pt-[32px] pb-[24px] lg:pb-[36px] border-b border-border-subtle bg-bg-main">
    <div class="container-main space-y-[14px] lg:space-y-[18px]">
        {{-- Breadcrumb (12px Mobile / 13px Desktop, --text-muted) --}}
        <nav aria-label="Breadcrumb" class="font-body text-[12px] lg:text-[13px] text-text-muted flex items-center gap-[6px]">
            <a href="{{ url('/') }}" class="hover:text-brand-primary transition-colors duration-200">Home</a>
            <span aria-hidden="true">/</span>
            <span class="text-text-primary font-medium">All Sarees</span>
        </nav>

        {{-- H1 Page Heading & Subtitle --}}
        <div class="space-y-[6px]">
            <h1 class="type-h1">All Saree Collections</h1>
            <p class="type-body max-w-[680px]">
                Browse our curated saree weaves by category — swipe or click into any weave to filter by color, price, blouse piece, and occasion.
            </p>
        </div>

        {{-- Quick Category Switcher Pills Row --}}
        <div class="flex items-center gap-[8px] overflow-x-auto no-scrollbar pt-[4px]">
            <a href="{{ url('/sarees') }}" class="pill-active">
                All Sarees
            </a>
            @foreach($activeCategories as $cat)
                <a href="{{ url('/category/' . $cat['slug']) }}" class="pill-inactive">
                    {{ $cat['shortName'] ?? $cat['name'] }}
                </a>
            @endforeach
            <a href="{{ url('/collections/new-arrivals') }}" class="pill-inactive">
                New Arrivals
            </a>
            <a href="{{ url('/collections/festive-edit') }}" class="pill-inactive">
                Festive Edit
            </a>
            <a href="{{ url('/collections/offers') }}" class="pill-inactive">
                Offers
            </a>
        </div>
    </div>
</section>

{{-- ========================================================================
     2. VERTICAL STACK OF HORIZONTAL CATEGORY SLIDER SECTIONS
     Ordered by displayOrder, separated by 1px --border-subtle dividers
     (64px gap on Desktop / 40px gap on Mobile)
     ======================================================================== --}}
<div class="divide-y divide-border-subtle">
    @foreach($categoryShowcases as $showcase)
        @php
            $cat = $showcase['category'];
            $products = $showcase['products'];
        @endphp
        <section class="py-[40px] md:py-[52px] lg:py-[64px]">
            <div class="container-main space-y-[20px] lg:space-y-[24px]">

                {{-- A. Section Header Bar (Top Row: H2 Category Title on Left | View All → on Right) --}}
                <div class="flex items-baseline justify-between gap-[12px]">
                    <div class="space-y-[4px]">
                        <h2 class="type-h2">{{ $cat['name'] }}</h2>
                        @if(!empty($cat['description']))
                            <p class="type-body text-[14px] lg:text-[15px]">{{ $cat['description'] }}</p>
                        @endif
                    </div>

                    <a href="{{ url('/category/' . $cat['slug']) }}" class="link-brand shrink-0">
                        <span>View All</span>
                        <span class="text-brand-accent" aria-hidden="true">→</span>
                    </a>
                </div>

                {{-- B & C. Responsive Horizontal Product Slider + Bottom Indicators
                     (Desktop: 4 cards + arrows + 3-Dot Navigation;
                      Mobile/Tablet: 2/3 cards + peek + Slim Progress Bar + "View All [Category] →" End Card) --}}
                <x-product.slider
                    :products="$products"
                    :sliderId="'hub-' . $cat['slug']"
                    :viewAllUrl="url('/category/' . $cat['slug'])"
                    :viewAllLabel="'View All ' . ($cat['shortName'] ?? $cat['name'])"
                    :totalCount="$cat['productCount']"
                />

            </div>
        </section>
    @endforeach
</div>

{{-- Floating Back-to-Top (↑) Button (Stacked 12px above Floating Chat) --}}
<x-layout.back-to-top />
@endsection