{{-- resources/views/pages/accueil.blade.php --}}
<x-layouts.app title="CD2C — Centre de Gestion Agréé Cameroun | Simulateur IGS 2026">

    {{-- ═══════════════ HERO ═══════════════ --}}
    <section class="bg-gradient-to-br from-blue-900 via-blue-800 to-blue-700 text-white py-20 px-4 relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-10 right-10 w-72 h-72 bg-white rounded-full blur-3xl"></div>
            <div class="absolute bottom-0 left-0 w-96 h-96 bg-orange-400 rounded-full blur-3xl"></div>
        </div>

        <div class="max-w-7xl mx-auto relative">
            <div class="grid lg:grid-cols-2 gap-12 items-center">
                <div>
                    {{-- Badge --}}
                    <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20
                                rounded-full px-4 py-1.5 text-sm font-medium mb-6">
                        <span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
                        CGA agréé MINFI — Conforme CGI & LF 2026
                    </div>

                    <h1 class="text-4xl lg:text-5xl font-black leading-tight mb-6">
                        Maîtrisez votre<br>
                        <span class="text-orange-400">fiscalité</span> au Cameroun
                    </h1>

                    <p class="text-blue-100 text-lg mb-8 max-w-lg">
                        CD2C vous accompagne : simulateurs IGS 2026 (12 classes), adhésion CGA,
                        conformité OHADA. <strong class="text-white">Abattement 50% sur votre IGS</strong> avec notre CGA.
                    </p>

                    <div class="flex flex-wrap gap-4">
                        <a href="{{ route('simulateurs.igs') }}"
                           class="bg-orange-500 hover:bg-orange-400 text-white font-bold px-6 py-3 rounded-xl
                                  transition-colors flex items-center gap-2">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 11h.01M12 11h.01M15 11h.01M4 19h16a2 2 0 002-2V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            Simuler mon IGS 2026
                        </a>
                        <a href="{{ route('adhesion') }}"
                           class="bg-white text-blue-800 font-bold px-6 py-3 rounded-xl hover:bg-blue-50 transition-colors">
                            Adhérer au CGA →
                        </a>
                    </div>

                    {{-- Stats --}}
                    <div class="flex gap-8 mt-10 text-sm">
                        <div>
                            <div class="text-2xl font-black text-orange-400">50%</div>
                            <div class="text-blue-200">Abattement IGS CGA</div>
                        </div>
                        <div>
                            <div class="text-2xl font-black text-orange-400">12</div>
                            <div class="text-blue-200">Classes IGS</div>
                        </div>
                        <div>
                            <div class="text-2xl font-black text-orange-400">10</div>
                            <div class="text-blue-200">Simulateurs fiscaux</div>
                        </div>
                    </div>
                </div>

                {{-- Mini simulateur IGS rapide --}}
                <div class="bg-white rounded-2xl shadow-2xl p-6 text-gray-900"
                     x-data="{
                         ca: '',
                         type: 'commercial',
                         calcul: null,
                         calculer() {
                             if (!this.ca || this.ca < 0) return;
                             fetch('/api/v1/calculer-igs', {
                                 method: 'POST',
                                 headers: {'Content-Type':'application/json','X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content},
                                 body: JSON.stringify({ca_ht: parseFloat(this.ca), type: this.type})
                             }).then(r => r.json()).then(d => { this.calcul = d; });
                         }
                     }">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
                            <svg class="w-4 h-4 text-blue-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                      d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 11h.01M12 11h.01M15 11h.01M4 19h16a2 2 0 002-2V7a2 2 0 00-2-2H4a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                        </div>
                        <h2 class="font-bold text-gray-900">Simulateur IGS Rapide</h2>
                        <span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded-full font-bold ml-auto">CGI 2026</span>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <label class="text-xs font-semibold text-gray-600 uppercase tracking-wide">CA Annuel HT (FCFA)</label>
                            <input type="number" x-model="ca" @input.debounce.300ms="calculer()"
                                   placeholder="Ex: 8 000 000"
                                   class="w-full mt-1 border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <div>
                            <label class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Type d'activité</label>
                            <select x-model="type" @change="calculer()"
                                    class="w-full mt-1 border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="commercial">Activité commerciale / artisanale</option>
                                <option value="proflib">Profession libérale (médecin, avocat...)</option>
                            </select>
                        </div>

                        {{-- Résultat --}}
                        <template x-if="calcul && calcul.eligible_igs">
                            <div class="bg-blue-50 rounded-xl p-4 space-y-2">
                                <div class="flex justify-between items-center">
                                    <span class="text-sm text-gray-600">Classe IGS</span>
                                    <span class="font-black text-blue-800 text-lg" x-text="'Classe ' + calcul.classe"></span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-sm text-gray-600">IGS annuel</span>
                                    <span class="font-bold text-gray-900"
                                          x-text="calcul.montant_igs.toLocaleString('fr-FR') + ' FCFA'"></span>
                                </div>
                                <div class="flex justify-between bg-green-50 rounded-lg px-3 py-2">
                                    <span class="text-sm font-semibold text-green-800">Avec abattement CGA (50%)</span>
                                    <span class="font-black text-green-700"
                                          x-text="calcul.montant_igs_cga.toLocaleString('fr-FR') + ' FCFA'"></span>
                                </div>
                                <div class="flex justify-between">
                                    <span class="text-xs text-green-600">💰 Économie avec CGA</span>
                                    <span class="text-xs font-bold text-green-600"
                                          x-text="calcul.economie_cga.toLocaleString('fr-FR') + ' FCFA/an'"></span>
                                </div>
                                <template x-if="calcul.dsf_obligatoire">
                                    <div class="text-xs text-orange-600 bg-orange-50 rounded px-2 py-1">
                                        ⚠️ DSF obligatoire (CA ≥ 10M FCFA) — avant le 15 mai
                                    </div>
                                </template>
                            </div>
                        </template>

                        <template x-if="calcul && !calcul.eligible_igs">
                            <div class="bg-orange-50 rounded-xl p-4">
                                <p class="text-sm text-orange-800" x-text="calcul.message"></p>
                            </div>
                        </template>

                        <a href="{{ route('simulateurs.igs') }}"
                           class="block w-full text-center bg-blue-700 hover:bg-blue-800 text-white text-sm font-semibold
                                  py-2.5 rounded-lg transition-colors">
                            Simulation complète avec PDF →
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- ═══════════════ SERVICES ═══════════════ --}}
    <section class="py-16 px-4 max-w-7xl mx-auto">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-black text-gray-900 mb-4">Notre plateforme complète</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                11 modules dédiés aux PME et TPE camerounaises. Conformes CGI 2026, Loi de Finances 2026 et OHADA.
            </p>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach([
                ['🧮', 'Simulateurs IGS & Fiscaux', '10 simulateurs temps réel (IS, IRPP, TVA, IGS 12 classes, Reclassement...)', route('simulateurs.index'), 'blue'],
                ['📋', 'Adhésion CGA en ligne', 'Formulaire 6 étapes avec détection automatique du régime IGS, paiement Mobile Money', route('adhesion'), 'orange'],
                ['🔒', 'Espace Adhérent', 'Dashboard personnalisé IGS/Réel, suivi dossier, calendrier fiscal, messagerie', route('login'), 'green'],
                ['📅', 'Calendrier Fiscal IGS', '5 échéances IGS (30 avril + 4 acomptes), DSF, TVA, IS avec rappels SMS/email', route('outils-dgi.calendrier'), 'purple'],
                ['📚', 'Guide IGS & Conformité', 'Détecteur de régime, 12 classes, checklist conformité DGI, guide reclassement', route('igs.index'), 'teal'],
                ['📰', 'Blog CGI 2026', 'Actualités fiscales CGI 2026, LF 2026, IGS, OHADA — 2 articles/mois minimum', route('blog.index'), 'gray'],
            ] as [$icon, $titre, $desc, $url, $couleur])
            <a href="{{ $url }}" class="bg-white rounded-2xl border border-gray-100 p-6 hover:shadow-lg transition-all group">
                <div class="text-3xl mb-4">{{ $icon }}</div>
                <h3 class="font-bold text-gray-900 mb-2 group-hover:text-blue-700 transition-colors">{{ $titre }}</h3>
                <p class="text-sm text-gray-600">{{ $desc }}</p>
            </a>
            @endforeach
        </div>
    </section>

    {{-- ═══════════════ BARÈME IGS ═══════════════ --}}
    <section class="bg-blue-900 text-white py-16 px-4">
        <div class="max-w-5xl mx-auto">
            <div class="text-center mb-10">
                <h2 class="text-2xl font-black mb-2">Barème IGS 2026 — Art. C40 CGI Cameroun</h2>
                <p class="text-blue-200 text-sm">12 classes selon le CA HT annuel — Avec et sans abattement CGA 50%</p>
            </div>

            <div class="overflow-x-auto rounded-xl">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-blue-800 text-blue-100">
                            <th class="px-4 py-3 text-left">Classe</th>
                            <th class="px-4 py-3 text-right">CA HT (FCFA)</th>
                            <th class="px-4 py-3 text-right">IGS annuel</th>
                            <th class="px-4 py-3 text-right font-bold text-green-300">Avec CGA (-50%)</th>
                            <th class="px-4 py-3 text-center">DSF</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($baremeIgs as $classe)
                        <tr class="{{ $loop->even ? 'bg-blue-800/30' : '' }} hover:bg-blue-800/50">
                            <td class="px-4 py-2.5">
                                <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg text-xs font-bold
                                    {{ $classe->classe <= 7 ? 'bg-green-500' : 'bg-blue-500' }}">
                                    {{ $classe->classe }}
                                </span>
                            </td>
                            <td class="px-4 py-2.5 text-right text-blue-100">
                                @if($classe->ca_min == 0)
                                    < {{ number_format($classe->ca_max, 0, ',', ' ') }}
                                @else
                                    {{ number_format($classe->ca_min, 0, ',', ' ') }} — {{ number_format($classe->ca_max, 0, ',', ' ') }}
                                @endif
                            </td>
                            <td class="px-4 py-2.5 text-right font-medium">
                                {{ $classe->montant_igs == 0 ? 'Exonéré' : number_format($classe->montant_igs, 0, ',', ' ').' FCFA' }}
                            </td>
                            <td class="px-4 py-2.5 text-right font-bold text-green-300">
                                {{ $classe->montant_igs_cga == 0 ? 'Exonéré' : number_format($classe->montant_igs_cga, 0, ',', ' ').' FCFA' }}
                            </td>
                            <td class="px-4 py-2.5 text-center">
                                {{ $classe->dsf_obligatoire ? '✓' : '—' }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="mt-6 flex justify-center gap-4">
                <a href="{{ route('simulateurs.igs') }}"
                   class="bg-orange-500 hover:bg-orange-400 text-white font-bold px-6 py-3 rounded-xl transition-colors">
                    Calculer mon IGS →
                </a>
                <a href="{{ route('igs.classes') }}"
                   class="bg-white/10 hover:bg-white/20 text-white font-medium px-6 py-3 rounded-xl transition-colors">
                    Guide complet des classes
                </a>
            </div>
        </div>
    </section>

    {{-- ═══════════════ CTA ADHÉSION ═══════════════ --}}
    <section class="py-16 px-4 bg-gradient-to-r from-orange-500 to-orange-600 text-white">
        <div class="max-w-3xl mx-auto text-center">
            <h2 class="text-3xl font-black mb-4">Rejoignez le CD2C — CGA agréé MINFI</h2>
            <p class="text-orange-100 mb-8 text-lg">
                Abattement 50% sur votre IGS ou IS/IRPP, exonération patente, dispense de contrôle fiscal.
                Inscription en ligne en 6 étapes avec paiement Mobile Money.
            </p>
            <a href="{{ route('adhesion') }}"
               class="inline-block bg-white text-orange-600 font-black text-lg px-8 py-4 rounded-2xl hover:bg-orange-50 transition-colors shadow-lg">
                Adhérer maintenant — Paiement Mobile Money
            </a>
        </div>
    </section>

</x-layouts.app>