<x-app-layout>
    <x-slot name="header">
        <h2 class="serif" style="font-size: 1.3rem; color: var(--cream); font-weight: 400; letter-spacing: 0.05em;">
            The Collection
        </h2>
    </x-slot>

    <style>
        /* Product Card */
        .product-card {
            background: #fff;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid rgba(26,24,20,0.08);
            transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
            display: flex;
            flex-direction: column;
        }
        .product-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 60px rgba(26,24,20,0.12);
        }
        .product-card .img-wrap {
            position: relative;
            overflow: hidden;
            aspect-ratio: 3/4;
            background: var(--cream);
        }
        .product-card .img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
        }
        .product-card:hover .img-wrap img { transform: scale(1.07); }

        .product-card .category-tag {
            position: absolute;
            top: 14px;
            left: 14px;
            background: var(--charcoal);
            color: var(--cream);
            font-size: 0.62rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 500;
            padding: 0.25rem 0.7rem;
            border-radius: 2px;
        }

        .product-card .quick-view {
            position: absolute;
            bottom: 14px;
            right: 14px;
            background: rgba(26,24,20,0.85);
            color: var(--cream);
            border: none;
            border-radius: 2px;
            padding: 0.45rem 0.9rem;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            opacity: 0;
            transform: translateY(6px);
            transition: all 0.25s ease;
            cursor: pointer;
        }
        .product-card:hover .quick-view {
            opacity: 1;
            transform: translateY(0);
        }

        .product-body {
            padding: 1.4rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .product-name {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--charcoal);
            margin-bottom: 0.3rem;
            line-height: 1.3;
        }
        .product-desc {
            font-size: 0.82rem;
            color: var(--warm-gray);
            line-height: 1.6;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 1.2rem;
            flex-grow: 1;
        }
        .product-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 1.1rem;
            border-top: 1px solid rgba(26,24,20,0.07);
        }
        .product-price {
            font-family: 'Cormorant Garamond', Georgia, serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--charcoal);
        }
        .add-cart-btn {
            background: var(--charcoal);
            color: var(--cream);
            border: none;
            border-radius: 2px;
            padding: 0.5rem 1.1rem;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 500;
            cursor: pointer;
            font-family: 'DM Sans', sans-serif;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            gap: 0.4rem;
        }
        .add-cart-btn:hover { background: var(--amber); color: var(--charcoal); }

        /* Sidebar */
        .sidebar-cat {
            display: block;
            padding: 0.55rem 0.8rem;
            font-size: 0.78rem;
            letter-spacing: 0.05em;
            color: var(--warm-gray);
            text-decoration: none;
            border-radius: 3px;
            transition: all 0.2s;
            border-left: 2px solid transparent;
        }
        .sidebar-cat:hover { color: var(--charcoal); background: var(--cream); }
        .sidebar-cat.active { color: var(--charcoal); border-left-color: var(--amber); background: var(--cream); font-weight: 500; }

        /* Search */
        .search-input {
            width: 100%;
            padding: 0.9rem 1rem 0.9rem 3rem;
            background: #fff;
            border: 1px solid rgba(26,24,20,0.12);
            border-radius: 3px;
            font-size: 0.9rem;
            color: var(--ink);
            font-family: 'DM Sans', sans-serif;
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .search-input:focus {
            border-color: var(--amber);
            box-shadow: 0 0 0 3px rgba(200,136,58,0.1);
        }
        .search-input::placeholder { color: var(--mist); }

        /* Mobile category pills */
        .mobile-cats {
            display: flex;
            gap: 0.5rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            margin-bottom: 2rem;
            scrollbar-width: none;
        }
        .mobile-cats::-webkit-scrollbar { display: none; }
        .mobile-cat-pill {
            flex-shrink: 0;
            padding: 0.4rem 1rem;
            border-radius: 999px;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            text-decoration: none;
            border: 1px solid rgba(26,24,20,0.15);
            color: var(--warm-gray);
            background: #fff;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .mobile-cat-pill:hover { border-color: var(--charcoal); color: var(--charcoal); }
        .mobile-cat-pill.active { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

        /* Empty state */
        .empty-state {
            grid-column: 1 / -1;
            text-align: center;
            padding: 5rem 2rem;
            background: #fff;
            border: 1px dashed rgba(26,24,20,0.15);
            border-radius: 4px;
        }

        /* Alert */
        .success-alert {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 1rem 1.25rem;
            background: rgba(74, 124, 89, 0.08);
            border: 1px solid rgba(74,124,89,0.2);
            border-radius: 3px;
            margin-bottom: 2rem;
            animation: slideDown 0.4s ease-out;
        }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-6px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* Hero Banner */
        .shop-hero {
            background: var(--charcoal);
            padding: 3.5rem 0;
            margin-bottom: 3.5rem;
            position: relative;
            overflow: hidden;
        }
        .shop-hero::before {
            content: '';
            position: absolute;
            top: -60%;
            right: -10%;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(200,136,58,0.08) 0%, transparent 70%);
        }

        /* Desktop sidebar show */
        @media (min-width: 768px) {
            .sidebar-desktop { display: block !important; }
            .mobile-cats { display: none !important; }
        }
    </style>

    <style>
        /* Hero Slider */
        .hero-slider {
            position: relative;
            background: var(--charcoal);
            height: clamp(350px, 60vh, 600px);
            overflow: hidden;
        }
        .slide-item {
            position: absolute;
            inset: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.8s ease, visibility 0.8s;
            display: flex;
            align-items: center;
        }
        .slide-item.active {
            opacity: 1;
            visibility: visible;
        }
        .slide-image {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.4;
        }
        .slide-content {
            position: relative;
            z-index: 10;
            width: 100%;
            padding: 0 4rem;
        }
        .slide-subtitle {
            font-size: 0.7rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--amber);
            margin-bottom: 0.75rem;
            font-weight: 500;
            transform: translateY(20px);
            transition: transform 0.6s ease;
        }
        .slide-title {
            font-size: clamp(2rem, 5vw, 3.5rem);
            color: var(--cream);
            font-weight: 500;
            line-height: 1.15;
            max-width: 600px;
            transform: translateY(20px);
            transition: transform 0.6s ease 0.1s;
        }
        .slide-desc {
            color: var(--mist);
            font-size: 0.9rem;
            margin-top: 1rem;
            max-width: 450px;
            line-height: 1.7;
            transform: translateY(20px);
            transition: transform 0.6s ease 0.2s;
        }
        .slide-btn {
            display: inline-block;
            margin-top: 2rem;
            padding: 0.9rem 2rem;
            background: var(--amber);
            color: var(--charcoal);
            text-decoration: none;
            font-size: 0.75rem;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            font-weight: 600;
            border-radius: 2px;
            transform: translateY(20px);
            transition: all 0.3s ease 0.3s;
        }
        .slide-btn:hover { background: var(--cream); }

        .slide-item.active .slide-subtitle,
        .slide-item.active .slide-title,
        .slide-item.active .slide-desc,
        .slide-item.active .slide-btn {
            transform: translateY(0);
        }

        .slider-nav {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.75rem;
            z-index: 20;
        }
        .nav-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            cursor: pointer;
            transition: all 0.3s;
        }
        .nav-dot.active {
            background: var(--amber);
            width: 24px;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .slide-content { padding: 0 1.5rem; }
        }
    </style>

    <!-- Hero Slider -->
    <div class="hero-slider" x-data="{ 
        activeSlide: 0, 
        slidesCount: {{ $activeBanners->count() }},
        init() {
            if (this.slidesCount > 1) {
                setInterval(() => {
                    this.activeSlide = (this.activeSlide + 1) % this.slidesCount;
                }, 6000);
            }
        }
    }">
        @forelse($activeBanners as $index => $banner)
            <div class="slide-item" :class="{ 'active': activeSlide === {{ $index }} }">
                @if($banner->image)
                    <img src="{{ asset('storage/' . $banner->image) }}" class="slide-image" alt="{{ $banner->title }}">
                @endif
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
                    <div class="slide-content">
                        @if($banner->subtitle)
                            <p class="slide-subtitle">{{ $banner->subtitle }}</p>
                        @endif
                        <h1 class="serif slide-title">{!! nl2br(e($banner->title)) !!}</h1>
                        @if($banner->description)
                            <p class="slide-desc">{{ $banner->description }}</p>
                        @endif
                        @if($banner->button_text && $banner->button_url)
                            <a href="{{ $banner->button_url }}" class="slide-btn">{{ $banner->button_text }}</a>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="slide-item active">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
                    <div class="slide-content">
                        <p class="slide-subtitle">Welcome to</p>
                        <h1 class="serif slide-title">{{ $siteSettings['company_name'] ?? 'MAISON LUXE' }}</h1>
                        <p class="slide-desc">Explore our curated collection of premium goods.</p>
                    </div>
                </div>
            </div>
        @endforelse

        @if($activeBanners->count() > 1)
            <div class="slider-nav">
                @foreach($activeBanners as $index => $banner)
                    <div class="nav-dot" 
                         :class="{ 'active': activeSlide === {{ $index }} }"
                         @click="activeSlide = {{ $index }}"></div>
                @endforeach
            </div>
        @endif
    </div>

    <div style="padding-bottom: 5rem;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div style="display: flex; gap: 2.5rem; align-items: flex-start;">

                <!-- Sidebar (desktop only) -->
                <aside class="sidebar-desktop" style="width: 200px; flex-shrink: 0; display: none;">
                    <div style="position: sticky; top: 80px;">
                        <div style="margin-bottom: 0.5rem; font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-gray); font-weight: 600; padding: 0 0.8rem;">
                            Categories
                        </div>
                        <div style="margin-top: 0.5rem; display: flex; flex-direction: column; gap: 2px;">
                            <a href="{{ route('home', array_filter(['search' => request('search')])) }}"
                               class="sidebar-cat {{ !request('category') ? 'active' : '' }}">
                                All Products
                            </a>
                            @foreach($topCategories as $category)
                                <a href="{{ route('home', array_filter(['category' => $category->slug, 'search' => request('search')])) }}"
                                   class="sidebar-cat {{ request('category') == $category->slug ? 'active' : '' }}">
                                    {{ $category->name }}
                                </a>
                                @if($category->children->count() > 0)
                                    <div style="margin-left: 1rem; display: flex; flex-direction: column; gap: 2px;">
                                        @foreach($category->children as $child)
                                            <a href="{{ route('home', array_filter(['category' => $child->slug, 'search' => request('search')])) }}"
                                               class="sidebar-cat {{ request('category') == $child->slug ? 'active' : '' }}"
                                               style="font-size: 0.72rem; padding: 0.4rem 0.8rem;">
                                                — {{ $child->name }}
                                            </a>
                                        @endforeach
                                    </div>
                                @endif
                            @endforeach
                        </div>

                        <div style="margin-top: 2.5rem; padding: 1.5rem; background: var(--charcoal); border-radius: 3px;">
                            @if($activeCampaign)
                                <div class="serif" style="font-size: 1.1rem; color: var(--cream); margin-bottom: 0.5rem; font-weight: 500;">
                                    {{ $activeCampaign->title }}
                                </div>
                                <p style="font-size: 0.78rem; color: var(--mist); line-height: 1.6;">
                                    {{ $activeCampaign->description }}
                                </p>
                                @if($activeCampaign->expiry_date)
                                    <div style="margin-top: 0.8rem; font-size: 0.6rem; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase;">
                                        Ends: {{ $activeCampaign->expiry_date->format('M d, Y') }}
                                    </div>
                                @endif
                            @else
                                <div class="serif" style="font-size: 1.1rem; color: var(--cream); margin-bottom: 0.5rem; font-weight: 500;">
                                    {{ $siteSettings['campaign_title'] ?? 'Free Shipping' }}
                                </div>
                                <p style="font-size: 0.78rem; color: var(--mist); line-height: 1.6;">
                                    {{ $siteSettings['campaign_description'] ?? 'On all orders over ৳15,000. No code required.' }}
                                </p>
                            @endif
                        </div>
                    </div>
                </aside>

                <!-- Main Content -->
                <div style="flex-grow: 1; min-width: 0;">

                    <!-- Search -->
                    <div style="margin-bottom: 1.5rem; position: relative;">
                        <form action="{{ route('home') }}" method="GET">
                            {{-- Preserve active category when searching --}}
                            @if(request('category'))
                                <input type="hidden" name="category" value="{{ request('category') }}">
                            @endif
                            <div style="position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--mist);">
                                <svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                            </div>
                            <input type="text" name="search" class="search-input"
                                   placeholder="Search the collection…"
                                   value="{{ request('search') }}">
                        </form>
                    </div>

                    <!-- Mobile Category Pills -->
                    <div class="mobile-cats">
                        <a href="{{ route('home', array_filter(['search' => request('search')])) }}"
                           class="mobile-cat-pill {{ !request('category') ? 'active' : '' }}">
                            All
                        </a>
                        @foreach($allCategories as $category)
                            <a href="{{ route('home', array_filter(['category' => $category->slug, 'search' => request('search')])) }}"
                               class="mobile-cat-pill {{ request('category') == $category->slug ? 'active' : '' }}">
                                {{ $category->name }}
                            </a>
                        @endforeach
                    </div>

                    @if(session('success'))
                        <div class="success-alert">
                            <svg style="width:18px;height:18px;color:var(--success);flex-shrink:0;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                            <span style="font-size: 0.875rem; color: var(--success); font-weight: 500;">{{ session('success') }}</span>
                        </div>
                    @endif

                    <!-- Results Count + Active Filter Badge -->
                    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:0.75rem;">
                        <p style="font-size:0.8rem;color:var(--warm-gray);">
                            {{ $products->total() }} {{ Str::plural('item', $products->total()) }} found
                            @if(request('category'))
                                in <strong style="color:var(--charcoal);">{{ $allCategories->firstWhere('slug', request('category'))?->name }}</strong>
                            @endif
                            @if(request('search'))
                                for <strong style="color:var(--charcoal);">"{{ request('search') }}"</strong>
                            @endif
                        </p>
                        @if(request('category') || request('search'))
                            <a href="{{ route('home') }}"
                               style="font-size:0.75rem;color:var(--warm-gray);text-decoration:none;display:flex;align-items:center;gap:0.3rem;border:1px solid rgba(26,24,20,0.15);padding:0.3rem 0.75rem;border-radius:999px;transition:all 0.2s;"
                               onmouseover="this.style.borderColor='var(--charcoal)';this.style.color='var(--charcoal)'"
                               onmouseout="this.style.borderColor='rgba(26,24,20,0.15)';this.style.color='var(--warm-gray)'">
                                <svg xmlns="http://www.w3.org/2000/svg" style="width:12px;height:12px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                                Clear filters
                            </a>
                        @endif
                    </div>

                    <!-- Product Grid -->
                    <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem;">
                        @forelse($products as $product)
                            <div class="product-card">
                                <div class="img-wrap">
                                    @if($product->image)
                                        <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
                                    @else
                                        <div style="width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mist);">
                                            <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;height:40px;margin-bottom:8px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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 style="font-size:0.65rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:500;">No Image</span>
                                        </div>
                                    @endif
                                    <span class="category-tag">{{ $product->category->name }}</span>
                                    <a href="{{ route('product.show', $product) }}" class="quick-view">View Details</a>
                                </div>
                                <div class="product-body">
                                    <div class="product-name">{{ $product->name }}</div>
                                    <p class="product-desc">{{ $product->description }}</p>
                                    <div class="product-footer">
                                        <div class="product-price">৳{{ number_format($product->price, 2) }}</div>
                                        <form action="{{ route('cart.add', $product) }}" method="POST">
                                            @csrf
                                            <button type="submit" class="add-cart-btn">
                                                <svg xmlns="http://www.w3.org/2000/svg" style="width:14px;height:14px;" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                                </svg>
                                                Add
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="empty-state">
                                <div style="width:64px;height:64px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;">
                                    <svg xmlns="http://www.w3.org/2000/svg" style="width:28px;height:28px;color:var(--mist);" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                </div>
                                <h3 class="serif" style="font-size:1.6rem;color:var(--charcoal);margin-bottom:0.5rem;">Nothing found</h3>
                                <p style="font-size:0.875rem;color:var(--warm-gray);margin-bottom:1.5rem;">Try adjusting your search or browsing all categories.</p>
                                <a href="{{ route('home') }}" style="display:inline-block;padding:0.6rem 1.5rem;background:var(--charcoal);color:var(--cream);text-decoration:none;border-radius:2px;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;">
                                    Clear Filters
                                </a>
                            </div>
                        @endforelse
                    </div>

                    <div style="margin-top: 3rem;">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>