ERitors-Scribe-Desktop/components/TermsOfUse.tsx

import React from 'react';
import {ExternalLink, FileText} from 'lucide-react';
import Button from '@/components/ui/Button';
import {AppRouterInstance, Link, useRouter} from '@/lib/navigation';

interface TermsOfUseProps {
    onAccept: () => void;
}

export default function TermsOfUse({onAccept}: TermsOfUseProps) {
    const router: AppRouterInstance = useRouter();
    
    function handleAcceptTerm(): void {
        onAccept();
    }
    
    return (
        <div
            className="fixed inset-0 z-50 bg-darkest-background/90 backdrop-blur-sm flex items-center justify-center p-6 font-['Lora']">
            <div
                className="bg-tertiary border border-primary/40 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
                <div className="px-8 py-6 border-b border-secondary bg-gradient-to-r from-primary/10 to-primary/5">
                    <div className="flex items-center space-x-4">
                        <div className="bg-primary/20 p-3 rounded-xl">
                            <FileText className="text-primary w-6 h-6" strokeWidth={1.75}/>
                        </div>
                        <div>
                            <h2 className="text-text-primary font-bold text-2xl">Termes d'utilisation</h2>
                            <p className="text-text-secondary text-sm mt-1">Acceptation requise pour accéder à ERitors
                                Scribe</p>
                        </div>
                    </div>
                </div>
                <div className="px-8 py-8 overflow-y-auto max-h-[60vh]">
                    <div className="space-y-6">
                        <div className="bg-primary/5 border border-primary/20 rounded-xl p-6">
                            <h3 className="text-text-primary font-semibold text-lg mb-4">
                                Acceptation obligatoire
                            </h3>
                            <div className="text-text-secondary text-base leading-relaxed space-y-4">
                                <p>
                                    Pour pouvoir utiliser nos services, tel qu'<strong className="text-primary">ERitors
                                    Scribe</strong>,
                                    vous devez accepter les termes d'utilisation en cliquant
                                    sur <strong>J'accepte</strong>.
                                </p>
                                <p>
                                    Veuillez lire attentivement la page détaillée des termes et conditions d'utilisation
                                    avant de procéder à l'acceptation.
                                </p>
                                <p>
                                    Si vous n'acceptez pas ces conditions, vous ne pourrez pas accéder à nos services
                                    et serez redirigé vers la page d'accueil.
                                </p>
                            </div>
                        </div>
                        
                        <div className="bg-tertiary border border-secondary rounded-xl p-6">
                            <h3 className="text-text-primary font-semibold text-lg mb-4">
                                Documentation complète
                            </h3>
                            <p className="text-text-secondary text-base leading-relaxed mb-4">
                                Pour consulter l'intégralité de nos termes et conditions d'utilisation,
                                veuillez visiter notre page dédiée :
                            </p>
                            <a
                                href="/terms"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center space-x-2 text-primary hover:text-primary-light transition-colors duration-200 font-medium"
                            >
                                <span>Consulter les termes complets</span>
                                <ExternalLink className="w-4 h-4" strokeWidth={1.75}/>
                            </a>
                        </div>
                        
                        <div className="bg-warning/10 border border-warning/30 rounded-xl p-6">
                            <div className="flex items-start space-x-3">
                                <div className="bg-warning/20 p-2 rounded-lg mt-1">
                                    <FileText className="text-warning w-5 h-5" strokeWidth={1.75}/>
                                </div>
                                <div>
                                    <h4 className="text-text-primary font-semibold text-base mb-2">
                                        Importance capitale
                                    </h4>
                                    <p className="text-text-secondary text-sm leading-relaxed">
                                        Cette acceptation est obligatoire et constitue un prérequis légal
                                        pour l'utilisation de nos services d'édition assistée par intelligence
                                        artificielle.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="px-8 py-6 bg-secondary border-t border-secondary rounded-b-2xl">
                    <div className="flex items-center justify-between">
                        <div className="flex items-center space-x-2 text-text-secondary text-sm">
                            <FileText className="text-primary w-4 h-4" strokeWidth={1.75}/>
                            <span>Décision requise pour continuer</span>
                        </div>
                        <div className="flex items-center space-x-4">
                            <Link
                                href="https://eritors.com"
                                className="text-muted hover:text-text-primary px-6 py-3 rounded-xl hover:bg-secondary transition-colors duration-150 text-sm font-medium"
                                type="button"
                            >
                                Refuser et quitter
                            </Link>
                            <Button variant="primary" size="lg" onClick={handleAcceptTerm}>
                                J'accepte les termes
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}