@extends('layouts.store')

@section('title', 'OMNITRADE | ' . __('Discover') . ' ' . __('Amazing Products') . ' ' . __('Direct from Source'))

@section('content')
<div class="flex flex-col w-full">

    <!-- HERO SECTION -->
    <section class="relative w-full overflow-hidden bg-gradient-to-b from-surface-container-low via-background to-background py-6 sm:py-space-xl lg:py-space-2xl">
        <!-- Subtle Ambient Glow Orbs -->
        <div class="pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 w-[720px] h-[340px] bg-primary-container/10 blur-[120px] rounded-full"></div>
        <div class="pointer-events-none absolute top-1/3 -right-24 w-[420px] h-[280px] bg-tertiary-container/10 blur-[100px] rounded-full"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12 relative z-10">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-space-xl items-center">
                <!-- Left Hero Content -->
                <div class="lg:col-span-7 flex flex-col items-start text-left">
                    <!-- Eyebrow Pill -->
                    <div class="inline-flex items-center gap-space-xs px-3 sm:px-3.5 py-1.5 rounded-full bg-surface-container-lowest shadow-sm text-on-surface mb-3 sm:mb-space-md">
                        <span class="relative flex h-2 w-2">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-tertiary opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-2 w-2 bg-tertiary"></span>
                        </span>
                        <span class="text-[11px] sm:text-label-sm uppercase tracking-wider text-on-surface font-bold">
                            {{ __('🔥 New Season Arrivals & Trending Drops') }}
                        </span>
                    </div>

                    <!-- Main Headline -->
                    <h1 class="text-3xl sm:text-4xl lg:font-display-lg lg:text-display-lg text-on-surface tracking-tight leading-[1.12] mb-3 sm:mb-space-md">
                        {{ __('Discover') }} <span class="bg-gradient-to-r from-primary to-primary-container bg-clip-text text-transparent">{{ __('Amazing Products') }}</span> {{ __('Direct from Source') }}
                    </h1>

                    <!-- Subheadline -->
                    <p class="text-sm sm:text-base lg:text-body-lg text-on-surface-variant max-w-2xl mb-6 sm:mb-space-xl leading-relaxed">
                        {{ __('Curated trending gadgets, viral lifestyle essentials, and modern goods shipped straight from verified global manufacturers at authentic direct-to-consumer prices.') }}
                    </p>

                    <!-- CTAs -->
                    <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3 w-full sm:w-auto mb-6 sm:mb-space-xl">
                        <a class="h-12 px-6 sm:px-8 rounded-lg bg-primary-container hover:bg-primary text-on-primary font-label-lg text-label-lg font-bold flex items-center justify-center gap-space-xs transition-all transform active:scale-95 shadow-md hover:shadow-lg" href="#featured-products">
                            <span>{{ __('Shop Now') }}</span>
                            <span class="material-symbols-outlined text-[20px]">arrow_forward</span>
                        </a>
                        <a class="h-12 px-5 sm:px-6 rounded-lg bg-surface-container-lowest hover:bg-surface-container-low text-on-surface font-label-lg text-label-lg font-bold flex items-center justify-center gap-space-xs transition-colors shadow-sm" href="#categories">
                            <span>{{ __('Explore Deals') }}</span>
                            <span class="px-2 py-0.5 rounded-full bg-tertiary-container text-on-tertiary text-[11px] sm:text-label-sm tracking-wide font-bold">
                                {{ __('Save up to 60%') }}
                            </span>
                        </a>
                    </div>

                    <!-- Mini Live Pulse Drop-ship Stat -->
                    <div class="flex items-center gap-space-sm pt-space-xs flex-wrap">
                        <div class="flex -space-x-2 overflow-hidden shrink-0">
                            <div class="inline-block h-7 w-7 sm:h-8 sm:w-8 rounded-full bg-surface-variant flex items-center justify-center text-primary text-[10px] sm:text-label-sm font-bold shadow-sm">US</div>
                            <div class="inline-block h-7 w-7 sm:h-8 sm:w-8 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface text-[10px] sm:text-label-sm font-bold shadow-sm">EU</div>
                            <div class="inline-block h-7 w-7 sm:h-8 sm:w-8 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-fixed text-[10px] sm:text-label-sm font-bold shadow-sm">IT</div>
                        </div>
                        <p class="text-xs sm:text-body-sm text-on-surface-variant">
                            <strong class="text-on-surface font-bold">14,280+ {{ __('orders') }}</strong> {{ __('dispatched today across 42 countries') }}
                        </p>
                    </div>
                </div>

                <!-- Right Visual Showcase / Dropship Hero Banner Composition -->
                <div class="lg:col-span-5 relative mt-4 lg:mt-0">
                    <div class="relative w-full rounded-2xl bg-surface-container-lowest p-2.5 sm:p-space-md shadow-xl border border-surface-container">
                        @if($heroProduct)
                            <div class="relative w-full h-[300px] sm:h-[380px] lg:h-[440px] rounded-xl overflow-hidden bg-surface-container-low group">
                                <a href="{{ route('store.product', $heroProduct->slug) }}" class="block w-full h-full">
                                    <img class="w-full h-full object-cover object-center transform group-hover:scale-105 transition-transform duration-700" alt="{{ $heroProduct->title }}" src="{{ $heroProduct->primary_image }}"/>
                                </a>
                                <div class="absolute inset-0 bg-gradient-to-t from-inverse-surface/90 via-inverse-surface/20 to-transparent pointer-events-none"></div>
                                
                                <!-- Floating Live Notification Card -->
                                <div class="absolute top-3 left-3 sm:top-4 sm:left-4 bg-surface-container-lowest/95 backdrop-blur-md px-3 py-1.5 sm:px-3.5 sm:py-2 rounded-xl shadow-md flex items-center gap-space-sm border border-surface-container">
                                    <span class="flex h-2 w-2 sm:h-2.5 sm:w-2.5 rounded-full bg-primary animate-pulse"></span>
                                    <div class="flex flex-col">
                                        <span class="text-[9px] sm:text-label-sm text-secondary uppercase tracking-wider font-semibold">{{ $heroProduct->category?->name ?? __('Fast Route') }}</span>
                                        <span class="text-xs sm:text-label-md text-on-surface font-bold">{{ __('Express Direct Hub') }}</span>
                                    </div>
                                </div>

                                <!-- Deal Urgency Stamp Over Hero Image -->
                                <div class="absolute bottom-3 left-3 right-3 sm:bottom-4 sm:left-4 sm:right-4 bg-surface-container-lowest/95 backdrop-blur-md p-3 sm:p-space-md rounded-xl shadow-lg flex items-center justify-between gap-3 border border-surface-container">
                                    <div class="flex flex-col min-w-0">
                                        <span class="text-[10px] sm:text-label-sm text-tertiary font-bold uppercase tracking-wider">
                                            {{ __('Flash Drop') }} &bull; {{ number_format($heroProduct->rating ?? 4.9, 1) }} ★ ({{ $heroProduct->reviews_count ?? 120 }})
                                        </span>
                                        <a href="{{ route('store.product', $heroProduct->slug) }}" class="text-sm sm:text-headline-sm font-bold text-on-surface truncate hover:text-primary transition-colors block">
                                            {{ $heroProduct->title }}
                                        </a>
                                        <div class="flex items-baseline gap-2 pt-0.5">
                                            <span class="text-sm sm:text-base font-extrabold text-on-surface">${{ number_format($heroProduct->price, 2) }}</span>
                                            @if($heroProduct->compare_at_price)
                                                <del class="text-xs text-outline font-normal">${{ number_format($heroProduct->compare_at_price, 2) }}</del>
                                            @endif
                                            @if($heroProduct->discount_percentage > 0)
                                                <span class="text-[10px] font-bold text-tertiary px-1.5 py-0.5 rounded bg-tertiary-container/10">Save {{ $heroProduct->discount_percentage }}%</span>
                                            @endif
                                        </div>
                                    </div>
                                    <button onclick="quickAddToCart({{ $heroProduct->id }}, null, 1, this)" class="p-2.5 sm:p-3 rounded-xl bg-primary-container text-on-primary hover:bg-primary transition-all flex items-center justify-center cursor-pointer shrink-0 shadow-sm transform active:scale-95" title="{{ __('Add to Cart') }}">
                                        <span class="material-symbols-outlined text-[20px] sm:text-[22px]">shopping_cart</span>
                                    </button>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Trust Strip Beneath Hero -->
            <div class="mt-8 sm:mt-space-2xl grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-space-md p-4 sm:p-space-lg rounded-2xl bg-surface-container-lowest shadow-sm">
                <div class="flex items-center gap-2.5 sm:gap-space-sm">
                    <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface-container-low flex items-center justify-center text-primary shrink-0">
                        <span class="material-symbols-outlined text-[20px] sm:text-[24px]">local_shipping</span>
                    </div>
                    <div class="flex flex-col min-w-0">
                        <span class="text-xs sm:text-label-md font-bold text-on-surface truncate">{{ __('Fast Global Delivery') }}</span>
                        <span class="text-[10px] sm:text-body-sm text-on-surface-variant truncate">{{ __('4-8 days dispatch') }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-2.5 sm:gap-space-sm">
                    <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface-container-low flex items-center justify-center text-primary shrink-0">
                        <span class="material-symbols-outlined text-[20px] sm:text-[24px]">factory</span>
                    </div>
                    <div class="flex flex-col min-w-0">
                        <span class="text-xs sm:text-label-md font-bold text-on-surface truncate">{{ __('Factory Direct') }}</span>
                        <span class="text-[10px] sm:text-body-sm text-on-surface-variant truncate">{{ __('Zero retail markup') }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-2.5 sm:gap-space-sm">
                    <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface-container-low flex items-center justify-center text-primary shrink-0">
                        <span class="material-symbols-outlined text-[20px] sm:text-[24px]">verified</span>
                    </div>
                    <div class="flex flex-col min-w-0">
                        <span class="text-xs sm:text-label-md font-bold text-on-surface truncate">{{ __('30-Day Guarantee') }}</span>
                        <span class="text-[10px] sm:text-body-sm text-on-surface-variant truncate">{{ __('100% money back') }}</span>
                    </div>
                </div>
                <div class="flex items-center gap-2.5 sm:gap-space-sm">
                    <div class="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface-container-low flex items-center justify-center text-primary shrink-0">
                        <span class="material-symbols-outlined text-[20px] sm:text-[24px]">reviews</span>
                    </div>
                    <div class="flex flex-col min-w-0">
                        <span class="text-xs sm:text-label-md font-bold text-on-surface truncate">{{ __('4.9/5 Stars') }}</span>
                        <span class="text-[10px] sm:text-body-sm text-on-surface-variant truncate">{{ __('38k+ real reviews') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FEATURED PRODUCTS SECTION (2x3 GRID) -->
    <section class="w-full py-space-2xl bg-background" id="featured-products">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12 flex flex-col gap-6 sm:gap-space-xl">
            <!-- Section Header with Filter Tabs -->
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
                <div class="flex flex-col gap-1">
                    <span class="font-label-sm text-label-sm uppercase tracking-wider text-primary font-bold">{{ __('Curated Catalog') }}</span>
                    <h2 class="text-2xl sm:text-3xl lg:font-headline-xl lg:text-headline-xl text-on-surface font-bold tracking-tight">{{ __('Featured Products') }}</h2>
                    <p class="text-xs sm:text-body-md text-on-surface-variant max-w-xl">
                        {{ __('Top-rated, trending viral drops handpicked for quality, high demand, and factory-direct reliability.') }}
                    </p>
                </div>

                <!-- Filter Pill Controls (Touch-scrollable on mobile) -->
                <div class="inline-flex p-1 rounded-xl bg-surface-container-low max-w-full overflow-x-auto scrollbar-none whitespace-nowrap self-start md:self-auto gap-1" id="productFilterTabs">
                    <button class="filter-btn px-3.5 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-label-md font-bold bg-primary text-on-primary shadow-sm transition-all cursor-pointer shrink-0" data-target="all" type="button">
                        {{ __('All') }}
                    </button>
                    <button class="filter-btn px-3.5 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-label-md font-semibold text-on-surface-variant hover:text-on-surface transition-all cursor-pointer shrink-0" data-target="trending" type="button">
                        {{ __('Trending Now') }}
                    </button>
                    <button class="filter-btn px-3.5 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-label-md font-semibold text-on-surface-variant hover:text-on-surface transition-all cursor-pointer shrink-0" data-target="bestseller" type="button">
                        {{ __('Best Sellers') }}
                    </button>
                    <button class="filter-btn px-3.5 py-1.5 sm:px-4 sm:py-2 rounded-lg text-xs sm:text-label-md font-semibold text-on-surface-variant hover:text-on-surface transition-all cursor-pointer shrink-0" data-target="new" type="button">
                        {{ __('New Drops') }}
                    </button>
                </div>
            </div>

            <!-- 2x3 Grid of Products -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-space-lg" id="featuredGrid">
                @foreach($featuredProducts as $index => $prod)
                    @php
                        $filterCategory = 'all';
                        if($index % 2 == 0) $filterCategory .= ' trending';
                        if($index % 3 == 0) $filterCategory .= ' bestseller';
                        if($index % 3 == 1) $filterCategory .= ' new';
                    @endphp
                    <div class="product-item group flex flex-col bg-surface-container-lowest rounded-xl shadow-sm hover:shadow-xl transition-all duration-300 overflow-hidden" data-category="{{ $filterCategory }}">
                        <div class="relative w-full aspect-square bg-surface-container-low overflow-hidden">
                            <a href="{{ route('store.product', $prod->slug) }}">
                                <img class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500" alt="{{ $prod->title }}" src="{{ $prod->primary_image }}"/>
                            </a>

                            <!-- Badges -->
                            <div class="absolute top-3 left-3 flex flex-col gap-1.5">
                                @if($index === 0)
                                    <span class="px-2.5 py-1 rounded-full bg-secondary-container text-on-secondary-fixed font-label-sm text-label-sm font-bold uppercase tracking-wider shadow-sm">
                                        {{ __('Bestseller') }}
                                    </span>
                                @elseif($index === 1)
                                    <span class="px-2.5 py-1 rounded-full bg-tertiary-container text-on-tertiary font-label-sm text-label-sm font-bold uppercase tracking-wider shadow-sm">
                                        {{ __('Viral Drop') }}
                                    </span>
                                @else
                                    <span class="px-2.5 py-1 rounded-full bg-primary text-on-primary font-label-sm text-label-sm font-bold uppercase tracking-wider shadow-sm">
                                        {{ __('Trending') }}
                                    </span>
                                @endif
                                <span class="px-2.5 py-1 rounded-full bg-surface-container-lowest/90 backdrop-blur-sm text-primary font-label-sm text-label-sm font-bold flex items-center gap-1 shadow-sm">
                                    <span class="material-symbols-outlined text-[14px]">local_shipping</span> {{ __('Free Shipping') }}
                                </span>
                            </div>

                            <!-- Discount Pill -->
                            @if($prod->discount_percentage > 0)
                                <span class="absolute top-3 right-3 px-2.5 py-1 rounded-full bg-tertiary-container text-on-tertiary font-label-sm text-label-sm font-bold shadow-sm">
                                    -{{ $prod->discount_percentage }}%
                                </span>
                            @endif

                            <!-- Quick Action Floating Buttons -->
                            <div class="absolute bottom-3 right-3 flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                <a href="{{ route('store.product', $prod->slug) }}" class="w-9 h-9 rounded-lg bg-surface-container-lowest/90 backdrop-blur-sm text-on-surface hover:text-primary flex items-center justify-center shadow-md transition-colors" title="{{ __('Overview & Highlights') }}">
                                    <span class="material-symbols-outlined text-[18px]">visibility</span>
                                </a>
                            </div>
                        </div>

                        <!-- Product Details -->
                        <div class="p-space-md flex flex-col flex-1 justify-between gap-space-sm">
                            <div class="flex flex-col gap-space-xs">
                                <!-- Rating -->
                                <div class="flex items-center gap-space-xs">
                                    <div class="flex items-center text-primary">
                                        @for($s = 0; $s < 5; $s++)
                                            <span class="material-symbols-outlined text-[16px]" style="font-variation-settings: 'FILL' 1;">star</span>
                                        @endfor
                                    </div>
                                    <span class="font-label-sm text-label-sm text-on-surface font-bold">{{ number_format($prod->rating, 1) }}</span>
                                    <span class="font-body-sm text-body-sm text-on-surface-variant">({{ $prod->reviews_count }})</span>
                                </div>

                                <!-- Category Tag -->
                                <span class="text-[10px] font-bold uppercase tracking-wider text-primary">
                                    {{ $prod->category?->name ?? __('Direct Dispatch') }}
                                </span>

                                <!-- Title -->
                                <h3 class="font-headline-sm text-headline-sm text-on-surface font-bold leading-snug line-clamp-2 hover:text-primary transition-colors cursor-pointer">
                                    <a href="{{ route('store.product', $prod->slug) }}">{{ $prod->title }}</a>
                                </h3>

                                <!-- Price Row -->
                                <div class="flex items-baseline gap-space-xs pt-1">
                                    <span class="font-headline-sm text-headline-sm text-on-surface font-extrabold">${{ number_format($prod->price, 2) }}</span>
                                    @if($prod->compare_at_price)
                                        <span class="font-body-sm text-body-sm text-outline line-through">${{ number_format($prod->compare_at_price, 2) }}</span>
                                    @endif
                                </div>

                                <!-- Stock Alert -->
                                <div class="flex items-center gap-1.5 text-tertiary font-label-sm text-label-sm pt-0.5">
                                    <span class="w-1.5 h-1.5 rounded-full bg-tertiary animate-pulse"></span>
                                    <span>{{ __('Only') }} {{ rand(4, 9) }} {{ __('left in stock!') }}</span>
                                </div>
                            </div>

                            <!-- Quick Add Button -->
                            <button onclick="quickAddToCart({{ $prod->id }}, null, 1, this)" class="quick-add-btn w-full h-11 rounded-lg bg-primary-container hover:bg-primary text-on-primary font-label-md text-label-md font-bold flex items-center justify-center gap-space-xs transition-all active:scale-98 shadow-sm cursor-pointer">
                                <span class="material-symbols-outlined text-[18px]">add_shopping_cart</span>
                                <span>{{ __('Add to Cart') }}</span>
                            </button>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Catalog Footer Banner Note -->
            <div class="flex items-center justify-center pt-space-md">
                <a class="inline-flex items-center gap-space-xs text-primary hover:text-primary-container font-label-lg text-label-lg font-bold group" href="{{ route('store.catalog') }}">
                    <span>{{ __('Explore All 2,400+ Verified Factory Drops') }}</span>
                    <span class="material-symbols-outlined text-[20px] group-hover:translate-x-1 transition-transform">arrow_forward</span>
                </a>
            </div>
        </div>
    </section>

    <!-- POPULAR CATEGORIES SECTION -->
    <section class="w-full py-10 sm:py-space-2xl bg-surface-container-low" id="categories">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12 flex flex-col gap-6 sm:gap-space-xl">
            <!-- Section Header -->
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-3">
                <div class="flex flex-col gap-1">
                    <span class="font-label-sm text-label-sm uppercase tracking-wider text-primary font-bold">{{ __('Smart Discovery') }}</span>
                    <h2 class="text-2xl sm:text-3xl lg:font-headline-xl lg:text-headline-xl text-on-surface font-bold tracking-tight">{{ __('Popular Categories') }}</h2>
                    <p class="text-xs sm:text-body-md text-on-surface-variant max-w-xl">
                        {{ __('Browse through curated collections tailored to every lifestyle, verified for unmatched factory grade craftsmanship.') }}
                    </p>
                </div>
                <a class="text-xs sm:text-label-lg text-primary font-bold hover:underline flex items-center gap-1 self-start md:self-auto" href="{{ route('store.catalog') }}">
                    {{ __('View All Collections') }} <span class="material-symbols-outlined text-[16px] sm:text-[18px]">arrow_forward</span>
                </a>
            </div>

            <!-- Dynamic Categories Grid (Responsive) -->
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 sm:gap-space-md">
                @foreach($categories as $category)
                    <a class="group relative flex flex-col rounded-xl overflow-hidden bg-surface-container-lowest shadow-sm hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-surface-container" href="{{ route('store.catalog', ['category' => $category->slug]) }}">
                        <div class="relative w-full h-36 sm:h-44 bg-surface-container overflow-hidden">
                            <img class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" alt="{{ $category->name }}" src="{{ $category->image ?? 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800' }}"/>
                            <div class="absolute inset-0 bg-gradient-to-t from-inverse-surface/80 via-transparent to-transparent"></div>
                            <span class="absolute top-2 right-2 sm:top-3 sm:right-3 px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-full bg-surface-container-lowest/90 backdrop-blur-sm text-on-surface text-[10px] sm:text-label-sm font-bold shadow-sm">
                                {{ $category->products_count }} {{ __('Items') }}
                            </span>
                        </div>
                        <div class="p-3 sm:p-space-md flex flex-col gap-space-xs flex-1 justify-between">
                            <div>
                                <h3 class="font-headline-sm text-xs sm:text-sm font-bold text-on-surface group-hover:text-primary transition-colors line-clamp-1">
                                    {{ $category->name }}
                                </h3>
                                <p class="font-body-sm text-[11px] sm:text-xs text-on-surface-variant line-clamp-2 mt-1">
                                    {{ $category->description ?? __('Curated tech, verified factory-direct goods & lifestyle items.') }}
                                </p>
                            </div>
                            <span class="pt-1 font-label-sm text-xs text-primary font-bold flex items-center gap-1 group-hover:gap-2 transition-all">
                                {{ __('Explore') }} <span class="material-symbols-outlined text-[14px]">arrow_forward</span>
                            </span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    <!-- TRUST & SOCIAL PROOF STRIP WITH REAL-TIME ORDER TRACKER PREVIEW -->
    <section class="w-full py-10 sm:py-space-2xl bg-background">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-12 flex flex-col gap-6 sm:gap-space-xl">
            <!-- Split Assurance Showcase -->
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-space-lg items-center">
                <!-- Live Logistics Tracking Demo Card -->
                <div class="lg:col-span-6 bg-surface-container-lowest rounded-2xl p-4 sm:p-space-lg shadow-sm">
                    <div class="flex items-center justify-between pb-space-md">
                        <div class="flex items-center gap-space-sm">
                            <div class="w-9 h-9 rounded-lg bg-primary-container/10 flex items-center justify-center text-primary">
                                <span class="material-symbols-outlined text-[22px]">flight_takeoff</span>
                            </div>
                            <div class="flex flex-col">
                                <span class="font-headline-sm text-headline-sm text-on-surface font-bold">{{ __('Live Global Dispatch') }}</span>
                                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ __('Real-time status tracking pipeline') }}</span>
                            </div>
                        </div>
                        <span class="px-2.5 py-1 rounded-full bg-surface-variant text-primary font-label-sm text-label-sm font-bold flex items-center gap-1">
                            <span class="w-2 h-2 rounded-full bg-primary animate-ping"></span> {{ __('Live Tracking') }}
                        </span>
                    </div>

                    <!-- Step Progression Bar -->
                    <div class="relative py-space-md">
                        <div class="absolute top-1/2 left-4 right-4 h-1 bg-surface-container -translate-y-1/2"></div>
                        <div class="absolute top-1/2 left-4 w-2/3 h-1 bg-primary -translate-y-1/2 transition-all"></div>
                        <div class="relative flex justify-between items-center text-center">
                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center font-label-sm text-label-sm font-bold shadow-md">
                                    <span class="material-symbols-outlined text-[16px]">check</span>
                                </div>
                                <span class="font-label-sm text-label-sm font-bold text-on-surface pt-2">{{ __('Manufactured') }}</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full bg-primary text-on-primary flex items-center justify-center font-label-sm text-label-sm font-bold shadow-md">
                                    <span class="material-symbols-outlined text-[16px]">check</span>
                                </div>
                                <span class="font-label-sm text-label-sm font-bold text-on-surface pt-2">{{ __('QA Verified') }}</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full bg-primary text-on-primary ring-4 ring-primary/20 flex items-center justify-center font-label-sm text-label-sm font-bold shadow-md animate-pulse">
                                    <span class="material-symbols-outlined text-[16px]">flight</span>
                                </div>
                                <span class="font-label-sm text-label-sm font-bold text-primary pt-2">{{ __('In Transit') }}</span>
                            </div>
                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full bg-surface-container text-on-surface-variant flex items-center justify-center font-label-sm text-label-sm font-bold">
                                    <span class="material-symbols-outlined text-[16px]">home</span>
                                </div>
                                <span class="font-label-sm text-label-sm text-on-surface-variant pt-2">{{ __('Delivered') }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="p-space-sm mt-space-sm rounded-lg bg-surface-container-low flex items-center justify-between">
                        <div class="flex flex-col">
                            <span class="font-label-sm text-label-sm text-on-surface-variant">Order #OT-2026-89410 • {{ $heroProduct ? $heroProduct->title : 'ANC Earbuds Pro' }}</span>
                            <span class="font-body-sm text-body-sm font-bold text-on-surface">Arriving in: 2 days (Hub Node)</span>
                        </div>
                        <a class="font-label-sm text-label-sm text-primary font-bold hover:underline" href="{{ route('store.track') }}">{{ __('Track Package →') }}</a>
                    </div>
                </div>

                <!-- Verified Customer Testimonials Snippet -->
                <div class="lg:col-span-6 bg-surface-container-lowest rounded-2xl p-space-lg shadow-sm flex flex-col justify-between">
                    <div class="flex items-center justify-between pb-space-sm">
                        <div class="flex flex-col">
                            <span class="font-headline-sm text-headline-sm text-on-surface font-bold">{{ __('Verified Shopper Praise') }}</span>
                            <span class="font-body-sm text-body-sm text-on-surface-variant">{{ __('Real testimonials from genuine buyers') }}</span>
                        </div>
                        <div class="flex items-center gap-1 text-primary">
                            <span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
                            <span class="font-headline-sm text-headline-sm font-bold text-on-surface">4.9 / 5.0</span>
                        </div>
                    </div>

                    <div class="py-space-sm">
                        <div class="flex items-center gap-space-xs text-primary mb-2">
                            @for($i=0; $i<5; $i++)
                                <span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">star</span>
                            @endfor
                            <span class="font-label-sm text-label-sm text-secondary ml-1 font-semibold">• {{ __('Verified Purchase') }}</span>
                        </div>
                        <blockquote class="font-body-md text-body-md text-on-surface italic leading-relaxed">
                            @if(app()->getLocale() === 'it')
                                "Davvero impressionato dall'incredibile qualità costruttiva di {{ $heroProduct ? $heroProduct->title : 'Ultra-Slim ANC Wireless Earbuds' }}. Consegnati a Roma in soli 5 giorni con tracciamento continuo in tempo reale. OMNITRADE taglia ogni costo inutile di intermediazione!"
                            @else
                                "Honestly surprised by the incredible build quality of the {{ $heroProduct ? $heroProduct->title : 'Ultra-Slim ANC Wireless Earbuds' }}. Delivered in just 5 days directly tracked. OMNITRADE is cutting out all the retail markup!"
                            @endif
                        </blockquote>
                    </div>

                    <div class="flex items-center justify-between pt-space-sm">
                        <div class="flex items-center gap-space-sm">
                            <div class="w-8 h-8 rounded-full bg-surface-container-high flex items-center justify-center font-bold text-on-surface font-label-md text-label-md">
                                MK
                            </div>
                            <div class="flex flex-col">
                                <span class="font-label-md text-label-md font-bold text-on-surface">Marcus K.</span>
                                <span class="font-body-sm text-body-sm text-on-surface-variant">{{ app()->getLocale() === 'it' ? 'Italia' : 'Global' }} &bull; 3x {{ __('Verified Buyer') }}</span>
                            </div>
                        </div>
                        <div class="flex items-center gap-space-xs text-on-surface-variant">
                            <span class="material-symbols-outlined text-[18px] text-primary">verified</span>
                            <span class="font-label-sm text-label-sm">{{ __('Safe & Certified') }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Secure Payment Checkout Guarantees Bar -->
            <div class="w-full rounded-2xl bg-surface-container-lowest p-space-lg shadow-sm flex flex-col md:flex-row items-center justify-between gap-space-md">
                <div class="flex items-center gap-space-md">
                    <div class="w-10 h-10 rounded-xl bg-surface-container-low flex items-center justify-center text-primary shrink-0">
                        <span class="material-symbols-outlined text-[24px]">lock</span>
                    </div>
                    <div class="flex flex-col">
                        <span class="font-label-lg text-label-lg font-bold text-on-surface">{{ __('Encrypted & Guaranteed Checkout') }}</span>
                        <span class="font-body-sm text-body-sm text-on-surface-variant">{{ __('Payment data is processed via top-tier 256-Bit SSL tokenization') }}</span>
                    </div>
                </div>

                <!-- Trust Badges -->
                <div class="flex flex-wrap items-center gap-space-sm">
                    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-surface-container-low text-on-surface font-label-sm text-label-sm font-bold">
                        <span class="material-symbols-outlined text-[16px] text-primary">shield</span>
                        <span>{{ __('Norton Secured') }}</span>
                    </div>
                    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-surface-container-low text-on-surface font-label-sm text-label-sm font-bold">
                        <span class="material-symbols-outlined text-[16px] text-primary">published_with_changes</span>
                        <span>{{ __('30-Day Free Return') }}</span>
                    </div>
                    <div class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-surface-container-low text-on-surface font-label-sm text-label-sm font-bold">
                        <span class="material-symbols-outlined text-[16px] text-primary">local_police</span>
                        <span>{{ __('Buyer Protection 100%') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

@push('scripts')
<script>
    // Product Filter Tabs
    (function() {
        const filterBtns = document.querySelectorAll('#productFilterTabs .filter-btn');
        const productCards = document.querySelectorAll('#featuredGrid .product-item');

        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                filterBtns.forEach(b => {
                    b.classList.remove('bg-primary', 'text-on-primary', 'shadow-sm');
                    b.classList.add('text-on-surface-variant');
                });

                btn.classList.add('bg-primary', 'text-on-primary', 'shadow-sm');
                btn.classList.remove('text-on-surface-variant');

                const filterValue = btn.getAttribute('data-target');

                productCards.forEach(card => {
                    if (filterValue === 'all') {
                        card.style.display = 'flex';
                    } else {
                        const categories = card.getAttribute('data-category') || '';
                        if (categories.includes(filterValue)) {
                            card.style.display = 'flex';
                        } else {
                            card.style.display = 'none';
                        }
                    }
                });
            });
        });

        // Top bar countdown timer
        let hours = 8, mins = 42, secs = 19;
        setInterval(() => {
            if (secs > 0) {
                secs--;
            } else {
                secs = 59;
                if (mins > 0) {
                    mins--;
                } else {
                    mins = 59;
                    if (hours > 0) hours--;
                }
            }
            const timerEl = document.getElementById('flashTimerTop');
            if (timerEl) {
                const prefix = "{{ app()->getLocale() === 'it' ? 'Offerte Lampo terminano tra' : 'Flash Sale Ends in' }}";
                timerEl.textContent = `${prefix} ${String(hours).padStart(2, '0')}h:${String(mins).padStart(2, '0')}m:${String(secs).padStart(2, '0')}s`;
            }
        }, 1000);
    })();
</script>
@endpush
@endsection