@extends('layouts.app')

@section('content')
    <!-- ═══════════════════════════════════════════
         HERO SLIDER — Cinematic Fullscreen
         ═══════════════════════════════════════════ -->
    <section class="relative h-[75vh] sm:h-[85vh] md:h-screen overflow-hidden bg-black">
        @forelse($slides as $index => $slide)
            <div class="slide {{ $index === 0 ? 'active' : '' }} absolute inset-0 flex items-center justify-center text-center">
                <img src="{{ asset('uploads/' . $slide->image_path) }}"
                    class="absolute inset-0 w-full h-full object-cover opacity-50 scale-105"
                    alt="{{ $slide->title }}">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                <div class="slide-content relative z-10 px-6 max-w-4xl">
                    <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 mb-6">
                        <span class="w-1.5 h-1.5 rounded-full bg-rose-400 animate-pulse"></span>
                        <span class="text-white/90 uppercase tracking-[0.4em] text-[10px] font-medium">{{ $slide->subtitle }}</span>
                    </div>
                    <h1 class="font-brand text-4xl sm:text-6xl md:text-8xl mb-4 sm:mb-6 text-white font-light italic leading-[0.95]">{{ $slide->title }}</h1>
                    <p class="text-white/70 text-sm md:text-base mb-8 max-w-2xl mx-auto leading-relaxed font-light">
                        {{ $slide->description }}</p>
                    @if($slide->button_text && $slide->button_link)
                        <a href="{{ $slide->button_link }}"
                            class="inline-flex items-center gap-3 bg-white text-gray-900 px-10 py-4 text-[10px] uppercase tracking-[0.25em] font-semibold hover:bg-rose-500 hover:text-white transition-all duration-500 rounded-full group">
                            {{ $slide->button_text }}
                            <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                        </a>
                    @endif
                </div>
            </div>
        @empty
            <div class="slide active absolute inset-0 flex items-center justify-center text-center">
                <img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&q=80&w=1600"
                    class="absolute inset-0 w-full h-full object-cover opacity-50 scale-105"
                    alt="OraFresh Collection">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent"></div>
                <div class="slide-content relative z-10 px-6 max-w-4xl">
                    <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-full px-5 py-2 mb-6">
                        <span class="w-1.5 h-1.5 rounded-full bg-rose-400 animate-pulse"></span>
                        <span class="text-white/90 uppercase tracking-[0.4em] text-[10px] font-medium">Nouvelle Collection</span>
                    </div>
                    <h1 class="font-brand text-4xl sm:text-6xl md:text-8xl mb-4 sm:mb-6 text-white font-light italic leading-[0.95]">Beauté Naturelle</h1>
                    <p class="text-white/70 text-sm md:text-base mb-8 max-w-2xl mx-auto leading-relaxed font-light">
                        Découvrez notre gamme de soins naturels pour sublimer votre beauté</p>
                    <a href="{{ route('shop') }}"
                        class="inline-flex items-center gap-3 bg-white text-gray-900 px-10 py-4 text-[10px] uppercase tracking-[0.25em] font-semibold hover:bg-rose-500 hover:text-white transition-all duration-500 rounded-full group">
                        Découvrir
                        <i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
                    </a>
                </div>
            </div>
        @endforelse

        <!-- Hero Navigation -->
        <button onclick="prevSlide()"
            class="absolute left-4 sm:left-8 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center text-white hover:bg-white hover:text-gray-900 transition-all duration-400">
            <i data-lucide="chevron-left" class="w-5 h-5"></i>
        </button>
        <button onclick="nextSlide()"
            class="absolute right-4 sm:right-8 top-1/2 -translate-y-1/2 z-20 w-12 h-12 rounded-full bg-white/10 backdrop-blur-md border border-white/20 flex items-center justify-center text-white hover:bg-white hover:text-gray-900 transition-all duration-400">
            <i data-lucide="chevron-right" class="w-5 h-5"></i>
        </button>

        <!-- Slide Indicators -->
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-20 flex gap-2">
            @php $slideCount = $slides->count() ?: 1; @endphp
            @for($i = 0; $i < $slideCount; $i++)
                <button onclick="goToSlide({{ $i }})"
                    class="slide-dot w-8 h-[3px] rounded-full transition-all duration-500 {{ $i === 0 ? 'bg-white w-12' : 'bg-white/40' }}"></button>
            @endfor
        </div>
    </section>

    <!-- ═══════════════════════════════════════════
         TRUST BAR — Brand Promises
         ═══════════════════════════════════════════ -->
    <section class="bg-white border-b border-gray-100 py-5 sm:py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex flex-wrap justify-center gap-6 sm:gap-12 text-center">
                <div class="flex items-center gap-2.5">
                    <i data-lucide="leaf" class="w-4 h-4 text-emerald-500"></i>
                    <span class="text-[11px] uppercase tracking-[0.2em] text-gray-500 font-medium">100% Naturel</span>
                </div>
                <div class="flex items-center gap-2.5">
                    <i data-lucide="truck" class="w-4 h-4 text-rose-400"></i>
                    <span class="text-[11px] uppercase tracking-[0.2em] text-gray-500 font-medium">Livraison Offerte dès 60DT</span>
                </div>
                <div class="flex items-center gap-2.5">
                    <i data-lucide="shield-check" class="w-4 h-4 text-blue-400"></i>
                    <span class="text-[11px] uppercase tracking-[0.2em] text-gray-500 font-medium">Paiement Sécurisé</span>
                </div>
                <div class="flex items-center gap-2.5">
                    <i data-lucide="award" class="w-4 h-4 text-amber-400"></i>
                    <span class="text-[11px] uppercase tracking-[0.2em] text-gray-500 font-medium">Qualité Certifiée</span>
                </div>
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════
         BEST-SELLERS — Swiper Carousel (4 slides)
         ═══════════════════════════════════════════ -->
    <section class="py-12 sm:py-20 bg-gradient-to-b from-white via-rose-50/20 to-white overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <!-- Section Header -->
            <div class="flex flex-col sm:flex-row justify-between sm:items-end gap-4 mb-8 sm:mb-14">
                <div>
                    <span class="section-badge section-badge-rose mb-4 inline-flex">
                        <i data-lucide="heart" class="w-3 h-3"></i>
                        Les Favoris
                    </span>
                    <h2 class="font-brand text-3xl sm:text-5xl text-gray-900 font-light italic leading-tight">Nos Best-Sellers</h2>
                    <p class="text-gray-400 text-sm mt-2 max-w-md font-light">Les produits préférés de notre communauté, sélectionnés pour leur efficacité exceptionnelle.</p>
                </div>
                <div class="flex gap-2">
                    <button id="best-prev" class="swiper-nav-btn">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    </button>
                    <button id="best-next" class="swiper-nav-btn">
                        <i data-lucide="arrow-right" class="w-4 h-4"></i>
                    </button>
                </div>
            </div>

            <!-- Swiper Container -->
            <div class="swiper best-sellers-swiper">
                <div class="swiper-wrapper">
                    @foreach($bestSellers as $best)
                        <div class="swiper-slide">
                            <x-product-card :product="$best" />
                        </div>
                    @endforeach
                </div>
                <!-- Pagination -->
                <div class="swiper-custom-pagination best-pagination"></div>
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════
         PROMOTIONS — Swiper Carousel (4 slides)
         ═══════════════════════════════════════════ -->
    @if($promoProducts->count() > 0)
        <section class="py-12 sm:py-20 bg-gradient-to-br from-amber-50/50 via-orange-50/30 to-rose-50/50 overflow-hidden relative">
            <!-- Decorative Elements -->
            <div class="absolute top-10 right-10 w-72 h-72 bg-gradient-to-br from-orange-200/20 to-rose-200/20 rounded-full blur-3xl pointer-events-none"></div>
            <div class="absolute bottom-10 left-10 w-52 h-52 bg-gradient-to-br from-amber-200/20 to-orange-200/20 rounded-full blur-3xl pointer-events-none"></div>

            <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
                <!-- Section Header -->
                <div class="flex flex-col sm:flex-row justify-between sm:items-end gap-4 mb-8 sm:mb-14">
                    <div>
                        <span class="section-badge section-badge-amber mb-4 inline-flex">
                            <i data-lucide="zap" class="w-3 h-3"></i>
                            Offres Limitées
                        </span>
                        <h2 class="font-brand text-3xl sm:text-5xl text-gray-900 font-light italic leading-tight">Promotions Exclusives</h2>
                        <p class="text-gray-400 text-sm mt-2 max-w-md font-light">Profitez de nos offres exceptionnelles pour une durée limitée. Ne les manquez pas !</p>
                    </div>
                    <div class="flex gap-2">
                        <button id="promo-prev" class="swiper-nav-btn">
                            <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        </button>
                        <button id="promo-next" class="swiper-nav-btn">
                            <i data-lucide="arrow-right" class="w-4 h-4"></i>
                        </button>
                    </div>
                </div>

                <!-- Swiper Container -->
                <div class="swiper promo-swiper">
                    <div class="swiper-wrapper">
                        @foreach($promoProducts as $promo)
                            <div class="swiper-slide">
                                <x-product-card :product="$promo" />
                            </div>
                        @endforeach
                    </div>
                    <!-- Pagination -->
                    <div class="swiper-custom-pagination promo-pagination"></div>
                </div>
            </div>
        </section>
    @endif

    <!-- ═══════════════════════════════════════════
         COLLECTIONS / UNIVERS — Immersive Grid
         ═══════════════════════════════════════════ -->
    <section class="py-12 sm:py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="text-center mb-10 sm:mb-16">
                <span class="section-badge section-badge-rose mb-4 inline-flex mx-auto">
                    <i data-lucide="sparkles" class="w-3 h-3"></i>
                    Collections
                </span>
                <h2 class="font-brand text-3xl sm:text-5xl text-gray-900 font-light italic">Explorer nos Univers</h2>
                <div class="elegant-divider mx-auto mt-4"></div>
            </div>

            <!-- Navigation mobile -->
            <div class="flex justify-end gap-2 mb-6 md:hidden">
                <button onclick="scrollCategoriesPrev()" class="swiper-nav-btn">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                </button>
                <button onclick="scrollCategoriesNext()" class="swiper-nav-btn">
                    <i data-lucide="arrow-right" class="w-4 h-4"></i>
                </button>
            </div>

            <div id="categories-container"
                class="flex md:grid md:grid-cols-3 gap-5 sm:gap-6 overflow-x-auto md:overflow-x-visible no-scrollbar snap-x snap-mandatory md:snap-none pb-4 md:pb-0">
                @forelse($categories->take(3) as $category)
                    <a href="{{ route('shop', ['category' => $category->slug]) }}"
                        class="snap-start min-w-[80vw] sm:min-w-[360px] md:min-w-0 relative group cursor-pointer overflow-hidden h-[400px] md:h-[480px] rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-700 flex-shrink-0 md:flex-shrink">
                        <img src="{{ $category->image_path ? asset('uploads/' . $category->image_path) : 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?auto=format&fit=crop&q=80&w=800' }}"
                            class="w-full h-full object-cover transition duration-700 group-hover:scale-110"
                            alt="{{ $category->name }}">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col items-center justify-end pb-10 px-6 group-hover:from-black/80 transition-all duration-500">
                            <h3 class="font-brand text-white text-2xl md:text-3xl mb-3 italic text-center font-light">{{ $category->name }}</h3>
                            <span class="text-white text-[10px] uppercase tracking-[0.3em] bg-white/15 backdrop-blur-md px-6 py-2.5 rounded-full border border-white/20 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-500">Découvrir</span>
                        </div>
                    </a>
                @empty
                    <a href="#"
                        class="snap-start min-w-[80vw] sm:min-w-[360px] md:min-w-0 relative group cursor-pointer overflow-hidden h-[400px] md:h-[480px] rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-700 flex-shrink-0 md:flex-shrink">
                        <img src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?auto=format&fit=crop&q=80&w=800"
                            class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col items-center justify-end pb-10 px-6 group-hover:from-black/80 transition-all duration-500">
                            <h3 class="font-brand text-white text-2xl md:text-3xl mb-3 italic text-center font-light">Soins Visage</h3>
                            <span class="text-white text-[10px] uppercase tracking-[0.3em] bg-white/15 backdrop-blur-md px-6 py-2.5 rounded-full border border-white/20 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-500">Découvrir</span>
                        </div>
                    </a>
                    <a href="#"
                        class="snap-start min-w-[80vw] sm:min-w-[360px] md:min-w-0 relative group cursor-pointer overflow-hidden h-[400px] md:h-[480px] rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-700 flex-shrink-0 md:flex-shrink">
                        <img src="https://images.unsplash.com/photo-1571875257727-256c39da42af?auto=format&fit=crop&q=80&w=800"
                            class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col items-center justify-end pb-10 px-6 group-hover:from-black/80 transition-all duration-500">
                            <h3 class="font-brand text-white text-2xl md:text-3xl mb-3 italic text-center font-light">Maquillage</h3>
                            <span class="text-white text-[10px] uppercase tracking-[0.3em] bg-white/15 backdrop-blur-md px-6 py-2.5 rounded-full border border-white/20 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-500">Découvrir</span>
                        </div>
                    </a>
                    <a href="#"
                        class="snap-start min-w-[80vw] sm:min-w-[360px] md:min-w-0 relative group cursor-pointer overflow-hidden h-[400px] md:h-[480px] rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-700 flex-shrink-0 md:flex-shrink">
                        <img src="https://images.unsplash.com/photo-1591360236480-4ed861025fa1?auto=format&fit=crop&q=80&w=800"
                            class="w-full h-full object-cover transition duration-700 group-hover:scale-110">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent flex flex-col items-center justify-end pb-10 px-6 group-hover:from-black/80 transition-all duration-500">
                            <h3 class="font-brand text-white text-2xl md:text-3xl mb-3 italic text-center font-light">Parfums</h3>
                            <span class="text-white text-[10px] uppercase tracking-[0.3em] bg-white/15 backdrop-blur-md px-6 py-2.5 rounded-full border border-white/20 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 transition-all duration-500">Découvrir</span>
                        </div>
                    </a>
                @endforelse
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════
         FEATURED PROJECT — Premium Showcase
         ═══════════════════════════════════════════ -->
    <section class="py-12 sm:py-20 bg-gradient-to-b from-gray-50 to-white overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-10 sm:mb-16 gap-4">
                <div class="max-w-xl">
                    <span class="section-badge section-badge-rose mb-4 inline-flex">
                        <i data-lucide="gem" class="w-3 h-3"></i>
                        Réalisations
                    </span>
                    <h2 class="font-brand text-3xl sm:text-5xl text-gray-900 font-light italic leading-tight">Notre Dernier Projet</h2>
                    <p class="text-gray-400 text-sm mt-3 leading-relaxed max-w-md font-light">Découvrez comment nous transformons les espaces avec nos solutions de beauté et de bien-être sur mesure.</p>
                </div>
                <div class="hidden md:block">
                    <a href="#" class="group inline-flex items-center gap-4 text-[10px] uppercase tracking-[0.4em] text-gray-400 hover:text-rose-500 transition-colors">
                        <span>Voir tous nos projets</span>
                        <div class="w-12 h-[1px] bg-gray-200 group-hover:w-16 group-hover:bg-rose-400 transition-all duration-500"></div>
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 sm:gap-10 items-center">
                <!-- Project Card -->
                <div class="lg:col-span-8 order-2 lg:order-1">
                    <x-project-card
                        title="Hôtel Luxury Spa & Wellness Resort"
                        category="Spa Intérieur"
                        date="Janvier 2024"
                        image="https://images.unsplash.com/photo-1544161515-4af6b1d4640b?auto=format&fit=crop&q=80&w=1200"
                        description="Un aménagement complet pour un espace de bien-être haut de gamme, alliant matériaux nobles et design moderne. Création d'une ambiance sereine et luxueuse pour une clientèle exigeante."
                        class="h-[350px] sm:h-[450px] lg:h-[600px]"
                    />
                </div>

                <!-- Side Info -->
                <div class="lg:col-span-4 space-y-8 order-1 lg:order-2">
                    <div class="p-7 bg-white rounded-3xl border border-gray-100 shadow-sm">
                        <h4 class="font-brand text-xl italic text-gray-900 mb-5">Pourquoi nos projets ?</h4>
                        <ul class="space-y-5">
                            <li class="flex gap-4">
                                <div class="flex-shrink-0 w-10 h-10 rounded-2xl bg-gradient-to-br from-rose-50 to-pink-50 flex items-center justify-center text-rose-500">
                                    <i data-lucide="award" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-gray-900 uppercase tracking-widest mb-1">Qualité Premium</p>
                                    <p class="text-[13px] text-gray-400 leading-relaxed">Matériaux rigoureusement sélectionnés pour leur durabilité.</p>
                                </div>
                            </li>
                            <li class="flex gap-4">
                                <div class="flex-shrink-0 w-10 h-10 rounded-2xl bg-gradient-to-br from-rose-50 to-pink-50 flex items-center justify-center text-rose-500">
                                    <i data-lucide="palette" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-gray-900 uppercase tracking-widest mb-1">Design Unique</p>
                                    <p class="text-[13px] text-gray-400 leading-relaxed">Une esthétique raffinée adaptée à votre identité de marque.</p>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <div class="px-2 flex flex-col gap-5">
                        <div class="flex items-center gap-4">
                            <div class="flex -space-x-3 overflow-hidden">
                                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
                            </div>
                            <p class="text-xs text-gray-400 font-medium">Rejoint par <span class="text-gray-700">+50</span> partenaires</p>
                        </div>
                        <button class="w-full bg-gray-900 text-white rounded-full py-4 text-[10px] uppercase tracking-[0.25em] font-semibold hover:bg-rose-500 transition-all duration-500 shadow-lg hover:shadow-xl hover:shadow-rose-200">
                            Commencer votre projet
                        </button>
                    </div>
                </div>
            </div>

            <!-- Mobile View Link -->
            <div class="mt-10 md:hidden text-center">
                <a href="#" class="inline-flex items-center gap-2 text-[10px] uppercase tracking-[0.3em] text-rose-500 font-bold">
                    <span>Voir tous nos projets</span>
                    <i data-lucide="arrow-right" class="w-3 h-3"></i>
                </a>
            </div>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════
         NEWSLETTER — Elegant CTA
         ═══════════════════════════════════════════ -->
    <section class="py-14 sm:py-24 bg-gradient-to-br from-rose-50 via-pink-50/50 to-amber-50/30 relative overflow-hidden">
        <!-- Decorative Blobs -->
        <div class="absolute top-0 left-1/4 w-96 h-96 bg-rose-200/20 rounded-full blur-3xl pointer-events-none"></div>
        <div class="absolute bottom-0 right-1/4 w-80 h-80 bg-pink-200/20 rounded-full blur-3xl pointer-events-none"></div>

        <div class="max-w-2xl mx-auto px-4 sm:px-6 text-center relative z-10">
            <span class="section-badge section-badge-rose mb-6 inline-flex mx-auto">
                <i data-lucide="mail" class="w-3 h-3"></i>
                Newsletter
            </span>
            <h2 class="font-brand text-3xl sm:text-5xl mb-4 text-gray-900 font-light italic">Rejoignez l'univers OraFresh</h2>
            <p class="text-gray-500 text-sm mb-8 sm:mb-10 font-light max-w-md mx-auto leading-relaxed">Recevez nos offres exclusives, conseils beauté et accédez en avant-première à nos nouvelles collections.</p>

            @if(session('success'))
                <div class="mb-6 bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-full text-sm">
                    {{ session('success') }}
                </div>
            @endif

            @if($errors->has('email'))
                <div class="mb-6 bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-full text-sm">
                    {{ $errors->first('email') }}
                </div>
            @endif

            <form action="{{ route('newsletter.subscribe') }}" method="POST"
                class="flex flex-col sm:flex-row gap-3 sm:gap-4 items-stretch sm:items-center max-w-lg mx-auto">
                @csrf
                <input type="email" name="email" placeholder="Votre adresse email" required
                    class="w-full bg-white border border-gray-200 rounded-full py-3.5 sm:py-4 px-6 text-sm focus:border-rose-400 focus:ring-2 focus:ring-rose-100 outline-none transition shadow-sm">
                <button type="submit"
                    class="whitespace-nowrap bg-gray-900 text-white px-8 sm:px-10 py-3.5 sm:py-4 text-[10px] uppercase tracking-[0.2em] font-semibold hover:bg-rose-500 transition-all duration-500 rounded-full shadow-lg hover:shadow-xl">S'inscrire</button>
            </form>

            <p class="text-[11px] text-gray-400 mt-5">En vous inscrivant, vous acceptez notre politique de confidentialité. Désinscription possible à tout moment.</p>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        // ═══════════════════════════════════════════
        // HERO SLIDER LOGIC
        // ═══════════════════════════════════════════
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.slide-dot');

        function showSlide(index) {
            slides.forEach(s => s.classList.remove('active'));
            if (index >= slides.length) currentSlide = 0;
            if (index < 0) currentSlide = slides.length - 1;
            slides[currentSlide].classList.add('active');

            // Update dots
            dots.forEach((d, i) => {
                if (i === currentSlide) {
                    d.classList.add('bg-white', 'w-12');
                    d.classList.remove('bg-white/40');
                } else {
                    d.classList.remove('bg-white', 'w-12');
                    d.classList.add('bg-white/40');
                }
            });
        }
        function nextSlide() { currentSlide++; showSlide(currentSlide); }
        function prevSlide() { currentSlide--; showSlide(currentSlide); }
        function goToSlide(i) { currentSlide = i; showSlide(currentSlide); }
        setInterval(nextSlide, 5000);

        // ═══════════════════════════════════════════
        // SWIPER: BEST-SELLERS
        // ═══════════════════════════════════════════
        const bestSellersSwiper = new Swiper('.best-sellers-swiper', {
            slidesPerView: 1.3,
            spaceBetween: 12,
            speed: 700,
            grabCursor: true,
            autoplay: {
                delay: 3500,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
            pagination: {
                el: '.best-pagination',
                clickable: true,
                bulletClass: 'swiper-pagination-bullet',
                bulletActiveClass: 'swiper-pagination-bullet-active',
            },
            navigation: {
                prevEl: '#best-prev',
                nextEl: '#best-next',
            },
            breakpoints: {
                480: { slidesPerView: 2, spaceBetween: 14 },
                768: { slidesPerView: 3, spaceBetween: 18 },
                1024: { slidesPerView: 4, spaceBetween: 20 },
            },
            on: {
                init: function() {
                    if (typeof lucide !== 'undefined') {
                        setTimeout(() => lucide.createIcons(), 200);
                    }
                },
                slideChange: function() {
                    if (typeof lucide !== 'undefined') {
                        setTimeout(() => lucide.createIcons(), 200);
                    }
                }
            }
        });

        // ═══════════════════════════════════════════
        // SWIPER: PROMOTIONS
        // ═══════════════════════════════════════════
        const promoSwiper = new Swiper('.promo-swiper', {
            slidesPerView: 1.3,
            spaceBetween: 12,
            speed: 700,
            grabCursor: true,
            autoplay: {
                delay: 4000,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },
            pagination: {
                el: '.promo-pagination',
                clickable: true,
                bulletClass: 'swiper-pagination-bullet',
                bulletActiveClass: 'swiper-pagination-bullet-active',
            },
            navigation: {
                prevEl: '#promo-prev',
                nextEl: '#promo-next',
            },
            breakpoints: {
                480: { slidesPerView: 2, spaceBetween: 14 },
                768: { slidesPerView: 3, spaceBetween: 18 },
                1024: { slidesPerView: 4, spaceBetween: 20 },
            },
            on: {
                init: function() {
                    if (typeof lucide !== 'undefined') {
                        setTimeout(() => lucide.createIcons(), 200);
                    }
                },
                slideChange: function() {
                    if (typeof lucide !== 'undefined') {
                        setTimeout(() => lucide.createIcons(), 200);
                    }
                }
            }
        });

        // ═══════════════════════════════════════════
        // CATEGORIES SCROLL LOGIC
        // ═══════════════════════════════════════════
        function scrollCategoriesNext() {
            const categoriesContainer = document.getElementById('categories-container');
            const scrollAmount = window.innerWidth < 640 ? window.innerWidth * 0.82 : 380;
            categoriesContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
        }
        function scrollCategoriesPrev() {
            const categoriesContainer = document.getElementById('categories-container');
            const scrollAmount = window.innerWidth < 640 ? window.innerWidth * 0.82 : 380;
            categoriesContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
        }

        // ═══════════════════════════════════════════
        // FADE-UP ON SCROLL ANIMATION
        // ═══════════════════════════════════════════
        const fadeElements = document.querySelectorAll('.fade-up');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, { threshold: 0.15, rootMargin: '0px 0px -50px 0px' });
        fadeElements.forEach(el => observer.observe(el));

        // Re-initialize Lucide icons
        if (typeof lucide !== 'undefined') {
            setTimeout(() => lucide.createIcons(), 300);
        }
    </script>
@endpush