@extends('layouts.app')

@section('title', '2Brother.Hub — Step Into Style | Footwear Store')

@section('content')

    {{-- ===== 1. HERO CAROUSEL SECTION ===== --}}
    <section class="relative rounded-3xl overflow-hidden bg-ink-card border border-white/10 mb-12 shadow-2xl" 
             x-data="{ active: 0, count: {{ max($slides->count(), 1) }}, auto: null }"
             x-init="auto = setInterval(() => active = (active + 1) % count, 5000)"
             @mouseenter="clearInterval(auto)"
             @mouseleave="auto = setInterval(() => active = (active + 1) % count, 5000)">
        
        <div class="relative min-h-[380px] sm:min-h-[440px] flex items-center">
            @forelse($slides as $i => $slide)
                @php($img = $slide->primaryImage())
                <div x-show="active === {{ $i }}" 
                     x-transition:enter="transition ease-out duration-700" 
                     x-transition:enter-start="opacity-0 translate-x-8" 
                     x-transition:enter-end="opacity-100 translate-x-0"
                     x-transition:leave="transition ease-in duration-300"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0"
                     class="absolute inset-0 flex flex-col md:flex-row items-center justify-between gap-8 px-6 sm:px-14 py-10 bg-gradient-to-r from-ink via-brand-dark/90 to-brand/40">
                    
                    <!-- Left Content -->
                    <div class="max-w-xl text-white z-10">
                        <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-light/20 text-brand-light border border-brand-light/30 text-xs font-black uppercase tracking-widest mb-4">
                            <span>⚡ FEATURED SNEAKER DROP</span>
                        </div>
                        <h1 class="font-display font-black text-3xl sm:text-5xl text-white tracking-tight leading-tight mb-3 drop-shadow-md">
                            {{ $slide->name }}
                        </h1>
                        <p class="text-slate-300 text-sm sm:text-base mb-6 line-clamp-2 leading-relaxed">
                            {{ $slide->description }}
                        </p>

                        <!-- Price box -->
                        <div class="flex items-baseline gap-3 mb-6 bg-black/40 backdrop-blur-sm px-4 py-2.5 rounded-2xl w-fit border border-white/10">
                            <span class="font-display text-2xl sm:text-3xl font-black text-brand-light">₹{{ number_format($slide->price, 2) }}</span>
                            @if($slide->original_price > $slide->price)
                                <span class="price-strike text-slate-400 text-sm font-semibold">₹{{ number_format($slide->original_price, 2) }}</span>
                                <span class="bg-gradient-to-r from-brand to-brand-light text-ink text-xs font-black px-2 py-0.5 rounded-full">
                                    {{ $slide->discount_percent }}% OFF
                                </span>
                            @endif
                        </div>

                        <!-- CTA Actions -->
                        <div class="flex flex-wrap items-center gap-3">
                            <a href="{{ route('products.show', $slide) }}" 
                               class="bg-gradient-to-r from-brand to-brand-hover hover:from-brand-hover hover:to-brand text-white font-bold px-7 py-3 rounded-full text-sm shadow-glow hover:shadow-glow-lg transition duration-200 flex items-center gap-2">
                                <span>Shop This Drop</span>
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                            </a>
                            <a href="{{ route('products.index') }}" 
                               class="bg-white/10 hover:bg-white/20 text-slate-200 font-semibold px-6 py-3 rounded-full text-sm border border-white/15 transition">
                                Explore All ({{ \App\Models\Product::where('is_active', true)->count() }}+)
                            </a>
                        </div>
                    </div>

                    <!-- Right Image showcase -->
                    <div class="relative shrink-0 flex items-center justify-center">
                        <div class="w-64 h-64 sm:w-80 sm:h-80 rounded-3xl bg-gradient-to-tr from-brand/20 to-brand-light/20 p-2 border border-white/10 shadow-glow relative overflow-hidden group">
                            @if($img)
                                <img src="{{ $img->url }}" alt="{{ $slide->name }}" class="w-full h-full object-cover rounded-2xl group-hover:scale-105 transition duration-500">
                            @else
                                <div class="w-full h-full flex items-center justify-center text-4xl">👟</div>
                            @endif
                            <div class="absolute bottom-3 left-3 bg-ink/90 backdrop-blur-md px-3 py-1 rounded-full border border-white/10 text-[11px] font-bold text-white flex items-center gap-1.5">
                                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
                                100% Authentic
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="p-12 text-center text-slate-400 w-full">
                    <p class="text-xl font-bold text-white mb-2">Welcome to 2Brother.Hub</p>
                    <p class="text-sm">Explore our wide collection of sneakers, running shoes, and luxury leather footwear.</p>
                </div>
            @endforelse
        </div>

        <!-- Carousel Indicators & Controls -->
        @if($slides->count() > 1)
            <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-2 z-20 bg-ink/80 backdrop-blur-sm px-3 py-1.5 rounded-full border border-white/10">
                @foreach($slides as $i => $slide)
                    <button @click="active = {{ $i }}" 
                            :class="active === {{ $i }} ? 'bg-brand-light w-8' : 'bg-white/30 w-2.5'" 
                            class="h-2 rounded-full transition-all duration-300"></button>
                @endforeach
            </div>
        @endif
    </section>

    {{-- ===== 2. VALUE PROPOSITIONS / TRUST BAR ===== --}}
    <section class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-14">
        <div class="bg-ink-card border border-white/10 rounded-2xl p-4 flex items-center gap-3.5 hover:border-brand-light/40 transition">
            <div class="w-11 h-11 rounded-xl bg-brand/20 text-brand-light flex items-center justify-center text-xl shrink-0">
                🛡️
            </div>
            <div>
                <h4 class="font-heading font-bold text-white text-sm">100% Authentic</h4>
                <p class="text-[11px] text-slate-400">Verified genuine footwear</p>
            </div>
        </div>

        <div class="bg-ink-card border border-white/10 rounded-2xl p-4 flex items-center gap-3.5 hover:border-brand-light/40 transition">
            <div class="w-11 h-11 rounded-xl bg-brand/20 text-brand-light flex items-center justify-center text-xl shrink-0">
                🚀
            </div>
            <div>
                <h4 class="font-heading font-bold text-white text-sm">Express Delivery</h4>
                <p class="text-[11px] text-slate-400">Free shipping above ₹999</p>
            </div>
        </div>

        <div class="bg-ink-card border border-white/10 rounded-2xl p-4 flex items-center gap-3.5 hover:border-brand-light/40 transition">
            <div class="w-11 h-11 rounded-xl bg-brand/20 text-brand-light flex items-center justify-center text-xl shrink-0">
                🔄
            </div>
            <div>
                <h4 class="font-heading font-bold text-white text-sm">7-Day Free Exchange</h4>
                <p class="text-[11px] text-slate-400">Hassle-free size replacement</p>
            </div>
        </div>

        <div class="bg-ink-card border border-white/10 rounded-2xl p-4 flex items-center gap-3.5 hover:border-brand-light/40 transition">
            <div class="w-11 h-11 rounded-xl bg-brand/20 text-brand-light flex items-center justify-center text-xl shrink-0">
                💳
            </div>
            <div>
                <h4 class="font-heading font-bold text-white text-sm">Razorpay & UPI</h4>
                <p class="text-[11px] text-slate-400">100% Secure & COD available</p>
            </div>
        </div>
    </section>

    {{-- ===== 3. SHOP BY CATEGORY ===== --}}
    <section class="mb-14">
        <div class="flex items-center justify-between mb-6">
            <div>
                <span class="text-xs uppercase font-bold tracking-widest text-brand-light">CATEGORIES</span>
                <h2 class="font-display font-bold text-2xl text-white">Shop by Style</h2>
            </div>
            <a href="{{ route('products.index') }}" class="text-xs font-bold text-brand-light hover:underline flex items-center gap-1">
                <span>View Full Catalog</span>
                <span>&rarr;</span>
            </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
            @foreach($categories as $cat)
                <a href="{{ route('products.index', ['category' => $cat->slug]) }}"
                   class="group bg-ink-card border border-white/10 hover:border-brand-light rounded-2xl p-4 flex flex-col items-center text-center transition duration-300 hover:shadow-glow hover:-translate-y-1">
                    <div class="w-14 h-14 rounded-2xl bg-brand/15 text-brand-light flex items-center justify-center text-2xl mb-3 group-hover:scale-110 transition duration-300">
                        @if(str_contains(strtolower($cat->name), 'sneak')) 👟
                        @elseif(str_contains(strtolower($cat->name), 'run')) ⚡
                        @elseif(str_contains(strtolower($cat->name), 'formal')) 👞
                        @elseif(str_contains(strtolower($cat->name), 'sandal') || str_contains(strtolower($cat->name), 'slip')) 🩴
                        @else 🏆
                        @endif
                    </div>
                    <h3 class="font-heading font-bold text-sm text-white group-hover:text-brand-light transition">{{ $cat->name }}</h3>
                    <p class="text-[11px] text-slate-400 mt-0.5">{{ $cat->products_count }} Products</p>
                </a>
            @endforeach
        </div>
    </section>

    {{-- ===== 4. LATEST DROPS / PRODUCT GRID ===== --}}
    <section class="mb-14">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div>
                <span class="text-xs uppercase font-bold tracking-widest text-brand-light">NEW ARRIVALS</span>
                <h2 class="font-display font-bold text-2xl text-white">Fresh Footwear Drops</h2>
            </div>
            <div class="flex items-center gap-2">
                <a href="{{ route('products.index', ['sort' => 'newest']) }}" class="text-xs font-semibold px-3 py-1.5 rounded-full bg-white/5 hover:bg-white/10 text-slate-200 border border-white/5 transition">Newest</a>
                <a href="{{ route('products.index', ['sort' => 'discount']) }}" class="text-xs font-semibold px-3 py-1.5 rounded-full bg-white/5 hover:bg-white/10 text-brand-light border border-white/5 transition">Top Deals</a>
                <a href="{{ route('products.index') }}" class="text-xs font-bold px-4 py-1.5 rounded-full bg-brand text-white hover:bg-brand-hover transition shadow-sm">View All &rarr;</a>
            </div>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5">
            @forelse($latest as $product)
                <x-product-card :product="$product" />
            @empty
                <p class="col-span-full text-slate-400 text-center py-10">No products available yet.</p>
            @endforelse
        </div>
    </section>

    {{-- ===== 5. PROMO BANNER / COMMUNITY ===== --}}
    <section class="rounded-3xl bg-gradient-to-r from-ink via-brand-dark to-ink border border-brand/30 p-8 sm:p-12 relative overflow-hidden shadow-2xl">
        <div class="absolute -right-10 -bottom-10 w-64 h-64 bg-brand-light/10 rounded-full blur-3xl pointer-events-none"></div>
        <div class="max-w-2xl relative z-10">
            <span class="inline-block px-3 py-1 rounded-full bg-brand/30 border border-brand/40 text-brand-light text-xs font-black uppercase tracking-wider mb-3">
                LIMITED OFFER
            </span>
            <h2 class="font-display font-black text-2xl sm:text-4xl text-white mb-3 leading-tight">
                Unlock 10% Off Your First Sneaker Order
            </h2>
            <p class="text-slate-300 text-sm mb-6 leading-relaxed">
                Step into style with 2Brother.Hub's exclusive footwear drop. Apply voucher code <code class="bg-black/50 text-brand-light px-2 py-1 rounded font-bold">STEP10</code> during checkout to claim your welcome discount.
            </p>
            <a href="{{ route('products.index') }}" class="inline-block bg-gradient-to-r from-brand to-brand-light text-ink font-extrabold px-8 py-3.5 rounded-full text-sm shadow-glow hover:shadow-glow-lg transition">
                Start Shopping Now &rarr;
            </a>
        </div>
    </section>

@endsection