@extends('layouts.app')

@section('title', 'Simulateur Infinity')

@section('content')
<div x-data="infinitySimulator()">
    {{-- * Header --}}
    <header class="bg-white shadow-md">
        <div class="max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
                <div class="flex items-center gap-3">
                    <div class="w-12 h-12 bg-boulanger-orange rounded-lg flex items-center justify-center text-white font-bold text-2xl shadow-md">
                        ∞
                    </div>
                    <div>
                        <h1 class="text-xl sm:text-2xl font-display font-bold tracking-tight text-gray-900">
                            Le Club <span class="text-boulanger-orange">INFINITY</span>
                        </h1>
                        <p class="text-xs sm:text-sm text-gray-500">Outil d'aide à la vente & Simulation</p>
                    </div>
                </div>
                <div class="text-left sm:text-right">
                    <p class="text-sm font-semibold text-gray-700">Support Vendeur</p>
                    <p class="text-xs text-gray-500">Données mises à jour via sources officielles</p>
                </div>
            </div>
        </div>
    </header>

    <main class="max-w-7xl mx-auto px-4 py-6 sm:px-6 lg:px-8">

        {{-- * Navigation Onglets --}}
        <div class="flex border-b border-gray-200 mb-6 sm:mb-8 overflow-x-auto">
            <button @click="switchTab('simulator')"
                    :class="currentTab === 'simulator' ? 'text-boulanger-orange border-b-2 border-boulanger-orange' : 'text-gray-500 hover:text-gray-700'"
                    class="py-3 px-4 sm:py-4 sm:px-6 font-medium whitespace-nowrap transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                <i data-lucide="calculator" class="w-4 h-4 inline mr-2"></i>Simulateur de Besoins
            </button>
            <button @click="switchTab('indemnisation')"
                    :class="currentTab === 'indemnisation' ? 'text-boulanger-orange border-b-2 border-boulanger-orange' : 'text-gray-500 hover:text-gray-700'"
                    class="py-3 px-4 sm:py-4 sm:px-6 font-medium whitespace-nowrap transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                <i data-lucide="trending-up" class="w-4 h-4 inline mr-2"></i>Indemnisation & Âge
            </button>
            <button @click="switchTab('details')"
                    :class="currentTab === 'details' ? 'text-boulanger-orange border-b-2 border-boulanger-orange' : 'text-gray-500 hover:text-gray-700'"
                    class="py-3 px-4 sm:py-4 sm:px-6 font-medium whitespace-nowrap transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                <i data-lucide="info" class="w-4 h-4 inline mr-2"></i>Détails & Exclusions
            </button>
        </div>

        {{-- * VIEW 1: SIMULATEUR --}}
        <div x-show="currentTab === 'simulator'" class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">

            <div x-show="dataWarning" class="lg:col-span-3">
                <div class="mb-2 bg-amber-50 border border-amber-200 text-amber-800 text-sm rounded-lg px-4 py-3">
                    <i data-lucide="alert-triangle" class="w-4 h-4 inline mr-2"></i>
                    <span x-text="dataWarning"></span>
                </div>
            </div>

            <div x-show="isLoadingProducts" class="lg:col-span-3">
                <div class="flex items-center gap-2 text-sm text-gray-500">
                    <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-boulanger-orange"></div>
                    Chargement des données Infinity...
                </div>
            </div>

            {{-- ? Left Col: Sélection Produits --}}
            <div class="lg:col-span-2 space-y-4 sm:space-y-6">
                <div class="bg-white rounded-2xl shadow-sm p-4 sm:p-6">
                    <h2 class="text-base sm:text-lg font-bold mb-4 flex items-center">
                        <span class="bg-gray-100 text-gray-600 w-8 h-8 rounded-full flex items-center justify-center mr-3 text-sm font-bold">1</span>
                        Quels équipements possède le client ?
                    </h2>

                    {{-- * Barre de recherche --}}
                    <div class="mb-4">
                        <div class="relative">
                            <label for="infinity-search" class="sr-only">Rechercher un produit</label>
                            <i data-lucide="search" class="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            <input type="text"
                                   id="infinity-search"
                                   x-model="searchQuery"
                                   placeholder="Rechercher un produit..."
                                   class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-xl focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange focus:outline-none text-sm">
                            <button x-show="searchQuery"
                                    @click="searchQuery = ''"
                                    class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>

                    {{-- * Filtres par univers --}}
                    <div class="flex gap-2 mb-4 overflow-x-auto pb-2">
                        <button @click="filterByUnivers('all')"
                                :class="activeFilter === 'all' ? 'bg-boulanger-orange text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
                                class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition">
                            Tous
                        </button>
                        <button @click="filterByUnivers('electro')"
                                :class="activeFilter === 'electro' ? 'bg-blue-500 text-white' : 'bg-blue-50 text-blue-700 hover:bg-blue-100'"
                                class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition flex items-center gap-2">
                            Électro
                            <span class="bg-white/30 px-2 py-0.5 rounded text-xs" x-text="getUniversCount('electro')"></span>
                        </button>
                        <button @click="filterByUnivers('image')"
                                :class="activeFilter === 'image' ? 'bg-purple-500 text-white' : 'bg-purple-50 text-purple-700 hover:bg-purple-100'"
                                class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition flex items-center gap-2">
                            Image & Son
                            <span class="bg-white/30 px-2 py-0.5 rounded text-xs" x-text="getUniversCount('image')"></span>
                        </button>
                        <button @click="filterByUnivers('multimedia')"
                                :class="activeFilter === 'multimedia' ? 'bg-green-500 text-white' : 'bg-green-50 text-green-700 hover:bg-green-100'"
                                class="px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition flex items-center gap-2">
                                Multimédia
                            <span class="bg-white/30 px-2 py-0.5 rounded text-xs" x-text="getUniversCount('multimedia')"></span>
                        </button>
                    </div>

                    {{-- * Accordéons par univers --}}
                    <div class="space-y-3">
                        {{-- Électroménager --}}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-white hover:from-blue-100 transition">
                                <button type="button"
                                        @click="toggleAccordion('electro')"
                                        aria-controls="electro-panel"
                                        :aria-expanded="accordions.electro"
                                        class="flex-1 flex items-center gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2 rounded-lg">
                                    <i data-lucide="refrigerator" class="w-5 h-5 text-blue-600"></i>
                                    <span class="font-bold text-gray-800">Électroménager</span>
                                    <span class="text-sm text-blue-600 font-semibold" x-text="getUniversCount('electro')"></span>
                                </button>
                                <div class="flex items-center gap-2">
                                    <button type="button"
                                            @click="clearUnivers('electro')"
                                            x-show="getUniversCount('electro').startsWith('0/') === false"
                                            class="px-2 py-1 text-xs bg-red-100 text-red-600 rounded hover:bg-red-200 transition">
                                        Tout effacer
                                    </button>
                                    <button type="button"
                                            @click="toggleAccordion('electro')"
                                            aria-controls="electro-panel"
                                            :aria-expanded="accordions.electro"
                                            class="p-1 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                                        <i data-lucide="chevron-down"
                                           :class="accordions.electro ? 'rotate-180' : ''"
                                           class="w-5 h-5 text-gray-500 transition-transform"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="electro-panel"
                                 x-show="accordions.electro"
                                 x-collapse
                                 class="p-3 bg-white">
                                <template x-if="productsByUnivers.electro.length === 0">
                                    <div class="text-sm text-gray-500 py-2">Aucun produit pour ce filtre.</div>
                                </template>
                                <template x-if="productsByUnivers.electro.length > 0">
                                    <div class="grid grid-cols-1 gap-2">
                                        <template x-for="product in productsByUnivers.electro" :key="product.id">
                                            <button type="button"
                                                    @click="toggleProduct(product.id)"
                                                    :aria-pressed="selectedProducts.has(product.id)"
                                                    :class="selectedProducts.has(product.id) ? 'border-boulanger-orange bg-orange-50 scale-105' : 'border-gray-200 bg-white hover:border-gray-300'"
                                                    class="w-full text-left p-3 border-2 rounded-lg cursor-pointer transition-all hover:shadow-md group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                                                <div class="flex items-center justify-between">
                                                    <div class="flex items-center gap-2 flex-1 min-w-0">
                                                        <div class="w-8 h-8 rounded-full bg-blue-50 flex items-center justify-center text-blue-600 group-hover:scale-110 transition flex-shrink-0">
                                                            <i :data-lucide="product.icon" class="w-4 h-4"></i>
                                                        </div>
                                                        <div class="flex-1 min-w-0">
                                                            <p class="font-bold text-xs text-gray-800 truncate" x-text="product.name"></p>
                                                            <p class="text-[10px] text-gray-500" x-text="product.repair + '€'"></p>
                                                        </div>
                                                    </div>
                                                    <div class="w-5 h-5 rounded-full border-2 flex items-center justify-center transition flex-shrink-0"
                                                         :class="selectedProducts.has(product.id) ? 'bg-boulanger-orange border-boulanger-orange' : 'border-gray-300'">
                                                        <i data-lucide="check" class="w-3 h-3 text-white" x-show="selectedProducts.has(product.id)"></i>
                                                    </div>
                                                </div>
                                            </button>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </div>

                        {{-- Image & Son --}}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-purple-50 to-white hover:from-purple-100 transition">
                                <button type="button"
                                        @click="toggleAccordion('image')"
                                        aria-controls="image-panel"
                                        :aria-expanded="accordions.image"
                                        class="flex-1 flex items-center gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2 rounded-lg">
                                    <i data-lucide="tv" class="w-5 h-5 text-purple-600"></i>
                                    <span class="font-bold text-gray-800">Image & Son</span>
                                    <span class="text-sm text-purple-600 font-semibold" x-text="getUniversCount('image')"></span>
                                </button>
                                <div class="flex items-center gap-2">
                                    <button type="button"
                                            @click="clearUnivers('image')"
                                            x-show="getUniversCount('image').startsWith('0/') === false"
                                            class="px-2 py-1 text-xs bg-red-100 text-red-600 rounded hover:bg-red-200 transition">
                                        Tout effacer
                                    </button>
                                    <button type="button"
                                            @click="toggleAccordion('image')"
                                            aria-controls="image-panel"
                                            :aria-expanded="accordions.image"
                                            class="p-1 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                                        <i data-lucide="chevron-down"
                                           :class="accordions.image ? 'rotate-180' : ''"
                                           class="w-5 h-5 text-gray-500 transition-transform"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="image-panel"
                                 x-show="accordions.image"
                                 x-collapse
                                 class="p-3 bg-white">
                                <template x-if="productsByUnivers.image.length === 0">
                                    <div class="text-sm text-gray-500 py-2">Aucun produit pour ce filtre.</div>
                                </template>
                                <template x-if="productsByUnivers.image.length > 0">
                                    <div class="grid grid-cols-1 gap-2">
                                        <template x-for="product in productsByUnivers.image" :key="product.id">
                                            <button type="button"
                                                    @click="toggleProduct(product.id)"
                                                    :aria-pressed="selectedProducts.has(product.id)"
                                                    :class="selectedProducts.has(product.id) ? 'border-boulanger-orange bg-orange-50 scale-105' : 'border-gray-200 bg-white hover:border-gray-300'"
                                                    class="w-full text-left p-3 border-2 rounded-lg cursor-pointer transition-all hover:shadow-md group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                                                <div class="flex items-center justify-between">
                                                    <div class="flex items-center gap-2 flex-1 min-w-0">
                                                        <div class="w-8 h-8 rounded-full bg-purple-50 flex items-center justify-center text-purple-600 group-hover:scale-110 transition flex-shrink-0">
                                                            <i :data-lucide="product.icon" class="w-4 h-4"></i>
                                                        </div>
                                                        <div class="flex-1 min-w-0">
                                                            <p class="font-bold text-xs text-gray-800 truncate" x-text="product.name"></p>
                                                            <p class="text-[10px] text-gray-500" x-text="product.repair + '€'"></p>
                                                        </div>
                                                    </div>
                                                    <div class="w-5 h-5 rounded-full border-2 flex items-center justify-center transition flex-shrink-0"
                                                         :class="selectedProducts.has(product.id) ? 'bg-boulanger-orange border-boulanger-orange' : 'border-gray-300'">
                                                        <i data-lucide="check" class="w-3 h-3 text-white" x-show="selectedProducts.has(product.id)"></i>
                                                    </div>
                                                </div>
                                            </button>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </div>

                        {{-- Multimédia --}}
                        <div class="border border-gray-200 rounded-xl overflow-hidden">
                            <div class="w-full flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-white hover:from-green-100 transition">
                                <button type="button"
                                        @click="toggleAccordion('multimedia')"
                                        aria-controls="multimedia-panel"
                                        :aria-expanded="accordions.multimedia"
                                        class="flex-1 flex items-center gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2 rounded-lg">
                                    <i data-lucide="laptop" class="w-5 h-5 text-green-600"></i>
                                    <span class="font-bold text-gray-800">Multimédia</span>
                                    <span class="text-sm text-green-600 font-semibold" x-text="getUniversCount('multimedia')"></span>
                                </button>
                                <div class="flex items-center gap-2">
                                    <button type="button"
                                            @click="clearUnivers('multimedia')"
                                            x-show="getUniversCount('multimedia').startsWith('0/') === false"
                                            class="px-2 py-1 text-xs bg-red-100 text-red-600 rounded hover:bg-red-200 transition">
                                        Tout effacer
                                    </button>
                                    <button type="button"
                                            @click="toggleAccordion('multimedia')"
                                            aria-controls="multimedia-panel"
                                            :aria-expanded="accordions.multimedia"
                                            class="p-1 rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                                        <i data-lucide="chevron-down"
                                           :class="accordions.multimedia ? 'rotate-180' : ''"
                                           class="w-5 h-5 text-gray-500 transition-transform"></i>
                                    </button>
                                </div>
                            </div>
                            <div id="multimedia-panel"
                                 x-show="accordions.multimedia"
                                 x-collapse
                                 class="p-3 bg-white">
                                <template x-if="productsByUnivers.multimedia.length === 0">
                                    <div class="text-sm text-gray-500 py-2">Aucun produit pour ce filtre.</div>
                                </template>
                                <template x-if="productsByUnivers.multimedia.length > 0">
                                    <div class="grid grid-cols-1 gap-2">
                                        <template x-for="product in productsByUnivers.multimedia" :key="product.id">
                                            <button type="button"
                                                    @click="toggleProduct(product.id)"
                                                    :aria-pressed="selectedProducts.has(product.id)"
                                                    :class="selectedProducts.has(product.id) ? 'border-boulanger-orange bg-orange-50 scale-105' : 'border-gray-200 bg-white hover:border-gray-300'"
                                                    class="w-full text-left p-3 border-2 rounded-lg cursor-pointer transition-all hover:shadow-md group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-boulanger-orange focus-visible:ring-offset-2">
                                                <div class="flex items-center justify-between">
                                                    <div class="flex items-center gap-2 flex-1 min-w-0">
                                                        <div class="w-8 h-8 rounded-full bg-green-50 flex items-center justify-center text-green-600 group-hover:scale-110 transition flex-shrink-0">
                                                            <i :data-lucide="product.icon" class="w-4 h-4"></i>
                                                        </div>
                                                        <div class="flex-1 min-w-0">
                                                            <p class="font-bold text-xs text-gray-800 truncate" x-text="product.name"></p>
                                                            <p class="text-[10px] text-gray-500" x-text="product.repair + '€'"></p>
                                                        </div>
                                                    </div>
                                                    <div class="w-5 h-5 rounded-full border-2 flex items-center justify-center transition flex-shrink-0"
                                                         :class="selectedProducts.has(product.id) ? 'bg-boulanger-orange border-boulanger-orange' : 'border-gray-300'">
                                                        <i data-lucide="check" class="w-3 h-3 text-white" x-show="selectedProducts.has(product.id)"></i>
                                                    </div>
                                                </div>
                                            </button>
                                        </template>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ? Right Col: Bilan Sticky --}}
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-lg p-4 sm:p-6 lg:sticky lg:top-24 border border-gray-100">
                    <h2 class="text-base sm:text-lg font-bold mb-4 sm:mb-6 text-gray-800">Bilan Personnalisé</h2>

                    {{-- * Risque estimé --}}
                    <div class="mb-4 sm:mb-6 bg-red-50 p-4 rounded-xl border border-red-100 transition-all duration-300"
                         :class="totalRepairCost > 0 ? 'animate-pulse-once' : ''">
                        <p class="text-xs sm:text-sm text-red-600 font-semibold mb-1">
                            <i data-lucide="alert-triangle" class="w-4 h-4 inline mr-2"></i>Risque estimé (panne la plus coûteuse)
                        </p>
                        <p class="text-2xl sm:text-3xl font-extrabold text-red-700 transition-all duration-500" x-text="totalRepairCost + ' €'"></p>
                        <p class="text-xs text-red-500 mt-1">Estimation basée sur les tarifs Boulanger. Elles sont indicatives, non contractuelles. Les coûts réels peuvent varier selon diagnostic.</p>

                    </div>

                    {{-- * Suggestion intelligente --}}
                    <div x-show="smartSuggestion"
                         x-transition
                         class="mb-4 p-3 bg-gradient-to-r from-yellow-50 to-orange-50 border border-yellow-200 rounded-xl">
                        <p class="text-xs text-gray-700" x-text="smartSuggestion"></p>
                    </div>

                    {{-- * Formule recommandée --}}
                    <div class="space-y-4">
                        <div>
                            <p class="text-xs sm:text-sm text-gray-500 mb-1">Formule recommandée :</p>
                            <h3 class="text-lg sm:text-xl font-bold text-boulanger-orange" x-text="recommendedPlan.name"></h3>
                            <div class="flex items-baseline mt-1">
                                <span class="text-3xl sm:text-4xl font-extrabold text-gray-900" x-text="recommendedPlan.price"></span>
                                <span class="text-lg sm:text-xl text-gray-600 font-medium ml-1">€ /mois</span>
                            </div>
                        </div>

                        {{-- * Barre de progression univers --}}
                        <div class="space-y-2">
                            <div class="flex justify-between text-[10px] sm:text-xs font-semibold text-gray-500 uppercase">
                                <span>1 Univers</span>
                                <span>2 Univers</span>
                                <span>3 Univers</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2.5">
                                <div class="bg-boulanger-orange h-2.5 rounded-full transition-all duration-500"
                                     :style="`width: ${progressWidth}%`"></div>
                            </div>
                            <p class="text-xs text-center text-gray-400 mt-1" x-text="universText"></p>
                        </div>

                        {{-- * Pitch --}}
                        <div x-show="pitch" x-transition class="mt-4 pt-4 border-t border-gray-100">
                            <p class="text-xs sm:text-sm italic text-gray-600">
                                <i data-lucide="quote" class="w-4 h-4 inline text-boulanger-orange mr-2"></i>
                                <span x-text="pitch"></span>
                            </p>
                        </div>

                        <button
                            @click="openRecapModal()"
                            :disabled="selectedProducts.size === 0"
                            :class="selectedProducts.size === 0 ? 'bg-gray-300 cursor-not-allowed shadow-none' : 'bg-boulanger-orange hover:bg-orange-600 shadow-lg'"
                            class="w-full text-white font-bold py-3 px-4 rounded-xl transition mt-4">
                            Proposer cette offre
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- * Badge flottant mobile - Résumé bilan (Simulateur uniquement) --}}
        <div x-show="currentTab === 'simulator' && selectedProducts.size > 0"
             @click="$el.nextElementSibling.scrollIntoView({behavior: 'smooth', block: 'start'})"
             x-transition
             class="fixed bottom-20 right-4 lg:hidden z-40 bg-gradient-to-r from-boulanger-orange to-orange-600 text-white px-4 py-3 rounded-2xl shadow-2xl cursor-pointer hover:scale-105 transition-transform">
            <div class="flex items-center gap-3">
                <div class="flex flex-col items-end">
                    <span class="text-xs opacity-90">Formule</span>
                    <span class="font-bold text-base" x-text="recommendedPlan.price + '€/mois'"></span>
                </div>
                <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
                    <i data-lucide="arrow-down" class="w-5 h-5"></i>
                </div>
            </div>
        </div>
        <div></div>

        {{-- * VIEW 2: INDEMNISATION --}}
        <div x-show="currentTab === 'indemnisation'" x-transition class="bg-white rounded-2xl shadow-sm p-4 sm:p-8 max-w-4xl mx-auto">
            <h2 class="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-center">Simulateur de Remboursement (Bon d'achat)</h2>
            <p class="text-sm sm:text-base text-gray-600 text-center mb-6 sm:mb-8 max-w-2xl mx-auto">
                Si l'appareil n'est pas réparable, Infinity rembourse en bon d'achat basé sur la <strong>valeur d'achat initiale</strong> (contrairement à la vétusté classique).
            </p>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 sm:gap-10 items-center">
                {{-- ? Contrôles --}}
                <div class="space-y-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Univers du produit</label>
                        <select x-model="indemUnivers" @change="calculateIndemnisation"
                                class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange focus:outline-none">
                            <option value="electro">Électroménager (Lave-linge, Frigo...)</option>
                            <option value="multi">Image, Son & Multimédia (TV, PC...)</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Provenance</label>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="flex items-center p-3 border-2 rounded-xl cursor-pointer hover:bg-gray-50 transition"
                                   :class="indemOrigin === 'boulanger' ? 'border-boulanger-orange bg-orange-50' : 'border-gray-200'">
                                <input type="radio" x-model="indemOrigin" value="boulanger" @change="calculateIndemnisation" class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                                <span class="ml-2 text-sm font-medium">Chez Boulanger</span>
                            </label>
                            <label class="flex items-center p-3 border-2 rounded-xl cursor-pointer hover:bg-gray-50 transition"
                                   :class="indemOrigin === 'ailleurs' ? 'border-boulanger-orange bg-orange-50' : 'border-gray-200'">
                                <input type="radio" x-model="indemOrigin" value="ailleurs" @change="calculateIndemnisation" class="w-4 h-4 text-boulanger-orange focus:ring-boulanger-orange">
                                <span class="ml-2 text-sm font-medium">Ailleurs</span>
                            </label>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Âge de l'appareil (Années)</label>
                        <input type="range" x-model="indemAge" @input="calculateIndemnisation" min="0" max="15" step="1"
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-boulanger-orange">
                        <div class="text-right font-bold text-boulanger-orange mt-1" x-text="indemAge + ' ans'"></div>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Prix d'achat de l'appareil</label>
                        <input type="range" x-model.number="indemBaseAmount" @input="calculateIndemnisation" min="50" max="10000" step="50"
                               class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-boulanger-orange">
                        <div class="text-right font-bold text-boulanger-orange mt-1" x-text="indemBaseAmount + ' €'"></div>
                        <p class="text-xs text-gray-500 mt-1">Montant entre 50€ et 10 000€ (plafond Infinity)</p>
                    </div>
                </div>

                {{-- ? Résultat Cercle --}}
                <div class="flex flex-col items-center justify-center bg-gray-50 rounded-2xl p-6 border border-gray-200">
                    <div class="relative w-40 h-40 sm:w-48 sm:h-48">
                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
                            <path class="text-gray-200" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none" stroke="currentColor" stroke-width="3" />
                            <path :class="indemPercent === 100 ? 'text-green-500' : (indemPercent >= 60 ? 'text-yellow-500' : 'text-boulanger-orange')"
                                  :stroke-dasharray="`${indemPercent}, 100`"
                                  class="transition-all duration-1000 ease-out"
                                  d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
                                  fill="none" stroke="currentColor" stroke-width="3" />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center flex-col">
                            <span class="text-3xl sm:text-4xl font-bold text-gray-800" x-text="indemPercent + '%'"></span>
                            <span class="text-xs text-gray-500 uppercase">Valeur d'achat</span>
                        </div>
                    </div>
                    <div class="mt-4 text-center">
                        <p class="text-sm text-gray-600">Si vous avez payé votre appareil <span class="font-bold" x-text="indemBaseAmount + '€'"></span>, vous recevrez un bon d'achat de :</p>
                        <p class="text-2xl font-bold text-boulanger-orange mt-2" x-text="indemAmount + ' €'"></p>
                    </div>
                </div>
            </div>
        </div>

        {{-- * VIEW 3: DÉTAILS --}}
        <div x-show="currentTab === 'details'" x-transition class="max-w-4xl mx-auto space-y-6">

            <div class="bg-white p-4 sm:p-6 rounded-2xl shadow-sm border-l-4 border-boulanger-orange">
                <h3 class="font-bold text-base sm:text-lg mb-2">Franchises (Appareils achetés ailleurs)</h3>
                <p class="text-sm sm:text-base text-gray-600 mb-2">Pas de franchise pour les produits achetés chez Boulanger.</p>
                <ul class="list-disc pl-5 space-y-1 text-sm sm:text-base text-gray-700">
                    <li><strong>39 € TTC</strong> pour les produits transportables (ex: PC, Aspirateur balai).</li>
                    <li><strong>79 € TTC</strong> pour les produits nécessitant un déplacement à domicile (ex: Lave-linge, TV > 43").</li>
                </ul>
            </div>

            <div class="bg-white p-4 sm:p-6 rounded-2xl shadow-sm border-l-4 border-gray-400">
                <h3 class="font-bold text-base sm:text-lg mb-2">Carence (Délai d'attente)</h3>
                <p class="text-sm sm:text-base text-gray-700">
                    <strong>30 jours</strong> de délai de carence pour les produits achetés en dehors du réseau Boulanger ou si aucun produit n'est acheté le jour de l'adhésion.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white p-4 sm:p-6 rounded-2xl shadow-sm">
                    <h3 class="font-bold text-base sm:text-lg mb-2">Plafonds</h3>
                    <p class="text-sm sm:text-base text-gray-600">Jusqu'à <strong>10 000 € TTC</strong> de réparations par an.</p>
                    <p class="text-sm sm:text-base text-gray-600">Produits > 50€ TTC à l'achat.</p>
                </div>
                <div class="bg-white p-4 sm:p-6 rounded-2xl shadow-sm">
                    <h3 class="font-bold text-base sm:text-lg mb-2">Le "+" de l'offre 3 Univers</h3>
                    <p class="text-sm sm:text-base text-gray-600">Une <strong>visite annuelle d'entretien</strong> à domicile incluse (après la 1ère année) pour vérifier vos gros appareils.</p>
                </div>
            </div>

            <div class="bg-white p-4 sm:p-6 rounded-2xl shadow-sm">
                <h3 class="font-bold text-base sm:text-lg mb-2">Sources officielles utilisées</h3>
                <p class="text-sm text-gray-600 mb-3">
                    Les coûts sont estimés à partir des données de Boulanger.
                </p>
                <div x-show="sources.length === 0" class="text-sm text-gray-500">
                    Sources non configurées.
                </div>
                <ul x-show="sources.length > 0" class="space-y-2 text-sm text-gray-700">
                    <template x-for="source in sources" :key="source.id">
                        <li class="flex items-center justify-between gap-3">
                            <div class="flex items-center gap-2 min-w-0">
                                <i data-lucide="link" class="w-4 h-4 text-gray-400"></i>
                                <template x-if="source.reference_url">
                                    <a :href="source.reference_url" target="_blank" rel="noopener"
                                       class="text-boulanger-orange hover:underline truncate" x-text="source.name"></a>
                                </template>
                                <template x-if="!source.reference_url">
                                    <span class="truncate" x-text="source.name"></span>
                                </template>
                            </div>
                            <span class="text-xs text-gray-400" x-text="source.published_at || 'Date inconnue'"></span>
                        </li>
                    </template>
                </ul>
                <p class="text-xs text-gray-400 mt-3">
                    Estimations indicatives, non contractuelles. Les coûts réels peuvent varier selon diagnostic.
                </p>
            </div>
        </div>

    </main>

    {{-- * MODALE RÉCAPITULATIF OFFRE --}}
    <div x-show="showRecapModal"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         class="fixed inset-0 z-50 overflow-y-auto"
         style="display: none;">
        {{-- Overlay --}}
        <div class="fixed inset-0 bg-black/60 backdrop-blur-sm"
             @click="showRecapModal = false"></div>

        {{-- Modale --}}
        <div class="flex min-h-full items-center justify-center p-4">
            <div @click.away="showRecapModal = false"
                 x-transition:enter="transition ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100"
                 class="relative w-full max-w-2xl bg-white rounded-2xl shadow-2xl overflow-hidden">

                {{-- Header --}}
                <div class="bg-gradient-to-r from-boulanger-orange to-orange-600 p-6 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="text-2xl font-display font-bold">Récapitulatif de l'offre</h3>
                            <p class="text-sm text-white/80 mt-1">Comparaison sur 1 an</p>
                        </div>
                        <button @click="showRecapModal = false"
                                class="p-2 hover:bg-white/20 rounded-lg transition">
                            <i data-lucide="x" class="w-6 h-6"></i>
                        </button>
                    </div>
                </div>

                {{-- Content --}}
                <div class="p-6 space-y-6 max-h-[70vh] overflow-y-auto">

                    {{-- Formule sélectionnée --}}
                    <div class="bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl p-5 border-2 border-boulanger-orange">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-600 mb-1">Formule Club Infinity</p>
                                <h4 class="text-xl font-bold text-gray-900" x-text="recommendedPlan.name"></h4>
                            </div>
                            <div class="text-right">
                                <div class="flex items-baseline">
                                    <span class="text-3xl font-extrabold text-boulanger-orange" x-text="recommendedPlan.price"></span>
                                    <span class="text-lg text-gray-600 ml-1">€/mois</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Produits couverts --}}
                    <div>
                        <h5 class="font-bold text-gray-800 mb-3 flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i>
                            Équipements couverts (<span x-text="selectedProducts.size"></span>)
                        </h5>
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 max-h-40 overflow-y-auto pr-2">
                            <template x-for="product in selectedProductsList" :key="product.id">
                                <div class="flex items-center gap-2 p-2 bg-gray-50 rounded-lg text-sm">
                                    <div class="w-6 h-6 rounded-full bg-white flex items-center justify-center">
                                        <i :data-lucide="product.icon" class="w-4 h-4 text-gray-600"></i>
                                    </div>
                                    <span class="font-medium text-gray-700 truncate" x-text="product.name"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    {{-- Risque maximal --}}
                    <div class="bg-red-50 rounded-xl p-4 border border-red-200">
                        <div class="flex items-center gap-3">
                            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                                <i data-lucide="alert-triangle" class="w-6 h-6 text-red-600"></i>
                            </div>
                            <div class="flex-1">
                                <p class="text-sm text-red-600 font-semibold">Panne la plus coûteuse estimée</p>
                                <p class="text-2xl font-bold text-red-700" x-text="totalRepairCost + ' €'"></p>
                            </div>
                        </div>
                    </div>

                    {{-- Cagnottage optionnel --}}
                    <div class="border-t border-gray-200 pt-4">
                        <label class="flex items-center gap-2 mb-3">
                            <input type="checkbox"
                                   x-model="hasCagnottage"
                                   class="w-4 h-4 text-boulanger-orange rounded focus:ring-boulanger-orange">
                            <span class="font-medium text-gray-700">Ajouter une offre cagnottage</span>
                        </label>

                        <div x-show="hasCagnottage" x-collapse class="space-y-4">

                            {{-- Montant de l'achat actuel --}}
                            <div class="bg-blue-50 rounded-lg p-3">
                                <label class="block text-sm font-medium text-gray-700 mb-2">
                                    🛒 Montant de l'achat du client
                                </label>
                                <div class="relative">
                                    <input type="number"
                                           x-model.number="currentPurchaseAmount"
                                           placeholder="1200"
                                           min="0"
                                           step="50"
                                           class="w-full p-2.5 pr-12 border border-blue-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 font-medium">€</span>
                                </div>
                                <p class="text-xs text-blue-600 mt-1.5">
                                    Montant du panier actuel (achat en cours chez Boulanger)
                                </p>
                            </div>

                            {{-- Type de cagnottage --}}
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Type de cagnottage</label>
                                <select x-model="cagnottageType"
                                        class="w-full p-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                    <option value="percent_capped">Pourcentage avec plafond (ex: 2% max 60€)</option>
                                    <option value="fixed_euro">Montant fixe en euros</option>
                                    <option value="tranches">Par tranches (ex: 20€ tous les 100€)</option>
                                </select>
                            </div>

                            {{-- Config % avec plafond --}}
                            <div x-show="cagnottageType === 'percent_capped'" x-collapse class="space-y-3 bg-orange-50 rounded-lg p-4">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Pourcentage de remise</label>
                                    <div class="relative">
                                        <input type="number"
                                               x-model.number="cagnottagePourcent"
                                               placeholder="2"
                                               min="0"
                                               max="100"
                                               step="0.5"
                                               class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">%</span>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Plafond maximum</label>
                                    <div class="relative">
                                        <input type="number"
                                               x-model.number="cagnottageMaxCap"
                                               placeholder="60"
                                               min="0"
                                               step="5"
                                               class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                                    </div>
                                </div>
                                <div x-show="cagnottageAmount > 0" class="bg-green-100 rounded-lg p-2.5 text-xs text-green-700">
                                    💰 <strong x-text="cagnottagePourcent + '%'"></strong> de <strong x-text="currentPurchaseAmount + '€'"></strong> =
                                    <strong x-text="Math.round((currentPurchaseAmount * cagnottagePourcent) / 100) + '€'"></strong>
                                    (plafonné à <strong x-text="cagnottageMaxCap + '€'"></strong>)
                                    → <strong x-text="Math.round(cagnottageAmount) + '€'"></strong> de cagnotte
                                </div>
                            </div>

                            {{-- Config montant fixe --}}
                            <div x-show="cagnottageType === 'fixed_euro'" x-collapse class="bg-orange-50 rounded-lg p-4">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Montant fixe de la cagnotte</label>
                                <div class="relative">
                                    <input type="number"
                                           x-model.number="cagnottageFixedAmount"
                                           placeholder="50"
                                           min="0"
                                           step="5"
                                           class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                    <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                                </div>
                                <p class="text-xs text-gray-600 mt-2">
                                    Montant fixe offert, indépendant de la facture
                                </p>
                            </div>

                            {{-- Config par tranches --}}
                            <div x-show="cagnottageType === 'tranches'" x-collapse class="space-y-3 bg-orange-50 rounded-lg p-4">
                                <div class="grid grid-cols-2 gap-3">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Montant par tranche</label>
                                        <div class="relative">
                                            <input type="number"
                                                   x-model.number="cagnottageTrancheMontant"
                                                   placeholder="20"
                                                   min="0"
                                                   step="5"
                                                   class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs">€</span>
                                        </div>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Tous les</label>
                                        <div class="relative">
                                            <input type="number"
                                                   x-model.number="cagnottageTrancheIntervalle"
                                                   placeholder="100"
                                                   min="1"
                                                   step="10"
                                                   class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                            <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 text-xs">€</span>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-2">Plafond maximum (0 = illimité)</label>
                                    <div class="relative">
                                        <input type="number"
                                               x-model.number="cagnottageTrancheMax"
                                               placeholder="80"
                                               min="0"
                                               step="10"
                                               class="w-full p-2.5 pr-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:outline-none">
                                        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500">€</span>
                                    </div>
                                </div>
                                <div x-show="cagnottageAmount > 0" class="bg-green-100 rounded-lg p-2.5 text-xs text-green-700">
                                    💰 <strong x-text="Math.floor(currentPurchaseAmount / cagnottageTrancheIntervalle)"></strong> tranches de
                                    <strong x-text="cagnottageTrancheIntervalle + '€'"></strong> ×
                                    <strong x-text="cagnottageTrancheMontant + '€'"></strong> =
                                    <strong x-text="Math.floor(currentPurchaseAmount / cagnottageTrancheIntervalle) * cagnottageTrancheMontant + '€'"></strong>
                                    <span x-show="cagnottageTrancheMax > 0">(plafonné à <strong x-text="cagnottageTrancheMax + '€'"></strong>)</span>
                                    → <strong x-text="Math.round(cagnottageAmount) + '€'"></strong> de cagnotte
                                </div>
                            </div>

                        </div>
                    </div>

                    {{-- Comparaison annuelle --}}
                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-5 border border-blue-200">
                        <h5 class="font-bold text-gray-800 mb-4 text-center">💰 Bilan : Achat + Infinity</h5>

                        <div class="space-y-3">
                            {{-- Achat actuel --}}
                            <div x-show="hasCagnottage && currentPurchaseAmount > 0"
                                 class="flex justify-between items-center bg-white/70 rounded-lg p-2.5">
                                <span class="text-sm text-gray-700 font-medium">🛒 Achat du client</span>
                                <span class="font-bold text-gray-900" x-text="currentPurchaseAmount.toFixed(2) + ' €'"></span>
                            </div>

                            {{-- Cagnottage immédiat --}}
                            <div x-show="hasCagnottage && cagnottageAmount > 0"
                                 class="flex justify-between items-center text-green-600 bg-green-50/70 rounded-lg p-2.5">
                                <span class="text-sm font-medium">✅ Cagnotte obtenue sur cet achat</span>
                                <span class="font-bold" x-text="'- ' + Math.round(cagnottageAmount) + ' €'"></span>
                            </div>

                            {{-- Prix net après cagnotte --}}
                            <div x-show="hasCagnottage && cagnottageAmount > 0"
                                 class="flex justify-between items-center bg-white/70 rounded-lg p-2.5">
                                <span class="text-sm text-gray-700 font-medium">= Prix net de l'achat</span>
                                <span class="font-bold text-gray-900"
                                      x-text="(parseFloat(currentPurchaseAmount) - cagnottageAmount).toFixed(2) + ' €'"></span>
                            </div>

                            {{-- Divider --}}
                            <div x-show="hasCagnottage && cagnottageAmount > 0" class="border-t border-blue-300 my-2"></div>

                            {{-- Cotisation Infinity --}}
                            <div class="flex justify-between items-center">
                                <span class="text-sm text-gray-600">+ Infinity (1 an de protection)</span>
                                <span class="font-bold text-gray-900" x-text="annualInfinityCost.toFixed(2) + ' €'"></span>
                            </div>

                            {{-- Total avec Infinity --}}
                            <div class="border-t-2 border-blue-400 pt-3 flex justify-between items-center bg-white/50 rounded-lg p-3">
                                <span class="font-bold text-gray-800">Total achat + Infinity</span>
                                <span class="text-2xl font-extrabold text-gray-900"
                                      x-text="(parseFloat(currentPurchaseAmount || 0) + annualInfinityCost - (hasCagnottage ? cagnottageAmount : 0)).toFixed(2) + ' €'"></span>
                            </div>

                            {{-- Message clé : économie cagnotte = réduction Infinity --}}
                            <div x-show="hasCagnottage && cagnottageAmount > 0"
                                 class="bg-gradient-to-r from-orange-100 to-yellow-100 border-2 border-orange-300 rounded-lg p-3 mt-3">
                                <p class="text-sm font-bold text-orange-800 text-center">
                                    🎯 La cagnotte de <span x-text="Math.round(cagnottageAmount) + '€'"></span> réduit Infinity à seulement
                                    <span class="text-boulanger-orange" x-text="Math.max(0, annualInfinityCost - cagnottageAmount).toFixed(2) + '€/an'"></span>
                                    (<span x-text="(Math.max(0, annualInfinityCost - cagnottageAmount) / 12).toFixed(2) + '€/mois'"></span>) !
                                </p>
                            </div>

                            {{-- Comparaison avec risque panne --}}
                            <div class="bg-red-50 border border-red-200 rounded-lg p-3 mt-3">
                                <p class="text-xs text-red-700 text-center">
                                    ⚠️ Une seule panne peut coûter jusqu'à <strong x-text="totalRepairCost + '€'"></strong>.
                                    <span x-show="hasCagnottage && cagnottageAmount > 0">
                                        Avec la cagnotte, Infinity ne revient qu'à <strong x-text="(Math.max(0, annualInfinityCost - cagnottageAmount) / 12).toFixed(2) + '€/mois'"></strong> !
                                    </span>
                                    <span x-show="!hasCagnottage || cagnottageAmount === 0">
                                        Infinity protège tout pour <strong x-text="(annualInfinityCost / 12).toFixed(2) + '€/mois'"></strong>.
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Footer Actions --}}
                <div class="bg-gray-50 p-4 flex gap-3">
                    <button @click="showRecapModal = false"
                            class="flex-1 py-3 px-4 bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold rounded-xl transition">
                        Modifier
                    </button>
                    <button @click="showRecapModal = false; alert('Offre validée ! Prochaine étape : souscription client.');"
                            class="flex-1 py-3 px-4 bg-boulanger-orange hover:bg-orange-600 text-white font-bold rounded-xl transition shadow-lg">
                        Valider l'offre
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection