@extends('layouts.master')

@section('title', 'The Mini Port - Global B2B Marketplace')

@section('content')
@push('styles')
    <link href="{{ asset('css/home.css') }}" rel="stylesheet">
@endpush
<!-- Hero Section -->
<!-- Hero Section -->
    <!-- Hero Section -->
    <section class="tw-relative tw-py-4 lg:tw-py-6 tw-overflow-hidden tw-bg-gray-50">
        <div class="container-fluid tw-px-4 lg:tw-px-8">
            <div class="row g-3 lg:g-4 align-items-stretch">
                <!-- Left: Categories Menu (Desktop Only) -->
                <div class="col-lg-2 d-none d-lg-flex flex-column">
                    <div class="card border-0 shadow-sm w-100 flex-fill tw-rounded-xl tw-overflow-hidden">
                        <div class="card-header tw-bg-orange-600 tw-text-white tw-py-3">
                            <h6 class="mb-0 tw-font-bold"><i class="bi bi-list me-2"></i> Categories</h6>
                        </div>
                        <div class="list-group list-group-flush tw-overflow-y-auto" style="height: 0; flex: 1 1 auto;">
                            @foreach(($categories ?? collect())->take(10) as $category)
                                <a href="{{ route('public.categories.show', $category->slug) }}" class="list-group-item list-group-item-action tw-py-2.5 tw-px-4 tw-text-sm tw-text-gray-700 hover:tw-text-orange-600 hover:tw-bg-blue-50 tw-border-b-gray-100 tw-transition-colors">
                                    <div class="d-flex align-items-center justify-content-between">
                                        <span>{{ $category->name }}</span>
                                        <i class="bi bi-chevron-right tw-text-xs tw-text-gray-400"></i>
                                    </div>
                                </a>
                            @endforeach
                            <a href="{{ route('public.categories.index') }}" class="list-group-item list-group-item-action tw-py-2.5 tw-px-4 tw-text-sm tw-font-bold tw-text-orange-600 tw-text-center hover:tw-bg-blue-50">
                                View All Categories
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Center: Slider (Responsive Height) -->
                <div class="col-12 col-lg-6">
                    <div id="heroCarousel" class="carousel slide shadow-md tw-rounded-xl tw-overflow-hidden h-100" data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            @if(isset($banners['home_top']))
                                @foreach($banners['home_top'] as $key => $banner)
                                    <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="{{ $key }}" class="{{ $key == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide {{ $key + 1 }}"></button>
                                @endforeach
                            @endif
                        </div>
                        <div class="carousel-inner h-100">
                            @if(isset($banners['home_top']) && $banners['home_top']->count() > 0)
                                @foreach($banners['home_top'] as $key => $banner)
                                    <div class="carousel-item h-100 {{ $key == 0 ? 'active' : '' }}">
                                        <div class="tw-relative h-100">
                                            <!-- Mobile Image -->
                                            <img src="{{ asset('storage/' . $banner->image) }}" class="d-block w-100 hero-slider-img d-lg-none" alt="Banner">
                                            <!-- Desktop Image -->
                                            <img src="{{ asset('storage/' . $banner->image) }}" class="d-none d-lg-block hero-slider-img" alt="Banner">
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="carousel-item active h-100">
                                    <img src="https://placehold.co/1200x400?text=Your+Ad+Space" class="d-block w-100 h-100 object-fit-cover" alt="Ad Space">
                                </div>
                            @endif
                        </div>
                        
                        <!-- Fixed Text Overlay (Shows on all slides) -->
                        <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-black/50 tw-via-black/10 tw-to-transparent tw-pointer-events-none" style="z-index: 5;"></div>
                        <div class="tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-flex tw-flex-col tw-items-center tw-text-center tw-p-4 sm:tw-p-6 lg:tw-p-8 tw-pointer-events-none" style="z-index: 10;">
                            <h1 class="tw-text-white tw-font-extrabold tw-text-xl sm:tw-text-2xl lg:tw-text-4xl tw-mb-2 sm:tw-mb-3 tw-drop-shadow-lg" style="font-family: 'Georgia', serif; text-shadow: 2px 2px 6px rgba(0,0,0,0.7);">
                                Grow Big.
                            </h1>
                            <p class="tw-text-white tw-font-semibold tw-text-sm sm:tw-text-base lg:tw-text-xl tw-mb-3 sm:tw-mb-4 tw-leading-tight tw-drop-shadow-md" style="text-shadow: 1px 1px 4px rgba(0,0,0,0.6);">
                                Right Place for Mini, Small & Medium Businesses
                            </p>
                            <p class="tw-text-yellow-400 tw-font-bold tw-text-xs sm:tw-text-sm lg:tw-text-lg tw-tracking-wide tw-drop-shadow-lg" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.8);">
                                Low MOQ (10-150) <span class="tw-text-orange-500 tw-mx-2">•</span> No Commission <span class="tw-text-orange-500 tw-mx-2">•</span> Buyer Seller Contact Bridge
                            </p>
                        </div>
                        
                        <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>

                <!-- Right: Promotional Banners (Stacked on Mobile) -->
                <div class="col-12 col-lg-4 d-flex flex-column gap-3 lg:gap-4">
                    <!-- Banner 1: Post Requirement (Buyer) - Dynamic from Admin or Fallback -->
                    @if(isset($banners['home_top_right_1']) && $banners['home_top_right_1']->count() > 0)
                        @php $banner1 = $banners['home_top_right_1']->first(); @endphp
                        <div class="tw-relative tw-rounded-xl tw-overflow-hidden tw-shadow-md group hero-side-banner-container">
                            <a href="{{ $banner1->link ?? route('post.requirement.index') }}" class="tw-block tw-w-full tw-h-full">
                                <img src="{{ asset('storage/' . $banner1->image) }}" alt="Banner" class="tw-w-full tw-h-full tw-object-cover">
                            </a>
                        </div>
                    @else
                        <div class="tw-relative tw-rounded-xl tw-overflow-hidden tw-shadow-md group hero-side-banner-container">
                            <!-- Background Image with Overlay -->
                            <div class="tw-absolute tw-inset-0">
                                <img src="{{ asset('images/buy-requirement.png') }}" alt="" class="tw-w-full tw-h-full tw-object-cover">
                                <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-r tw-from-black/20 tw-to-transparent"></div>
                            </div>
                            <a href="{{ route('post.requirement.index') }}" class="tw-absolute tw-inset-0 tw-flex tw-flex-col tw-justify-center tw-px-6 tw-no-underline hover:tw-no-underline tw-z-10">
                                <h3 class="tw-text-white tw-font-bold tw-text-xl lg:tw-text-2xl tw-mb-2 tw-drop-shadow-md">Post Buy Requirement</h3>
                                <p class="tw-text-gray-400 tw-text-sm tw-mb-3 tw-drop-shadow-sm">Get quotes from KYC submitted suppliers</p>
                                <span class="tw-inline-block tw-w-fit tw-bg-orange-600 tw-text-white tw-px-4 tw-py-2 tw-rounded-full tw-text-sm tw-font-bold group-hover:tw-bg-orange-700 tw-transition-colors tw-shadow-md">
                                    Post Now <i class="bi bi-arrow-right ms-1"></i>
                                </span>
                            </a>
                            <!-- Decorative Circle -->
                            <div class="tw-absolute -tw-right-10 -tw-bottom-10 tw-w-32 tw-h-32 tw-bg-white/10 tw-rounded-full tw-blur-2xl"></div>
                        </div>
                    @endif

                    <!-- Banner 2: Seller Registration - Dynamic from Admin or Fallback -->
                    @if(isset($banners['home_top_right_2']) && $banners['home_top_right_2']->count() > 0)
                        @php $banner2 = $banners['home_top_right_2']->first(); @endphp
                        <div class="tw-relative tw-rounded-xl tw-overflow-hidden tw-shadow-md group hero-side-banner-container">
                            <a href="{{ $banner2->link ?? route('register.seller') }}" class="tw-block tw-w-full tw-h-full">
                                <img src="{{ asset('storage/' . $banner2->image) }}" alt="Banner" class="tw-w-full tw-h-full tw-object-cover">
                            </a>
                        </div>
                    @else
                        <div class="tw-relative tw-rounded-xl tw-overflow-hidden tw-shadow-md group hero-side-banner-container">
                            <!-- Background Image with Overlay -->
                            <div class="tw-absolute tw-inset-0">
                                <img src="{{ asset('images/port-background.png') }}" alt="" class="tw-w-full tw-h-full tw-object-cover">
                                <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-r tw-from-orange-600/20 tw-to-transparent"></div>
                            </div>
                            <a href="{{ route('register.seller') }}" class="tw-absolute tw-inset-0 tw-flex tw-flex-col tw-justify-center tw-px-6 tw-no-underline hover:tw-no-underline tw-z-10">
                                <h3 class="tw-text-white tw-font-bold tw-text-xl lg:tw-text-2xl tw-mb-2 tw-drop-shadow-md">Sell on MiniPort</h3>
                                <p class="tw-text-orange-100 tw-text-sm tw-mb-3 tw-drop-shadow-sm">Expand your business globally</p>
                                <span class="tw-inline-block tw-w-fit tw-bg-white tw-text-orange-600 tw-px-4 tw-py-2 tw-rounded-full tw-text-sm tw-font-bold group-hover:tw-bg-gray-100 tw-transition-colors tw-shadow-md">
                                    Register Free <i class="bi bi-arrow-right ms-1"></i>
                                </span>
                            </a>
                            <!-- Decorative Circle -->
                            <div class="tw-absolute -tw-right-10 -tw-top-10 tw-w-32 tw-h-32 tw-bg-white/20 tw-rounded-full tw-blur-2xl"></div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Quick RFQ Form -->
    <section class="tw-bg-white tw-py-8 tw-border-b tw-border-gray-100">
        <div class="container">
            <div class="tw-bg-orange-50 tw-rounded-xl tw-p-6 lg:tw-p-8 tw-shadow-sm tw-border tw-border-orange-100">
                 <div class="row align-items-center">
                     <div class="col-lg-4 mb-4 mb-lg-0">
                         <h3 class="tw-text-xl lg:tw-text-2xl tw-font-bold tw-text-gray-800 tw-mb-2">Tell us what you need!</h3>
                         <p class="tw-text-gray-500 tw-mb-0 tw-text-sm">We'll send your request to KYC submitted suppliers instantly.</p>
                     </div>
                     <div class="col-lg-8">
                         <form action="{{ route('post.requirement.store') }}" method="POST" class="row g-2">
                             @csrf
                             <div class="col-md-4">
                                 <input type="text" name="product_name" class="form-control form-control-lg tw-text-sm tw-border-gray-200 focus:tw-border-orange-500 focus:tw-ring-orange-500" placeholder="Product Name (e.g. Cotton Shirt)" required>
                             </div>
                             <div class="col-md-3">
                                 <input type="tel" name="mobile" class="form-control form-control-lg tw-text-sm tw-border-gray-200 focus:tw-border-orange-500 focus:tw-ring-orange-500" placeholder="Mobile Number" required>
                             </div>
                             <div class="col-md-3">
                                 <input type="text" name="delivery_location" class="form-control form-control-lg tw-text-sm tw-border-gray-200 focus:tw-border-orange-500 focus:tw-ring-orange-500" placeholder="City / Location" required>
                             </div>
                             <div class="col-md-2">
                                 <button type="submit" class="btn btn-primary btn-lg w-100 tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 tw-text-sm tw-font-bold">Post Now</button>
                             </div>
                         </form>
                     </div>
                 </div>
            </div>
        </div>
    </section>

<!-- Stats Strip -->
<section class="tw-py-8 lg:tw-py-16 tw-bg-white tw-relative tw-overflow-hidden">
    <!-- Background Decor -->
    <div class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-gray-50/50 tw-skew-y-3 tw-transform tw-origin-top-left -tw-z-10"></div>

    <div class="container">
        <div class="row g-3 lg:g-4">
            <!-- Stat 1: Products -->
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm hover:tw-shadow-lg tw-transition-all tw-transform hover:-tw-translate-y-2 tw-bg-white tw-rounded-xl tw-overflow-hidden h-100">
                    <div class="card-body text-center tw-p-3 lg:tw-p-6">
                        <div class="tw-w-10 tw-h-10 lg:tw-w-16 lg:tw-h-16 tw-mx-auto tw-bg-orange-50 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-2 lg:tw-mb-4 tw-text-lg lg:tw-text-2xl tw-text-orange-600">
                            <i class="bi bi-box-seam"></i>
                        </div>
                        <h3 class="fw-bold tw-text-gray-800 mb-1 tw-text-lg lg:tw-text-3xl counter-value" data-target="{{ (int)filter_var(\App\Models\Setting::getValue('home_stat_products_count', '10000'), FILTER_SANITIZE_NUMBER_INT) }}">
                            {{ \App\Models\Setting::getValue('home_stat_products_count', '10,000+') }}
                        </h3>
                        <p class="tw-text-gray-500 tw-font-medium tw-text-xs lg:tw-text-sm mb-0">{{ \App\Models\Setting::getValue('home_stat_products_label', 'Products') }}</p>
                    </div>
                    <div class="tw-h-1 tw-w-full tw-bg-orange-600"></div>
                </div>
            </div>

            <!-- Stat 2: Suppliers -->
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm hover:tw-shadow-lg tw-transition-all tw-transform hover:-tw-translate-y-2 tw-bg-white tw-rounded-xl tw-overflow-hidden h-100">
                    <div class="card-body text-center tw-p-3 lg:tw-p-6">
                        <div class="tw-w-10 tw-h-10 lg:tw-w-16 lg:tw-h-16 tw-mx-auto tw-bg-green-50 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-2 lg:tw-mb-4 tw-text-lg lg:tw-text-2xl tw-text-green-600">
                            <i class="bi bi-patch-check"></i>
                        </div>
                        <h3 class="fw-bold tw-text-gray-800 mb-1 tw-text-lg lg:tw-text-3xl counter-value" data-target="{{ (int)filter_var(\App\Models\Setting::getValue('home_stat_suppliers_count', '500'), FILTER_SANITIZE_NUMBER_INT) }}">
                            {{ \App\Models\Setting::getValue('home_stat_suppliers_count', '500+') }}
                        </h3>
                        <p class="tw-text-gray-500 tw-font-medium tw-text-xs lg:tw-text-sm mb-0">{{ \App\Models\Setting::getValue('home_stat_suppliers_label', 'KYC Submitted Suppliers') }}</p>
                    </div>
                    <div class="tw-h-1 tw-w-full tw-bg-green-500"></div>
                </div>
            </div>

            <!-- Stat 3: Buyers -->
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm hover:tw-shadow-lg tw-transition-all tw-transform hover:-tw-translate-y-2 tw-bg-white tw-rounded-xl tw-overflow-hidden h-100">
                    <div class="card-body text-center tw-p-3 lg:tw-p-6">
                        <div class="tw-w-10 tw-h-10 lg:tw-w-16 lg:tw-h-16 tw-mx-auto tw-bg-purple-50 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-2 lg:tw-mb-4 tw-text-lg lg:tw-text-2xl tw-text-purple-600">
                            <i class="bi bi-people"></i>
                        </div>
                        <h3 class="fw-bold tw-text-gray-800 mb-1 tw-text-lg lg:tw-text-3xl counter-value" data-target="{{ (int)filter_var(\App\Models\Setting::getValue('home_stat_buyers_count', '2000'), FILTER_SANITIZE_NUMBER_INT) }}">
                            {{ \App\Models\Setting::getValue('home_stat_buyers_count', '2,000+') }}
                        </h3>
                        <p class="tw-text-gray-500 tw-font-medium tw-text-xs lg:tw-text-sm mb-0">{{ \App\Models\Setting::getValue('home_stat_buyers_label', 'Active Buyers') }}</p>
                    </div>
                    <div class="tw-h-1 tw-w-full tw-bg-purple-500"></div>
                </div>
            </div>

            <!-- Stat 4: Support -->
            <div class="col-6 col-md-3">
                <div class="card border-0 shadow-sm hover:tw-shadow-lg tw-transition-all tw-transform hover:-tw-translate-y-2 tw-bg-white tw-rounded-xl tw-overflow-hidden h-100">
                    <div class="card-body text-center tw-p-3 lg:tw-p-6">
                        <div class="tw-w-10 tw-h-10 lg:tw-w-16 lg:tw-h-16 tw-mx-auto tw-bg-orange-50 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-mb-2 lg:tw-mb-4 tw-text-lg lg:tw-text-2xl tw-text-orange-600">
                            <i class="bi bi-headset"></i>
                        </div>
                        <h3 class="fw-bold tw-text-gray-800 mb-1 tw-text-lg lg:tw-text-3xl">
                            {{ \App\Models\Setting::getValue('home_stat_support_count', '24/7') }}
                        </h3>
                        <p class="tw-text-gray-500 tw-font-medium tw-text-xs lg:tw-text-sm mb-0">{{ \App\Models\Setting::getValue('home_stat_support_label', 'Support') }}</p>
                    </div>
                    <div class="tw-h-1 tw-w-full tw-bg-orange-500"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Trending Products -->
<!-- Trending Products -->
<!-- Trending Products -->
    <!-- Trending Products -->
    @if(\App\Models\Setting::getValue('home_show_trending', '1') == '1')
    <section class="tw-py-8 lg:tw-py-16 tw-bg-gradient-to-b tw-from-white tw-to-gray-50">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-3 lg:mb-5">
                <div>
                    <h6 class="tw-text-orange-600 tw-font-bold tw-uppercase tw-tracking-wider tw-mb-1 lg:tw-mb-2 tw-text-xs lg:tw-text-base">Curated for You</h6>
                    <h2 class="tw-text-xl lg:tw-text-3xl tw-font-bold tw-text-gray-800">Exclusive Selection</h2>
                </div>
                <a href="{{ route('public.products.index') }}" class="btn btn-outline-primary tw-border-orange-600 tw-text-orange-600 hover:tw-bg-orange-600 hover:tw-text-white btn-sm lg:btn-md tw-rounded-full tw-px-4 lg:tw-px-6 fw-bold hover:tw-bg-orange-600 hover:tw-text-white tw-transition-all">
                    View All <span class="d-none d-md-inline">Products</span> <i class="bi bi-arrow-right ms-1 lg:ms-2"></i>
                </a>
            </div>
            
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3 lg:g-4">
                @foreach($featuredProducts as $product)
                    <div class="col">
                        <div class="card h-100 border-0 tw-bg-white tw-rounded-lg lg:tw-rounded-2xl tw-shadow-sm hover:tw-shadow-2xl tw-transition-all tw-duration-300 tw-group tw-overflow-hidden">
                            <!-- Image Container -->
                            <div class="tw-relative tw-pt-[110%] tw-bg-gray-100 tw-overflow-hidden">
                                <a href="{{ route('public.products.show', $product->slug) }}">
                                    <img src="{{ $product->main_image }}" 
                                         class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-object-cover tw-transition-transform tw-duration-700 group-hover:tw-scale-110" 
                                         alt="{{ $product->name }}" loading="lazy">
                                </a>
                                
                                <!-- Overlay Actions (Desktop Only) -->
                                <div class="d-none d-lg-flex tw-absolute tw-inset-0 tw-bg-black/40 tw-opacity-0 group-hover:tw-opacity-100 tw-transition-all tw-duration-300 tw-flex-col tw-items-center tw-justify-center tw-gap-2 tw-backdrop-blur-[2px]">
                                    <a href="{{ route('public.products.show', $product->slug) }}" class="btn btn-white btn-sm tw-rounded-full tw-px-4 tw-font-bold tw-transform tw-translate-y-4 group-hover:tw-translate-y-0 tw-transition-all tw-duration-300 hover:tw-bg-orange-600 hover:tw-text-white hover:tw-border-primary">
                                        View Details
                                    </a>
                                    <button type="button" class="btn btn-light btn-sm tw-rounded-full tw-w-10 tw-h-10 tw-flex tw-items-center tw-justify-center tw-transform tw-translate-y-4 group-hover:tw-translate-y-0 tw-transition-all tw-duration-300 tw-delay-75 hover:tw-text-red-500 quick-view-btn" data-slug="{{ $product->slug }}">
                                        <i class="bi bi-eye-fill"></i>
                                    </button>
                                </div>

                                <!-- Trending Badge -->
                                <div class="tw-absolute tw-top-2 tw-left-2 lg:tw-top-3 lg:tw-left-3">
                                    <span class="tw-bg-red-500 tw-text-white tw-text-[8px] lg:tw-text-[10px] tw-font-bold tw-px-1.5 lg:tw-px-2 tw-py-0.5 lg:tw-py-1 tw-rounded-full tw-shadow-sm tw-uppercase tw-tracking-wide tw-animate-pulse">
                                        Trending
                                    </span>
                                </div>
                            </div>

                            <!-- Content -->
                            <div class="card-body tw-p-2 lg:tw-p-4">
                                <div class="tw-mb-1 lg:tw-mb-2">
                                    <a href="{{ route('public.categories.show', $product->category->slug ?? '#') }}" class="tw-text-[8px] lg:tw-text-[10px] tw-uppercase tw-tracking-wider tw-text-gray-500 hover:tw-text-orange-600 tw-no-underline tw-font-bold">
                                        {{ $product->category->name ?? 'Uncategorized' }}
                                    </a>
                                </div>
                                <h6 class="card-title tw-text-xs lg:tw-text-sm tw-font-bold tw-mb-1 lg:tw-mb-2 tw-text-gray-800 tw-line-clamp-2 group-hover:tw-text-orange-600 tw-transition-colors" title="{{ $product->name }}">
                                    <a href="{{ route('public.products.show', $product->slug) }}" class="tw-text-inherit tw-no-underline hover:tw-text-orange-600">
                                        {{ $product->name }}
                                    </a>
                                    @if($product->seller->isPaid())
                                        <i class="bi bi-star-fill text-warning ms-1" style="font-size: 0.8em;" title="Premium Seller"></i>
                                    @endif
                                </h6>
                                <!-- MOQ Section - Highlighted Boxes -->
                                <!-- MOQ Section - Highlighted Boxes -->
                                <div class="tw-mb-3 tw-space-y-1.5">
                                    <!-- Platform MOQ Box -->
                                    <div class="">
                                        <div class="tw-flex tw-items-start lg:tw-items-center tw-gap-1.5">
                                            <i class="bi bi-box-seam-fill tw-text-orange-600 tw-mt-0.5 lg:tw-mt-0"></i>
                                            <span class="tw-text-[10px] lg:tw-text-xs tw-font-medium tw-text-gray-700 tw-track-tight lg:tw-leading-tight">
                                                Platform MOQ Range: <span class="tw-text-black tw-font-bold tw-text-xs lg:tw-text-sm tw-block lg:tw-inline">{{ \App\Models\Setting::getValue('min_moq', 10) }} - {{ \App\Models\Setting::getValue('max_moq', 150) }}</span>
                                            </span>
                                        </div>
                                    </div>
                                    <!-- Product MOQ Box -->
                                    <div class="">
                                        <div class="tw-flex tw-items-start lg:tw-items-center tw-gap-1.5">
                                            <i class="bi bi-box-seam-fill tw-text-orange-600 tw-mt-0.5 lg:tw-mt-0"></i>
                                            <span class="tw-text-[10px] lg:tw-text-xs tw-font-medium tw-text-gray-700 tw-track-tight">
                                                Product MOQ: <span class="tw-text-black tw-font-bold tw-text-xs lg:tw-text-sm tw-block lg:tw-inline">{{ $product->moq ?? 1 }} {{ $product->unit->name ?? 'Pieces' }}</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between align-items-center">
                                    <p class="tw-text-orange-600 tw-font-black tw-text-sm lg:tw-text-lg mb-0">{{ $product->currency == 'USD' ? '$' : '₹' }}{{ number_format($product->price, $product->currency == 'USD' ? 2 : 0) }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif



<!-- Middle Banner Section -->
<!-- Middle Banner Section -->
@if(isset($banners['home_middle']) && $banners['home_middle']->count() > 0)
<section class="tw-py-6">
    <div class="container">
        @if($banners['home_middle']->count() > 1)
            <!-- Carousel for multiple banners -->
            <div id="middleBannerCarousel" class="carousel slide shadow-sm rounded overflow-hidden" data-bs-ride="carousel">
                <div class="carousel-inner">
                    @foreach($banners['home_middle'] as $key => $banner)
                        <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                            <a href="{{ $banner->link ?? '#' }}" class="d-block {{ $banner->type == 'blink' ? 'blink-animation' : '' }}">
                                <img src="{{ asset('storage/' . $banner->image) }}" class="d-block w-100" alt="Ad" style="max-height: 200px; object-fit: cover;" loading="lazy">
                            </a>
                        </div>
                    @endforeach
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#middleBannerCarousel" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#middleBannerCarousel" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                </button>
            </div>
        @else
            <!-- Single Banner -->
            <div class="row">
                <div class="col-12">
                    @foreach($banners['home_middle'] as $banner)
                        <a href="{{ $banner->link ?? '#' }}" class="d-block {{ $banner->type == 'blink' ? 'blink-animation' : '' }}">
                            <img src="{{ asset('storage/' . $banner->image) }}" class="img-fluid rounded shadow-sm w-100" alt="Ad" loading="lazy">
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>
@else
<section class="tw-py-6">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <a href="#" class="d-block">
                    <img src="https://placehold.co/1200x200?text=Your+Ad+Space" class="img-fluid rounded shadow-sm w-100" alt="Ad Space" loading="lazy">
                </a>
            </div>
        </div>
    </div>
</section>
@endif
<section class="tw-py-16 tw-bg-gray-50 tw-relative tw-overflow-hidden">
    <!-- Abstract Background -->
    <div class="tw-absolute tw-top-0 tw-right-0 tw-w-1/2 tw-h-full tw-bg-blue-50/50 tw-skew-x-12 tw-translate-x-20"></div>

    <div class="container tw-relative tw-z-10">
        <div class="text-center tw-mb-10">
            <h2 class="tw-text-3xl tw-font-bold tw-text-gray-800 tw-mb-2">Explore Top Suppliers</h2>
            <p class="tw-text-gray-500">Connect with verified sellers in your region</p>
        </div>

        <div class="row g-3 justify-content-center">
            @php
                // Use dynamic top cities
                $cities = $topCities ?? ['Delhi', 'Mumbai', 'Bangalore', 'Chennai', 'Kolkata', 'Pune', 'Ahmedabad', 'Hyderabad'];
            @endphp
            @foreach($cities as $city)
                <div class="col-6 col-md-4 col-lg-3">
                    <a href="{{ route('public.suppliers.index', ['location' => $city]) }}" class="tw-group tw-block tw-no-underline">
                        <div class="tw-bg-white tw-border tw-border-gray-100 tw-rounded-xl tw-p-4 tw-flex tw-items-center tw-gap-4 tw-shadow-sm hover:tw-shadow-md hover:tw-border-primary/30 hover:-tw-translate-y-1 tw-transition-all tw-duration-300">
                            <div class="tw-w-12 tw-h-12 tw-rounded-full tw-bg-orange-50 tw-flex tw-items-center tw-justify-center tw-text-orange-600 group-hover:tw-bg-orange-600 group-hover:tw-text-white tw-transition-colors">
                                <i class="bi bi-geo-alt-fill tw-text-lg"></i>
                            </div>
                            <div>
                                <h6 class="tw-mb-0 tw-font-bold tw-text-gray-800 group-hover:tw-text-orange-600 tw-transition-colors">{{ $city }}</h6>
                                <span class="tw-text-xs tw-text-gray-400 group-hover:tw-text-gray-500">Explore Suppliers</span>
                            </div>
                            <div class="tw-ms-auto tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity">
                                <i class="bi bi-arrow-right tw-text-orange-600"></i>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Featured Categories -->
<section class="tw-py-16 tw-bg-white">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <h6 class="tw-text-orange-600 tw-font-bold tw-uppercase tw-tracking-wider tw-mb-2">Explore</h6>
                <h2 class="tw-text-3xl tw-font-bold tw-text-gray-800">Browse Top Categories</h2>
            </div>
            <a href="{{ route('public.categories.index') }}" class="btn btn-outline-primary tw-border-orange-600 tw-text-orange-600 hover:tw-bg-orange-600 hover:tw-text-white tw-rounded-full tw-px-6 fw-bold hover:tw-bg-orange-600 hover:tw-text-white tw-transition-all">
                View All Categories <i class="bi bi-arrow-right ms-2"></i>
            </a>
        </div>
        
        <div class="row g-4">
            @foreach($categories->take(12) as $index => $category)
                <div class="col-6 col-md-4 col-lg-3">
                    <a href="{{ route('public.categories.show', $category->slug) }}" class="tw-block tw-no-underline tw-group">
                        <div class="tw-relative tw-h-48 tw-rounded-2xl tw-overflow-hidden tw-shadow-sm hover:tw-shadow-xl tw-transition-all tw-duration-500 tw-transform hover:-tw-translate-y-1">
                            <!-- Background Image/Gradient -->
                            <!-- Background Image/Gradient -->
                            @if($category->image)
                                <div class="tw-absolute tw-inset-0 group-hover:tw-scale-110 tw-transition-transform tw-duration-700">
                                    <img src="{{ asset('storage/' . $category->image) }}" class="tw-w-full tw-h-full tw-object-cover" alt="{{ $category->name }}">
                                </div>
                            @else
                                <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-gray-100 tw-to-gray-200 group-hover:tw-scale-110 tw-transition-transform tw-duration-700">
                                    <div class="tw-absolute tw-bottom-0 tw-right-0 tw-opacity-10 tw-transform tw-translate-x-4 tw-translate-y-4">
                                        <i class="bi bi-grid-fill tw-text-9xl"></i>
                                    </div>
                                </div>
                            @endif
                            
                            <!-- Overlay -->
                            <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-t tw-from-black/60 tw-via-transparent tw-to-transparent"></div>

                            <!-- Content -->
                            <div class="tw-absolute tw-bottom-0 tw-left-0 tw-p-5 tw-w-full">
                                <div class="tw-w-10 tw-h-10 tw-rounded-full tw-bg-white/20 tw-backdrop-blur-md tw-flex tw-items-center tw-justify-center tw-text-white tw-mb-3 group-hover:tw-bg-orange-600 group-hover:tw-text-white tw-transition-colors">
                                    <i class="bi bi-arrow-up-right"></i>
                                </div>
                                <h5 class="tw-text-white tw-font-bold tw-mb-1 tw-text-lg group-hover:tw-translate-x-1 tw-transition-transform">{{ $category->name }}</h5>
                                <p class="tw-text-gray-300 tw-text-xs tw-mb-0">{{ $category->products_count ?? 0 }} Products</p>
                            </div>
                        </div>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Latest Buy Leads -->
<section class="tw-py-16 tw-bg-gray-50">
    <div class="container">
        <div class="row align-items-center mb-5">
            <div class="col-lg-6">
                <h6 class="tw-text-orange-600 tw-font-bold tw-uppercase tw-tracking-wider tw-mb-2">Opportunities</h6>
                <h2 class="tw-text-3xl tw-font-bold tw-text-gray-800">New Business Opportunities</h2>
            </div>
            <div class="col-lg-6 text-lg-end">
                <a href="{{ route('public.rfqs.index') }}" class="btn btn-outline-primary tw-border-orange-600 tw-text-orange-600 hover:tw-bg-orange-600 hover:tw-text-white tw-rounded-full tw-px-6 fw-bold hover:tw-bg-orange-600 hover:tw-text-white tw-transition-all">
                    View All Leads <i class="bi bi-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
        
        <div class="tw-bg-white tw-rounded-2xl tw-shadow-sm tw-border tw-border-gray-100 tw-overflow-hidden">
            <div class="list-group list-group-flush">
                @foreach($recentRfqs as $rfq)
                    <div class="list-group-item tw-p-6 hover:tw-bg-blue-50/30 tw-transition-colors">
                        <div class="row align-items-center g-3">
                            <div class="col-md-1 text-center d-none d-md-block">
                                <div class="tw-w-12 tw-h-12 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-orange-600 tw-font-bold">
                                    {{ strtoupper(substr($rfq->title, 0, 1)) }}
                                </div>
                            </div>
                            <div class="col-md-7">
                                <div class="d-flex align-items-center gap-2 mb-1">
                                    <h5 class="tw-font-bold tw-text-gray-800 tw-mb-0">{{ $rfq->title }}</h5>
                                    <span class="tw-bg-green-100 tw-text-green-700 tw-text-[10px] tw-font-bold tw-px-2 tw-py-0.5 tw-rounded-full tw-uppercase">New</span>
                                </div>
                                <p class="tw-text-gray-500 tw-text-sm tw-mb-2 tw-line-clamp-1">{{ Str::limit($rfq->details, 120) }}</p>
                                <div class="d-flex gap-3 tw-text-xs tw-text-gray-400">
                                    <span><i class="bi bi-clock me-1"></i> {{ $rfq->created_at->diffForHumans() }}</span>

                                </div>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <a href="{{ route('public.rfqs.show', $rfq->id) }}" class="btn btn-primary tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 hover:tw-border-orange-700 tw-rounded-full tw-px-6 tw-font-bold tw-shadow-md hover:tw-shadow-lg tw-transform hover:-tw-translate-y-0.5 tw-transition-all">
                                    Quote Now
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

<!-- Recently Viewed Products -->
@if(isset($recentlyViewed) && $recentlyViewed->count() > 0)
<section class="tw-py-12 tw-bg-white">
    <div class="container">
        <h2 class="tw-text-2xl tw-font-bold tw-border-s-4 tw-border-primary tw-ps-3 tw-mb-6">Your Browsing History</h2>
        
        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-3">
            @foreach($recentlyViewed as $product)
                <div class="col">
                    <div class="card h-100 border-0 shadow-sm hover:tw-shadow-xl tw-transition-all tw-transform hover:-tw-translate-y-1 tw-duration-300 tw-group">
                        <div class="tw-relative tw-pt-[100%] tw-bg-gray-100 tw-overflow-hidden tw-rounded-t">
                            <a href="{{ route('public.products.show', $product->slug) }}">
                                <img src="{{ $product->main_image }}" 
                                     class="tw-absolute tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-object-cover tw-transition-transform tw-duration-500 group-hover:tw-scale-110" 
                                     alt="{{ $product->name }}" loading="lazy">
                            </a>
                             <!-- Quick View Overlay -->
                             <div class="tw-absolute tw-inset-0 tw-bg-black/20 tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-flex tw-items-center tw-justify-center">
                                <button type="button" class="btn btn-light btn-sm fw-bold tw-shadow-lg tw-transform tw-translate-y-4 group-hover:tw-translate-y-0 tw-transition-transform quick-view-btn" data-slug="{{ $product->slug }}">
                                    Quick View
                                </button>
                            </div>
                        </div>
                        <div class="card-body tw-p-3">
                            <h6 class="card-title tw-text-sm tw-font-bold tw-mb-1 text-truncate tw-text-gray-800">
                                <a href="{{ route('public.products.show', $product->slug) }}" class="tw-text-inherit tw-no-underline hover:tw-text-orange-600">
                                    {{ $product->name }}
                                </a>
                                @if($product->seller->isPaid())
                                    <i class="bi bi-star-fill text-warning ms-1" style="font-size: 0.8em;" title="Premium Seller"></i>
                                @endif
                            </h6>
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="card-text tw-text-orange-600 tw-font-bold tw-text-sm mb-1">₹{{ $product->price }}</p>
                                <span class="tw-text-[10px] tw-text-gray-400">MOQ: {{ $product->moq }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Unified Newsletter & CTA Section -->
<section class="tw-py-20 tw-bg-gray-900 tw-text-white tw-relative tw-overflow-hidden">
    <!-- Dynamic Background -->
    <div class="tw-absolute tw-inset-0 tw-bg-gradient-to-br tw-from-gray-900 tw-via-gray-800/50 tw-to-gray-900"></div>
    <div class="tw-absolute tw-top-0 tw-left-0 tw-w-full tw-h-full tw-bg-[url('https://placehold.co/1920x600?text=Background')] tw-opacity-5 tw-bg-cover tw-bg-center tw-mix-blend-overlay"></div>
    
    <!-- Animated Shapes -->
    <div class="tw-absolute tw-top-10 tw-left-10 tw-w-64 tw-h-64 tw-bg-orange-500/10 tw-rounded-full tw-blur-3xl tw-animate-pulse"></div>
    <div class="tw-absolute tw-bottom-10 tw-right-10 tw-w-64 tw-h-64 tw-bg-red-500/10 tw-rounded-full tw-blur-3xl tw-animate-pulse tw-delay-1000"></div>

    <div class="container tw-relative tw-z-10">
        <div class="row g-5 align-items-center">
            <!-- Part 1: Newsletter -->
            <div class="col-lg-6 border-end-lg border-white/10">
                <div class="text-center text-lg-start">
                     <span class="tw-text-orange-600 tw-font-bold tw-uppercase tw-tracking-widest tw-text-xs tw-mb-3 tw-block">Newsletter</span>
                     <h2 class="tw-text-3xl tw-font-black tw-mb-4">Get Exclusive Updates</h2>
                     <p class="tw-text-gray-400 tw-mb-6">Subscribe to get exclusive B2B insights, new product alerts, and industry trends delivered directly to your inbox.</p>
                     
                     <div class="tw-bg-white/5 tw-backdrop-blur-lg tw-p-1.5 tw-rounded-full tw-border tw-border-white/10 tw-shadow-2xl">
                        <form id="newsletterForm" class="tw-flex tw-gap-2">
                            @csrf
                            <input type="email" name="email" class="form-control form-control-lg tw-bg-transparent tw-border-0 tw-text-white tw-placeholder-gray-500 focus:tw-ring-0 focus:tw-shadow-none" placeholder="Enter your email" required>
                            <button class="btn btn-primary tw-bg-orange-600 tw-border-orange-600 hover:tw-bg-orange-700 tw-rounded-full tw-px-6 tw-font-bold" type="submit">Subscribe</button>
                        </form>
                     </div>
                     <div id="newsletterMessage" class="tw-mt-4 tw-text-sm tw-font-bold" style="display: none;"></div>
                </div>
            </div>

            <!-- Part 2: CTA -->
            <div class="col-lg-6">
                <div class="text-center text-lg-start ps-lg-5">
                    <h2 class="tw-text-3xl tw-font-black tw-mb-4">Ready to Grow Your Business?</h2>
                    <p class="tw-text-lg tw-text-gray-300 tw-mb-8">Join thousands of suppliers and buyers connecting daily on The Mini Port. Start your journey today.</p>
                    
                    <div class="d-flex justify-content-center justify-content-lg-start gap-3 flex-wrap">
                        <a href="{{ route('register.seller') }}" class="btn btn-light btn-lg tw-rounded-full tw-px-6 tw-py-2.5 tw-font-bold tw-text-slate-900 tw-shadow-lg hover:tw-shadow-xl hover:tw-scale-105 tw-transition-all tw-flex tw-items-center tw-gap-2">
                            <i class="bi bi-shop"></i> Become a Seller
                        </a>
                        <a href="{{ route('register.buyer') }}" class="btn btn-outline-light btn-lg tw-rounded-full tw-px-6 tw-py-2.5 tw-font-bold hover:tw-bg-white/10 hover:tw-scale-105 tw-transition-all tw-flex tw-items-center tw-gap-2">
                            <i class="bi bi-person-plus"></i> Join as Buyer
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
@push('scripts')
    <script>
        document.getElementById('newsletterForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const form = this;
            const messageDiv = document.getElementById('newsletterMessage');
            const btn = form.querySelector('button');
            const originalText = btn.innerText;

            btn.disabled = true;
            btn.innerText = 'Sending...';

            fetch('{{ route("newsletter.subscribe") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    email: form.querySelector('input[name="email"]').value
                })
            })
            .then(response => response.json())
            .then(data => {
                messageDiv.style.display = 'block';
                if (data.success) {
                    messageDiv.className = 'tw-mt-3 tw-text-sm tw-font-bold tw-text-green-400';
                    messageDiv.innerText = data.message;
                    form.reset();
                } else {
                    messageDiv.className = 'tw-mt-3 tw-text-sm tw-font-bold tw-text-red-400';
                    messageDiv.innerText = data.message || 'Something went wrong.';
                }
            })
            .catch(error => {
                messageDiv.style.display = 'block';
                messageDiv.className = 'tw-mt-3 tw-text-sm tw-font-bold tw-text-red-400';
                messageDiv.innerText = 'An error occurred. Please try again.';
            })
            .finally(() => {
                btn.disabled = false;
                btn.innerText = originalText;
                setTimeout(() => { messageDiv.style.display = 'none'; }, 5000);
            });
        });
    </script>
@endpush
</section>
@endsection