<x-shop-layout title="ফ্রেশ ফিশ অনলাইন বাংলাদেশ">
    <!-- Hero Section / Banner Slider -->
    @if($banners->isNotEmpty())
        <section class="relative overflow-hidden">
            <div class="banner-slider">
                @foreach($banners as $banner)
                    <div class="banner-slide" style="background: linear-gradient(135deg, {{ $banner->background_color }} 0%, {{ adjustColor($banner->background_color, -20) }} 100%);">
                        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                                <div class="text-white">
                                    <h1 class="text-4xl lg:text-6xl font-bold mb-4">
                                        {{ $banner->title }}
                                        @if($banner->subtitle)
                                            <br><span class="text-yellow-300">{{ $banner->subtitle }}</span>
                                        @endif
                                    </h1>
                                    @if($banner->description)
                                        <p class="text-xl mb-8 opacity-90">{{ $banner->description }}</p>
                                    @endif
                                    @if($banner->button_text && $banner->button_link)
                                        <div class="flex flex-col sm:flex-row gap-4">
                                            <a href="{{ $banner->button_link }}" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-lg font-semibold hover:bg-yellow-300 transition-colors text-center">
                                                {{ $banner->button_text }}
                                            </a>
                                        </div>
                                    @endif
                                </div>
                                @if($banner->image)
                                    <div class="relative">
                                        <img src="{{ storage_url($banner->image) }}" alt="{{ $banner->title }}" class="w-full h-auto rounded-2xl shadow-2xl">
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Slider Controls (if more than 1 banner) -->
            @if($banners->count() > 1)
                <button class="banner-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 backdrop-blur-sm text-white p-3 rounded-full transition-all z-10">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                </button>
                <button class="banner-next absolute right-4 top-1/2 -translate-y-1/2 bg-white/30 hover:bg-white/50 backdrop-blur-sm text-white p-3 rounded-full transition-all z-10">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </button>

                <!-- Dots -->
                <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-2 z-10">
                    @foreach($banners as $index => $banner)
                        <button class="banner-dot w-3 h-3 rounded-full bg-white/50 hover:bg-white transition-all" data-index="{{ $index }}"></button>
                    @endforeach
                </div>
            @endif
        </section>
    @endif

    <!-- Daily Live Sale / Flash Deal Section -->
    @if($liveSale && $liveSale->liveSaleProducts->count() > 0)
        @php
            $saleEnd = $liveSale->date->isToday() ? now()->endOfDay()->timestamp * 1000 : null;
        @endphp
        <section class="bg-gradient-to-br from-red-600 via-rose-600 to-red-700 text-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
                <!-- Header with countdown -->
                <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 mb-6">
                    <div>
                        <div class="inline-flex items-center gap-2 bg-white/20 px-3 py-1 rounded-full text-xs font-semibold mb-2">
                            <span class="animate-pulse">🔴</span> লাইভ সেল
                        </div>
                        <h2 class="text-2xl md:text-4xl font-extrabold leading-tight">{{ $liveSale->title }}</h2>
                        @if($liveSale->sub_title)
                            <p class="text-white/85 mt-1 text-sm md:text-base">{{ $liveSale->sub_title }}</p>
                        @endif
                    </div>

                    @if($saleEnd)
                        <div class="bg-black/25 rounded-xl px-4 py-3 text-center backdrop-blur-sm">
                            <div class="text-[11px] uppercase tracking-wide text-white/70 mb-1">শেষ হচ্ছে</div>
                            <div id="live-sale-countdown" data-end="{{ $saleEnd }}" class="font-mono text-xl md:text-2xl font-bold tabular-nums">
                                00h 00m 00s
                            </div>
                        </div>
                    @endif
                </div>

                <!-- Product Grid: 2-col mobile, 4-col desktop -->
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
                    @foreach($liveSale->liveSaleProducts as $lsp)
                        @php $product = $lsp->product; @endphp
                        @if($product)
                            <div class="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
                                <div class="relative aspect-square">
                                    @if($product->images && count($product->images) > 0)
                                        <img src="{{ storage_url($product->images[0]) }}" alt="{{ $product->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                    @else
                                        <div class="w-full h-full bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
                                            <span class="text-4xl">🐟</span>
                                        </div>
                                    @endif
                                    
                                    <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
                                        <button onclick="openQuickView({{ $product->id }}); return false;" 
                                                class="bg-white text-gray-900 px-3 py-2 rounded-lg font-semibold hover:bg-gray-100 transition-colors text-xs shadow-lg">
                                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7"></path>
                                            </svg>
                                            দ্রুত দেখুন
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="p-3">
                                    <p class="text-xs text-gray-500 mb-1">{{ $product->category->name ?? 'ক্যাটাগরি' }}</p>
                                    <h3 class="font-semibold text-gray-900 text-sm mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors leading-tight">
                                        {{ $product->name }}
                                    </h3>
                                    
                                    <div class="mb-3">
                                        <div class="flex items-baseline gap-2">
                                            <span class="text-lg font-bold text-blue-600">৳{{ number_format($lsp->effective_price, 0) }}</span>
                                        </div>
                                        @if($product->original_price && $product->original_price > $lsp->effective_price)
                                            <div class="text-xs text-gray-400 line-through">
                                                ৳{{ number_format($product->original_price, 0) }}
                                            </div>
                                        @endif
                                    </div>

                                    <button onclick="openQuickView({{ $product->id }}); return false;" 
                                            class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors text-xs font-semibold flex items-center justify-center">
                                        <span class="flex items-center justify-center gap-1">
                                            <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="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>
                                            কার্টে যোগ করুন
                                        </span>
                                    </button>
                                </div>
                            </div>
                        @endif
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <!-- Categories Section -->
    @if($featuredCategories->count() > 0)
    <section id="categories" class="py-8 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-5">
                <h2 class="text-xl font-bold text-gray-900">ক্যাটাগরি অনুযায়ী কিনুন</h2>
                <a href="{{ route('shop.products') }}" class="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm">
                    সব দেখুন
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>

            <div class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-3">
                @foreach($featuredCategories as $category)
                    <a href="{{ route('shop.products', ['category' => $category->slug]) }}" class="group">
                        <div class="bg-white rounded-xl p-3 hover:shadow-md transition-all duration-300 hover:-translate-y-0.5 border border-gray-100">
                            <div class="aspect-square mb-2 rounded-lg overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">
                                @if($category->image)
                                    <img src="{{ storage_url($category->image) }}" 
                                         alt="{{ $category->name }}" 
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                @else
                                    <div class="w-full h-full flex items-center justify-center">
                                        <span class="text-3xl">🐟</span>
                                    </div>
                                @endif
                            </div>
                            <div class="text-center">
                                <h3 class="font-medium text-gray-900 text-xs leading-tight group-hover:text-blue-600 transition-colors">{{ $category->name }}</h3>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Featured Products -->
    <section class="py-12 bg-gradient-to-br from-gray-50 to-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">বাছাই করা পণ্য</h2>
                    <p class="text-sm text-gray-600 mt-1">সেরা দামে প্রিমিয়াম মান</p>
                </div>
                <a href="{{ route('shop.products') }}" class="hidden md:inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm">
                    সব দেখুন
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>

            <div id="featured-products-grid" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
                @include('shop.partials.featured-product-grid', ['products' => $featuredProducts])
            </div>

            <div class="text-center mt-8">
                <button id="load-more-featured-btn" 
                        data-offset="10"
                        class="inline-flex items-center gap-2 bg-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors shadow-lg shadow-blue-600/30">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                    আরও পণ্য লোড করুন
                </button>
                <div id="featured-loading-spinner" class="hidden">
                    <div class="inline-flex items-center gap-2 text-gray-600">
                        <div class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
                        <span>লোড হচ্ছে...</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    

    <!-- Features Section -->
    <section class="py-8 bg-gray-50 border-y border-gray-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <!-- Competitive Price -->
                <div class="flex items-center gap-3 group">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-gray-900">ন্যায্য দাম</h3>
                        <p class="text-xs text-gray-600">প্রতিদিন সেরা দাম</p>
                    </div>
                </div>

                <!-- Authentic Products -->
                <div class="flex items-center gap-3 group">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-gray-900">১০০% প্রাকৃতিক উৎস</h3>
                        <p class="text-xs text-gray-600">নদী, হাওর ও বিল থেকে সরাসরি সংগৃহীত</p>
                    </div>
                </div>

                <!-- Easy Payment -->
                <div class="flex items-center gap-3 group">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-gray-900">ক্যাশ অন ডেলিভারি</h3>
                        <p class="text-xs text-gray-600">টাটকা তাজা মাছ আপনার দ্বারে পৌঁছে যাবে কোন অগ্রিম পেমেন্ট ছাড়াই</p>
                    </div>
                </div>

                <!-- Fast Delivery -->
                <div class="flex items-center gap-3 group">
                    <div class="flex-shrink-0">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-md">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-sm font-bold text-gray-900">সহজ রিটার্ন পলিসি</h3>
                        <p class="text-xs text-gray-600">মাছের মান নিয়ে অসন্তুষ্ট? আমরা দিচ্ছি কোনো ঝামেলা ছাড়াই দ্রুত পরিবর্তনের নিশ্চয়তা।</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ Section -->
    @if($faqs->count() > 0)
    <section id="faq" class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-10">
                <h2 class="text-2xl md:text-3xl font-bold text-gray-900 mb-3">সাধারণ জিজ্ঞাসা</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">আমাদের গ্রাহকদের প্রধান কিছু প্রশ্নের উত্তর এখানে দেওয়া হলো</p>
            </div>

            <div class="max-w-3xl mx-auto space-y-3">
                @foreach($faqs as $index => $faq)
                    <details class="group bg-gray-50 rounded-xl border border-gray-100 overflow-hidden" {{ $index === 0 ? 'open' : '' }}>
                        <summary class="flex items-center justify-between cursor-pointer px-6 py-4 text-gray-900 font-semibold select-none hover:bg-gray-100 transition-colors">
                            <span class="pr-4">{{ $faq->question }}</span>
                            <svg class="w-5 h-5 text-gray-400 transition-transform group-open:rotate-180 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                            </svg>
                        </summary>
                        <div class="px-6 pb-4 text-gray-600 text-sm leading-relaxed">
                            {!! nl2br(e($faq->answer)) !!}
                        </div>
                    </details>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Latest from Blog -->
    @if($featuredBlogs->count() > 0)
    <section class="py-12 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h2 class="text-2xl font-bold text-gray-900">সাম্প্রতিক নিবন্ধ</h2>
                    <p class="text-sm text-gray-600 mt-1">আমাদের বিশেষজ্ঞদের টিপস, রেসিপি এবং পরামর্শ</p>
                </div>
                <a href="{{ route('blogs.index') }}" class="hidden md:inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm">
                    সব দেখুন
                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                @foreach($featuredBlogs as $blog)
                    <article class="bg-white rounded-xl border border-gray-100 overflow-hidden hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group">
                        <div class="relative aspect-video overflow-hidden">
                            @if($blog->featured_image)
                                <img src="{{ storage_url($blog->featured_image) }}" 
                                     alt="{{ $blog->title }}" 
                                     class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                                    <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
                                    </svg>
                                </div>
                            @endif
                            
                            @if($blog->category)
                                <div class="absolute top-3 left-3">
                                    <span class="bg-blue-600 text-white px-2.5 py-1 rounded-lg text-xs font-semibold shadow-md">
                                        {{ $blog->category->name }}
                                    </span>
                                </div>
                            @endif

                            @if($blog->facebook_video_url || $blog->youtube_video_url)
                                <div class="absolute top-3 right-3 flex gap-1">
                                    @if($blog->facebook_video_url)
                                        <span class="bg-blue-600 text-white p-1.5 rounded-full shadow-md">
                                            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                            </svg>
                                        </span>
                                    @endif
                                    @if($blog->youtube_video_url)
                                        <span class="bg-red-600 text-white p-1.5 rounded-full shadow-md">
                                            <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/>
                                            </svg>
                                        </span>
                                    @endif
                                </div>
                            @endif
                        </div>

                        <div class="p-4">
                            <div class="flex items-center text-xs text-gray-500 mb-2">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <time>{{ $blog->created_at->format('d/m/Y') }}</time>
                                <span class="mx-2">•</span>
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                                </svg>
                                <span>{{ $blog->views }}</span>
                            </div>
                            
                            <h3 class="font-bold text-gray-900 text-base mb-2 line-clamp-2 group-hover:text-blue-600 transition-colors leading-snug">
                                <a href="{{ route('blogs.show', $blog) }}">
                                    {{ $blog->title }}
                                </a>
                            </h3>
                            
                            <p class="text-gray-600 text-sm mb-3 line-clamp-2 leading-relaxed">
                                {{ Str::limit(strip_tags($blog->content), 100) }}
                            </p>
                            
                            <a href="{{ route('blogs.show', $blog) }}" 
                               class="inline-flex items-center text-blue-600 hover:text-blue-700 font-semibold text-sm group">
                                নিবন্ধ পড়ুন
                                <svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="text-center mt-8">
                <a href="{{ route('blogs.index') }}" 
                   class="inline-flex items-center bg-blue-600 text-white px-6 py-2.5 rounded-lg font-semibold hover:bg-blue-700 transition-colors text-sm shadow-lg shadow-blue-600/30">
                    ভিউ আর্টিকেল দেখুন
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </section>
    @endif

    <!-- Add to Cart Script -->
    <script>
        function getQuickViewSelectedVariantIndex() {
            return window.currentQuickViewSelectedVariant && window.currentQuickViewSelectedVariant.index !== undefined
                ? window.currentQuickViewSelectedVariant.index
                : null;
        }

        function addToCart(productId, quantity = 1) {
            const selectedServices = [];
            document.querySelectorAll('.quick-view-service-checkbox:checked, .service-checkbox:checked').forEach(cb => {
                selectedServices.push({
                    id: parseInt(cb.dataset.serviceId),
                    name: cb.value,
                    resolved_price: parseFloat(cb.dataset.resolvedPrice),
                    billing_type: cb.dataset.billingType,
                });
            });

            const body = {
                product_id: productId,
                quantity: quantity,
                variant_index: getQuickViewSelectedVariantIndex()
            };
            if (selectedServices.length > 0) {
                body.services = selectedServices;
            }

            fetch('{{ route("cart.add") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(body)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById('cart-count').textContent = data.cartCount;
                    showToast('পণ্য কার্টে যোগ করা হয়েছে!', 'success');
                    showStickyCartBar();
                } else {
                    showToast(data.message || 'পণ্য কার্টে যোগ করা যায়নি', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('কার্টে যোগ করার সময় একটি সমস্যা হয়েছে', 'error');
            });
        }

        function addToCartFromQuickView() {
            const productId = window.currentQuickViewProductId;
            const quantity = parseInt(document.getElementById('quick-view-quantity').value) || 1;
            addToCart(productId, quantity);
        }

        // Toast function is now globally available via toast-notification component
    </script>

    <!-- Live Sale Quick Order Modal -->
    <div id="live-sale-modal" class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
        <div class="relative top-24 mx-auto p-5 border max-w-md shadow-2xl rounded-xl bg-white">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-900">দ্রুত অর্ডার</h3>
                <button type="button" onclick="closeLiveSaleModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>

            <div class="flex items-center gap-4 mb-4">
                <img id="ls-modal-image" src="" alt="" class="w-20 h-20 object-cover rounded-lg bg-gray-100">
                <div>
                    <h4 id="ls-modal-name" class="font-semibold text-gray-900 leading-snug"></h4>
                    <p id="ls-modal-price" class="text-red-600 font-bold mt-1"></p>
                </div>
            </div>

            <div class="mb-5">
                <label class="text-sm font-medium text-gray-700">পরিমাণ:</label>
                <div class="flex items-center border border-gray-300 rounded-md w-32 mt-1">
                    <button type="button" onclick="lsChangeQty(-1)" class="px-3 py-2 text-gray-600 hover:bg-gray-100">−</button>
                    <input type="number" id="ls-modal-qty" value="1" min="1" max="10" class="w-full px-2 py-2 text-center border-0 focus:ring-0">
                    <button type="button" onclick="lsChangeQty(1)" class="px-3 py-2 text-gray-600 hover:bg-gray-100">+</button>
                </div>
            </div>

            <div class="flex gap-3">
                <button type="button" onclick="lsConfirm()" id="ls-modal-confirm"
                    class="flex-1 bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-semibold transition-colors">
                    কার্টে যোগ করুন
                </button>
                <button type="button" onclick="closeLiveSaleModal()"
                    class="px-5 py-3 border border-gray-300 rounded-lg font-semibold hover:bg-gray-50">
                    বাতিল
                </button>
            </div>
        </div>
    </div>

    <script>
        let lsCurrentProductId = null;
        let lsCurrentPrice = null;

        function openLiveSaleModal(productId, name, image, displayPrice, effectivePrice) {
            lsCurrentProductId = productId;
            lsCurrentPrice = effectivePrice;

            document.getElementById('ls-modal-name').textContent = name;
            document.getElementById('ls-modal-price').textContent = displayPrice;

            const img = document.getElementById('ls-modal-image');
            if (image) {
                img.src = image.startsWith('http') ? image : '/storage/' + image;
                img.style.display = 'block';
            } else {
                img.style.display = 'none';
            }

            document.getElementById('ls-modal-qty').value = 1;
            document.getElementById('live-sale-modal').classList.remove('hidden');
        }

        function closeLiveSaleModal() {
            document.getElementById('live-sale-modal').classList.add('hidden');
        }

        function lsChangeQty(delta) {
            const input = document.getElementById('ls-modal-qty');
            let val = parseInt(input.value) + delta;
            if (val < 1) val = 1;
            if (val > 10) val = 10;
            input.value = val;
        }

        function lsConfirm() {
            if (!lsCurrentProductId) return;
            const qty = parseInt(document.getElementById('ls-modal-qty').value) || 1;
            const confirmBtn = document.getElementById('ls-modal-confirm');
            confirmBtn.disabled = true;

            addToCart(lsCurrentProductId, qty, lsCurrentPrice);
            closeLiveSaleModal();
            confirmBtn.disabled = false;
        }

        // Close modal on outside click
        document.getElementById('live-sale-modal').addEventListener('click', function (e) {
            if (e.target === this) closeLiveSaleModal();
        });
    </script>

    <!-- Banner Slider Script -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const slides = document.querySelectorAll('.banner-slide');
        const dots = document.querySelectorAll('.banner-dot');
        const prevBtn = document.querySelector('.banner-prev');
        const nextBtn = document.querySelector('.banner-next');
        
        if (slides.length === 0) return;
        
        let currentSlide = 0;
        let autoSlideInterval;
        
        function showSlide(index) {
            slides.forEach((slide) => {
                slide.classList.remove('active');
            });
            slides[index].classList.add('active');
            dots.forEach((dot, i) => {
                dot.classList.toggle('bg-white', i === index);
                dot.classList.toggle('bg-white/50', i !== index);
            });
        }
        
        function nextSlide() {
            currentSlide = (currentSlide + 1) % slides.length;
            showSlide(currentSlide);
        }
        
        function prevSlide() {
            currentSlide = (currentSlide - 1 + slides.length) % slides.length;
            showSlide(currentSlide);
        }
        
        function startAutoSlide() {
            autoSlideInterval = setInterval(nextSlide, 5000);
        }
        
        function stopAutoSlide() {
            clearInterval(autoSlideInterval);
        }
        
        if (nextBtn) {
            nextBtn.addEventListener('click', () => {
                stopAutoSlide();
                nextSlide();
                startAutoSlide();
            });
        }
        
        if (prevBtn) {
            prevBtn.addEventListener('click', () => {
                stopAutoSlide();
                prevSlide();
                startAutoSlide();
            });
        }
        
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                stopAutoSlide();
                currentSlide = index;
                showSlide(currentSlide);
                startAutoSlide();
            });
        });
        
        showSlide(0);
        
        if (slides.length > 1) {
            startAutoSlide();
            const slider = document.querySelector('.banner-slider');
            if (slider) {
                slider.addEventListener('mouseenter', stopAutoSlide);
                slider.addEventListener('mouseleave', startAutoSlide);
            }
        }
    });

    // Load More Featured Products
    document.addEventListener('DOMContentLoaded', function() {
        const loadMoreBtn = document.getElementById('load-more-featured-btn');
        const loadingSpinner = document.getElementById('featured-loading-spinner');
        const productsGrid = document.getElementById('featured-products-grid');

        if (loadMoreBtn) {
            loadMoreBtn.addEventListener('click', function() {
                const offset = this.getAttribute('data-offset');

                // Show loading
                loadMoreBtn.style.display = 'none';
                loadingSpinner.classList.remove('hidden');

                // Fetch more products
                fetch(`{{ route('shop.featured.load') }}?offset=${offset}`, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    // Append new products
                    productsGrid.insertAdjacentHTML('beforeend', data.html);

                    // Update button state
                    if (data.hasMore) {
                        loadMoreBtn.setAttribute('data-offset', data.nextOffset);
                        loadMoreBtn.style.display = 'inline-flex';
                    } else {
                        loadMoreBtn.remove();
                    }
                    
                    loadingSpinner.classList.add('hidden');
                })
                .catch(error => {
                    console.error('Error loading more products:', error);
                    loadMoreBtn.style.display = 'inline-flex';
                    loadingSpinner.classList.add('hidden');
                    alert('আরও পণ্য লোড করা যায়নি। অনুগ্রহ করে আবার চেষ্টা করুন।');
                });
            });
        }
    });

    // Quick View Functions
    window.openQuickView = function(productId) {
        const modal = document.getElementById('product-quick-view-modal');
        if (!modal) {
            window.location.href = `/product/${productId}`;
            return;
        }
        
        modal.classList.remove('hidden');
        
        const loading = document.getElementById('quick-view-loading');
        const content = document.getElementById('quick-view-content');
        if (loading) loading.classList.remove('hidden');
        if (content) content.classList.add('hidden');
        
        window.currentQuickViewProductId = productId;
        
        fetch(`/api/products/${productId}`)
            .then(response => {
                if (!response.ok) throw new Error('Failed to load product');
                return response.json();
            })
            .then(product => {
                populateQuickViewModal(product);
                if (loading) loading.classList.add('hidden');
                if (content) content.classList.remove('hidden');
            })
            .catch(error => {
                console.error('Error:', error);
                window.location.href = `/product/${productId}`;
            });
    };
    
    window.closeQuickView = function() {
        const modal = document.getElementById('product-quick-view-modal');
        if (modal) modal.classList.add('hidden');
    };
    
        function populateQuickViewModal(product) {
            window.currentQuickViewProduct = product;
            window.currentQuickViewSelectedVariant = product.selected_variant || (product.variants && product.variants[0]) || null;

            document.getElementById('quick-view-name').textContent = product.name;
            document.getElementById('quick-view-category').textContent = product.category?.name || '';
            document.getElementById('quick-view-description').innerHTML = product.short_description || 'কোন বিবরণ নেই';
            
            const mainImage = document.getElementById('quick-view-main-image');
            const imagePlaceholder = document.getElementById('quick-view-image-placeholder');
            
            if (product.images && product.images.length > 0) {
                const imageUrl = product.images[0].startsWith('http') ? product.images[0] : '/storage/' + product.images[0];
                mainImage.src = imageUrl;
                mainImage.alt = product.name;
                mainImage.style.display = 'block';
                if (imagePlaceholder) imagePlaceholder.style.display = 'none';
                
                mainImage.onerror = function() {
                    this.style.display = 'none';
                    if (imagePlaceholder) imagePlaceholder.style.display = 'flex';
                };
            } else {
                mainImage.style.display = 'none';
                if (imagePlaceholder) imagePlaceholder.style.display = 'flex';
            }

            document.getElementById('quick-view-full-details').href = `/product/${product.slug}`;

            renderQuickViewVariants(product.variants || []);
            updateQuickViewPricing();

            const servicesContainer = document.getElementById('quick-view-services');
            if (servicesContainer) {
                if (product.available_services && product.available_services.length > 0) {
                    servicesContainer.innerHTML = '<label class="text-sm font-semibold text-gray-700 block mb-2">অতিরিক্ত পরিসেবা</label>' +
                        product.available_services.map(s => `
                            <label class="flex items-center justify-between p-2 rounded-lg border border-gray-100 hover:bg-gray-50 cursor-pointer mb-1">
                                <div class="flex items-center space-x-2">
                                    <input type="checkbox" class="quick-view-service-checkbox w-4 h-4 text-blue-600 rounded border-gray-300" 
                                           value="${s.name}"
                                           data-service-id="${s.id}" 
                                           data-resolved-price="${s.resolved_price}"
                                           data-billing-type="${s.billing_type}">
                                    <span class="text-sm text-gray-700">${s.name}</span>
                                </div>
                                <span class="text-sm font-bold text-blue-600">৳${Number(s.resolved_price).toLocaleString()}</span>
                            </label>
                        `).join('');
                    servicesContainer.classList.remove('hidden');
                } else {
                    servicesContainer.classList.add('hidden');
                }
            }
        }

        function renderQuickViewVariants(variants) {
            const selector = document.getElementById('quick-view-variant-selector');
            const pills = document.getElementById('quick-view-variant-pills');

            if (!selector || !pills) {
                return;
            }

            if (!variants || variants.length === 0) {
                selector.classList.add('hidden');
                return;
            }

            selector.classList.remove('hidden');
            pills.innerHTML = variants.map(variant => `
                <button type="button"
                        class="quick-view-variant-pill px-3 py-1.5 rounded-full text-xs font-medium border transition-all duration-200"
                        data-index="${variant.index}"
                        onclick="selectQuickViewVariant(${variant.index})">
                    ${variant.label}
                </button>
            `).join('');

            updateQuickViewVariantButtons();
        }

        function selectQuickViewVariant(index) {
            const variants = window.currentQuickViewProduct?.variants || [];
            const variant = variants[index];
            if (!variant) {
                return;
            }

            window.currentQuickViewSelectedVariant = variant;
            updateQuickViewVariantButtons();
            updateQuickViewPricing();
        }

        function updateQuickViewVariantButtons() {
            const selectedIndex = getQuickViewSelectedVariantIndex();
            document.querySelectorAll('.quick-view-variant-pill').forEach(button => {
                const isActive = parseInt(button.dataset.index) === selectedIndex;
                button.classList.toggle('bg-blue-600', isActive);
                button.classList.toggle('text-white', isActive);
                button.classList.toggle('border-blue-600', isActive);
                button.classList.toggle('bg-white', !isActive);
                button.classList.toggle('text-gray-700', !isActive);
                button.classList.toggle('border-gray-300', !isActive);
            });
        }

        function updateQuickViewPricing() {
            const variant = window.currentQuickViewSelectedVariant || window.currentQuickViewProduct?.selected_variant || null;
            const priceEl = document.getElementById('quick-view-price');
            const baseRateEl = document.getElementById('quick-view-base-rate');
            const unit = variant?.unit || window.currentQuickViewProduct?.unit || 'kg';
            const finalPrice = variant?.final_price ?? window.currentQuickViewProduct?.price ?? 0;
            const baseRate = variant?.base_unit_price ?? finalPrice;

            if (priceEl) {
                priceEl.textContent = `৳${Number(finalPrice).toLocaleString()}`;
            }

            if (baseRateEl) {
                baseRateEl.textContent = `৳${Number(baseRate).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} / ${unit}`;
            }
        }
    </script>

    <!-- Quick View Modal -->
    <div id="product-quick-view-modal" class="fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
        <div class="relative top-10 mx-auto p-5 border max-w-3xl shadow-2xl rounded-xl bg-white">
            <div class="flex items-center justify-between mb-4">
                        <h3 class="text-xl font-bold text-gray-900">দ্রুত দেখুন</h3>
                <button onclick="closeQuickView()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
            
            <div id="quick-view-loading" class="text-center py-8">
                <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                <p class="mt-2 text-gray-600">লোড হচ্ছে...</p>
            </div>
            
            <div id="quick-view-content" class="hidden">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="relative">
                        <div class="w-full h-80 rounded-lg overflow-hidden bg-gray-100">
                            <img id="quick-view-main-image" src="" alt="" class="w-full h-full object-cover">
                            <div id="quick-view-image-placeholder" class="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200" style="display: none;">
                                <span class="text-6xl">🐟</span>
                            </div>
                        </div>
                    </div>
                    
                    <div>
                        <h2 id="quick-view-name" class="text-2xl font-bold text-gray-900 mb-2"></h2>
                        <p id="quick-view-category" class="text-blue-600 font-medium mb-4"></p>
                        
                        <div class="flex items-center gap-4 mb-2">
                            <span id="quick-view-price" class="text-2xl font-bold text-blue-600"></span>
                        </div>
                        <p id="quick-view-base-rate" class="text-xs text-gray-500"></p>

                        <div id="quick-view-variant-selector" class="hidden space-y-2">
                            <h4 class="font-semibold text-gray-900 text-sm">পণ্যের ধরন</h4>
                            <div id="quick-view-variant-pills" class="flex flex-wrap gap-2"></div>
                        </div>
                        
                        <div class="mb-4">
                            <h4 class="font-semibold mb-2">সংক্ষিপ্ত বিবরণ</h4>
                            <div id="quick-view-description" class="text-gray-600 text-sm"></div>
                        </div>
                        
                        <div class="flex items-center gap-4 mb-4">
                            <label class="text-sm font-medium">পরিমাণ:</label>
                            <div class="flex items-center border rounded-md">
                                <button onclick="document.getElementById('quick-view-quantity').value = Math.max(1, parseInt(document.getElementById('quick-view-quantity').value) - 1)" class="px-3 py-1">−</button>
                                <input type="number" id="quick-view-quantity" value="1" min="1" class="w-16 px-2 py-1 text-center border-0">
                                <button onclick="document.getElementById('quick-view-quantity').value = parseInt(document.getElementById('quick-view-quantity').value) + 1" class="px-3 py-1">+</button>
                            </div>
                        </div>

                        <div id="quick-view-services" class="mb-4 hidden"></div>
                        
                        <div class="flex gap-3">
                            <button id="quick-view-add-to-cart" 
                                    onclick="addToCartFromQuickView(); closeQuickView();"
                                    class="flex-1 bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700">
                                কার্টে যোগ করুন
                            </button>
                            <a id="quick-view-full-details" href="#" class="px-6 py-3 border rounded-lg font-semibold hover:bg-gray-50">
                                বিস্তারিত
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!-- Live Sale Countdown Timer -->
    <script>
        // --- Live Sale Countdown Timer ---
        (function () {
            const el = document.getElementById('live-sale-countdown');
            if (!el) return;
            const end = parseInt(el.getAttribute('data-end'), 10);
            if (!end) return;

            function pad(n) { return String(n).padStart(2, '0'); }

            function tick() {
                const diff = end - Date.now();
                if (diff <= 0) {
                    el.textContent = 'সেল শেষ';
                    clearInterval(timer);
                    return;
                }
                const totalSec = Math.floor(diff / 1000);
                const h = Math.floor(totalSec / 3600);
                const m = Math.floor((totalSec % 3600) / 60);
                const s = totalSec % 60;
                el.textContent = pad(h) + 'h ' + pad(m) + 'm ' + pad(s) + 's';
            }

            tick();
            const timer = setInterval(tick, 1000);
        })();
    </script>
</x-shop-layout>