@extends('layouts.app')

@section('title', 'Jumia Clone — Shop Everything Online')

@section('content')

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    HERO BANNER SLIDER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-3 md:mt-4">
    <div class="md:flex md:gap-4">

        {{-- Main slider --}}
        <div class="flex-1 relative rounded-xl overflow-hidden" x-data="bannerSlider(4)">
            {{-- Slides --}}
            <div class="relative h-36 sm:h-48 md:h-64 lg:h-72">
                @php
                    $banners = [
                        ['bg' => 'from-orange-600 to-orange-400', 'emoji' => '📱', 'tag' => 'Flash Sale', 'title' => 'Up to 60% Off Electronics', 'sub' => 'Limited time deal — shop now', 'url' => '/products?category=electronics&flash_sale=1', 'btn' => 'Shop Electronics'],
                        ['bg' => 'from-blue-600 to-blue-400',   'emoji' => '👗', 'tag' => 'New Arrivals', 'title' => 'Latest Fashion Trends', 'sub' => 'Trendy styles for every occasion', 'url' => '/products?category=fashion', 'btn' => 'Shop Fashion'],
                        ['bg' => 'from-purple-600 to-purple-400','emoji' => '🏠', 'tag' => 'Mega Deal', 'title' => 'Home & Living Sale', 'sub' => 'Furnish your home for less', 'url' => '/products?category=home-living', 'btn' => 'Shop Home'],
                        ['bg' => 'from-green-600 to-green-400', 'emoji' => '🛒', 'tag' => 'Daily Deals', 'title' => 'Grocery & Essentials', 'sub' => 'Fresh deals every day', 'url' => '/products?category=groceries', 'btn' => 'Shop Groceries'],
                    ];
                @endphp

                @foreach($banners as $i => $banner)
                <div class="absolute inset-0 bg-gradient-to-r {{ $banner['bg'] }} transition-opacity duration-500"
                     :class="current === {{ $i }} ? 'opacity-100 z-10' : 'opacity-0 z-0'">
                    <div class="flex items-center justify-between h-full px-6 md:px-10">
                        <div class="text-white">
                            <span class="inline-block bg-white/20 text-white text-xs font-bold px-2.5 py-1 rounded-full mb-2 md:mb-3">
                                {{ $banner['tag'] }}
                            </span>
                            <h2 class="text-lg sm:text-2xl md:text-3xl font-black leading-tight mb-1 md:mb-2">
                                {{ $banner['title'] }}
                            </h2>
                            <p class="text-white/80 text-xs sm:text-sm mb-3 md:mb-4">{{ $banner['sub'] }}</p>
                            <a href="{{ $banner['url'] }}"
                               class="inline-block bg-white text-gray-900 text-xs sm:text-sm font-bold px-4 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                {{ $banner['btn'] }} →
                            </a>
                        </div>
                        <div class="text-6xl sm:text-8xl md:text-9xl opacity-30 select-none">{{ $banner['emoji'] }}</div>
                    </div>
                </div>
                @endforeach
            </div>

            {{-- Dots --}}
            <div class="absolute bottom-2 left-1/2 -translate-x-1/2 flex gap-1.5 z-20">
                @foreach($banners as $i => $b)
                <button @click="go({{ $i }})"
                        class="transition-all duration-300 rounded-full bg-white"
                        :class="current === {{ $i }} ? 'w-5 h-1.5 opacity-100' : 'w-1.5 h-1.5 opacity-50'">
                </button>
                @endforeach
            </div>

            {{-- Arrows --}}
            <button @click="prev()" class="absolute left-2 top-1/2 -translate-y-1/2 z-20
                                           w-7 h-7 bg-black/20 hover:bg-black/40 rounded-full
                                           flex items-center justify-center text-white transition-colors">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M15 19l-7-7 7-7"/>
                </svg>
            </button>
            <button @click="next()" class="absolute right-2 top-1/2 -translate-y-1/2 z-20
                                           w-7 h-7 bg-black/20 hover:bg-black/40 rounded-full
                                           flex items-center justify-center text-white transition-colors">
                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"/>
                </svg>
            </button>
        </div>

        {{-- Side banners (desktop only) --}}
        <div class="hidden md:flex flex-col gap-4 w-64 flex-shrink-0">
            <a href="/seller/register"
               class="flex-1 rounded-xl bg-gradient-to-br from-yellow-400 to-orange-500 p-5 text-white flex flex-col justify-between hover:shadow-lg transition-shadow">
                <div>
                    <p class="text-xs font-bold uppercase tracking-wide opacity-80">Become a Seller</p>
                    <h3 class="text-lg font-black mt-1 leading-tight">Start Selling Today</h3>
                    <p class="text-xs opacity-80 mt-1">Reach millions of shoppers</p>
                </div>
                <span class="mt-3 inline-block bg-white text-orange-500 text-xs font-bold px-3 py-1.5 rounded-lg self-start">
                    Register Free →
                </span>
            </a>
            <a href="/products?flash_sale=1"
               class="flex-1 rounded-xl bg-gradient-to-br from-red-500 to-pink-600 p-5 text-white flex flex-col justify-between hover:shadow-lg transition-shadow">
                <div>
                    <p class="text-xs font-bold uppercase tracking-wide opacity-80">⚡ Ends in 2h 30m</p>
                    <h3 class="text-lg font-black mt-1 leading-tight">Flash Sale Live!</h3>
                    <p class="text-xs opacity-80 mt-1">Up to 80% off today only</p>
                </div>
                <span class="mt-3 inline-block bg-white text-red-500 text-xs font-bold px-3 py-1.5 rounded-lg self-start">
                    View Deals →
                </span>
            </a>
        </div>
    </div>
</div>

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    CATEGORY STRIP
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-4">
    <div class="bg-white rounded-xl p-4 shadow-sm">
        <div class="snap-x-strip gap-4">
            @php
                $categories = [
                    ['icon' => '📱', 'name' => 'Phones',      'url' => '/products?category=phones-tablets',  'color' => 'bg-blue-50'],
                    ['icon' => '💻', 'name' => 'Computing',   'url' => '/products?category=computing',       'color' => 'bg-indigo-50'],
                    ['icon' => '📺', 'name' => 'Electronics', 'url' => '/products?category=electronics',     'color' => 'bg-cyan-50'],
                    ['icon' => '👗', 'name' => 'Fashion',     'url' => '/products?category=fashion',         'color' => 'bg-pink-50'],
                    ['icon' => '🏠', 'name' => 'Home',        'url' => '/products?category=home-living',     'color' => 'bg-amber-50'],
                    ['icon' => '🍳', 'name' => 'Appliances',  'url' => '/products?category=home-appliances', 'color' => 'bg-orange-50'],
                    ['icon' => '💅', 'name' => 'Beauty',      'url' => '/products?category=health-beauty',   'color' => 'bg-rose-50'],
                    ['icon' => '🥦', 'name' => 'Groceries',   'url' => '/products?category=groceries',       'color' => 'bg-green-50'],
                    ['icon' => '🍼', 'name' => 'Baby',        'url' => '/products?category=baby-products',   'color' => 'bg-yellow-50'],
                    ['icon' => '⚽', 'name' => 'Sports',      'url' => '/products?category=sports',          'color' => 'bg-lime-50'],
                    ['icon' => '🚗', 'name' => 'Automotive',  'url' => '/products?category=automotive',      'color' => 'bg-slate-50'],
                    ['icon' => '📚', 'name' => 'Books',       'url' => '/products?category=books',           'color' => 'bg-purple-50'],
                ];
            @endphp

            @foreach($categories as $cat)
            <a href="{{ $cat['url'] }}" class="category-chip flex-shrink-0">
                <div class="chip-icon {{ $cat['color'] }} w-14 h-14">
                    <span class="text-2xl">{{ $cat['icon'] }}</span>
                </div>
                <span class="text-xs text-gray-700 font-medium text-center leading-tight">{{ $cat['name'] }}</span>
            </a>
            @endforeach
        </div>
    </div>
</div>

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FLASH SALE SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-4"
     x-data="productList({ filters: { flash_sale: 1, per_page: 8 } })"
     x-init="init()">

    <div x-show="products.length > 0">
        {{-- Section header --}}
        <div class="flex items-center justify-between mb-3 bg-red-500 rounded-xl px-4 py-3">
            <div class="flex items-center gap-2 text-white">
                <span class="text-xl">⚡</span>
                <h2 class="font-black text-base md:text-lg">Flash Sale</h2>
                <div class="bg-white/20 rounded px-2 py-0.5 font-mono text-sm" id="flash-countdown">02:30:00</div>
            </div>
            <a href="/products?flash_sale=1" class="text-white/90 text-xs font-medium hover:text-white">
                See all →
            </a>
        </div>

        {{-- Products scroll --}}
        <div class="snap-x-strip gap-3">
            <template x-for="product in products" :key="product.uuid">
                @include('components.product-card-horizontal')
            </template>
        </div>
    </div>
</div>

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    PROMO BANNERS ROW
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-4 grid grid-cols-2 md:grid-cols-4 gap-3">
    @foreach([
        ['bg'=>'from-orange-400 to-red-500', 'emoji'=>'📱', 'label'=>'Phones & Tablets', 'sub'=>'Up to 40% off', 'url'=>'/products?category=phones-tablets'],
        ['bg'=>'from-blue-400 to-indigo-600','emoji'=>'💻', 'label'=>'Computing',        'sub'=>'Best deals today',  'url'=>'/products?category=computing'],
        ['bg'=>'from-pink-400 to-rose-600',  'emoji'=>'👗', 'label'=>'Fashion Week',     'sub'=>'New styles daily', 'url'=>'/products?category=fashion'],
        ['bg'=>'from-green-400 to-teal-600', 'emoji'=>'🏠', 'label'=>'Home & Living',   'sub'=>'Furnish for less',  'url'=>'/products?category=home-living'],
    ] as $promo)
    <a href="{{ $promo['url'] }}"
       class="rounded-xl bg-gradient-to-br {{ $promo['bg'] }} p-3 md:p-4 text-white hover:shadow-lg transition-shadow flex items-center justify-between">
        <div>
            <p class="text-xs font-bold opacity-80">{{ $promo['sub'] }}</p>
            <p class="font-black text-sm md:text-base leading-tight mt-0.5">{{ $promo['label'] }}</p>
        </div>
        <span class="text-3xl md:text-4xl opacity-80">{{ $promo['emoji'] }}</span>
    </a>
    @endforeach
</div>

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    FEATURED PRODUCTS GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-6"
     x-data="productList({ filters: { featured: 1 }, per_page: 10 })"
     x-init="init()">

    <div class="flex items-center justify-between mb-3">
        <h2 class="section-title text-base md:text-lg">⭐ Featured Products</h2>
        <a href="/products?featured=1" class="text-orange-500 text-xs font-medium hover:underline">See all</a>
    </div>

    {{-- Loading skeletons --}}
    <div x-show="loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
        @for($i = 0; $i < 10; $i++)
        <div class="bg-white rounded-lg p-3 shadow-sm animate-pulse">
            <div class="skeleton w-full aspect-square rounded mb-2"></div>
            <div class="skeleton h-3 w-4/5 mb-1.5"></div>
            <div class="skeleton h-3 w-2/3 mb-2"></div>
            <div class="skeleton h-4 w-1/2"></div>
        </div>
        @endfor
    </div>

    {{-- Product grid --}}
    <div x-show="!loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
        <template x-for="product in products" :key="product.uuid">
            @include('components.product-card-grid')
        </template>
    </div>
</div>

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    NEW ARRIVALS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-8"
     x-data="productList({ filters: { sort: 'created_at' }, per_page: 10 })"
     x-init="init()">

    <div class="flex items-center justify-between mb-3">
        <h2 class="section-title text-base md:text-lg">🆕 New Arrivals</h2>
        <a href="/products?sort=created_at" class="text-orange-500 text-xs font-medium hover:underline">See all</a>
    </div>

    <div x-show="!loading" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
        <template x-for="product in products" :key="product.uuid">
            @include('components.product-card-grid')
        </template>
    </div>
</div>

{{-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    APP DOWNLOAD BANNER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --}}
<div class="max-w-7xl mx-auto px-3 md:px-6 mt-8 mb-4">
    <div class="bg-gradient-to-r from-orange-500 to-orange-600 rounded-2xl p-6 md:p-8 flex flex-col md:flex-row items-center justify-between gap-4">
        <div class="text-white text-center md:text-left">
            <h3 class="text-xl md:text-2xl font-black">Shop smarter on the app</h3>
            <p class="text-white/80 text-sm mt-1">Get exclusive app-only deals and track orders in real time</p>
        </div>
        <div class="flex gap-3 flex-shrink-0">
            <a href="#" class="flex items-center gap-2 bg-black text-white px-4 py-2.5 rounded-xl hover:bg-gray-900 transition-colors">
                <span class="text-xl">🍎</span>
                <div class="text-left">
                    <div class="text-xs opacity-70">Download on the</div>
                    <div class="text-sm font-bold">App Store</div>
                </div>
            </a>
            <a href="#" class="flex items-center gap-2 bg-black text-white px-4 py-2.5 rounded-xl hover:bg-gray-900 transition-colors">
                <span class="text-xl">🤖</span>
                <div class="text-left">
                    <div class="text-xs opacity-70">Get it on</div>
                    <div class="text-sm font-bold">Google Play</div>
                </div>
            </a>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// Flash sale countdown timer
(function() {
    const el = document.getElementById('flash-countdown')
    if (!el) return
    let total = 2 * 3600 + 30 * 60
    setInterval(() => {
        if (total <= 0) { el.textContent = 'Ended'; return }
        total--
        const h = String(Math.floor(total / 3600)).padStart(2, '0')
        const m = String(Math.floor((total % 3600) / 60)).padStart(2, '0')
        const s = String(total % 60).padStart(2, '0')
        el.textContent = `${h}:${m}:${s}`
    }, 1000)
})()
</script>
@endsection