@extends('layouts.app')
@section('title', 'Shopora - Premium Collections')
@section('content')

{{-- ── HERO SECTION ───────────────────────────────────────── --}}
<div class="relative min-h-[85vh] flex items-center pt-10 pb-20 overflow-hidden">
    <!-- bg-primary-dark (#081C15) = very dark → WHITE text -->
    <div class="absolute inset-0 bg-primary-dark -z-20"></div>
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/20 rounded-full blur-[100px] -z-10 pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">

            {{-- Left Content: dark bg → white text --}}
            <div class="space-y-8 fade-in-up">
                <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full border border-white/20 bg-white/10 text-white text-xs font-semibold tracking-widest uppercase mb-4">
                    <span class="w-2 h-2 rounded-full bg-primary-light animate-pulse"></span>
                    Premium Collection
                </div>

                <h1 class="text-5xl md:text-7xl font-bold text-white leading-tight tracking-tight">
                    Make Space for <br/>
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary-light to-white/70">Something Better</span>
                </h1>

                <p class="text-lg text-white/75 max-w-lg leading-relaxed">
                    Discover premium furniture and lifestyle pieces designed to elevate your everyday environment. Crafted with precision, styled for the modern aesthetic.
                </p>

                <div class="flex flex-col sm:flex-row gap-4 pt-4">
                    <a href="{{ route('products.index') }}"
                       class="btn-brand px-8 py-4 text-center font-bold tracking-wide shadow-3d hover:shadow-3d-hover text-white">
                        Explore Collection
                    </a>
                    <a href="{{ route('products.index', ['on_sale' => 1]) }}"
                       class="px-8 py-4 text-center font-bold tracking-wide rounded-full border-2 border-white/40 text-white hover:bg-white/10 hover:border-white/70 transition-all duration-300">
                        View Offers
                    </a>
                </div>
            </div>

            {{-- Right 3D Product Card --}}
            <div class="relative h-[600px] flex items-center justify-center fade-in-up delay-200">
                {{-- 
                    Card bg: bg-white (light) → ALL inner text must be DARK
                    White bg makes white chair image visible with shadow
                --}}
                <div class="card-3d w-full max-w-md bg-white rounded-[3rem] p-8 pb-16 shadow-3d relative cursor-pointer group border border-primary/10">

                    {{-- Featured badge: light card → dark text --}}
                    <div class="absolute top-6 left-6 z-20 bg-primary/10 px-4 py-2 rounded-full text-primary font-bold text-sm border border-primary/20">
                        <i class="fa-solid fa-star text-xs mr-1 text-amber-500"></i> Featured
                    </div>

                    {{-- Discount badge: dark bg → white text --}}
                    <div class="absolute top-6 right-6 z-20 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center font-bold text-xs shadow-lg">
                        -15%
                    </div>

                    {{-- Product Image: white bg so white chair is visible via shadow --}}
                    <div class="relative w-full h-[400px] flex justify-center items-center -mt-20 z-10">
                        <img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?q=80&w=1000&auto=format&fit=crop"
                             alt="Premium Chair"
                             class="product-pop w-[120%] max-w-none h-auto object-contain"
                             style="filter: drop-shadow(0 20px 30px rgba(45,106,79,0.25));">
                    </div>

                    {{-- Product Details: white card → dark text --}}
                    <div class="text-center mt-4">
                        <h3 class="text-2xl font-bold text-accent">Orris Chair</h3>
                        <div class="flex justify-center items-center gap-4 mt-2">
                            <p class="text-xl font-black text-accent">Rs. 32000</p>
                            <p class="text-sm text-accent/40 line-through">Rs. 38000</p>
                        </div>
                    </div>

                    {{-- Floating cart btn: dark bg → white icon --}}
                    <div class="absolute -bottom-6 left-1/2 -translate-x-1/2 w-16 h-16 bg-primary rounded-full flex items-center justify-center shadow-2xl group-hover:scale-110 transition-transform duration-300 z-30 border-4 border-white">
                        <i class="fa-solid fa-cart-shopping text-white text-xl"></i>
                    </div>
                </div>

                <!-- Floating blobs -->
                <div class="absolute top-20 right-10 w-24 h-24 bg-primary-light/30 rounded-full blur-2xl animate-float -z-10"></div>
                <div class="absolute bottom-20 left-10 w-32 h-32 bg-primary/20 rounded-full blur-2xl animate-float opacity-50 delay-100 -z-10"></div>
            </div>

        </div>
    </div>
</div>

{{-- ── BELOW HERO: light bg (#EBF4F0) → dark text ──────────────────────── --}}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-32">

    {{-- ── CATEGORIES ────────────────────────────────────────────────────────── --}}
    <div class="mb-24 pt-12 scroll-animate">
        <div class="flex justify-between items-end mb-8">
            <div>
                <h3 class="text-3xl font-bold text-accent mb-2">Curated Spaces</h3>
                <p class="text-accent/65">Explore collections tailored for your aesthetic.</p>
            </div>
            <a href="#" class="text-accent hover:text-primary transition font-medium border-b border-accent/40 hover:border-primary pb-1">
                View All Spaces
            </a>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            @foreach($categories as $cat)
            @php
                $icons = [
                    'electronics'  => 'fa-desktop',
                    'fashion'      => 'fa-shirt',
                    'home-garden'  => 'fa-couch',
                    'sports'       => 'fa-basketball',
                    'books'        => 'fa-book-open',
                    'beauty'       => 'fa-wand-magic-sparkles'
                ];
            @endphp
            <a href="{{ route('products.index', ['category' => $cat->slug]) }}"
               class="group relative overflow-hidden rounded-3xl glass-panel p-6 flex flex-col items-center text-center transition-all duration-500 hover:-translate-y-2 hover:shadow-3d hover:bg-primary">
                <div class="w-16 h-16 rounded-2xl bg-surfaceLight flex items-center justify-center mb-4 border border-primary/10 group-hover:scale-110 group-hover:bg-white/20 transition-all duration-500">
                    <i class="fa-solid {{ $icons[$cat->slug] ?? 'fa-box' }} text-2xl text-primary group-hover:text-white transition-colors"></i>
                </div>
                <p class="text-sm font-semibold text-accent/85 group-hover:text-white transition-colors line-clamp-1">
                    {{ $cat->name }}
                </p>
                <div class="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/5 to-transparent group-hover:animate-[shimmer_1.5s_infinite]"></div>
            </a>
            @endforeach
        </div>
    </div>

    {{-- ── FLASH SALE ─────────────────────────────────────────────────────────── --}}
    @if($onSale->count())
    <div class="mb-24 scroll-animate relative">
        <div class="absolute -top-20 -right-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl -z-10"></div>

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-end mb-8 gap-4">
            <div>
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-100 text-red-600 text-xs font-bold mb-3 border border-red-200">
                    <i class="fa-solid fa-fire animate-pulse"></i> Limited Time
                </div>
                <h3 class="text-3xl font-bold text-accent">Exclusive Offers</h3>
            </div>

            {{-- Countdown: light bg → dark text; digits: dark bg → white --}}
            <div class="flex items-center gap-3 bg-white px-4 py-2 rounded-xl border border-primary/10 shadow-sm">
                <span class="text-accent/70 text-sm font-medium">Ends in:</span>
                <div class="flex items-center gap-1 font-mono font-bold text-sm">
                    <span class="bg-primary-dark text-white px-2 py-1 rounded shadow-inner">12</span>
                    <span class="text-accent/50">:</span>
                    <span class="bg-primary-dark text-white px-2 py-1 rounded shadow-inner">34</span>
                    <span class="text-accent/50">:</span>
                    <span class="bg-primary-dark text-white px-2 py-1 rounded shadow-inner">56</span>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            @foreach($onSale->take(4) as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>
    </div>
    @endif

    {{-- ── DISCOVER MORE ──────────────────────────────────────────────────────── --}}
    <div class="scroll-animate relative">
        <div class="absolute top-40 -left-20 w-80 h-80 bg-primary/5 rounded-full blur-3xl -z-10"></div>

        <div class="text-center mb-12">
            <h3 class="text-3xl font-bold text-accent mb-4">Discover More</h3>
            <p class="text-accent/65 max-w-xl mx-auto">Handpicked selections based on the modern aesthetic.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            @foreach($featuredProducts as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
            @foreach($newArrivals->take(4) as $product)
                @include('partials.product-card', ['product' => $product])
            @endforeach
        </div>

        <div class="mt-16 text-center">
            <a href="{{ route('products.index') }}"
               class="inline-block btn-glass px-12 py-4 rounded-full font-bold transition-all hover:px-14 text-accent">
                Explore Entire Collection <i class="fa-solid fa-arrow-right ml-2 text-sm"></i>
            </a>
        </div>
    </div>

</div>

<style>
@keyframes shimmer {
    100% { transform: translateX(200%); }
}
</style>
@endsection