Application d'immigration

import React, { useState } from 'react';
import {
User,
Globe,
FileText,
Shield,
CreditCard,
Bell,
MessageCircle,
Settings,
Eye,
EyeOff,
} from 'lucide-react';

// Textes multilingues unifiés (inchangés, je ne les copie pas ici pour la concision)

const textes = {
fr: {
// ... (votre texte français)
payNow: "Payer maintenant",
paymentMethods: "Méthodes de paiement",
orangeMoney: "Orange Money",
mtnMoney: "MTN Mobile Money",
enterPhone: "Entrez votre numéro de téléphone",
paymentSuccess: "Paiement effectué avec succès ! Merci.",
paymentError: "Erreur lors du paiement. Veuillez réessayer.",
// autres textes...
},
en: {
// ... (votre texte anglais)
payNow: "Pay Now",
paymentMethods: "Payment Methods",
orangeMoney: "Orange Money",
mtnMoney: "MTN Mobile Money",
enterPhone: "Enter your phone number",
paymentSuccess: "Payment successful! Thank you.",
paymentError: "Payment error. Please try again.",
// autres textes...
}
};

const mockCountries = [
// ... (inchangé)
];

const packs = [
{ name: "Pack Découverte", price: "Gratuit", features: ["Profil", "Pays suggérés"], color: "bg-green-100 border-green-500" },
{ name: "Pack Standard", price: "25 000 FCFA", features: ["Analyse", "Documents", "Lois"], color: "bg-blue-100 border-blue-500" },
{ name: "Pack Premium", price: "50 000 FCFA", features: ["Analyse complète", "CV", "Assistance"], color: "bg-purple-100 border-purple-500" },
{ name: "Pack VIP", price: "100 000 FCFA", features: ["Dossier complet", "RDV ambassade", "Pré-dépôt"], color: "bg-yellow-100 border-yellow-500" },
];

function ImmigrationApp() {
// États principaux
const [currentView, setCurrentView] = useState('login');
const [language, setLanguage] = useState('fr');
const [user, setUser] = useState(null);
const [userProfile, setUserProfile] = useState({});
const [suggestedCountries, setSuggestedCountries] = useState([]);
const [selectedCountry, setSelectedCountry] = useState(null);
const [showPassword, setShowPassword] = useState(false);
const [loginData, setLoginData] = useState({ username: '', password: '' });
const [signupData, setSignupData] = useState({ email: '', phone: '', password: '', confirmPassword: '' });
const [notifications, setNotifications] = useState([]);
const [chatMessages, setChatMessages] = useState([]);
const [currentMessage, setCurrentMessage] = useState('');

// États spécifiques à la partie paiement
const [selectedPack, setSelectedPack] = useState(null);
const [paymentMethod, setPaymentMethod] = useState('');
const [paymentPhone, setPaymentPhone] = useState('');
const [paymentStatus, setPaymentStatus] = useState(null); // 'success' | 'error' | null

const t = textes[language];

// Gestion des formulaires et actions (inchangé sauf ajout paiement)

const handleLogin = (e) => {
e.preventDefault();
if (loginData.username === 'DAROLINA' && loginData.password === [Email visible pour les membres Pro]') {
setUser({ name: 'DAROLINA', role: 'admin' });
setCurrentView('admin');
} else {
setUser({ name: loginData.username, role: 'user' });
setCurrentView('profile');
}
};

const handleSignup = (e) => {
e.preventDefault();
if (signupData.password === signupData.confirmPassword) {
setUser({ name: signupData.email, role: 'user' });
setCurrentView('profile');
} else {
alert("Les mots de passe ne correspondent pas.");
}
};

const handleProfileSave = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const profile = Object.fromEntries(formData.entries());
setUserProfile(profile);

// Suggestion pays simplifiée
const suggested = mockCountries.filter(country => {
if (profile.travelObjective === 'work' && country.name === 'Canada') return true;
if (profile.travelObjective === 'study' && country.name === 'France') return true;
if (profile.travelObjective === 'tourism' && country.name === 'Australia') return true;
return Math.random() > 0.5;
});
setSuggestedCountries(suggested);
setCurrentView('countries');
};

const handleCountrySelect = (country) => {
setSelectedCountry(country);
setCurrentView('documents');
};

// Partie paiement
const handlePackSelect = (pack) => {
setSelectedPack(pack);
setPaymentMethod('');
setPaymentPhone('');
setPaymentStatus(null);
};

const handlePaymentSubmit = (e) => {
e.preventDefault();

// Validation simple
if (!selectedPack) {
alert("Veuillez sélectionner un pack.");
return;
}
if (!paymentMethod) {
alert("Veuillez choisir une méthode de paiement.");
return;
}
if (!paymentPhone.match(/^\+?\d{9,15}$/)) {
alert(t.enterPhone);
return;
}

// Ici, vous intégreriez l'API de paiement Orange Money ou MTN Mobile Money.
// Pour la démo, on simule un paiement réussi après 2 secondes.

setPaymentStatus(null);
setTimeout(() => {
// Simuler succès
setPaymentStatus('success');
}, 2000);
};

// Chat, notifications, navigation etc. (inchangé)

// Composants UI

const Navigation = () => (
<nav className="bg-white shadow-lg p-4 mb-6">
<div className="flex justify-between items-center">
<h1 className="text-xl font-bold text-blue-600">{t.appTitle}</h1>
<div className="flex space-x-4">
{user?.role !== 'admin' && (
<>
<button onClick={() => setCurrentView('profile')} className={`px-3 py-2 rounded ${currentView === 'profile' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><User size={20} /></button>
<button onClick={() => setCurrentView('countries')} className={`px-3 py-2 rounded ${currentView === 'countries' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><Globe size={20} /></button>
<button onClick={() => setCurrentView('documents')} className={`px-3 py-2 rounded ${currentView === 'documents' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><FileText size={20} /></button>
<button onClick={() => setCurrentView('legal')} className={`px-3 py-2 rounded ${currentView === 'legal' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><Shield size={20} /></button>
<button onClick={() => setCurrentView('payments')} className={`px-3 py-2 rounded ${currentView === 'payments' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><CreditCard size={20} /></button>
<button onClick={() => setCurrentView('tracking')} className={`px-3 py-2 rounded ${currentView === 'tracking' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><Bell size={20} /></button>
<button onClick={() => setCurrentView('chat')} className={`px-3 py-2 rounded ${currentView === 'chat' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><MessageCircle size={20} /></button>
</>
)}
{user?.role === 'admin' && (
<button onClick={() => setCurrentView('admin')} className={`px-3 py-2 rounded ${currentView === 'admin' ? 'bg-blue-600 text-white' : 'text-gray-600'}`}><Settings size={20} /></button>
)}
<button onClick={() => setLanguage(language === 'fr' ? 'en' : 'fr')} className="px-3 py-2 text-gray-600">
{language === 'fr' ? 'EN' : 'FR'}
</button>
<button onClick={() => { setUser(null); setCurrentView('login'); }} className="px-3 py-2 text-red-600">
{t.logout}
</button>
</div>
</div>
</nav>
);

// ... (LoginView, SignupView, ProfileView, etc. inchangés)

// Nouvelle vue Paiements

const PaymentsView = () => (
<div className="max-w-4xl mx-auto p-6">
<h2 className="text-2xl font-bold mb-6">{t.payments}</h2>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
{packs.map((pack) => (
<div
key={pack.name}
className={`border rounded-lg p-