@extends('layouts.app')
@section('title', 'Conditions de Garantie')

@section('content')

{{-- ═══ BANNER ═══ --}}
<div class="relative overflow-hidden min-h-[240px] md:min-h-[280px] flex items-center">
    <div class="absolute inset-0">
        <img src="{{ asset('images/about-banner.jpg') }}"
             alt="Conditions de Garantie"
             class="w-full h-full object-cover object-center"
             onerror="this.style.display='none'">
        <div class="absolute inset-0 bg-gradient-to-b from-black/30 via-black/20 to-black/50"></div>
    </div>
    <div class="absolute right-0 top-0 w-72 h-72 bg-amber-400/10 rounded-full translate-x-1/3 -translate-y-1/3 blur-3xl pointer-events-none"></div>

    <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 text-center">
        <nav class="flex items-center justify-center gap-2 text-blue-200 text-xs mb-4">
            <a href="{{ route('home') }}" class="hover:text-amber-400 transition-colors">Accueil</a>
            <i class="fas fa-chevron-right text-[10px]"></i>
            <span class="text-white font-medium">Conditions de Garantie</span>
        </nav>
        <h1 class="text-4xl md:text-5xl font-extrabold text-white leading-tight drop-shadow-xl mb-3">
            Conditions de <span class="text-transparent bg-clip-text bg-gradient-to-r from-amber-300 to-amber-500">Garantie</span>
        </h1>
        <p class="text-white/80 text-base drop-shadow max-w-xl mx-auto">
            Vos droits et notre engagement qualité pour tous les produits AdamService
        </p>
    </div>
</div>

<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14">

    {{-- Intro card --}}
    <div class="bg-gradient-to-r from-blue-700 to-blue-900 rounded-3xl p-7 md:p-10 text-white mb-12 flex flex-col md:flex-row items-center gap-6">
        <div class="w-20 h-20 bg-white/15 rounded-2xl flex items-center justify-center flex-shrink-0">
            <i class="fas fa-shield-alt text-4xl text-amber-300"></i>
        </div>
        <div>
            <h2 class="text-xl font-extrabold mb-2">Notre Engagement Qualité</h2>
            <p class="text-blue-100 leading-relaxed text-sm">
                Chez <strong class="text-white">AdamService</strong>, chaque produit vendu est soigneusement contrôlé avant expédition.
                Nous nous engageons à vous fournir des accessoires mobiles de qualité supérieure, accompagnés d'une garantie claire et transparente.
                En cas de défaut de fabrication, nous prenons en charge le remplacement ou le remboursement selon les conditions ci-dessous.
            </p>
        </div>
    </div>

    {{-- Sections garantie --}}
    <div class="space-y-8">

        {{-- 1. Durée --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center gap-4 px-6 py-4 bg-blue-50 border-b border-blue-100">
                <div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-calendar-alt text-white text-base"></i>
                </div>
                <h3 class="text-lg font-bold text-blue-900">1. Durée de la Garantie</h3>
            </div>
            <div class="px-6 py-5 text-sm text-gray-700 leading-relaxed space-y-3">
                <p>La garantie AdamService couvre les défauts de fabrication selon les durées suivantes :</p>
                <div class="grid sm:grid-cols-2 gap-3 mt-3">
                    @foreach([
                        ['label' => 'Coques & protections',   'duration' => '3 mois',  'color' => 'blue'],
                        ['label' => 'Chargeurs & câbles',      'duration' => '6 mois',  'color' => 'green'],
                        ['label' => 'Batteries & powerbanks',  'duration' => '6 mois',  'color' => 'amber'],
                        ['label' => 'Écouteurs & casques',     'duration' => '6 mois',  'color' => 'purple'],
                        ['label' => 'Chargeurs sans fil',      'duration' => '1 an',    'color' => 'green'],
                        ['label' => 'Accessoires premium',     'duration' => '1 an',    'color' => 'blue'],
                    ] as $g)
                    <div class="flex items-center justify-between bg-gray-50 rounded-xl px-4 py-3">
                        <span class="font-medium text-gray-800">{{ $g['label'] }}</span>
                        <span class="bg-{{ $g['color'] }}-100 text-{{ $g['color'] }}-700 font-bold text-xs px-3 py-1 rounded-full">{{ $g['duration'] }}</span>
                    </div>
                    @endforeach
                </div>
                <p class="text-gray-500 text-xs pt-2">
                    <i class="fas fa-info-circle mr-1 text-blue-400"></i>
                    La période de garantie commence à la date de livraison confirmée.
                </p>
            </div>
        </div>

        {{-- 2. Ce que couvre la garantie --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center gap-4 px-6 py-4 bg-green-50 border-b border-green-100">
                <div class="w-10 h-10 bg-green-600 rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-check-circle text-white text-base"></i>
                </div>
                <h3 class="text-lg font-bold text-green-900">2. Ce que Couvre la Garantie</h3>
            </div>
            <div class="px-6 py-5">
                <ul class="space-y-3 text-sm text-gray-700">
                    @foreach([
                        'Défauts de fabrication constatés à la réception du produit',
                        'Dysfonctionnement électronique sans cause externe identifiable',
                        'Défaillance prématurée de la batterie (capacité < 80 % avant 300 cycles)',
                        'Câble endommagé dans sa gaine dès la livraison',
                        'Produit non-conforme à la description publiée sur notre site',
                        'Accessoire incompatible malgré la conformité annoncée',
                    ] as $item)
                    <li class="flex items-start gap-3">
                        <i class="fas fa-check text-green-500 mt-0.5 flex-shrink-0"></i>
                        <span>{{ $item }}</span>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>

        {{-- 3. Exclusions --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center gap-4 px-6 py-4 bg-red-50 border-b border-red-100">
                <div class="w-10 h-10 bg-red-500 rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-times-circle text-white text-base"></i>
                </div>
                <h3 class="text-lg font-bold text-red-900">3. Exclusions de la Garantie</h3>
            </div>
            <div class="px-6 py-5">
                <ul class="space-y-3 text-sm text-gray-700">
                    @foreach([
                        'Dommages causés par une chute, un choc ou une immersion dans un liquide',
                        'Usure normale du produit (égratignures, décoloration légère)',
                        'Modifications ou tentatives de réparation par le client',
                        'Dommages causés par une utilisation incompatible ou non recommandée',
                        'Produits dont le numéro de série ou l\'étiquette a été retiré',
                        'Pannes dues à des surtensions électriques ou problèmes de réseau',
                    ] as $item)
                    <li class="flex items-start gap-3">
                        <i class="fas fa-times text-red-400 mt-0.5 flex-shrink-0"></i>
                        <span>{{ $item }}</span>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>

        {{-- 4. Procédure --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center gap-4 px-6 py-4 bg-amber-50 border-b border-amber-100">
                <div class="w-10 h-10 bg-amber-500 rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-clipboard-list text-white text-base"></i>
                </div>
                <h3 class="text-lg font-bold text-amber-900">4. Procédure de Réclamation</h3>
            </div>
            <div class="px-6 py-5">
                <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm text-gray-700">
                    @foreach([
                        ['step' => '01', 'icon' => 'phone',        'color' => 'blue',   'title' => 'Contactez-nous',     'desc' => 'Appelez ou écrivez-nous en décrivant le problème rencontré.'],
                        ['step' => '02', 'icon' => 'camera',       'color' => 'amber',  'title' => 'Joignez des photos',  'desc' => 'Envoyez des photos claires du défaut constaté sur le produit.'],
                        ['step' => '03', 'icon' => 'box',          'color' => 'purple', 'title' => 'Retour produit',      'desc' => 'Renvoyez le produit avec la facture et notre accord préalable.'],
                        ['step' => '04', 'icon' => 'exchange-alt', 'color' => 'green',  'title' => 'Remplacement',        'desc' => 'Remplacement ou remboursement sous 7 jours ouvrables.'],
                    ] as $s)
                    <div class="relative bg-gray-50 rounded-xl p-4 text-center">
                        <div class="absolute -top-3 left-1/2 -translate-x-1/2 w-7 h-7 bg-{{ $s['color'] }}-600 rounded-full flex items-center justify-center">
                            <span class="text-white text-xs font-extrabold">{{ $s['step'] }}</span>
                        </div>
                        <div class="mt-3 mb-2">
                            <i class="fas fa-{{ $s['icon'] }} text-{{ $s['color'] }}-500 text-xl"></i>
                        </div>
                        <p class="font-bold text-gray-800 text-sm mb-1">{{ $s['title'] }}</p>
                        <p class="text-gray-500 text-xs leading-relaxed">{{ $s['desc'] }}</p>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- 5. Remboursement --}}
        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="flex items-center gap-4 px-6 py-4 bg-purple-50 border-b border-purple-100">
                <div class="w-10 h-10 bg-purple-600 rounded-xl flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-undo text-white text-base"></i>
                </div>
                <h3 class="text-lg font-bold text-purple-900">5. Politique de Retour & Remboursement</h3>
            </div>
            <div class="px-6 py-5 text-sm text-gray-700 leading-relaxed space-y-3">
                <p>En cas de produit défectueux ou non-conforme, vous disposez de <strong>7 jours</strong> après réception pour effectuer une réclamation.</p>
                <p>Les solutions proposées sont, dans l'ordre de préférence :</p>
                <div class="flex flex-col sm:flex-row gap-3 mt-2">
                    @foreach([
                        ['icon' => 'exchange-alt', 'color' => 'green',  'title' => 'Remplacement',     'desc' => 'Renvoi d\'un produit identique ou équivalent (solution prioritaire)'],
                        ['icon' => 'credit-card',  'color' => 'blue',   'title' => 'Avoir boutique',    'desc' => 'Crédit applicable sur votre prochaine commande'],
                        ['icon' => 'money-bill',   'color' => 'amber',  'title' => 'Remboursement',     'desc' => 'Remboursement total si aucune autre solution n\'est possible'],
                    ] as $r)
                    <div class="flex-1 bg-{{ $r['color'] }}-50 border border-{{ $r['color'] }}-100 rounded-xl p-4 flex items-start gap-3">
                        <i class="fas fa-{{ $r['icon'] }} text-{{ $r['color'] }}-500 mt-0.5 flex-shrink-0"></i>
                        <div>
                            <p class="font-bold text-gray-800 text-sm">{{ $r['title'] }}</p>
                            <p class="text-gray-500 text-xs mt-0.5">{{ $r['desc'] }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

    </div>

    {{-- CTA contact --}}
    <div class="mt-12 bg-gradient-to-r from-blue-700 to-blue-900 rounded-3xl p-8 text-center text-white">
        <i class="fas fa-headset text-4xl text-amber-300 mb-4"></i>
        <h3 class="text-xl font-extrabold mb-2">Une question sur votre garantie ?</h3>
        <p class="text-blue-200 text-sm mb-6 max-w-md mx-auto">
            Notre équipe support est disponible du lundi au samedi de 9h à 18h pour vous accompagner.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('contact') }}"
               class="inline-flex items-center gap-2 bg-amber-400 hover:bg-amber-500 text-amber-950 font-bold px-7 py-3 rounded-full transition-colors shadow-lg">
                <i class="fas fa-envelope"></i> Nous contacter
            </a>
            <a href="tel:+213555000000"
               class="inline-flex items-center gap-2 bg-white/15 hover:bg-white/25 border border-white/30 text-white font-semibold px-7 py-3 rounded-full transition-colors">
                <i class="fas fa-phone"></i> +213 555 000 000
            </a>
        </div>
    </div>

</div>

@endsection