@extends('layouts.app')
@php
    use Illuminate\Support\Facades\Storage;
@endphp
@php
    use Illuminate\Support\Str;
@endphp
@section('content')
    <section class="hero-section relative overflow-hidden bg-gradient-to-br from-emerald-950 via-emerald-900 to-emerald-800 lg:min-h-[90vh] flex items-center">
        <!-- Animated background layers -->
        <div class="absolute inset-0 opacity-30 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-yellow-400 via-transparent to-transparent"></div>
        <div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_at_bottom_left,_var(--tw-gradient-stops))] from-emerald-300 via-transparent to-transparent"></div>
        
        <!-- Decorative glow orbs -->
        <div class="hidden lg:block absolute top-10 right-1/4 w-96 h-96 bg-emerald-400/10 rounded-full blur-3xl animate-pulse"></div>
        <div class="hidden lg:block absolute bottom-20 left-1/4 w-72 h-72 bg-yellow-400/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
        <div class="hidden lg:block absolute top-1/2 left-3/4 w-56 h-56 bg-emerald-300/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 4s;"></div>

        <!-- Floating food icons -->
        <div class="hidden lg:block absolute top-24 left-[12%] text-emerald-300/20 text-4xl animate-bounce" style="animation-duration: 3s;">
            <i class="fas fa-leaf"></i>
        </div>
        <div class="hidden lg:block absolute top-32 right-[8%] text-yellow-300/20 text-3xl animate-bounce" style="animation-duration: 4s; animation-delay: 0.5s;">
            <i class="fas fa-pepper-hot"></i>
        </div>
        <div class="hidden lg:block absolute bottom-32 left-[18%] text-emerald-300/20 text-3xl animate-bounce" style="animation-duration: 3.5s; animation-delay: 1s;">
            <i class="fas fa-seedling"></i>
        </div>
        <div class="hidden lg:block absolute bottom-40 right-[15%] text-yellow-300/20 text-4xl animate-bounce" style="animation-duration: 4.5s; animation-delay: 1.5s;">
            <i class="fas fa-apple-alt"></i>
        </div>
        <div class="hidden lg:block absolute top-1/2 left-[5%] text-emerald-300/15 text-2xl animate-bounce" style="animation-duration: 5s; animation-delay: 2s;">
            <i class="fas fa-carrot"></i>
        </div>

        <div class="relative w-full container mx-auto px-4 sm:px-6 lg:px-8 py-14 lg:py-20">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
                <div class="text-center lg:text-left space-y-7">
                    <!-- Badge -->
                    <div class="inline-flex items-center gap-2 text-emerald-200 bg-white/10 backdrop-blur-md px-5 py-2.5 rounded-full text-sm font-medium border border-white/10">
                        <span class="relative flex h-2.5 w-2.5">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-400"></span>
                        </span>
                        <span class="hero-badge-text">Fresh groceries delivered to your doorstep</span>
                    </div>

                    <!-- Title -->
                    <h1 class="hero-title text-4xl md:text-5xl lg:text-7xl font-extrabold text-white leading-[1.1] tracking-tight">
                        <span class="hero-title-line">Delve into the</span>
                        <span class="block mt-2 text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-emerald-200 to-yellow-300">
                            aromatic world
                        </span>
                        <span class="hero-title-line block mt-2">of African cuisine</span>
                    </h1>

                    <!-- Subtitle -->
                    <p class="hero-subtitle text-lg md:text-xl text-emerald-100/70 max-w-xl mx-auto lg:mx-0 leading-relaxed">
                        Discover our diverse selection of authentic African blends, spices, seasonings, and fresh groceries — delivered straight to your kitchen.
                    </p>

                    <!-- Search Bar -->
                    <form action="/products/index" method="GET" class="max-w-xl mx-auto lg:mx-0">
                        <div class="relative flex items-center bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 overflow-hidden group transition-all duration-500 hover:bg-white/15 focus-within:bg-white/20 focus-within:border-emerald-400/60 focus-within:shadow-lg focus-within:shadow-emerald-500/10">
                            <span class="absolute left-5 text-emerald-300/50 group-focus-within:text-emerald-300 transition-colors">
                                <i class="fas fa-search"></i>
                            </span>
                            <input type="text" name="search" placeholder="Search for spices, groceries, seasonings..." class="w-full bg-transparent text-white placeholder-emerald-200/50 pl-12 pr-4 py-4.5 outline-none text-base">
                            <button type="submit" class="flex items-center gap-2 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-400 hover:to-emerald-500 text-white px-7 py-4.5 font-semibold transition-all mr-1.5 rounded-xl shadow-lg shadow-emerald-500/20">
                                <i class="fas fa-search"></i>
                                <span class="hidden sm:inline">Search</span>
                            </button>
                        </div>
                    </form>

                    <!-- CTA Buttons -->
                    <div class="flex flex-wrap gap-4 justify-center lg:justify-start pt-1">
                        <a href="/categories" class="group inline-flex items-center gap-2.5 bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-400 hover:to-emerald-500 text-white px-9 py-4 rounded-xl font-semibold transition-all duration-300 hover:shadow-xl hover:shadow-emerald-500/30 hover:-translate-y-0.5">
                            <span>Shop Now</span>
                            <i class="fas fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                        </a>
                        <a href="/about" class="inline-flex items-center gap-2.5 bg-white/10 hover:bg-white/20 text-white px-9 py-4 rounded-xl font-semibold backdrop-blur-sm border border-white/20 hover:border-white/30 transition-all duration-300">
                            <span class="flex items-center justify-center w-6 h-6 rounded-full bg-emerald-400/30">
                                <i class="fas fa-play text-xs ml-0.5"></i>
                            </span>
                            Learn More
                        </a>
                    </div>

                    <!-- Stats -->
                    <div class="flex flex-wrap gap-10 justify-center lg:justify-start pt-4">
                        <div class="text-center lg:text-left">
                            <span class="stat-count text-3xl font-extrabold text-white" data-target="500">0</span><span class="text-3xl font-extrabold text-emerald-400">+</span>
                            <span class="block text-emerald-200/60 text-sm font-medium mt-0.5">Products</span>
                        </div>
                        <div class="text-center lg:text-left">
                            <span class="stat-count text-3xl font-extrabold text-white" data-target="21">0</span>
                            <span class="block text-emerald-200/60 text-sm font-medium mt-0.5">Categories</span>
                        </div>
                        <div class="text-center lg:text-left">
                            <span class="stat-count text-3xl font-extrabold text-white" data-target="100">0</span><span class="text-3xl font-extrabold text-emerald-400">%</span>
                            <span class="block text-emerald-200/60 text-sm font-medium mt-0.5">Fresh</span>
                        </div>
                    </div>
                </div>

                <div class="hidden lg:block relative">
                    <div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-emerald-900/50 group">
                        <!-- Image with zoom on hover -->
                        <div class="hero-image-wrapper overflow-hidden">
                            <img src="{{ asset('images/istockphoto-938050806-612x612.jpg') }}" alt="African Cuisine" class="hero-image w-full h-[520px] object-cover transition-transform duration-10000 group-hover:scale-110">
                        </div>
                        <div class="absolute inset-0 bg-gradient-to-t from-emerald-950/80 via-emerald-900/20 to-transparent"></div>
                        <div class="absolute inset-0 bg-gradient-to-r from-emerald-950/40 via-transparent to-transparent"></div>
                        
                        <!-- Decorative corner accents -->
                        <div class="absolute top-4 left-4 w-16 h-16 border-t-2 border-l-2 border-emerald-400/40 rounded-tl-xl"></div>
                        <div class="absolute top-4 right-4 w-16 h-16 border-t-2 border-r-2 border-emerald-400/40 rounded-tr-xl"></div>
                        <div class="absolute bottom-4 left-4 w-16 h-16 border-b-2 border-l-2 border-emerald-400/40 rounded-bl-xl"></div>
                        <div class="absolute bottom-4 right-4 w-16 h-16 border-b-2 border-r-2 border-emerald-400/40 rounded-br-xl"></div>

                        <!-- Floating cards -->
                        <div class="absolute bottom-5 left-5 right-5 flex gap-3">
                            <div class="hero-card flex-1 bg-white/15 backdrop-blur-xl rounded-xl px-4 py-3.5 border border-white/20 hover:bg-white/25 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
                                <div class="flex items-center gap-3 text-white">
                                    <div class="w-9 h-9 rounded-lg bg-emerald-500/30 flex items-center justify-center">
                                        <i class="fas fa-truck text-emerald-300 text-sm"></i>
                                    </div>
                                    <div>
                                        <span class="block text-sm font-semibold">Free Delivery</span>
                                        <span class="block text-xs text-emerald-200/70">on orders over $50</span>
                                    </div>
                                </div>
                            </div>
                            <div class="hero-card flex-1 bg-white/15 backdrop-blur-xl rounded-xl px-4 py-3.5 border border-white/20 hover:bg-white/25 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg" style="animation-delay: 0.2s;">
                                <div class="flex items-center gap-3 text-white">
                                    <div class="w-9 h-9 rounded-lg bg-emerald-500/30 flex items-center justify-center">
                                        <i class="fas fa-leaf text-emerald-300 text-sm"></i>
                                    </div>
                                    <div>
                                        <span class="block text-sm font-semibold">100% Fresh</span>
                                        <span class="block text-xs text-emerald-200/70">organic guarantee</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Floating review card -->
                    <div class="absolute -bottom-6 -left-6 bg-emerald-800/60 backdrop-blur-xl rounded-xl px-5 py-3.5 border border-emerald-700/50 shadow-lg animate-bounce hidden xl:block" style="animation-duration: 6s;">
                        <div class="flex items-center gap-2.5">
                            <div class="flex -space-x-2">
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 border-2 border-emerald-800 flex items-center justify-center text-white text-xs font-bold">A</div>
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 border-2 border-emerald-800 flex items-center justify-center text-white text-xs font-bold">K</div>
                                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-emerald-400 to-emerald-600 border-2 border-emerald-800 flex items-center justify-center text-white text-xs font-bold">M</div>
                            </div>
                            <div class="text-white">
                                <div class="flex items-center gap-1 text-yellow-400 text-xs">
                                    <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
                                </div>
                                <span class="text-xs text-emerald-200/70">2.5k+ happy customers</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Slide indicators -->
        <div class="absolute bottom-6 left-0 right-0 flex justify-center gap-2.5 z-10">
            <button class="slide-btn active w-10 h-2.5 bg-emerald-400 rounded-full transition-all duration-500 hover:bg-emerald-300 shadow-lg shadow-emerald-500/30"></button>
            <button class="slide-btn w-2.5 h-2.5 bg-white/40 hover:bg-white/60 rounded-full transition-all duration-500"></button>
            <button class="slide-btn w-2.5 h-2.5 bg-white/40 hover:bg-white/60 rounded-full transition-all duration-500"></button>
        </div>
    </section>

    <!-- Slide transition + counter script -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = [
            {
                title: '<span class="hero-title-line">Delve into the</span><span class="block mt-2 text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-emerald-200 to-yellow-300">aromatic world</span><span class="hero-title-line block mt-2">of African cuisine</span>',
                subtitle: 'Discover our diverse selection of authentic African blends, spices, seasonings, and fresh groceries — delivered straight to your kitchen.',
                img: '{{ asset("images/istockphoto-938050806-612x612.jpg") }}',
                gradient: 'from-emerald-950 via-emerald-900 to-emerald-800',
            },
            {
                title: '<span class="hero-title-line">Discover</span><span class="block mt-2 text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-emerald-200 to-yellow-300">Traditional</span><span class="hero-title-line block mt-2">Seasonings & Spices</span>',
                subtitle: 'Explore our handpicked collection of authentic African seasonings that bring rich, bold flavors to every meal.',
                img: '{{ asset("images/istockphoto-139496979-612x612.jpg") }}',
                gradient: 'from-emerald-950 via-emerald-800 to-teal-800',
            },
            {
                title: '<span class="hero-title-line">Premium</span><span class="block mt-2 text-transparent bg-clip-text bg-gradient-to-r from-emerald-300 via-emerald-200 to-yellow-300">Quality</span><span class="hero-title-line block mt-2">Ingredients for You</span>',
                subtitle: 'Hand-picked premium ingredients sourced directly from trusted farms. Taste the difference with every bite.',
                img: '{{ asset("images/spices-powder-freeimages-1-e1583777049598.jpg") }}',
                gradient: 'from-emerald-950 via-teal-900 to-emerald-800',
            },
        ];

        let current = 0;
        let isTransitioning = false;
        const titleEl = document.querySelector('.hero-title');
        const subtitleEl = document.querySelector('.hero-subtitle');
        const imgEl = document.querySelector('.hero-image');
        const btns = document.querySelectorAll('.slide-btn');
        const section = document.querySelector('.hero-section');
        const heroContent = document.querySelector('.hero-section .grid');
        const cards = document.querySelectorAll('.hero-card');

        function goTo(index) {
            if (isTransitioning) return;
            isTransitioning = true;

            const slide = slides[index];
            if (!slide) { isTransitioning = false; return; }

            // Fade out
            heroContent.style.opacity = '0';
            heroContent.style.transform = 'translateY(20px) scale(0.98)';
            heroContent.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
            
            if (imgEl) {
                imgEl.style.opacity = '0';
                imgEl.style.transform = 'scale(1.1)';
                imgEl.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
            }

            setTimeout(() => {
                // Update content
                section.style.background = slide.gradient;
                titleEl.innerHTML = slide.title;
                subtitleEl.textContent = slide.subtitle;
                if (imgEl) {
                    imgEl.src = slide.img;
                    imgEl.style.opacity = '1';
                    imgEl.style.transform = 'scale(1)';
                }

                btns.forEach((btn, i) => {
                    btn.className = i === index
                        ? 'slide-btn active w-10 h-2.5 bg-emerald-400 rounded-full transition-all duration-500 hover:bg-emerald-300 shadow-lg shadow-emerald-500/30'
                        : 'slide-btn w-2.5 h-2.5 bg-white/40 hover:bg-white/60 rounded-full transition-all duration-500';
                });

                // Fade in
                heroContent.style.opacity = '1';
                heroContent.style.transform = 'translateY(0) scale(1)';

                // Stagger card animation
                cards.forEach((card, i) => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(10px)';
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                        card.style.transition = 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
                    }, 100 + i * 100);
                });

                isTransitioning = false;
            }, 500);
        }

        btns.forEach((btn, i) => {
            btn.addEventListener('click', () => {
                if (current === i) return;
                current = i;
                goTo(current);
            });
        });

        // Auto rotate with smoother timing
        setInterval(() => {
            const next = (current + 1) % slides.length;
            current = next;
            goTo(next);
        }, 6000);

        // Counter animation
        function animateCounters() {
            const counters = document.querySelectorAll('.stat-count');
            counters.forEach(counter => {
                const target = parseInt(counter.getAttribute('data-target'));
                const duration = 2000;
                const step = target / (duration / 16);
                let currentVal = 0;

                const updateCounter = () => {
                    currentVal += step;
                    if (currentVal < target) {
                        counter.textContent = Math.floor(currentVal);
                        requestAnimationFrame(updateCounter);
                    } else {
                        counter.textContent = target;
                    }
                };

                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            updateCounter();
                            observer.unobserve(entry.target);
                        }
                    });
                }, { threshold: 0.5 });

                observer.observe(counter);
            });
        }

        animateCounters();
    });
    </script>

    <!-- Wave Divider -->
    <div class="relative -mt-1">
        <svg viewBox="0 0 1440 100" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto">
            <path d="M0 50C240 100 480 0 720 50C960 100 1200 0 1440 50V100H0V50Z" fill="white" opacity="0.04"/>
            <path d="M0 60C320 20 640 80 960 40C1280 0 1360 60 1440 40V100H0V60Z" fill="white" opacity="0.03"/>
        </svg>
    </div>

    @php
        $categoryIcons = [
            'home' => 'home',
            'baby-food' => 'baby',
            'beauty-personal-care' => 'spa',
            'frozen-foods' => 'snowflake',
            'food-groceries' => 'shopping-basket',
            'health-wellness' => 'heartbeat',
            'body-bathing-accessories' => 'bath',
            'skin-care' => 'hand-sparkles',
            'oral-care' => 'tooth',
            'hair-care' => 'cut',
            'frozen-meat' => 'drumstick-bite',
            'fish-seafood' => 'fish',
            'frozen-vegetables' => 'carrot',
            'fruits' => 'apple-alt',
            'produce-vegetables' => 'seedling',
            'daily-milk' => 'cheese',
            'breakfast-cereals' => 'bread-slice',
            'drinks-beverages' => 'wine-bottle',
            'snacks' => 'cookie-bite',
            'pantry' => 'archive',
            'vitamins-dietary-supplements' => 'flask',
        ];
    @endphp

    <!-- New Arrivals Section -->
    <section class="py-12 lg:py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-end justify-between mb-8 lg:mb-10">
                <div>
                    <span class="inline-flex items-center gap-2 text-emerald-600 font-semibold text-sm tracking-wide uppercase">
                        <span class="w-8 h-0.5 bg-emerald-500"></span>
                        Latest Products
                    </span>
                    <h2 class="text-2xl lg:text-4xl font-bold text-gray-900 mt-2">New Arrivals</h2>
                </div>
                <a href="/products/index" class="hidden sm:inline-flex items-center gap-2 text-emerald-600 hover:text-emerald-700 font-semibold transition-colors group">
                    View All
                    <i class="fas fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 lg:gap-6">
                @foreach($newArrivals as $product)
                <div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-500/5 transition-all duration-300 hover:-translate-y-1">
                    <div class="relative aspect-square overflow-hidden bg-gray-50">
                        @if($product->discount_percentage > 0)
                            <span class="absolute top-3 left-3 z-10 bg-gradient-to-r from-red-500 to-rose-500 text-white text-xs font-bold px-3 py-1.5 rounded-lg shadow-lg">-{{ $product->discount_percentage }}%</span>
                        @endif
                        @if($product->images->first())
                            <img src="{{ asset('storage/' . $product->images->first()->path) }}" 
                                 alt="{{ $product->name }}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-300 text-4xl">
                                <i class="fas fa-image"></i>
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                        <div class="absolute top-2 lg:top-3 right-2 lg:right-3 flex flex-col gap-1.5 lg:gap-2 lg:opacity-0 lg:group-hover:opacity-100 lg:transition-all lg:duration-300 lg:translate-x-2 lg:group-hover:translate-x-0">
                            <a href="/products/{{$product->id}}" class="w-7 h-7 lg:w-9 lg:h-9 bg-white rounded-lg lg:rounded-xl shadow-lg flex items-center justify-center text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 transition-all">
                                <i class="far fa-eye text-[10px] lg:text-sm"></i>
                            </a>
                            <button class="w-7 h-7 lg:w-9 lg:h-9 bg-white rounded-lg lg:rounded-xl shadow-lg flex items-center justify-center text-gray-600 hover:text-red-500 hover:bg-red-50 transition-all">
                                <i class="far fa-heart text-[10px] lg:text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-3 lg:p-5">
                        <span class="text-[10px] lg:text-xs font-medium text-emerald-600 bg-emerald-50 px-2 lg:px-2.5 py-0.5 lg:py-1 rounded-full">{{ $product->category->name }}</span>
                        <h3 class="text-xs lg:text-base font-semibold text-gray-800 mt-1.5 lg:mt-2.5 leading-snug line-clamp-2">{{ $product->name }}</h3>
                        <div class="flex items-center gap-1 lg:gap-1.5 mt-1 lg:mt-2">
                            <div class="flex text-yellow-400 text-[10px] lg:text-xs">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star{{ $i <= ($product->rating ?? 0) ? '' : '-o text-gray-300' }}"></i>
                                @endfor
                            </div>
                            <span class="text-xs text-gray-400">({{ $product->reviews_count }})</span>
                        </div>
                        <div class="flex items-center gap-1.5 lg:gap-2 mt-2 lg:mt-3">
                            <span class="text-sm lg:text-lg font-bold text-gray-900">${{ number_format($product->price, 2) }}</span>
                            @if($product->stock_quantity > 0)
                                <span class="text-[10px] lg:text-xs text-gray-400">· {{ $product->stock_quantity }} left</span>
                            @endif
                        </div>
                        <form action="{{ route('cart.add', $product) }}" method="POST" class="mt-3 lg:mt-4">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="w-full flex items-center justify-center gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs sm:text-sm font-semibold py-2.5 sm:py-3 rounded-xl transition-all hover:shadow-lg hover:shadow-emerald-500/25 {{ $product->stock_quantity === 0 ? 'opacity-50 cursor-not-allowed' : '' }}" {{ $product->stock_quantity === 0 ? 'disabled' : '' }}>
                                <i class="fas fa-shopping-cart"></i>
                                <span class="hidden sm:inline">{{ $product->stock_quantity === 0 ? 'Out of Stock' : 'Add to Cart' }}</span>
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>

            <div class="text-center mt-8 sm:hidden">
                <a href="/products/index" class="inline-flex items-center gap-2 text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">
                    View All Products
                    <i class="fas fa-arrow-right text-sm"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Categories Section -->
    <section class="py-12 lg:py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-10 lg:mb-12">
                <span class="inline-flex items-center gap-2 text-emerald-600 font-semibold text-sm tracking-wide uppercase">
                    <span class="w-8 h-0.5 bg-emerald-500"></span>
                    Browse Categories
                </span>
                <h2 class="text-2xl lg:text-4xl font-bold text-gray-900 mt-2">Shop by Category</h2>
                <p class="text-gray-500 mt-2 max-w-lg mx-auto text-sm lg:text-base">Find everything you need from our wide selection of categories</p>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-3 lg:gap-5">
                @foreach($categor as $category)
                <a href="/category/{{ $category->slug }}" class="group relative bg-white rounded-xl lg:rounded-2xl p-4 lg:p-6 text-center border border-gray-100 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-500/5 transition-all duration-300 hover:-translate-y-1">
                    <div class="w-12 h-12 lg:w-16 lg:h-16 mx-auto rounded-xl lg:rounded-2xl bg-gradient-to-br from-emerald-50 to-emerald-100 flex items-center justify-center group-hover:from-emerald-500 group-hover:to-emerald-600 transition-all duration-300 mb-3 lg:mb-4">
                        <i class="fas fa-{{ $categoryIcons[$category->slug] ?? 'tag' }} text-lg lg:text-2xl text-emerald-500 group-hover:text-white transition-colors duration-300"></i>
                    </div>
                    <h5 class="text-xs lg:text-sm font-semibold text-gray-800 group-hover:text-emerald-600 transition-colors">{{ $category->name }}</h5>
                    <span class="text-[10px] lg:text-xs text-gray-400 mt-0.5 lg:mt-1 block">{{ $category->products_count ?? $category->subcategories_count ?? 0 }} items</span>
                </a>
                @endforeach
            </div>

            <div class="text-center mt-8 lg:mt-10">
                <a href="{{ route('categories.index') }}" class="inline-flex items-center gap-2 bg-white border-2 border-emerald-600 text-emerald-600 hover:bg-emerald-600 hover:text-white font-semibold px-6 lg:px-8 py-3 lg:py-3.5 rounded-xl text-sm lg:text-base transition-all">
                    View All Categories
                    <i class="fas fa-arrow-right text-sm"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- Featured Products -->
    <section class="py-12 lg:py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-10 lg:mb-12">
                <span class="inline-flex items-center gap-2 text-emerald-600 font-semibold text-sm tracking-wide uppercase">
                    <span class="w-8 h-0.5 bg-emerald-500"></span>
                    Carefully Selected
                </span>
                <h2 class="text-2xl lg:text-4xl font-bold text-gray-900 mt-2">Featured Products</h2>
                <p class="text-gray-500 mt-2 max-w-lg mx-auto text-sm lg:text-base">Discover our handpicked selection of premium African products</p>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-5 lg:gap-6">
                @foreach($featuredProducts as $product)
                <div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-500/5 transition-all duration-300 hover:-translate-y-1">
                    <div class="relative aspect-square overflow-hidden bg-gray-50">
                        @if($product->discount_percentage > 0)
                            <span class="absolute top-3 left-3 z-10 bg-gradient-to-r from-red-500 to-rose-500 text-white text-xs font-bold px-3 py-1.5 rounded-lg shadow-lg">-{{ $product->discount_percentage }}%</span>
                        @endif
                        @if($product->images->first())
                            <img src="{{ asset('storage/' . $product->images->first()->path) }}" 
                                 alt="{{ $product->name }}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-300 text-4xl">
                                <i class="fas fa-image"></i>
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 lg:group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                            <div class="flex gap-1.5 lg:gap-2 lg:translate-y-4 lg:group-hover:translate-y-0 transition-transform duration-300">
                                <a href="/products/{{$product->id}}" class="w-8 h-8 lg:w-10 lg:h-10 bg-white rounded-lg lg:rounded-xl shadow-lg flex items-center justify-center text-gray-600 hover:text-emerald-600 transition-all">
                                    <i class="far fa-eye text-[10px] lg:text-sm"></i>
                                </a>
                                <form action="{{ route('cart.add', $product) }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                                    <input type="hidden" name="quantity" value="1">
                                    <button type="submit" class="w-8 h-8 lg:w-10 lg:h-10 bg-white rounded-lg lg:rounded-xl shadow-lg flex items-center justify-center text-gray-600 hover:text-emerald-600 hover:bg-emerald-50 transition-all">
                                        <i class="fas fa-shopping-cart text-[10px] lg:text-sm"></i>
                                    </button>
                                </form>
                                <button class="w-8 h-8 lg:w-10 lg:h-10 bg-white rounded-lg lg:rounded-xl shadow-lg flex items-center justify-center text-gray-600 hover:text-red-500 hover:bg-red-50 transition-all">
                                    <i class="far fa-heart text-[10px] lg:text-sm"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="p-3 lg:p-5">
                        <span class="text-[10px] lg:text-xs font-medium text-emerald-600 bg-emerald-50 px-2 lg:px-2.5 py-0.5 lg:py-1 rounded-full">{{ $product->category->name }}</span>
                        <h3 class="text-xs lg:text-base font-semibold text-gray-800 mt-1.5 lg:mt-2.5 leading-snug line-clamp-2">{{ $product->name }}</h3>
                        <div class="flex items-center justify-between mt-2 lg:mt-3">
                            <span class="text-sm lg:text-lg font-bold text-gray-900">${{ number_format($product->price, 2) }}</span>
                            @if($product->stock_quantity > 0)
                                <span class="text-[10px] lg:text-xs text-emerald-600 bg-emerald-50 px-1.5 lg:px-2 py-0.5 lg:py-1 rounded-full font-medium">In Stock</span>
                            @else
                                <span class="text-[10px] lg:text-xs text-red-500 bg-red-50 px-1.5 lg:px-2 py-0.5 lg:py-1 rounded-full font-medium">Out of Stock</span>
                            @endif
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Best Sellers -->
    <section class="py-12 lg:py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-end justify-between mb-8 lg:mb-10">
                <div>
                    <span class="inline-flex items-center gap-2 text-emerald-600 font-semibold text-sm tracking-wide uppercase">
                        <span class="w-8 h-0.5 bg-emerald-500"></span>
                        Most Popular
                    </span>
                    <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2">Best Sellers</h2>
                </div>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-4 gap-5 lg:gap-6">
                @foreach($bestSellers as $product)
                <div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-emerald-200 hover:shadow-xl hover:shadow-emerald-500/5 transition-all duration-300 hover:-translate-y-1">
                    <div class="relative aspect-square overflow-hidden bg-gray-50">
                        <span class="absolute top-3 left-3 z-10 bg-gradient-to-r from-amber-400 to-orange-500 text-white text-xs font-bold px-3 py-1.5 rounded-lg shadow-lg flex items-center gap-1">
                            <i class="fas fa-crown text-[10px]"></i>
                            Best Seller
                        </span>
                        @if($product->images->first())
                            <img src="{{ asset('storage/' . $product->images->first()->path) }}" 
                                 alt="{{ $product->name }}" 
                                 class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        @else
                            <div class="w-full h-full flex items-center justify-center text-gray-300 text-4xl">
                                <i class="fas fa-image"></i>
                            </div>
                        @endif
                        <div class="absolute top-2 lg:top-3 right-2 lg:right-3 flex flex-col gap-1.5 lg:gap-2">
                            <button class="w-7 h-7 lg:w-9 lg:h-9 bg-white rounded-lg lg:rounded-xl shadow-lg flex items-center justify-center text-gray-600 hover:text-red-500 hover:bg-red-50 transition-all">
                                <i class="far fa-heart text-[10px] lg:text-sm"></i>
                            </button>
                        </div>
                    </div>
                    <div class="p-3 lg:p-5">
                        <span class="text-[10px] lg:text-xs font-medium text-amber-600 bg-amber-50 px-2 lg:px-2.5 py-0.5 lg:py-1 rounded-full">{{ $product->category->name }}</span>
                        <h3 class="text-xs lg:text-base font-semibold text-gray-800 mt-1.5 lg:mt-2.5 leading-snug line-clamp-2">{{ $product->name }}</h3>
                        <div class="flex items-center gap-1 lg:gap-1.5 mt-1 lg:mt-2">
                            <div class="flex text-yellow-400 text-[10px] lg:text-xs">
                                @for($i = 1; $i <= 5; $i++)
                                    <i class="fas fa-star{{ $i <= ($product->rating ?? 0) ? '' : '-o text-gray-300' }}"></i>
                                @endfor
                            </div>
                            <span class="text-[10px] lg:text-xs text-gray-400">({{ $product->reviews_count }})</span>
                        </div>
                        <div class="flex items-center gap-1.5 lg:gap-2 mt-2 lg:mt-3">
                            <span class="text-sm lg:text-lg font-bold text-gray-900">${{ number_format($product->price, 2) }}</span>
                            @if($product->sale_price)
                                <span class="text-[10px] lg:text-sm text-gray-400 line-through">${{ number_format($product->sale_price, 2) }}</span>
                            @endif
                        </div>
                        <form action="{{ route('cart.add', $product) }}" method="POST" class="mt-3 lg:mt-4">
                            @csrf
                            <input type="hidden" name="product_id" value="{{ $product->id }}">
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="w-full flex items-center justify-center gap-1.5 bg-emerald-600 hover:bg-emerald-700 text-white text-xs sm:text-sm font-semibold py-2.5 sm:py-3 rounded-xl transition-all hover:shadow-lg hover:shadow-emerald-500/25 {{ $product->stock_quantity === 0 ? 'opacity-50 cursor-not-allowed' : '' }}" {{ $product->stock_quantity === 0 ? 'disabled' : '' }}>
                                <i class="fas fa-shopping-cart"></i>
                                <span class="hidden sm:inline">{{ $product->stock_quantity === 0 ? 'Out of Stock' : 'Add to Cart' }}</span>
                            </button>
                        </form>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Special Offers Banner -->
    <section class="py-12 lg:py-20">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="relative overflow-hidden rounded-2xl lg:rounded-3xl bg-gradient-to-br from-emerald-700 via-emerald-600 to-emerald-500 p-6 lg:p-14">
                <div class="absolute inset-0 opacity-20 bg-[radial-gradient(ellipse_at_top_left,_var(--tw-gradient-stops))] from-yellow-300 via-transparent to-transparent"></div>
                <div class="absolute -top-20 -right-20 w-64 h-64 bg-yellow-400/20 rounded-full blur-3xl"></div>
                <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-emerald-300/20 rounded-full blur-3xl"></div>
                
                <div class="relative grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                    <div class="space-y-5 lg:space-y-6 text-center lg:text-left">
                        <span class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm text-white text-xs lg:text-sm font-semibold px-3 lg:px-4 py-1.5 lg:py-2 rounded-full">
                            <i class="fas fa-tag"></i>
                            {{ $specialOffer['discount'] }}% OFF — Limited Time
                        </span>
                        <h2 class="text-2xl lg:text-5xl font-extrabold text-white leading-tight">{{ $specialOffer['title'] }}</h2>
                        <p class="text-emerald-100 text-sm lg:text-lg max-w-md mx-auto lg:mx-0">{{ $specialOffer['description'] }}</p>
                        <div class="flex flex-wrap gap-3 lg:gap-4 justify-center lg:justify-start">
                            <a href="{{ $specialOffer['link'] }}" class="inline-flex items-center gap-2 bg-white text-emerald-700 hover:bg-emerald-50 px-6 lg:px-8 py-3 lg:py-4 rounded-xl font-bold text-sm lg:text-base transition-all hover:shadow-xl">
                                Shop Now
                                <i class="fas fa-arrow-right text-sm"></i>
                            </a>
                            <a href="/categories" class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 text-white border border-white/30 px-6 lg:px-8 py-3 lg:py-4 rounded-xl font-semibold text-sm lg:text-base backdrop-blur-sm transition-all">
                                Browse Categories
                            </a>
                        </div>
                        <div class="flex items-center gap-6 lg:gap-8 pt-3 lg:pt-4 text-white justify-center lg:justify-start">
                            <div class="text-center lg:text-left">
                                <span class="text-lg lg:text-2xl font-bold">{{ $specialOffer['discount'] }}%</span>
                                <span class="block text-emerald-200 text-[10px] lg:text-sm">Discount</span>
                            </div>
                            <div class="w-px h-8 lg:h-12 bg-white/20"></div>
                            <div class="text-center lg:text-left">
                                <span class="text-lg lg:text-2xl font-bold">Free</span>
                                <span class="block text-emerald-200 text-[10px] lg:text-sm">Delivery</span>
                            </div>
                            <div class="w-px h-8 lg:h-12 bg-white/20"></div>
                            <div class="text-center lg:text-left">
                                <span class="text-lg lg:text-2xl font-bold">24h</span>
                                <span class="block text-emerald-200 text-[10px] lg:text-sm">Dispatch</span>
                            </div>
                        </div>
                    </div>
                    <div class="hidden lg:flex justify-center">
                        <div class="relative w-72 h-72">
                            <div class="absolute inset-0 bg-white/10 rounded-full blur-2xl"></div>
                            <div class="relative w-full h-full rounded-2xl overflow-hidden shadow-2xl">
                                @if(Storage::exists($specialOffer['image']))
                                    <img src="{{ asset('storage/' . $specialOffer['image']) }}" alt="Special Offers" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full bg-white/10 flex items-center justify-center">
                                        <i class="fas fa-gift text-6xl text-white/40"></i>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Blog Section -->
    <section class="py-12 lg:py-20 bg-gray-50">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-end justify-between mb-8 lg:mb-10">
                <div>
                    <span class="inline-flex items-center gap-2 text-emerald-600 font-semibold text-sm tracking-wide uppercase">
                        <span class="w-8 h-0.5 bg-emerald-500"></span>
                        Our Blog
                    </span>
                    <h2 class="text-3xl lg:text-4xl font-bold text-gray-900 mt-2">Latest Blog Posts</h2>
                </div>
                <a href="{{ route('blog.index') }}" class="hidden sm:inline-flex items-center gap-2 text-emerald-600 hover:text-emerald-700 font-semibold transition-colors group">
                    View All
                    <i class="fas fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
                @forelse($blogPosts as $post)
                <div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-emerald-200 hover:shadow-xl transition-all duration-300 hover:-translate-y-1">
                    <div class="relative h-44 lg:h-52 overflow-hidden">
                        @if($post->image)
                            <img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                        @else
                            <div class="w-full h-full bg-gradient-to-br from-emerald-100 to-emerald-200 flex items-center justify-center">
                                <i class="fas fa-newspaper text-4xl text-emerald-300"></i>
                            </div>
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                        <div class="absolute top-4 left-4">
                            <span class="bg-emerald-500 text-white text-xs font-semibold px-3 py-1.5 rounded-full">{{ $post->category->name ?? 'Uncategorized' }}</span>
                        </div>
                        <div class="absolute bottom-4 left-4 right-4">
                            <span class="text-white/80 text-sm flex items-center gap-1.5">
                                <i class="far fa-calendar-alt text-xs"></i>
                                {{ $post->created_at->format('M d, Y') }}
                            </span>
                        </div>
                    </div>
                    <div class="p-4 lg:p-7">
                        <h4 class="text-sm lg:text-lg font-bold text-gray-900 leading-snug group-hover:text-emerald-600 transition-colors line-clamp-2">{{ $post->title }}</h4>
                        <p class="text-gray-500 text-xs lg:text-sm mt-2 lg:mt-3 leading-relaxed line-clamp-3">{{ Str::limit($post->excerpt, 100) }}</p>
                        <a href="{{ route('blog.show', $post) }}" class="inline-flex items-center gap-2 text-emerald-600 font-semibold text-xs lg:text-sm mt-3 lg:mt-5 hover:text-emerald-700 transition-colors group/link">
                            Read More
                            <i class="fas fa-arrow-right text-xs group-hover/link:translate-x-1 transition-transform"></i>
                        </a>
                    </div>
                </div>
                @empty
                <div class="col-span-full text-center py-16">
                    <i class="fas fa-newspaper text-5xl text-gray-300 mb-4"></i>
                    <p class="text-gray-500 text-lg">No blog posts available at the moment.</p>
                </div>
                @endforelse
            </div>

            <div class="text-center mt-10 sm:hidden">
                <a href="{{ route('blog.index') }}" class="inline-flex items-center gap-2 text-emerald-600 font-semibold hover:text-emerald-700 transition-colors">
                    View All Posts
                    <i class="fas fa-arrow-right text-sm"></i>
                </a>
            </div>
        </div>
    </section>

@endsection

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('submit', function(e) {
        const form = e.target;
        const action = form.getAttribute('action') || '';
        if (!action.includes('/cart/add/')) return;

        e.preventDefault();
        const submitBtn = form.querySelector('button[type="submit"]');
        if (!submitBtn || submitBtn.disabled) return;
        submitBtn.disabled = true;

        fetch(action, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Accept': 'application/json'
            },
            body: new FormData(form)
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.querySelectorAll('[data-cart-count]').forEach(el => el.textContent = data.cartCount);
                showToast(data.message || 'Added to cart!');
            } else {
                showToast(data.message || 'Failed to add item', 'error');
            }
        })
        .catch(() => showToast('Failed to add item', 'error'))
        .finally(() => { submitBtn.disabled = false; });
    });

    function showToast(message, type) {
        const bg = type === 'error' ? '#ef4444' : '#10b981';
        const toast = document.createElement('div');
        toast.style.cssText = `position:fixed;top:20px;right:20px;background:${bg};color:white;padding:14px 22px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.15);z-index:99999;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;min-width:260px;transform:translateX(120%);transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275)`;
        toast.innerHTML = `<i class="fas fa-${type === 'error' ? 'exclamation-circle' : 'check-circle'}" style="font-size:18px"></i><span style="flex:1">${message}</span><button onclick="this.parentElement.remove()" style="background:0;border:none;color:white;cursor:pointer;font-size:18px;padding:0;line-height:1;opacity:.7">×</button>`;
        document.body.appendChild(toast);
        requestAnimationFrame(() => toast.style.transform = 'translateX(0)');
        setTimeout(() => { toast.style.transform = 'translateX(120%)'; setTimeout(() => toast.remove(), 400); }, 3000);
    }
});
</script>
@section('styles')

<style>
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    33% { transform: translateY(-8px) rotate(1deg); }
    66% { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.hero-image-wrapper {
    position: relative;
}

.hero-image {
    transition: transform 10s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-card {
    animation: float 4s ease-in-out infinite;
}

.hero-card:nth-child(2) {
    animation-delay: 0.5s;
}

.hero-badge-text {
    background: linear-gradient(90deg, #a7f3d0, #fde68a, #a7f3d0);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s ease-in-out infinite;
}

.hero-title-line {
    opacity: 0;
    animation: heroFadeIn 0.6s ease forwards;
}

.hero-title-line:nth-child(1) { animation-delay: 0.1s; }
.hero-title-line:nth-child(2) { animation-delay: 0.3s; }
.hero-title-line:nth-child(3) { animation-delay: 0.5s; }

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .hero-section {
        min-height: auto;
    }
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px);
}

.blog-card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}



.hero-section .slide-btn.active {
    width: 2rem;
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
</style>
@endsection
