/**
 * Composant Support pour AfriDataHub
 * Created by BlackBenAI Team - AfriDataHub Platform
 */
import { motion } from 'framer-motion'
import { HelpCircle, MessageSquare, Monitor, Search, ArrowRight } from 'lucide-react'

const Support = ({ onNavigate }) => {
    const faqs = [
        { q: "Comment exporter les données vers Excel ?", a: "Accédez à un dataset depuis la bibliothèque, puis cliquez sur le bouton 'Exporter' en haut à droite. Le format CSV est disponible." },
        { q: "L'API est-elle gratuite ?", a: "Oui, l'accès à notre API est gratuit pour les données publiques, avec une limite de requêtes mensuelle." },
        { q: "Comment configurer des alertes sur un pays ?", a: "Dans votre Tableau de Bord, allez dans 'Alertes IA' puis cliquez sur l'icône '+'. Sélectionnez ensuite le pays et le seuil." },
        { q: "Quelles sont les sources des données ?", a: "Nous agrégeons des données officielles (Banque Mondiale, OMS) et les croisons avec nos algorithmes pour assurer leur intégrité." }
    ]

    return (
        <div className="space-y-12 pb-20 max-w-6xl mx-auto">
            <motion.div
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                className="text-center mb-16"
            >
                <div className="w-20 h-20 bg-[#16a34a]/10 rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-primary/20">
                    <HelpCircle className="h-10 w-10 text-[#16a34a]" />
                </div>
                <h1 className="text-3xl md:text-5xl font-black text-foreground tracking-tight mb-4">Centre de <span className="text-[#fcd34d]">Support</span></h1>
                <p className="text-muted-foreground font-medium text-xl max-w-2xl mx-auto">
                    Comment pouvons-nous vous aider aujourd'hui ?
                </p>

                <div className="relative max-w-2xl mx-auto mt-12 group">
                    <Search className="absolute left-6 top-1/2 transform -translate-y-1/2 h-6 w-6 text-muted-foreground group-focus-within:text-primary transition-colors" />
                    <input
                        type="text"
                        placeholder="Rechercher une solution..."
                        className="w-full pl-16 pr-6 py-6 bg-background/50 border border-border rounded-[2rem] focus:ring-4 focus:ring-primary/10 transition-all outline-none font-medium text-lg text-foreground shadow-2xl"
                    />
                </div>
            </motion.div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
                <motion.div
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.2 }}
                    className="space-y-8"
                >
                    <h2 className="text-2xl font-black text-foreground mb-6 flex items-center">
                        <Monitor className="h-6 w-6 text-primary mr-3" />
                        Questions Fréquentes
                    </h2>
                    {faqs.map((faq, idx) => (
                        <div key={idx} className="glass rounded-3xl p-6 border border-border hover:border-primary/40 transition-colors cursor-pointer group">
                            <h3 className="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">{faq.q}</h3>
                            <p className="text-muted-foreground font-medium leading-relaxed">{faq.a}</p>
                        </div>
                    ))}
                </motion.div>

                <motion.div
                    initial={{ opacity: 0, x: 20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ delay: 0.3 }}
                    className="glass rounded-[2rem] md:rounded-[3rem] p-6 md:p-10 lg:p-12 border border-border shadow-2xl relative overflow-hidden flex flex-col justify-center"
                >
                    <div className="absolute inset-0 bg-primary/5"></div>
                    <div className="relative z-10 text-center">
                        <MessageSquare className="h-16 w-16 text-secondary mx-auto mb-6" />
                        <h2 className="text-2xl md:text-3xl font-black text-foreground mb-4">Toujours bloqué ?</h2>
                        <p className="text-muted-foreground text-lg mb-8 leading-relaxed max-w-md mx-auto">
                            Notre équipe d'ingénieurs data est prête à vous assister pour résoudre vos problèmes complexes.
                        </p>
                        <button
                            onClick={() => onNavigate('contact')}
                            className="px-8 py-5 rounded-2xl bg-[#166534] hover:bg-[#15803d] text-white font-bold text-lg shadow-lg shadow-primary/20 transition-all hover:scale-105 inline-flex items-center"
                        >
                            Ouvrir un Ticket
                            <ArrowRight className="h-5 w-5 ml-2" />
                        </button>
                    </div>
                </motion.div>
            </div>
        </div>
    )
}

export default Support