@extends('layouts.app')
@section('title', 'Accueil')

@section('content')

{{-- ═══ HERO SLIDER ═══ --}}
<section
    class="relative overflow-hidden"
    style="min-height: 600px;"
    x-data="{
        current: 0,
        total: 3,
        timer: null,
        transitioning: false,
        slides: [
            {
                img:     '{{ asset('images/hero-banner.jpg') }}',
                badge:   'Nouveaux Arrivages 2026',
                title:   'Accessoires\nMobiles Premium',
                accent:  'Mobiles Premium',
                desc:    'Coques, chargeurs, batteries et écouteurs pour iPhone et Android. Qualité garantie, livraison rapide.',
                btn1:    { label: 'Voir nos produits',  href: '{{ route('products') }}',  icon: 'shopping-bag' },
                btn2:    { label: 'Nous contacter',     href: '{{ route('contact') }}',   icon: 'headset' },
                stats:   [['500+','Produits'],['1000+','Clients'],['48h','Livraison'],['5★','Service']],
                product: { img: '{{ asset('storage/products/iphone-case-1.jpg') }}', name: 'Coque iPhone 15 Pro Max', price: '850 FCFA' }
            },
            {
                img:     '{{ asset('images/hero-tech.jpg') }}',
                badge:   'Charge Rapide & Câbles',
                title:   'Chargeurs\nUltra Rapides',
                accent:  'Ultra Rapides',
                desc:    'Des chargeurs GaN 65W, câbles MFi certifiés et stations de recharge sans fil pour tous vos appareils.',
                btn1:    { label: 'Voir les chargeurs', href: '{{ route('products', ['category' => 'chargeurs']) }}', icon: 'bolt' },
                btn2:    { label: 'Commander',          href: '{{ route('products') }}',  icon: 'shopping-bag' },
                stats:   [['65W','Charge rapide'],['MFi','Certifié'],['3en1','Multi-port'],['1an','Garantie']],
                product: { img: '{{ asset('storage/products/charger-65w.jpg') }}', name: 'Chargeur GaN 65W', price: '1 800 FCFA' }
            },
            {
                img:     '{{ asset('images/slide-3.jpg') }}',
                badge:   'Qualité & Protection',
                title:   'Écouteurs &\nAudio Premium',
                accent:  'Audio Premium',
                desc:    'Écouteurs TWS avec réduction de bruit active, bluetooth 5.3 et jusqu\'à 30h d\'autonomie totale.',
                btn1:    { label: 'Voir les écouteurs', href: '{{ route('products', ['category' => 'ecouteurs']) }}', icon: 'headphones' },
                btn2:    { label: 'Tout le catalogue',  href: '{{ route('products') }}',  icon: 'shopping-bag' },
                stats:   [['ANC','-30dB bruit'],['30h','Autonomie'],['IPX5','Étanche'],['BT 5.3','Bluetooth']],
                product: { img: '{{ asset('storage/products/earphones.jpg') }}', name: 'Écouteurs TWS Pro ANC', price: '2 500 FCFA' }
            }
        ],
        start() {
            this.timer = setInterval(() => this.next(), 5500)
        },
        stop() {
            clearInterval(this.timer)
        },
        next() {
            if (this.transitioning) return
            this.transitioning = true
            this.current = (this.current + 1) % this.total
            setTimeout(() => this.transitioning = false, 700)
        },
        prev() {
            if (this.transitioning) return
            this.transitioning = true
            this.current = (this.current - 1 + this.total) % this.total
            setTimeout(() => this.transitioning = false, 700)
        },
        goTo(i) {
            if (i === this.current || this.transitioning) return
            this.transitioning = true
            this.current = i
            this.stop(); this.start()
            setTimeout(() => this.transitioning = false, 700)
        }
    }"
    x-init="start()"
    @mouseenter="stop()"
    @mouseleave="start()"
>

    {{-- ── Slides images ── --}}
    <template x-for="(slide, index) in slides" :key="index">
        <div
            class="absolute inset-0 transition-opacity duration-700"
            :class="current === index ? 'opacity-100 z-10' : 'opacity-0 z-0'"
        >
            <img :src="slide.img"
                 :alt="slide.badge"
                 class="w-full h-full object-cover object-center">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-950/90 via-blue-900/75 to-blue-800/40"></div>
        </div>
    </template>

    {{-- Decorative blobs --}}
    <div class="absolute top-0 right-0 w-96 h-96 bg-amber-400/10 rounded-full -translate-y-1/2 translate-x-1/3 blur-3xl pointer-events-none z-20"></div>
    <div class="absolute bottom-0 left-1/3 w-64 h-64 bg-blue-400/10 rounded-full translate-y-1/2 blur-2xl pointer-events-none z-20"></div>

    {{-- ── Contenu des slides ── --}}
    <div class="relative z-30 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 min-h-[600px] flex items-center w-full">
        <template x-for="(slide, index) in slides" :key="'content-'+index">
            <div
                class="w-full transition-all duration-700"
                :class="current === index
                    ? 'opacity-100 translate-y-0'
                    : 'opacity-0 translate-y-4 absolute pointer-events-none'"
            >
                <div class="grid md:grid-cols-2 gap-10 items-center">

                    {{-- Texte --}}
                    <div>
                        <span class="inline-flex items-center gap-2 bg-amber-400/20 border border-amber-400/40 text-amber-300 text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider mb-5">
                            <span class="w-1.5 h-1.5 bg-amber-400 rounded-full animate-pulse"></span>
                            <span x-text="slide.badge"></span>
                        </span>

                        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight mb-5 drop-shadow-xl">
                            <template x-for="(part, pi) in slide.title.split('\n')" :key="pi">
                                <span>
                                    <span x-show="pi === 0" x-text="part" class="block"></span>
                                    <span x-show="pi === 1" x-text="part"
                                          class="block text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500"></span>
                                </span>
                            </template>
                        </h1>

                        <p class="text-blue-100 text-lg leading-relaxed mb-8 max-w-lg drop-shadow" x-text="slide.desc"></p>

                        <div class="flex flex-wrap gap-4 mb-10">
                            <a :href="slide.btn1.href"
                               class="group inline-flex items-center gap-2 bg-gradient-to-r from-amber-400 to-amber-500 hover:from-amber-500 hover:to-amber-600 text-amber-950 font-bold px-7 py-3.5 rounded-full shadow-lg shadow-amber-500/30 transition-all duration-200 hover:-translate-y-0.5">
                                <i :class="'fas fa-' + slide.btn1.icon"></i>
                                <span x-text="slide.btn1.label"></span>
                                <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
                            </a>
                            <a :href="slide.btn2.href"
                               class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/30 text-white font-semibold px-7 py-3.5 rounded-full backdrop-blur transition-all duration-200">
                                <i :class="'fas fa-' + slide.btn2.icon"></i>
                                <span x-text="slide.btn2.label"></span>
                            </a>
                        </div>

                        {{-- Stats --}}
                        <div class="flex flex-wrap gap-5 text-white">
                            <template x-for="(stat, si) in slide.stats" :key="si">
                                <div class="flex items-center gap-3">
                                    <div x-show="si > 0" class="w-px h-8 bg-white/20"></div>
                                    <div class="text-center">
                                        <div class="text-2xl font-extrabold text-amber-400" x-text="stat[0]"></div>
                                        <div class="text-xs text-blue-200 mt-0.5 uppercase tracking-wide" x-text="stat[1]"></div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- Carte produit mise en avant --}}
                    <div class="hidden md:flex justify-end">
                        <div class="relative w-[300px] xl:w-[340px]">
                            <div class="bg-white/10 backdrop-blur-md border border-white/20 rounded-3xl p-5 shadow-2xl">
                                <div class="aspect-square rounded-2xl overflow-hidden bg-white/5 mb-4">
                                    <img :src="slide.product.img"
                                         :alt="slide.product.name"
                                         class="w-full h-full object-cover">
                                </div>
                                <div class="flex items-end justify-between">
                                    <div>
                                        <p class="text-white/60 text-xs mb-0.5">Produit phare</p>
                                        <p class="text-white font-bold text-sm" x-text="slide.product.name"></p>
                                        <p class="text-amber-400 font-extrabold text-lg mt-1" x-text="slide.product.price"></p>
                                    </div>
                                    <a href="{{ route('products') }}"
                                       class="w-10 h-10 bg-amber-400 hover:bg-amber-500 rounded-xl flex items-center justify-center text-amber-900 transition-colors">
                                        <i class="fas fa-cart-plus text-sm"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="absolute -top-4 -left-6 bg-white rounded-2xl px-3 py-2 shadow-xl flex items-center gap-2">
                                <div class="w-7 h-7 bg-green-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-shield-alt text-green-600 text-xs"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-gray-800 leading-tight">Garantie</p>
                                    <p class="text-xs text-gray-400">Qualité certifiée</p>
                                </div>
                            </div>
                            <div class="absolute -bottom-4 -right-4 bg-white rounded-2xl px-3 py-2 shadow-xl flex items-center gap-2">
                                <div class="w-7 h-7 bg-blue-100 rounded-lg flex items-center justify-center">
                                    <i class="fas fa-truck text-blue-600 text-xs"></i>
                                </div>
                                <div>
                                    <p class="text-xs font-bold text-gray-800 leading-tight">Livraison</p>
                                    <p class="text-xs text-gray-400">Rapide & fiable</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>

    {{-- ── Flèches navigation ── --}}
    <button @click="prev()"
            class="absolute left-3 sm:left-5 top-1/2 -translate-y-1/2 z-40 w-10 h-10 sm:w-12 sm:h-12 bg-white/15 hover:bg-white/30 border border-white/25 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all duration-200 hover:scale-110">
        <i class="fas fa-chevron-left text-sm"></i>
    </button>
    <button @click="next()"
            class="absolute right-3 sm:right-5 top-1/2 -translate-y-1/2 z-40 w-10 h-10 sm:w-12 sm:h-12 bg-white/15 hover:bg-white/30 border border-white/25 text-white rounded-full flex items-center justify-center backdrop-blur-sm transition-all duration-200 hover:scale-110">
        <i class="fas fa-chevron-right text-sm"></i>
    </button>

    {{-- ── Indicateurs (dots) ── --}}
    <div class="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-2.5">
        <template x-for="(slide, index) in slides" :key="'dot-'+index">
            <button
                @click="goTo(index)"
                :class="current === index
                    ? 'w-8 bg-amber-400'
                    : 'w-2.5 bg-white/40 hover:bg-white/70'"
                class="h-2.5 rounded-full transition-all duration-300"
            ></button>
        </template>
    </div>

    {{-- ── Barre de progression ── --}}
    <div class="absolute bottom-0 left-0 right-0 z-40 h-0.5 bg-white/10">
        <div
            class="h-full bg-amber-400 transition-none"
            x-ref="progressBar"
            style="width: 0%"
            x-init="
                $watch('current', () => {
                    $refs.progressBar.style.transition = 'none';
                    $refs.progressBar.style.width = '0%';
                    setTimeout(() => {
                        $refs.progressBar.style.transition = 'width 5.5s linear';
                        $refs.progressBar.style.width = '100%';
                    }, 50);
                });
                setTimeout(() => {
                    $refs.progressBar.style.transition = 'width 5.5s linear';
                    $refs.progressBar.style.width = '100%';
                }, 50);
            "
        ></div>
    </div>

</section>

{{-- ═══ TICKER PROMOTIONS (affiché seulement si des offres existent) ═══ --}}
@if($promotions->isNotEmpty())
<div class="bg-gradient-to-r from-amber-500 via-amber-400 to-amber-500 text-amber-950 overflow-hidden relative" style="height:36px;">

    {{-- Étiquette fixe --}}
    <div class="absolute left-0 top-0 bottom-0 z-10 flex items-center bg-amber-600 text-white px-4 gap-2 shadow-md" style="min-width:max-content;">
        <i class="fas fa-fire text-xs animate-pulse"></i>
        <span class="text-xs font-extrabold uppercase tracking-widest whitespace-nowrap">Promotions</span>
    </div>

    {{-- Contenu défilant --}}
    <div class="flex items-center h-full" style="padding-left:120px;">
        <div class="ticker-track flex items-center gap-0 whitespace-nowrap">
            @php
                $tickerItems = $promotions->map(fn($p) =>
                    ($p->discount_text ? '🔥 '.$p->discount_text.' — ' : '✨ ') .
                    $p->title .
                    ($p->subtitle ? ' · '.$p->subtitle : '')
                )->implode('     ⬥     ');
            @endphp

            {{-- Dupliqué 3× pour un défilement continu sans saut --}}
            @foreach([1,2,3] as $_)
            <span class="text-xs font-bold tracking-wide pr-20">{{ $tickerItems }}</span>
            @endforeach
        </div>
    </div>

</div>

<style>
.ticker-track {
    animation: tickerScroll 30s linear infinite;
    will-change: transform;
}
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.333%); }
}
.ticker-track:hover {
    animation-play-state: paused;
}
</style>
@endif

{{-- ═══ TRUST BADGES ═══ --}}
<section class="bg-white border-b border-gray-100 shadow-sm">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            @foreach([
                ['icon' => 'truck',       'color' => 'blue',   'label' => 'Livraison rapide',    'sub' => 'Partout en Algérie'],
                ['icon' => 'shield-alt',  'color' => 'green',  'label' => 'Produits garantis',   'sub' => 'Qualité certifiée'],
                ['icon' => 'headset',     'color' => 'amber',  'label' => 'Support 7j/7',        'sub' => 'À votre service'],
                ['icon' => 'undo',        'color' => 'purple', 'label' => 'Retour facile',       'sub' => '7 jours pour changer'],
            ] as $b)
            <div class="flex items-center gap-3 py-1">
                <div class="w-10 h-10 bg-{{ $b['color'] }}-50 rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-{{ $b['icon'] }} text-{{ $b['color'] }}-600 text-base"></i>
                </div>
                <div>
                    <p class="text-sm font-semibold text-gray-800">{{ $b['label'] }}</p>
                    <p class="text-xs text-gray-400">{{ $b['sub'] }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ═══ CATEGORIES ═══ --}}
@if($categories->isNotEmpty())
<section class="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-10">
        <span class="inline-block text-blue-600 font-semibold text-sm uppercase tracking-wide mb-2">Catalogue</span>
        <h2 class="text-3xl font-extrabold text-gray-900">
            Parcourez nos <span class="text-blue-700">Catégories</span>
        </h2>
        <p class="text-gray-500 mt-2 max-w-xl mx-auto">Trouvez rapidement les accessoires mobiles dont vous avez besoin</p>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8 gap-3">
        @foreach($categories as $category)
        <a href="{{ route('products', ['category' => $category->slug]) }}"
           class="group flex flex-col items-center bg-white rounded-2xl p-4 shadow-sm hover:shadow-lg border border-gray-100 hover:border-blue-200 transition-all duration-200 hover:-translate-y-1">
            <div class="w-14 h-14 rounded-xl overflow-hidden mb-3 bg-gray-50 flex-shrink-0">
                @if($category->image_url)
                    <img src="{{ $category->image_url }}"
                         alt="{{ $category->name }}"
                         class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
                         onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-blue-50\'><i class=\'fas fa-tag text-blue-400 text-xl\'></i></div>'">
                @else
                    <div class="w-full h-full flex items-center justify-center bg-blue-50">
                        <i class="fas fa-tag text-blue-400 text-xl"></i>
                    </div>
                @endif
            </div>
            <span class="text-xs font-semibold text-gray-700 group-hover:text-blue-700 transition-colors text-center leading-tight">{{ $category->name }}</span>
            @if($category->active_products_count > 0)
                <span class="text-xs text-gray-400 mt-1">{{ $category->active_products_count }}</span>
            @endif
        </a>
        @endforeach
    </div>
</section>
@endif

{{-- ═══ FEATURED PRODUCTS ═══ --}}
@if($featuredProducts->isNotEmpty())
<section class="py-16 bg-gradient-to-b from-gray-50 to-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-end justify-between mb-10">
            <div>
                <span class="inline-block text-blue-600 font-semibold text-sm uppercase tracking-wide mb-2">Sélection</span>
                <h2 class="text-3xl font-extrabold text-gray-900">Produits <span class="text-blue-700">Vedettes</span></h2>
                <p class="text-gray-500 mt-1">Les meilleures ventes de la semaine</p>
            </div>
            <a href="{{ route('products') }}"
               class="hidden md:inline-flex items-center gap-2 text-blue-700 hover:text-blue-900 font-semibold text-sm transition-colors bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-xl">
                Voir tout <i class="fas fa-arrow-right text-xs"></i>
            </a>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5">
            @foreach($featuredProducts as $product)
            <div class="product-card bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden group">

                {{-- Image --}}
                <a href="{{ route('products.show', $product->slug) }}" class="block relative overflow-hidden bg-gray-50">
                    <div class="aspect-square">
                        @if($product->image_url)
                            <img src="{{ $product->image_url }}"
                                 alt="{{ $product->name }}"
                                 class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                                 loading="lazy"
                                 onerror="this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100\'><i class=\'fas fa-mobile-alt text-5xl text-blue-200\'></i></div>'">
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100">
                                <i class="fas fa-mobile-alt text-5xl text-blue-200"></i>
                            </div>
                        @endif
                    </div>

                    {{-- Badges --}}
                    <div class="absolute top-2.5 left-2.5 flex flex-col gap-1">
                        @if($product->old_price)
                            <span class="bg-red-500 text-white text-xs font-bold px-2 py-0.5 rounded-full">
                                -{{ $product->discount_percent }}%
                            </span>
                        @endif
                        @if($product->is_featured)
                            <span class="bg-amber-400 text-amber-900 text-xs font-bold px-2 py-0.5 rounded-full">
                                ⭐ Vedette
                            </span>
                        @endif
                    </div>

                    {{-- Quick view overlay --}}
                    <div class="absolute inset-0 bg-blue-900/0 group-hover:bg-blue-900/10 transition-colors duration-300 flex items-center justify-center">
                        <span class="opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-white/90 text-blue-700 text-xs font-bold px-3 py-1.5 rounded-full backdrop-blur-sm">
                            <i class="fas fa-eye mr-1"></i> Voir le produit
                        </span>
                    </div>
                </a>

                {{-- Info --}}
                <div class="p-4">
                    <p class="text-xs text-blue-600 font-semibold mb-1 uppercase tracking-wide">{{ $product->category->name ?? '' }}</p>
                    <a href="{{ route('products.show', $product->slug) }}">
                        <h3 class="text-sm font-semibold text-gray-800 hover:text-blue-700 transition-colors line-clamp-2 mb-2 min-h-[2.5rem]">{{ $product->name }}</h3>
                    </a>

                    @if($product->brand)
                        <p class="text-xs text-gray-400 mb-2">{{ $product->brand }}</p>
                    @endif

                    <div class="flex items-center gap-2 mb-3">
                        <span class="text-base font-extrabold text-blue-700">{{ number_format($product->price, 0, ',', ' ') }} FCFA</span>
                        @if($product->old_price)
                            <span class="text-xs text-gray-400 line-through">{{ number_format($product->old_price, 0, ',', ' ') }}</span>
                        @endif
                    </div>

                    {{-- Stock indicator --}}
                    <div class="flex items-center gap-1 mb-3">
                        @if($product->stock > 10)
                            <span class="w-2 h-2 bg-green-400 rounded-full"></span>
                            <span class="text-xs text-green-600">En stock</span>
                        @elseif($product->stock > 0)
                            <span class="w-2 h-2 bg-amber-400 rounded-full"></span>
                            <span class="text-xs text-amber-600">{{ $product->stock }} restant(s)</span>
                        @else
                            <span class="w-2 h-2 bg-red-400 rounded-full"></span>
                            <span class="text-xs text-red-600">Rupture</span>
                        @endif
                    </div>

                    @if($product->stock > 0)
                        <form action="{{ route('cart.add', $product) }}" method="POST">
                            @csrf
                            <button type="submit"
                                    class="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white text-sm font-semibold py-2.5 rounded-xl flex items-center justify-center gap-2 transition-all duration-200 hover:-translate-y-0.5 shadow-sm hover:shadow-blue-200 shadow">
                                <i class="fas fa-cart-plus"></i> Ajouter au panier
                            </button>
                        </form>
                    @else
                        <span class="block text-center bg-gray-100 text-gray-400 text-sm font-semibold py-2.5 rounded-xl">
                            Indisponible
                        </span>
                    @endif
                </div>
            </div>
            @endforeach
        </div>

        <div class="text-center mt-10 md:hidden">
            <a href="{{ route('products') }}"
               class="inline-flex items-center gap-2 bg-blue-700 hover:bg-blue-800 text-white font-semibold px-8 py-3.5 rounded-full transition-colors shadow-lg shadow-blue-200">
                Voir tous les produits <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>
@endif

{{-- ═══ OFFRES SPÉCIALES (dynamiques) ═══ --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">

    {{-- En-tête section --}}
    <div class="flex items-center justify-between mb-6">
        <div>
            <span class="inline-block text-amber-600 font-semibold text-sm uppercase tracking-wide mb-1">Promotions</span>
            <h2 class="text-2xl font-extrabold text-gray-900">Offres <span class="text-amber-500">Spéciales</span></h2>
        </div>
        @if($promotions->isNotEmpty())
        <a href="{{ route('products') }}"
           class="hidden sm:inline-flex items-center gap-2 text-sm font-semibold text-blue-700 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-xl transition-colors">
            Voir tous les produits <i class="fas fa-arrow-right text-xs"></i>
        </a>
        @endif
    </div>

    @if($promotions->isEmpty())
        {{-- État vide --}}
        <div class="rounded-2xl border-2 border-dashed border-gray-200 bg-gray-50 py-14 text-center">
            <div class="w-16 h-16 bg-amber-50 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-tag text-amber-300 text-2xl"></i>
            </div>
            <p class="text-gray-500 font-semibold text-base mb-1">Aucune offre promotionnelle en cours</p>
            <p class="text-gray-400 text-sm">Revenez bientôt pour découvrir nos prochaines promotions !</p>
        </div>
    @else
        {{-- Grille : 1 colonne si 1 promo, 2 si 2, sinon 3 --}}
        <div class="@if($promotions->count() === 1) grid grid-cols-1 @elseif($promotions->count() === 2) grid grid-cols-1 md:grid-cols-2 gap-5 @else grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 @endif">

            @foreach($promotions as $promo)
            <div class="relative rounded-3xl overflow-hidden group shadow-md hover:shadow-xl transition-shadow duration-300
                        @if($promotions->count() === 1) h-52 md:h-64 @else h-48 md:h-56 @endif">

                {{-- Image de fond --}}
                @if($promo->image_url)
                    <img src="{{ $promo->image_url }}"
                         alt="{{ $promo->title }}"
                         class="absolute inset-0 w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-700">
                @else
                    <div class="absolute inset-0 bg-gradient-to-br from-blue-800 to-blue-950"></div>
                @endif

                {{-- Overlay dégradé --}}
                <div class="absolute inset-0 bg-gradient-to-r from-blue-950/90 via-blue-900/70 to-transparent"></div>

                {{-- Badge remise --}}
                @if($promo->discount_text)
                <div class="absolute top-4 right-4 z-10">
                    <span class="bg-red-500 text-white text-sm font-extrabold px-3 py-1.5 rounded-full shadow-lg animate-pulse">
                        {{ $promo->discount_text }}
                    </span>
                </div>
                @endif

                {{-- Contenu --}}
                <div class="relative z-10 h-full flex flex-col justify-center px-7 md:px-10">
                    @if($promo->subtitle)
                        <p class="text-amber-400 font-bold text-xs uppercase tracking-wider mb-1.5">
                            <i class="fas fa-tag mr-1"></i> {{ $promo->subtitle }}
                        </p>
                    @endif

                    <h3 class="text-white text-xl md:text-2xl font-extrabold leading-tight mb-2 drop-shadow-lg
                               @if($promotions->count() === 1) md:text-3xl @endif">
                        {{ $promo->title }}
                    </h3>

                    @if($promo->description)
                        <p class="text-blue-200 text-sm mb-4 max-w-md leading-relaxed hidden sm:block">
                            {{ $promo->description }}
                        </p>
                    @endif

                    @if($promo->link_url)
                        <div>
                            <a href="{{ $promo->link_url }}"
                               class="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-500 text-amber-950 font-bold px-5 py-2.5 rounded-full text-sm transition-all hover:-translate-y-0.5 shadow-lg">
                                {{ $promo->button_label }}
                                <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
                            </a>
                        </div>
                    @endif
                </div>

            </div>
            @endforeach

        </div>
    @endif

</section>

{{-- ═══ WHY US ═══ --}}
<section class="py-16 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12">
        <span class="inline-block text-blue-600 font-semibold text-sm uppercase tracking-wide mb-2">Nos Avantages</span>
        <h2 class="text-3xl font-extrabold text-gray-900">Pourquoi choisir <span class="text-blue-700">AdamService</span> ?</h2>
        <p class="text-gray-500 mt-2 max-w-xl mx-auto">Nous nous engageons à vous offrir la meilleure expérience d'achat d'accessoires mobiles</p>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
        @foreach([
            ['icon' => 'trophy',      'color' => 'blue',   'bg' => 'from-blue-500 to-blue-700',   'title' => 'Qualité Premium',   'text' => 'Chaque produit est rigoureusement sélectionné pour vous garantir durabilité et performance.'],
            ['icon' => 'truck',       'color' => 'green',  'bg' => 'from-green-500 to-green-700',  'title' => 'Livraison Rapide',  'text' => 'Commandez aujourd\'hui, recevez sous 24 à 72 heures partout en Algérie.'],
            ['icon' => 'headset',     'color' => 'amber',  'bg' => 'from-amber-400 to-amber-600',  'title' => 'Support Dédié',     'text' => 'Notre équipe est disponible 7j/7 pour répondre à vos questions et vous conseiller.'],
            ['icon' => 'shield-alt',  'color' => 'purple', 'bg' => 'from-purple-500 to-purple-700','title' => 'Garantie Produit',  'text' => 'Tous nos accessoires bénéficient d\'une garantie et d\'un service après-vente réactif.'],
        ] as $item)
        <div class="group bg-white rounded-2xl p-6 shadow-sm border border-gray-100 hover:shadow-xl hover:border-transparent hover:-translate-y-1 transition-all duration-300">
            <div class="w-14 h-14 mb-5 rounded-2xl bg-gradient-to-br {{ $item['bg'] }} flex items-center justify-center shadow-lg">
                <i class="fas fa-{{ $item['icon'] }} text-white text-2xl"></i>
            </div>
            <h3 class="font-extrabold text-gray-900 mb-2 text-base">{{ $item['title'] }}</h3>
            <p class="text-sm text-gray-500 leading-relaxed">{{ $item['text'] }}</p>
        </div>
        @endforeach
    </div>
</section>

{{-- ═══ CTA FINAL ═══ --}}
<section class="relative overflow-hidden bg-gradient-to-br from-blue-900 via-blue-800 to-blue-700 text-white py-16">
    <div class="absolute inset-0 opacity-5">
        <svg viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
            <circle cx="350" cy="50" r="120" fill="white"/>
            <circle cx="30" cy="180" r="80" fill="white"/>
        </svg>
    </div>
    <div class="relative z-10 max-w-4xl mx-auto px-4 text-center">
        <span class="inline-block bg-amber-400/20 border border-amber-400/40 text-amber-300 text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider mb-4">
            Commandez maintenant
        </span>
        <h2 class="text-3xl md:text-4xl font-extrabold mb-4">
            Votre commande en <span class="text-amber-400">3 clics</span>
        </h2>
        <p class="text-blue-200 mb-8 max-w-xl mx-auto text-lg">
            Parcourez le catalogue, ajoutez au panier, passez commande. Paiement à la livraison, livraison garantie.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('products') }}"
               class="group inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-500 text-amber-900 font-bold px-8 py-3.5 rounded-full shadow-lg shadow-amber-500/30 transition-all hover:-translate-y-0.5">
                <i class="fas fa-shopping-bag"></i>
                Commander maintenant
                <i class="fas fa-arrow-right text-xs group-hover:translate-x-1 transition-transform"></i>
            </a>
            <a href="{{ route('contact') }}"
               class="inline-flex items-center gap-2 bg-white/10 hover:bg-white/20 border border-white/30 font-semibold px-8 py-3.5 rounded-full backdrop-blur transition-all">
                <i class="fas fa-phone"></i>
                Nous appeler
            </a>
        </div>
    </div>
</section>

@endsection