@extends('layouts.app')

@section('content')
<div class="bg-white font-sans text-[#333] pb-20 md:pb-0">

    {{-- Hero Banner --}}
    <div class="w-full">
        <img src="https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?q=80&w=2070&auto=format&fit=crop" class="w-full h-[200px] md:h-[400px] object-cover" alt="Hero Banner">
    </div>

    {{-- Shop by Category --}}
    @if($categories->count() > 0)
    <div class="max-w-6xl mx-auto px-3 py-8">
        <h2 class="text-xl md:text-3xl font-extrabold text-center mb-6">
            <span class="text-black">Shop by</span> <span class="text-[#2f9eb8]">Category</span>
        </h2>
        @php
            $categoryEmojis = [
                '🎨', // Arts
                '✂️', // Crafts
                '🧸', // Toys
                '📚', // Educational
                '🎒', // School
                '📝', // Paper Items
                '🎁', // Gifts
                '🍼', // Baby Toys
                '🧩', // Puzzle
                '🎲', // Games
            ];
        @endphp
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6">
            @foreach($categories->unique('name')->take(8) as $category)
            <a href="{{ route('category.show', $category->slug) }}" class="flex flex-col items-center group">
                <div class="w-full aspect-square rounded-2xl overflow-hidden bg-[#f4f4f4] mb-2 relative p-4 flex items-center justify-center group-hover:bg-[#eef8fa] transition-colors">
                    @if(!empty($category->image))
                        <img src="{{ $category->image_url }}" class="w-full h-full object-cover mix-blend-multiply group-hover:scale-105 transition-transform duration-500 rounded-lg" alt="{{ $category->name }}">
                    @else
                        <span class="text-4xl md:text-5xl group-hover:scale-110 transition-transform duration-500">{{ $categoryEmojis[$loop->index % count($categoryEmojis)] }}</span>
                    @endif
                </div>
                <span class="text-[13px] md:text-[15px] font-bold text-black text-center">{{ $category->name }}</span>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Reusable Product Card Macro-like structure --}}
    @php
    $renderProductCard = function($product) {
        $price = number_format($product->price, 0);
        $comparePrice = $product->compare_price ? number_format($product->compare_price, 0) : null;
        $route = route('product.show', $product->slug);
        $cartRoute = route('cart.add');
        $img = !empty($product->thumbnail) ? $product->thumbnail_url : 'https://images.unsplash.com/photo-1558066110-bf9b8b0e71ce?q=80&w=400&auto=format&fit=crop';
        $name = $product->name;
        $id = $product->id;
        $isOutOfStock = $product->stock_quantity <= 0;
        // Wishlist heart
        $wishlistIcon = "<button class='absolute top-2 right-2 w-7 h-7 flex items-center justify-center bg-white rounded-full shadow-sm text-gray-300 hover:text-red-500 z-10'>
                            <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' d='M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z'></path></svg>
                         </button>";

        // Rating stars
        $stars = "<div class='flex items-center gap-1 mb-1'>
                    <div class='flex text-yellow-400 text-[10px]'>
                        <svg class='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'></path></svg>
                        <svg class='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'></path></svg>
                        <svg class='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'></path></svg>
                        <svg class='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'></path></svg>
                        <svg class='w-3 h-3' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z'></path></svg>
                    </div>
                    <span class='text-[10px] text-gray-400'>(0.0)</span>
                  </div>";

        return "
        <div class='flex flex-col relative w-full group'>
            <a href='{$route}' class='block relative aspect-square mb-2 overflow-hidden bg-[#f8f8f8] rounded-xl p-3'>
                {$wishlistIcon}
                <img src='{$img}' onerror=\"this.onerror=null; this.src='https://images.unsplash.com/photo-1558066110-bf9b8b0e71ce?q=80&w=400&auto=format&fit=crop';\" class='w-full h-full object-contain mix-blend-multiply group-hover:scale-105 transition-transform duration-500' alt='{$name}'>
            </a>
            <div class='flex flex-col flex-grow px-1'>
                <a href='{$route}' class='text-[13px] font-medium text-[#222] hover:text-[#2f9eb8] line-clamp-2 leading-snug h-[38px] mb-1'>{$name}</a>
                {$stars}
                <div class='mt-auto mb-2 flex items-baseline gap-1.5'>
                    <span class='text-[14px] font-bold text-black'>৳{$price}</span>
                    " . ($comparePrice ? "<span class='text-[11px] text-gray-400 line-through'>৳{$comparePrice}</span>" : "") . "
                </div>
                
                <div class='flex items-center gap-2 mt-1'>
                    <form action='{$cartRoute}' method='POST' class='flex-1'>
                        " . csrf_field() . "
                        <input type='hidden' name='product_id' value='{$id}'>
                        <input type='hidden' name='quantity' value='1'>
                        <input type='hidden' name='checkout' value='1'>
                        <button type='submit' class='w-full py-1.5 rounded-md bg-[#2f9eb8] text-white text-[11px] md:text-[12px] font-semibold transition-colors hover:bg-[#257d91]' " . ($isOutOfStock ? 'disabled' : '') . ">
                            Order Now
                        </button>
                    </form>
                    <form action='{$cartRoute}' method='POST' class='flex-1'>
                        " . csrf_field() . "
                        <input type='hidden' name='product_id' value='{$id}'>
                        <input type='hidden' name='quantity' value='1'>
                        <button type='submit' class='w-full py-1.5 flex items-center justify-center gap-1 rounded-md border border-[#2f9eb8] text-[#2f9eb8] hover:bg-[#2f9eb8] hover:text-white transition-colors text-[11px] md:text-[12px] font-semibold' " . ($isOutOfStock ? 'disabled' : '') . ">
                            <svg class='w-3.5 h-3.5 hidden sm:block' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z'></path></svg>
                            Add to Cart
                        </button>
                    </form>
                </div>
            </div>
        </div>
        ";
    };
    @endphp

    {{-- Our Featured Products --}}
    @if($featuredProducts->count() > 0)
    <div class="max-w-6xl mx-auto px-3 py-6">
        <h2 class="text-xl md:text-3xl font-extrabold text-center mb-6">
            <span class="text-black">Our Featured</span> <span class="text-[#2f9eb8]">Products</span>
        </h2>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-6">
            @foreach($featuredProducts->take(8) as $product)
                {!! $renderProductCard($product) !!}
            @endforeach
        </div>
        <div class="text-center mt-8">
            <a href="{{ route('shop') }}" class="inline-block bg-[#2f9eb8] text-white px-8 py-2.5 rounded-full text-sm font-semibold hover:bg-[#257d91] transition-colors">
                View All Products
            </a>
        </div>
    </div>
    @endif

    {{-- Section: Arts Supplies --}}
    @if($newArrivals->count() > 0)
    <div class="max-w-6xl mx-auto px-3 py-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg md:text-xl font-bold text-black">Arts Supplies</h2>
            <a href="{{ route('shop') }}" class="text-[12px] text-[#2f9eb8] bg-[#eef8fa] px-3 py-1 rounded-full font-semibold">View All ></a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-6">
            @foreach($newArrivals->take(4) as $product)
                {!! $renderProductCard($product) !!}
            @endforeach
        </div>
    </div>
    @endif

    {{-- Section: Craft Supplies --}}
    @if($trendingProducts->count() > 0)
    <div class="max-w-6xl mx-auto px-3 py-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg md:text-xl font-bold text-black">Craft Supplies</h2>
            <a href="{{ route('shop') }}" class="text-[12px] text-[#2f9eb8] bg-[#eef8fa] px-3 py-1 rounded-full font-semibold">View All ></a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-6">
            @foreach($trendingProducts->take(4) as $product)
                {!! $renderProductCard($product) !!}
            @endforeach
        </div>
    </div>
    @endif

    {{-- Section: Toys & Games --}}
    @if($bestsellers->count() > 0)
    <div class="max-w-6xl mx-auto px-3 py-6">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg md:text-xl font-bold text-black">Toys & Games</h2>
            <a href="{{ route('shop') }}" class="text-[12px] text-[#2f9eb8] bg-[#eef8fa] px-3 py-1 rounded-full font-semibold">View All ></a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-6">
            @foreach($bestsellers->take(4) as $product)
                {!! $renderProductCard($product) !!}
            @endforeach
        </div>
    </div>
    @endif

    {{-- Section: Gifts --}}
    @if($featuredProducts->count() > 4)
    <div class="max-w-6xl mx-auto px-3 py-6 mb-8">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg md:text-xl font-bold text-black">Gifts</h2>
            <a href="{{ route('shop') }}" class="text-[12px] text-[#2f9eb8] bg-[#eef8fa] px-3 py-1 rounded-full font-semibold">View All ></a>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-6">
            @foreach($featuredProducts->skip(4)->take(4) as $product)
                {!! $renderProductCard($product) !!}
            @endforeach
        </div>
    </div>
    @endif

</div>
@endsection