<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= APP_NAME ?> - Plateforme de Service Client Intelligent</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63' },
                        accent: { 400: '#34d399', 500: '#10b981' }
                    }
                }
            }
        }
    </script>
    <style>
        body { font-family: 'Inter', sans-serif; }
        .gradient-text { background: linear-gradient(135deg, #06b6d4 0%, #10b981 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        .hero-gradient { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%); }
        .glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
        .float { animation: float 6s ease-in-out infinite; }
        .float-delay { animation: float 6s ease-in-out infinite; animation-delay: 2s; }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
        .pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
        @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(6, 182, 212, 0.4); } 50% { box-shadow: 0 0 40px rgba(6, 182, 212, 0.8); } }
        .slide-up { animation: slideUp 0.6s ease-out forwards; opacity: 0; }
        @keyframes slideUp { to { opacity: 1; transform: translateY(0); } from { opacity: 0; transform: translateY(30px); } }
        .hover-lift { transition: all 0.3s ease; }
        .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
    </style>
</head>
<body class="bg-slate-50 antialiased">

    <!-- Navigation -->
    <nav class="fixed w-full z-50 transition-all duration-300" id="navbar">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-20">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-xl flex items-center justify-center shadow-lg">
                        <i class="fas fa-headset text-white text-lg"></i>
                    </div>
                    <span class="text-2xl font-bold text-white"><?= APP_NAME ?></span>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#fonctionnalites" class="text-white/80 hover:text-white transition font-medium">Fonctionnalités</a>
                    <a href="#avantages" class="text-white/80 hover:text-white transition font-medium">Avantages</a>
                    <a href="#tarifs" class="text-white/80 hover:text-white transition font-medium">Tarifs</a>
                    <a href="#contact" class="text-white/80 hover:text-white transition font-medium">Contact</a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="<?= BASE_URL ?>/auth/login" class="hidden sm:flex items-center px-5 py-2.5 text-white/90 hover:text-white font-medium transition">
                        Connexion
                    </a>
                    <a href="<?= BASE_URL ?>/auth/register" class="flex items-center px-6 py-2.5 bg-gradient-to-r from-cyan-500 to-emerald-500 text-white rounded-full font-semibold hover:from-cyan-600 hover:to-emerald-600 transition shadow-lg hover:shadow-xl">
                        <i class="fas fa-rocket mr-2 text-sm"></i>Démarrer
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-gradient min-h-screen relative overflow-hidden">
        <!-- Animated Background Elements -->
        <div class="absolute inset-0 overflow-hidden">
            <div class="absolute top-20 left-10 w-72 h-72 bg-cyan-500/20 rounded-full blur-3xl float"></div>
            <div class="absolute bottom-20 right-10 w-96 h-96 bg-emerald-500/15 rounded-full blur-3xl float-delay"></div>
            <div class="absolute top-1/2 left-1/2 w-64 h-64 bg-cyan-500/10 rounded-full blur-3xl"></div>
        </div>
        
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-20">
            <div class="grid lg:grid-cols-2 gap-12 items-center min-h-[80vh]">
                <!-- Left Content -->
                <div class="text-center lg:text-left">
                    <div class="inline-flex items-center px-4 py-2 bg-white/10 rounded-full border border-white/20 mb-6 slide-up">
                        <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                        <span class="text-white/90 text-sm font-medium">Nouvelle génération de support client</span>
                    </div>
                    
                    <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black text-white leading-tight mb-6 slide-up" style="animation-delay: 0.1s">
                        Service Client<br>
                        <span class="bg-gradient-to-r from-yellow-400 via-orange-400 to-pink-500 bg-clip-text text-transparent">Intelligent</span>
                        <br>& Multilingue
                    </h1>
                    
                    <p class="text-lg sm:text-xl text-white/70 mb-8 max-w-xl mx-auto lg:mx-0 slide-up" style="animation-delay: 0.2s">
                        Transformez votre relation client avec l'IA. Support vocal en <strong class="text-white">Français, Bambara, Peulh et Soninké</strong>. 
                        Disponible 24h/24, 7j/7.
                    </p>
                    
                    <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start mb-12 slide-up" style="animation-delay: 0.3s">
                        <a href="<?= BASE_URL ?>/auth/login" class="group flex items-center justify-center px-8 py-4 bg-gradient-to-r from-cyan-500 to-emerald-500 text-white rounded-full font-semibold hover:from-cyan-600 hover:to-emerald-600 transition-all shadow-2xl shadow-cyan-500/30 hover:shadow-cyan-500/50">
                            Essai gratuit 14 jours
                            <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </a>
                        <a href="#demo" class="flex items-center justify-center px-8 py-4 glass text-white rounded-full font-semibold hover:bg-white/20 transition">
                            <i class="fas fa-play-circle mr-2"></i>Voir la démo
                        </a>
                    </div>
                    
                    <!-- Trust Badges -->
                    <div class="flex flex-wrap items-center justify-center lg:justify-start gap-6 slide-up" style="animation-delay: 0.4s">
                        <div class="flex items-center text-white/60">
                            <i class="fas fa-shield-alt text-green-400 mr-2"></i>
                            <span class="text-sm">Données sécurisées</span>
                        </div>
                        <div class="flex items-center text-white/60">
                            <i class="fas fa-clock text-blue-400 mr-2"></i>
                            <span class="text-sm">Setup en 5 min</span>
                        </div>
                        <div class="flex items-center text-white/60">
                            <i class="fas fa-headset text-cyan-400 mr-2"></i>
                            <span class="text-sm">Support 24/7</span>
                        </div>
                    </div>
                </div>
                
                <!-- Right Content - Chat Demo -->
                <div class="relative slide-up" style="animation-delay: 0.3s">
                    <div class="relative max-w-md mx-auto">
                        <!-- Glow Effect -->
                        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500 to-emerald-500 rounded-3xl blur-2xl opacity-30"></div>
                        
                        <!-- Chat Window -->
                        <div class="relative bg-white rounded-3xl shadow-2xl overflow-hidden">
                            <!-- Chat Header -->
                            <div class="bg-gradient-to-r from-cyan-600 to-emerald-600 px-6 py-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center">
                                        <div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center mr-3">
                                            <i class="fas fa-robot text-white text-xl"></i>
                                        </div>
                                        <div>
                                            <p class="font-semibold text-white">Assistant <?= APP_NAME ?></p>
                                            <p class="text-xs text-white/70 flex items-center">
                                                <span class="w-2 h-2 bg-green-400 rounded-full mr-1 animate-pulse"></span>En ligne • Répond instantanément
                                            </p>
                                        </div>
                                    </div>
                                    <div class="flex space-x-2">
                                        <span class="w-3 h-3 bg-white/30 rounded-full"></span>
                                        <span class="w-3 h-3 bg-white/30 rounded-full"></span>
                                        <span class="w-3 h-3 bg-white/30 rounded-full"></span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Language Selector -->
                            <div class="bg-gray-50 px-4 py-2 flex justify-center space-x-2 border-b">
                                <span class="px-3 py-1 bg-cyan-100 text-cyan-700 rounded-full text-xs font-medium">🇫🇷 Français</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium hover:bg-gray-200 cursor-pointer">🇲🇱 Bambara</span>
                                <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium hover:bg-gray-200 cursor-pointer">Peulh</span>
                            </div>
                            
                            <!-- Chat Messages -->
                            <div class="p-6 space-y-4 bg-gray-50/50">
                                <div class="flex justify-start">
                                    <div class="bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm max-w-[80%]">
                                        <p class="text-gray-700 text-sm">👋 Bonjour! Je suis votre assistant intelligent. Comment puis-je vous aider?</p>
                                    </div>
                                </div>
                                
                                <div class="flex justify-end">
                                    <div class="bg-gradient-to-r from-cyan-500 to-emerald-500 rounded-2xl rounded-tr-sm px-4 py-3 shadow-sm max-w-[80%]">
                                        <p class="text-white text-sm">Je voudrais connaître mon solde</p>
                                    </div>
                                </div>
                                
                                <div class="flex justify-start">
                                    <div class="bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm max-w-[80%]">
                                        <p class="text-gray-700 text-sm">✅ Votre solde actuel est de <strong>125,000 FCFA</strong>.</p>
                                        <p class="text-gray-500 text-xs mt-2">Dernière mise à jour: il y a 2 minutes</p>
                                    </div>
                                </div>
                                
                                <div class="flex justify-start">
                                    <div class="bg-white rounded-2xl rounded-tl-sm px-4 py-3 shadow-sm">
                                        <p class="text-gray-700 text-sm">Puis-je vous aider avec autre chose?</p>
                                        <div class="flex flex-wrap gap-2 mt-3">
                                            <span class="px-3 py-1 bg-cyan-50 text-cyan-600 rounded-full text-xs cursor-pointer hover:bg-cyan-100">📊 Historique</span>
                                            <span class="px-3 py-1 bg-cyan-50 text-cyan-600 rounded-full text-xs cursor-pointer hover:bg-cyan-100">💳 Paiement</span>
                                            <span class="px-3 py-1 bg-cyan-50 text-cyan-600 rounded-full text-xs cursor-pointer hover:bg-cyan-100">👤 Agent</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Chat Input -->
                            <div class="p-4 bg-white border-t">
                                <div class="flex items-center bg-gray-100 rounded-full px-4 py-3">
                                    <i class="fas fa-microphone text-gray-400 mr-3 cursor-pointer hover:text-cyan-500"></i>
                                    <input type="text" placeholder="Tapez votre message..." class="flex-1 bg-transparent outline-none text-gray-700 text-sm">
                                    <button class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-emerald-500 rounded-full flex items-center justify-center text-white ml-2 hover:shadow-lg transition">
                                        <i class="fas fa-paper-plane text-xs"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Scroll Indicator -->
        <div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
            <i class="fas fa-chevron-down text-white/50 text-2xl"></i>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-16 bg-white relative -mt-10 z-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-white rounded-3xl shadow-xl border border-gray-100 p-8 grid grid-cols-2 md:grid-cols-4 gap-8">
                <div class="text-center">
                    <div class="text-4xl font-black text-cyan-600 mb-2">98%</div>
                    <div class="text-gray-600 text-sm">Satisfaction client</div>
                </div>
                <div class="text-center border-l border-gray-100">
                    <div class="text-4xl font-black text-cyan-600 mb-2">50K+</div>
                    <div class="text-gray-600 text-sm">Conversations/mois</div>
                </div>
                <div class="text-center border-l border-gray-100">
                    <div class="text-4xl font-black text-cyan-600 mb-2">&lt;30s</div>
                    <div class="text-gray-600 text-sm">Temps de réponse</div>
                </div>
                <div class="text-center border-l border-gray-100">
                    <div class="text-4xl font-black text-cyan-600 mb-2">4</div>
                    <div class="text-gray-600 text-sm">Langues locales</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="fonctionnalites" class="py-24 bg-slate-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-cyan-100 text-cyan-700 rounded-full text-sm font-semibold mb-4">FONCTIONNALITÉS</span>
                <h2 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">Tout ce dont vous avez besoin</h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">Une suite complète d'outils pour révolutionner votre service client</p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="group bg-white rounded-2xl p-8 hover-lift border border-gray-100">
                    <div class="w-16 h-16 bg-gradient-to-br from-cyan-500 to-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-microphone-alt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Support Vocal Multilingue</h3>
                    <p class="text-gray-600 leading-relaxed">Interaction naturelle en Français, Bambara, Peulh et Soninké. Reconnaissance vocale optimisée pour l'Afrique de l'Ouest.</p>
                    <div class="mt-4 flex flex-wrap gap-2">
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">🇫🇷 Français</span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">🇲🇱 Bambara</span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">Peulh</span>
                        <span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs">Soninké</span>
                    </div>
                </div>
                
                <div class="group bg-white rounded-2xl p-8 hover-lift border border-gray-100">
                    <div class="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fab fa-whatsapp text-3xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">WhatsApp Business</h3>
                    <p class="text-gray-600 leading-relaxed">Intégration native avec WhatsApp. Gérez vos conversations depuis une interface unique avec support audio et texte.</p>
                    <div class="mt-4 flex items-center text-green-600 font-medium">
                        <i class="fas fa-check-circle mr-2"></i>
                        <span class="text-sm">API officielle</span>
                    </div>
                </div>
                
                <div class="group bg-white rounded-2xl p-8 hover-lift border border-gray-100">
                    <div class="w-16 h-16 bg-gradient-to-br from-emerald-500 to-teal-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-brain text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">IA Conversationnelle</h3>
                    <p class="text-gray-600 leading-relaxed">Chatbot intelligent qui comprend le contexte, apprend de vos données et répond automatiquement aux questions.</p>
                    <div class="mt-4 flex items-center text-cyan-600 font-medium">
                        <i class="fas fa-robot mr-2"></i>
                        <span class="text-sm">80% de résolution auto</span>
                    </div>
                </div>
                
                <div class="group bg-white rounded-2xl p-8 hover-lift border border-gray-100">
                    <div class="w-16 h-16 bg-gradient-to-br from-orange-500 to-red-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-chart-line text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Analyse Prédictive</h3>
                    <p class="text-gray-600 leading-relaxed">Anticipez les crises et identifiez les tendances grâce à l'analyse en temps réel de vos conversations.</p>
                    <div class="mt-4 flex items-center text-orange-600 font-medium">
                        <i class="fas fa-bolt mr-2"></i>
                        <span class="text-sm">Alertes intelligentes</span>
                    </div>
                </div>
                
                <div class="group bg-white rounded-2xl p-8 hover-lift border border-gray-100">
                    <div class="w-16 h-16 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-star text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">CX Index™</h3>
                    <p class="text-gray-600 leading-relaxed">Notre indice exclusif de satisfaction client. Mesurez et améliorez l'expérience en continu.</p>
                    <div class="mt-4">
                        <div class="flex items-center space-x-1">
                            <i class="fas fa-star text-yellow-400"></i>
                            <i class="fas fa-star text-yellow-400"></i>
                            <i class="fas fa-star text-yellow-400"></i>
                            <i class="fas fa-star text-yellow-400"></i>
                            <i class="fas fa-star text-yellow-400"></i>
                            <span class="ml-2 text-sm text-gray-600">Score en temps réel</span>
                        </div>
                    </div>
                </div>
                
                <div class="group bg-white rounded-2xl p-8 hover-lift border border-gray-100">
                    <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-cyan-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                        <i class="fas fa-shield-alt text-2xl text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Sécurité Entreprise</h3>
                    <p class="text-gray-600 leading-relaxed">Architecture multi-tenants avec isolation complète. Chiffrement de bout en bout et conformité RGPD.</p>
                    <div class="mt-4 flex items-center text-blue-600 font-medium">
                        <i class="fas fa-lock mr-2"></i>
                        <span class="text-sm">ISO 27001</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- How It Works -->
    <section id="avantages" class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-green-100 text-green-700 rounded-full text-sm font-semibold mb-4">COMMENT ÇA MARCHE</span>
                <h2 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">Démarrez en 3 étapes</h2>
                <p class="text-xl text-gray-600">Simple, rapide et efficace</p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="relative text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold shadow-lg">1</div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Créez votre compte</h3>
                    <p class="text-gray-600">Inscription gratuite en 2 minutes. Aucune carte bancaire requise.</p>
                    <div class="hidden md:block absolute top-10 left-[60%] w-[80%] border-t-2 border-dashed border-gray-200"></div>
                </div>
                
                <div class="relative text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold shadow-lg">2</div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Configurez le widget</h3>
                    <p class="text-gray-600">Personnalisez couleurs et langues. Copiez le code sur votre site.</p>
                    <div class="hidden md:block absolute top-10 left-[60%] w-[80%] border-t-2 border-dashed border-gray-200"></div>
                </div>
                
                <div class="text-center">
                    <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6 text-white text-3xl font-bold shadow-lg">3</div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">Recevez les demandes</h3>
                    <p class="text-gray-600">L'IA répond automatiquement. Vos agents prennent le relais si nécessaire.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Pricing Section -->
    <section id="tarifs" class="py-24 bg-slate-50">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-gradient-to-br from-cyan-600 to-emerald-600 rounded-3xl p-12 text-center text-white relative overflow-hidden hover-lift shadow-2xl shadow-cyan-500/30">
                <!-- Decorative Elements -->
                <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full -translate-y-1/2 translate-x-1/2"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full translate-y-1/2 -translate-x-1/2"></div>
                
                <div class="relative">
                    <span class="inline-block px-4 py-2 bg-white/20 rounded-full text-sm font-semibold mb-6">TARIFICATION</span>
                    <h2 class="text-4xl sm:text-5xl font-bold mb-4">Devis personnalisé</h2>
                    <p class="text-xl text-white/80 mb-8 max-w-2xl mx-auto">
                        Chaque entreprise est unique. Contactez-nous pour obtenir une offre adaptée à vos besoins spécifiques et à votre volume d'activité.
                    </p>
                    
                    <div class="flex flex-wrap justify-center gap-6 mb-10">
                        <div class="flex items-center text-white/90">
                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
                            <span>Agents illimités</span>
                        </div>
                        <div class="flex items-center text-white/90">
                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
                            <span>Support multilingue</span>
                        </div>
                        <div class="flex items-center text-white/90">
                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
                            <span>Intégration WhatsApp</span>
                        </div>
                        <div class="flex items-center text-white/90">
                            <i class="fas fa-check-circle text-yellow-400 mr-2"></i>
                            <span>Formation incluse</span>
                        </div>
                    </div>
                    
                    <a href="#contact" class="inline-flex items-center px-8 py-4 bg-white text-cyan-600 rounded-full font-semibold hover:bg-gray-100 transition shadow-xl text-lg">
                        <i class="fas fa-envelope mr-3"></i>Contactez-nous pour un devis
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <span class="inline-block px-4 py-2 bg-yellow-100 text-yellow-700 rounded-full text-sm font-semibold mb-4">TÉMOIGNAGES</span>
                <h2 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">Ils nous font confiance</h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-slate-50 rounded-2xl p-8 hover-lift">
                    <div class="flex items-center space-x-1 mb-4">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"Le support en Bambara a transformé notre relation avec les clients ruraux. Ils se sentent enfin compris!"</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-orange-400 to-red-500 rounded-full flex items-center justify-center text-white font-bold mr-4">AT</div>
                        <div>
                            <p class="font-semibold text-gray-900">Amadou Traoré</p>
                            <p class="text-sm text-gray-500">DG, Orange Mali</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-slate-50 rounded-2xl p-8 hover-lift">
                    <div class="flex items-center space-x-1 mb-4">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"80% de nos demandes sont résolues automatiquement. Nos agents se concentrent sur les cas complexes."</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold mr-4">FK</div>
                        <div>
                            <p class="font-semibold text-gray-900">Fatou Konaté</p>
                            <p class="text-sm text-gray-500">Resp. CX, BDM Bank</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-slate-50 rounded-2xl p-8 hover-lift">
                    <div class="flex items-center space-x-1 mb-4">
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-gray-600 mb-6">"L'analyse prédictive nous a permis d'anticiper une crise et de communiquer proactivement. Impressionnant!"</p>
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center text-white font-bold mr-4">MK</div>
                        <div>
                            <p class="font-semibold text-gray-900">Moussa Keita</p>
                            <p class="text-sm text-gray-500">CEO, EDM-SA</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-24 hero-gradient relative overflow-hidden">
        <div class="absolute inset-0">
            <div class="absolute top-10 right-10 w-72 h-72 bg-cyan-500/20 rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-10 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
        </div>
        <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-4xl sm:text-5xl font-bold text-white mb-6">Prêt à transformer votre service client?</h2>
            <p class="text-xl text-white/70 mb-10">Rejoignez les entreprises qui font confiance à <?= APP_NAME ?> pour ravir leurs clients</p>
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="<?= BASE_URL ?>/auth/login" class="inline-flex items-center justify-center px-8 py-4 bg-white text-cyan-600 rounded-full font-semibold hover:bg-gray-100 transition shadow-xl">
                    <i class="fas fa-rocket mr-2"></i>Démarrer gratuitement
                </a>
                <a href="#contact" class="inline-flex items-center justify-center px-8 py-4 glass text-white rounded-full font-semibold hover:bg-white/20 transition">
                    <i class="fas fa-calendar mr-2"></i>Planifier une démo
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer id="contact" class="bg-gray-900 text-white pt-20 pb-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-4 gap-12 mb-16">
                <div class="md:col-span-2">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-gradient-to-br from-cyan-500 to-emerald-500 rounded-xl flex items-center justify-center">
                            <i class="fas fa-headset text-white text-lg"></i>
                        </div>
                        <span class="text-2xl font-bold"><?= APP_NAME ?></span>
                    </div>
                    <p class="text-gray-400 mb-6 max-w-md">Plateforme de service client intelligent, multilingue et multicanal. Conçue en Afrique, pour l'Afrique.</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-white/20 transition">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Produit</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="#fonctionnalites" class="hover:text-white transition">Fonctionnalités</a></li>
                        <li><a href="#tarifs" class="hover:text-white transition">Tarifs</a></li>
                        <li><a href="#" class="hover:text-white transition">Intégrations</a></li>
                        <li><a href="#" class="hover:text-white transition">API</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-semibold text-lg mb-4">Contact</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-3 text-primary-400"></i>Bamako, Mali</li>
                        <li class="flex items-center"><i class="fas fa-phone mr-3 text-primary-400"></i>+223 XX XX XX XX</li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-3 text-primary-400"></i>contact@mysupport.ml</li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 text-sm">&copy; <?= date('Y') ?> <?= APP_NAME ?>. Tous droits réservés.</p>
                <div class="flex space-x-6 mt-4 md:mt-0">
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition">Conditions d'utilisation</a>
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition">Confidentialité</a>
                    <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('bg-gray-900/95', 'backdrop-blur-lg', 'shadow-lg');
            } else {
                navbar.classList.remove('bg-gray-900/95', 'backdrop-blur-lg', 'shadow-lg');
            }
        });
        
        // Smooth scroll
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }
            });
        });
    </script>
</body>
</html>
