src/components/Legal.jsx

import { motion } from 'framer-motion'
import { FileText, Shield, Lock, ArrowLeft } from 'lucide-react'
import BlackBenAILink from './BlackBenAILink'

const LegalPage = ({ title, content, onBack }) => {
    return (
        <div className="space-y-12 pb-20 max-w-4xl mx-auto">
            <motion.div
                initial={{ opacity: 0, y: -20 }}
                animate={{ opacity: 1, y: 0 }}
                className="flex items-center justify-between mb-12"
            >
                <div>
                    <button
                        onClick={onBack}
                        className="flex items-center text-muted-foreground hover:text-primary transition-colors font-bold mb-4"
                    >
                        <ArrowLeft className="h-4 w-4 mr-2" />
                        Retour
                    </button>
                    <h1 className="text-4xl font-black text-foreground tracking-tight">{title}</h1>
                </div>
                <div className="w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-center">
                    <FileText className="h-8 w-8 text-primary" />
                </div>
            </motion.div>

            <motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.2 }}
                className="glass rounded-[2rem] md:rounded-[3rem] p-8 md:p-12 border border-border prose prose-invert max-w-none shadow-2xl"
            >
                <div className="space-y-8 text-foreground/80 leading-relaxed">
                    {content.map((section, idx) => (
                        <div key={idx} className="space-y-4">
                            <h2 className="text-2xl font-black text-foreground flex items-center">
                                <span className="w-8 h-8 rounded-lg bg-primary/20 text-primary flex items-center justify-center text-sm mr-4">{idx + 1}</span>
                                {section.subtitle}
                            </h2>
                            <p className="font-medium text-lg">{section.text}</p>
                        </div>
                    ))}
                </div>
            </motion.div>
        </div>
    )
}

export const TermsOfUse = ({ onBack }) => {
    const content = [
        { subtitle: "Acceptation des conditions", text: "En accédant à AfriDataHub, vous acceptez d'être lié par les présentes conditions d'utilisation et toutes les lois et réglementations applicables." },
        { subtitle: "Licence d'utilisation", text: "Les données fournies sur la plateforme sont destinées à un usage analytique et stratégique. Toute reproduction commerciale non autorisée est strictement interdite." },
        {
            subtitle: "Propriété Intellectuelle",
            text: (
                <>
                    L'architecture de la plateforme, les algorithmes d'IA (<BlackBenAILink className="text-foreground hover:text-primary font-black" />) et la structure des bases de données sont la propriété exclusive de la startup béninoise{' '}
                    <BlackBenAILink className="text-foreground hover:text-primary font-black" />.
                </>
            )
        }
    ]
    return <LegalPage title="Conditions d'Utilisation" content={content} onBack={onBack} />
}

export const PrivacyPolicy = ({ onBack }) => {
    const content = [
        { subtitle: "Collecte des données", text: "Nous collectons uniquement les informations nécessaires à la fourniture de nos services analytiques et à la sécurité de votre compte." },
        { subtitle: "Utilisation des données", text: "Vos données personnelles ne sont jamais vendues à des tiers. Elles sont exclusivement utilisées pour personnaliser votre expérience sur AfriDataHub." },
        { subtitle: "Sécurité", text: "Nous mettons en œuvre des mesures de sécurité de pointe pour protéger vos informations contre tout accès non autorisé." }
    ]
    return <LegalPage title="Confidentialité" content={content} onBack={onBack} />
}

export const SecurityRules = ({ onBack }) => {
    const content = [
        { subtitle: "Usage acceptable", text: "Il est formellement interdit de tenter d'extraire massivement des données (scraping) ou de perturber le fonctionnement technique des services." },
        { subtitle: "Sécurité des comptes", text: "L'utilisateur est seul responsable de la confidentialité de ses identifiants et de l'usage qui est fait de son token API." },
        { subtitle: "Signalement", text: "Toute faille de sécurité découverte doit être signalée immédiatement à notre équipe technique via le formulaire de support." }
    ]
    return <LegalPage title="Règles et Sécurité" content={content} onBack={onBack} />
}