import React, { useState } from 'react';
import { Shield, Users, Phone, ChevronRight, ChevronLeft, Check, Eye, BarChart3, User, Home, LogOut, Bell, Plus, X, Star, Lock, Stethoscope, ClipboardList, Building, ArrowRight, ArrowUp, ArrowDown, MessageCircle, ChevronDown, Menu, Sparkles, FileText, Database, Code, Download, AlertTriangle, CheckCircle, Clock, Info, Scale, FileCheck, ShieldCheck, Globe, BookOpen, ExternalLink, Filter, Search, Settings, UserCog, Award, Activity, Trash2, Edit, UserPlus } from 'lucide-react';

// === DONNÉES ===
const ratings = {
  outstanding: { label: 'Exemplaire', bg: 'bg-emerald-500', text: 'text-emerald-600', light: 'bg-emerald-50', stars: 5 },
  good: { label: 'Satisfaisant', bg: 'bg-teal-500', text: 'text-teal-600', light: 'bg-teal-50', stars: 4 },
  requires_improvement: { label: 'À améliorer', bg: 'bg-amber-500', text: 'text-amber-600', light: 'bg-amber-50', stars: 3 },
  inadequate: { label: 'Insuffisant', bg: 'bg-rose-500', text: 'text-rose-600', light: 'bg-rose-50', stars: 2 },
};

const institutions = [
  { id: 1, name: 'HUG', fullName: 'Hôpitaux Universitaires de Genève', type: 'Hôpital universitaire', city: 'Genève', rating: 'good', reports: 89, verified: 71, contested: 3, avgDays: 3.8, trend: 'up', reliability: 94 },
  { id: 2, name: 'CHUV', fullName: 'Centre Hospitalier Universitaire Vaudois', type: 'Hôpital universitaire', city: 'Lausanne', rating: 'good', reports: 56, verified: 48, contested: 1, avgDays: 4.2, trend: 'stable', reliability: 96 },
  { id: 3, name: 'Hôpital de la Tour', fullName: 'Hôpital de la Tour', type: 'Clinique privée', city: 'Meyrin', rating: 'outstanding', reports: 12, verified: 11, contested: 0, avgDays: 2.1, trend: 'up', reliability: 98 },
  { id: 4, name: 'Unisanté', fullName: 'Unisanté', type: 'Centre universitaire', city: 'Lausanne', rating: 'outstanding', reports: 23, verified: 21, contested: 0, avgDays: 2.8, trend: 'up', reliability: 97 },
  { id: 5, name: 'Hôpital du Valais', fullName: 'Hôpital du Valais - Sion', type: 'Hôpital cantonal', city: 'Sion', rating: 'requires_improvement', reports: 34, verified: 22, contested: 5, avgDays: 6.2, trend: 'down', reliability: 85 },
  { id: 6, name: 'Hôpital Riviera-Chablais', fullName: 'Hôpital Riviera-Chablais', type: 'Hôpital régional', city: 'Rennaz', rating: 'inadequate', reports: 67, verified: 28, contested: 12, avgDays: 9.4, trend: 'down', reliability: 78 },
];

const dmsQuestions = [
  { id: 1, text: "On vous traite avec moins de courtoisie que les autres personnes.", category: 'respect' },
  { id: 2, text: "On vous traite avec moins de respect que les autres personnes.", category: 'respect' },
  { id: 3, text: "Vous recevez un service de moins bonne qualité que les autres.", category: 'equity' },
  { id: 4, text: "Un médecin ou une infirmière agit comme s'il ou elle pensait que vous n'étiez pas intelligent(e).", category: 'stereotypes' },
  { id: 5, text: "Un médecin ou une infirmière agit comme s'il ou elle avait peur de vous.", category: 'stereotypes' },
  { id: 6, text: "Un médecin ou une infirmière agit comme s'il ou elle était supérieur(e) à vous.", category: 'respect' },
  { id: 7, text: "Vous avez l'impression qu'un médecin ou une infirmière n'écoute pas ce que vous dites.", category: 'listening' },
];

const incidentTypes = [
  'Propos discriminatoires ou racistes', 'Refus de soins injustifié', 'Traitement différencié',
  'Moqueries ou remarques déplacées', 'Attitude condescendante', 'Manque de respect',
  'Non-écoute ou minimisation des symptômes', 'Stéréotypes ou préjugés', 'Temps d\'attente excessif', 'Autre'
];

const services = [
  'Urgences', 'Consultation externe', 'Hospitalisation', 'Maternité', 'Pédiatrie', 'Chirurgie',
  'Radiologie', 'Laboratoire', 'Accueil', 'Psychiatrie', 'Oncologie', 'Hématologie', 
  'Cardiologie', 'Gynécologie', 'Neurologie', 'Médecine interne', 'Gériatrie', 'Autre'
];

const resourceOrgs = [
  { id: 1, name: 'FAANG', fullName: 'Fédération des Associations Afrodescendant.e.x.s de Genève', services: ['Médiation', 'Accompagnement'], phone: '+41 22 301 16 50' },
  { id: 2, name: 'ASPR-GE', fullName: 'Association des Professionnel·le·s de Santé Racisé·e·s de Genève', services: ['Pair-aidance', 'Formation'], phone: '+41 78 xxx xx xx' },
  { id: 3, name: 'Suisse Drépano', fullName: 'Association Suisse Drépanocytose', services: ['Soutien patients', 'Advocacy'], phone: '+41 79 128 63 68' },
  { id: 4, name: 'Centre LAVI', fullName: 'Centre de consultation pour victimes', services: ['Aide juridique', 'Soutien'], phone: '+41 22 320 01 02' },
];

const healthcarePros = [
  { id: 1, name: 'Dr. Aminata Koné', specialty: 'Médecine générale', institution: 'HUG', languages: ['Français', 'Bambara'], rating: 4.8 },
  { id: 2, name: 'Dr. Jean-Pierre Müller', specialty: 'Hématologie', institution: 'CHUV', languages: ['Français', 'Allemand'], rating: 4.9 },
  { id: 3, name: 'Sophie Ndongo', specialty: 'Infirmière spécialisée', institution: 'Unisanté', languages: ['Français', 'Wolof'], rating: 4.7 },
];

const stats = { total: 318, verified: 251, avgDays: 4.1, institutions: 6, reliability: 89 };

// === COMPOSANTS UTILITAIRES ===
const RatingBadge = ({ r, size = 'sm' }) => {
  const rt = ratings[r];
  const sizes = { xs: 'px-1.5 py-0.5 text-xs', sm: 'px-2 py-1 text-xs', md: 'px-3 py-1.5 text-sm' };
  return <span className={`${rt.bg} text-white rounded-full ${sizes[size]} font-medium whitespace-nowrap`}>{rt.label}</span>;
};

const Stars = ({ r }) => {
  const rt = ratings[r];
  return (
    <div className="flex gap-0.5">
      {[...Array(5)].map((_, i) => (
        <Star key={i} className={`w-4 h-4 ${i < rt.stars ? `${rt.text} fill-current` : 'text-gray-300'}`} />
      ))}
    </div>
  );
};

const ReliabilityBadge = ({ score }) => {
  const color = score >= 90 ? 'emerald' : score >= 75 ? 'amber' : 'rose';
  return (
    <div className={`flex items-center gap-1 px-2 py-1 rounded-full bg-${color}-50 text-${color}-700 text-xs`}>
      <ShieldCheck className="w-3 h-3" />
      <span>{score}% fiable</span>
    </div>
  );
};

// === COMPOSANT FORMULAIRE SIGNALEMENT (EXTRAIT) ===
const NewReportForm = ({ step, setStep, data, setData, dmsAnswers, setDmsAnswers, onSubmit, onComplete }) => {
  const steps = ['Vérification', 'Rôle', 'Lieu', 'Incident', 'Questionnaire', 'Détails', 'Confirmation'];
  const [code, setCode] = useState(null);

  const genCode = () => {
    const c = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
    let r = 'CW';
    for (let i = 0; i < 6; i++) r += c[Math.floor(Math.random() * c.length)];
    return r;
  };

  const submit = () => {
    const c = genCode();
    setCode(c);
    onSubmit(c);
    setStep(6);
  };

  return (
    <div className="p-4 md:p-8 pb-24 max-w-2xl mx-auto">
      {/* Progress */}
      <div className="mb-6">
        <div className="flex items-center justify-between mb-2 overflow-x-auto">
          {steps.map((s, i) => (
            <div key={s} className="flex items-center flex-shrink-0">
              <div className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium ${i < step ? 'bg-teal-500 text-white' : i === step ? 'bg-teal-100 text-teal-700 ring-2 ring-teal-500' : 'bg-gray-100 text-gray-400'}`}>
                {i < step ? <Check className="w-3 h-3" /> : i + 1}
              </div>
              {i < steps.length - 1 && <div className={`w-3 md:w-6 h-0.5 mx-0.5 ${i < step ? 'bg-teal-500' : 'bg-gray-200'}`} />}
            </div>
          ))}
        </div>
        <p className="text-sm text-gray-500 text-center">{steps[step]}</p>
      </div>

      <div className="bg-white rounded-2xl border border-gray-100 p-6">
        {/* Step 0: Vérification anti-bashing */}
        {step === 0 && (
          <div>
            <div className="flex items-center gap-3 mb-4">
              <div className="w-12 h-12 rounded-full bg-teal-100 flex items-center justify-center">
                <ShieldCheck className="w-6 h-6 text-teal-600" />
              </div>
              <div>
                <h2 className="text-lg font-semibold text-gray-900">Vérification préalable</h2>
                <p className="text-sm text-gray-500">Pour garantir la fiabilité des signalements</p>
              </div>
            </div>
            
            <div className="bg-amber-50 rounded-xl p-4 mb-6">
              <div className="flex gap-3">
                <Info className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
                <div className="text-sm text-amber-800">
                  <p className="font-medium mb-1">Pourquoi cette étape ?</p>
                  <p>Afin de protéger les établissements contre les signalements abusifs et garantir la crédibilité de l'observatoire, nous vérifions certaines informations. Les signalements sont modérés avant publication.</p>
                </div>
              </div>
            </div>

            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Code postal de votre domicile *</label>
                <input type="text" maxLength={4} placeholder="Ex: 1201" value={data.postalCode || ''} onChange={e => setData({...data, postalCode: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-teal-500 outline-none" />
                <p className="text-xs text-gray-400 mt-1">Non publié, utilisé uniquement pour la vérification</p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Avez-vous une preuve de votre visite ? (optionnel)</label>
                <div className="space-y-2">
                  {['Oui, j\'ai un document (facture, convocation, ordonnance)', 'Non, mais je peux fournir des détails précis', 'Je préfère rester totalement anonyme'].map(opt => (
                    <button key={opt} onClick={() => setData({...data, proofType: opt})} className={`w-full p-3 rounded-xl border-2 text-left text-sm ${data.proofType === opt ? 'border-teal-500 bg-teal-50' : 'border-gray-100'}`}>
                      {opt}
                    </button>
                  ))}
                </div>
              </div>
              <div className="flex items-start gap-3 p-4 rounded-xl bg-gray-50">
                <input type="checkbox" id="charter" checked={data.charterAccepted || false} onChange={e => setData({...data, charterAccepted: e.target.checked})} className="mt-1" />
                <label htmlFor="charter" className="text-sm text-gray-600">
                  Je certifie que ce signalement est basé sur une expérience réelle et m'engage à respecter la <button className="text-teal-600 underline">charte de bonne conduite</button>. Je comprends que les faux signalements peuvent faire l'objet de poursuites.
                </label>
              </div>
            </div>
          </div>
        )}

        {/* Step 1: Rôle */}
        {step === 1 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2">Vous êtes :</h2>
            <p className="text-sm text-gray-500 mb-6">Cette information contextualise votre témoignage</p>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {[
                { value: 'victim', icon: User, label: 'Victime directe', desc: 'J\'ai personnellement vécu cette situation' },
                { value: 'witness', icon: Eye, label: 'Témoin', desc: 'J\'ai observé une situation envers quelqu\'un' },
                { value: 'relative', icon: Users, label: 'Proche', desc: 'Mon proche a subi cette situation' },
                { value: 'professional', icon: Stethoscope, label: 'Professionnel·le', desc: 'J\'ai été témoin en tant que soignant·e' },
              ].map(r => (
                <button key={r.value} onClick={() => setData({...data, role: r.value})} className={`p-4 rounded-xl border-2 text-left ${data.role === r.value ? 'border-teal-500 bg-teal-50' : 'border-gray-100 hover:border-gray-200'}`}>
                  <r.icon className={`w-6 h-6 mb-2 ${data.role === r.value ? 'text-teal-600' : 'text-gray-400'}`} />
                  <p className="font-medium text-gray-900">{r.label}</p>
                  <p className="text-xs text-gray-500">{r.desc}</p>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Step 2: Lieu */}
        {step === 2 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2">Où et quand ?</h2>
            <p className="text-sm text-gray-500 mb-6">Précisez l'établissement et le contexte</p>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Établissement *</label>
                <select value={data.institution || ''} onChange={e => setData({...data, institution: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-teal-500 outline-none">
                  <option value="">Sélectionner...</option>
                  {institutions.map(i => <option key={i.id} value={i.fullName}>{i.fullName}</option>)}
                  <option value="other">Autre établissement...</option>
                </select>
              </div>
              {data.institution === 'other' && (
                <input type="text" placeholder="Nom de l'établissement" value={data.otherInstitution || ''} onChange={e => setData({...data, otherInstitution: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" />
              )}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Service concerné *</label>
                <select value={data.service || ''} onChange={e => setData({...data, service: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-teal-500 outline-none">
                  <option value="">Sélectionner...</option>
                  {services.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </div>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Date approximative *</label>
                  <input type="date" value={data.date || ''} onChange={e => setData({...data, date: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">Heure (optionnel)</label>
                  <input type="time" value={data.time || ''} onChange={e => setData({...data, time: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" />
                </div>
              </div>
            </div>
          </div>
        )}

        {/* Step 3: Type d'incident */}
        {step === 3 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2">Type d'incident</h2>
            <p className="text-sm text-gray-500 mb-6">Sélectionnez ce qui correspond le mieux</p>
            <div className="space-y-2 max-h-96 overflow-y-auto">
              {incidentTypes.map(type => (
                <button key={type} onClick={() => setData({...data, incidentType: type})} className={`w-full p-4 rounded-xl border-2 text-left ${data.incidentType === type ? 'border-teal-500 bg-teal-50' : 'border-gray-100 hover:border-gray-200'}`}>
                  <p className={`font-medium ${data.incidentType === type ? 'text-teal-700' : 'text-gray-700'}`}>{type}</p>
                </button>
              ))}
            </div>
          </div>
        )}

        {/* Step 4: Questionnaire DMS */}
        {step === 4 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2">Questionnaire d'expérience</h2>
            <p className="text-sm text-gray-500 mb-6">À quelle fréquence avez-vous vécu ces situations ?</p>
            <div className="space-y-4 max-h-96 overflow-y-auto">
              {dmsQuestions.map((q, idx) => (
                <div key={q.id} className="p-4 rounded-xl bg-gray-50">
                  <p className="text-sm text-gray-700 mb-3">{idx + 1}. {q.text}</p>
                  <div className="flex flex-wrap gap-2">
                    {['Jamais', 'Rarement', 'Parfois', 'Souvent', 'Toujours'].map(opt => (
                      <button key={opt} onClick={() => setDmsAnswers({...dmsAnswers, [q.id]: opt})} className={`px-3 py-2 rounded-lg text-sm ${dmsAnswers[q.id] === opt ? 'bg-teal-500 text-white' : 'bg-white border border-gray-200 text-gray-600'}`}>
                        {opt}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Step 5: Détails */}
        {step === 5 && (
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2">Détails de l'incident</h2>
            <p className="text-sm text-gray-500 mb-6">Décrivez ce qui s'est passé</p>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Description *</label>
                <textarea rows={5} value={data.description || ''} onChange={e => setData({...data, description: e.target.value})} placeholder="Décrivez le contexte, ce qui s'est passé, les paroles prononcées..." className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-teal-500 outline-none resize-none" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Impact (optionnel)</label>
                <textarea rows={3} value={data.impact || ''} onChange={e => setData({...data, impact: e.target.value})} placeholder="Comment cette expérience vous a-t-elle affecté·e ?" className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none resize-none" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Souhaitez-vous être recontacté·e ?</label>
                <div className="flex gap-4">
                  <button onClick={() => setData({...data, contact: 'yes'})} className={`flex-1 p-3 rounded-xl border-2 ${data.contact === 'yes' ? 'border-teal-500 bg-teal-50' : 'border-gray-100'}`}>Oui</button>
                  <button onClick={() => setData({...data, contact: 'no'})} className={`flex-1 p-3 rounded-xl border-2 ${data.contact === 'no' ? 'border-teal-500 bg-teal-50' : 'border-gray-100'}`}>Non</button>
                </div>
              </div>
              {data.contact === 'yes' && (
                <input type="email" placeholder="Votre email (confidentiel)" value={data.email || ''} onChange={e => setData({...data, email: e.target.value})} className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" />
              )}
            </div>
          </div>
        )}

        {/* Step 6: Confirmation */}
        {step === 6 && code && (
          <div className="text-center py-6">
            <div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
              <Check className="w-8 h-8 text-emerald-600" />
            </div>
            <h2 className="text-xl font-bold text-gray-900 mb-2">Signalement envoyé</h2>
            <p className="text-gray-500 mb-6">Votre témoignage sera examiné par nos modérateurs sous 48h.</p>
            
            <div className="bg-gray-50 rounded-xl p-6 mb-6">
              <p className="text-sm text-gray-500 mb-2">Code de suivi confidentiel :</p>
              <p className="text-3xl font-mono font-bold text-teal-600">{code}</p>
            </div>

            <div className="text-left bg-teal-50 rounded-xl p-4 mb-6">
              <h3 className="font-medium text-teal-800 mb-2">Processus de validation</h3>
              <ul className="text-sm text-teal-700 space-y-1">
                <li>• Examen par un modérateur sous 48h</li>
                <li>• L'établissement peut contester sous 14 jours</li>
                <li>• Publication après validation</li>
                <li>• Impact sur la note après période probatoire</li>
              </ul>
            </div>

            <button onClick={onComplete} className="w-full py-3 rounded-xl bg-teal-600 text-white font-medium">
              Retour à l'accueil
            </button>
          </div>
        )}

        {/* Navigation */}
        {step < 6 && (
          <div className="flex justify-between mt-8 pt-6 border-t border-gray-100">
            <button onClick={() => setStep(Math.max(0, step - 1))} disabled={step === 0} className="px-4 py-2 rounded-lg text-gray-500 disabled:opacity-50">
              <ChevronLeft className="w-5 h-5 inline" /> Précédent
            </button>
            {step < 5 ? (
              <button onClick={() => setStep(step + 1)} disabled={
                (step === 0 && (!data.postalCode || !data.charterAccepted)) ||
                (step === 1 && !data.role) ||
                (step === 2 && (!data.institution || !data.service || !data.date)) ||
                (step === 3 && !data.incidentType) ||
                (step === 4 && Object.keys(dmsAnswers).length < 3)
              } className="px-6 py-2 rounded-xl bg-teal-600 text-white font-medium disabled:opacity-50">
                Suivant <ChevronRight className="w-5 h-5 inline" />
              </button>
            ) : (
              <button onClick={submit} disabled={!data.description} className="px-6 py-2 rounded-xl bg-teal-600 text-white font-medium disabled:opacity-50">
                Envoyer
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

// === COMPOSANT PRINCIPAL ===
export default function CareWatch() {
  const [view, setView] = useState('landing');
  const [userType, setUserType] = useState(null);
  const [showLogin, setShowLogin] = useState(false);
  const [loginType, setLoginType] = useState('patient');
  const [selectedInst, setSelectedInst] = useState(null);
  const [mobileMenu, setMobileMenu] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(true);
  const [reportStep, setReportStep] = useState(0);
  const [reportData, setReportData] = useState({});
  const [dmsAnswers, setDmsAnswers] = useState({});
  const [myReports, setMyReports] = useState([]);

  const handleReportSubmit = (code) => {
    const newReport = {
      id: Date.now(), code, date: new Date().toLocaleDateString('fr-CH'),
      institution: reportData.institution, service: reportData.service,
      type: reportData.incidentType, status: 'En modération', ...reportData, dmsAnswers
    };
    setMyReports(prev => [newReport, ...prev]);
  };

  const handleReportComplete = () => {
    setView('patient-home');
    setReportStep(0);
    setReportData({});
    setDmsAnswers({});
  };

  // === LOGIN MODAL ===
  const LoginModal = () => (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-2xl max-w-md w-full p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-xl font-semibold text-gray-900">Connexion</h2>
          <button onClick={() => setShowLogin(false)} className="text-gray-400"><X className="w-5 h-5" /></button>
        </div>
        <p className="text-sm text-gray-500 mb-4">
          {loginType === 'patient' ? 'Espace Patient·e / Proche' : loginType === 'professional' ? 'Espace Professionnel·le' : 'Administration'}
        </p>
        <div className="space-y-4">
          <input type="email" placeholder="Email" className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" />
          <input type="password" placeholder="Mot de passe" className="w-full px-4 py-3 rounded-xl border border-gray-200 outline-none" />
          <button onClick={() => { setUserType(loginType); setShowLogin(false); setView(loginType === 'admin' ? 'dashboard' : loginType + '-home'); }} className={`w-full py-3 rounded-xl font-medium text-white ${loginType === 'patient' ? 'bg-teal-600' : loginType === 'professional' ? 'bg-amber-600' : 'bg-rose-600'}`}>
            Se connecter
          </button>
          {loginType === 'patient' && (
            <button onClick={() => { setUserType('patient'); setShowLogin(false); setView('patient-home'); }} className="w-full py-2 rounded-xl border border-gray-200 text-gray-600 text-sm">
              Continuer sans compte (anonyme)
            </button>
          )}
        </div>
      </div>
    </div>
  );

  // === INSTITUTION DETAIL MODAL ===
  const InstDetail = ({ inst, onClose }) => (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 overflow-y-auto">
      <div className="bg-white rounded-2xl max-w-2xl w-full p-6 my-4 max-h-[90vh] overflow-y-auto">
        <div className="flex justify-between items-start mb-4">
          <div>
            <h2 className="text-xl font-bold text-gray-900">{inst.fullName}</h2>
            <p className="text-gray-500 text-sm">{inst.type} • {inst.city}</p>
          </div>
          <button onClick={onClose} className="text-gray-400"><X className="w-6 h-6" /></button>
        </div>
        
        <div className="flex flex-wrap items-center gap-3 mb-6 p-4 rounded-xl bg-gray-50">
          <RatingBadge r={inst.rating} size="md" />
          <Stars r={inst.rating} />
          <ReliabilityBadge score={inst.reliability} />
          <span className="text-sm text-gray-500 ml-auto flex items-center gap-1">
            {inst.trend === 'up' ? <><ArrowUp className="w-4 h-4 text-emerald-500" /> Amélioration</> : 
             inst.trend === 'down' ? <><ArrowDown className="w-4 h-4 text-rose-500" /> Dégradation</> : 
             <><ArrowRight className="w-4 h-4 text-gray-400" /> Stable</>}
          </span>
        </div>

        <div className="grid grid-cols-4 gap-3 mb-6">
          <div className="text-center p-3 rounded-xl bg-teal-50">
            <p className="text-xl font-bold text-teal-700">{inst.reports}</p>
            <p className="text-xs text-teal-600">Signalements</p>
          </div>
          <div className="text-center p-3 rounded-xl bg-emerald-50">
            <p className="text-xl font-bold text-emerald-700">{inst.verified}</p>
            <p className="text-xs text-emerald-600">Vérifiés</p>
          </div>
          <div className="text-center p-3 rounded-xl bg-amber-50">
            <p className="text-xl font-bold text-amber-700">{inst.contested}</p>
            <p className="text-xs text-amber-600">Contestés</p>
          </div>
          <div className="text-center p-3 rounded-xl bg-gray-50">
            <p className="text-xl font-bold text-gray-700">{inst.avgDays}j</p>
            <p className="text-xs text-gray-600">Temps rép.</p>
          </div>
        </div>

        <div className="bg-blue-50 rounded-xl p-4 mb-6">
          <div className="flex gap-3">
            <Scale className="w-5 h-5 text-blue-600 flex-shrink-0" />
            <div className="text-sm text-blue-800">
              <p className="font-medium mb-1">Processus d'évaluation équitable</p>
              <p>Les signalements sont vérifiés par des modérateurs indépendants. L'établissement dispose d'un droit de réponse et peut contester les signalements qu'il estime infondés.</p>
            </div>
          </div>
        </div>

        <button onClick={() => { onClose(); setReportStep(0); setReportData({ institution: inst.fullName }); setView('new-report'); }} className="w-full py-3 rounded-xl bg-teal-600 text-white font-medium">
          Signaler un incident
        </button>
      </div>
    </div>
  );

  // === LANDING PAGE ===
  const Landing = () => (
    <div className="min-h-screen bg-gradient-to-b from-teal-50 via-white to-white">
      {/* Header */}
      <header className="sticky top-0 bg-white/90 backdrop-blur-md border-b border-gray-100 z-40">
        <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center">
              <Shield className="w-5 h-5 text-white" />
            </div>
            <div>
              <h1 className="text-lg font-bold text-gray-900">CareWatch</h1>
              <p className="text-xs text-teal-600 font-medium hidden sm:block">Observatoire Suisse de l'Équité des Soins</p>
            </div>
          </div>
          <nav className="hidden md:flex items-center gap-6 text-sm">
            <button onClick={() => setView('about')} className="text-gray-600 hover:text-teal-600">À propos</button>
            <button onClick={() => setView('methodology')} className="text-gray-600 hover:text-teal-600">Méthodologie</button>
            <button onClick={() => setView('open-data')} className="text-gray-600 hover:text-teal-600">Open Data</button>
            <button onClick={() => { setLoginType('admin'); setShowLogin(true); }} className="text-gray-600 hover:text-teal-600">Admin</button>
          </nav>
          <button onClick={() => setMobileMenu(!mobileMenu)} className="md:hidden p-2"><Menu className="w-6 h-6" /></button>
        </div>
        {mobileMenu && (
          <div className="md:hidden bg-white border-t px-4 py-3 space-y-2">
            <button onClick={() => { setView('about'); setMobileMenu(false); }} className="block w-full text-left py-2">À propos</button>
            <button onClick={() => { setView('methodology'); setMobileMenu(false); }} className="block w-full text-left py-2">Méthodologie</button>
            <button onClick={() => { setView('open-data'); setMobileMenu(false); }} className="block w-full text-left py-2">Open Data</button>
          </div>
        )}
      </header>

      <main className="max-w-6xl mx-auto px-4 py-8 md:py-12">
        {/* Hero */}
        <div className="text-center mb-12">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-teal-100 text-teal-700 text-sm mb-6">
            <Sparkles className="w-4 h-4" />
            <span>Plateforme indépendante et participative</span>
          </div>
          <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-4">
            Observatoire Suisse de l'Équité des Soins
          </h2>
          <p className="text-xl text-teal-600 font-medium mb-4">
            Évaluer • Améliorer • Garantir l'équité
          </p>
          <p className="text-gray-600 max-w-2xl mx-auto text-lg">
            Plateforme indépendante d'évaluation de la qualité et de l'équité dans les établissements de santé suisses. 
            Signalez anonymement, consultez les évaluations, contribuez à des soins plus justes.
          </p>
        </div>

        {/* Mission cards */}
        <div className="grid md:grid-cols-3 gap-4 mb-12">
          {[
            { icon: Eye, title: 'Transparence', desc: 'Évaluations publiques basées sur des signalements vérifiés et une méthodologie rigoureuse' },
            { icon: Scale, title: 'Équité', desc: 'Processus équitable avec droit de réponse pour les établissements et modération indépendante' },
            { icon: Database, title: 'Open Data', desc: 'Données ouvertes et API publique pour la recherche et l\'amélioration du système de santé' },
          ].map((c, i) => (
            <div key={i} className="bg-white rounded-xl border border-gray-100 p-6">
              <c.icon className="w-8 h-8 text-teal-600 mb-3" />
              <h3 className="font-semibold text-gray-900 mb-2">{c.title}</h3>
              <p className="text-sm text-gray-500">{c.desc}</p>
            </div>
          ))}
        </div>

        {/* Primary Access */}
        <div className="grid md:grid-cols-2 gap-6 mb-12">
          <button onClick={() => { setLoginType('patient'); setShowLogin(true); }} className="group p-6 md:p-8 rounded-2xl bg-white border-2 border-teal-100 hover:border-teal-300 hover:shadow-lg transition-all text-left">
            <div className="w-14 h-14 rounded-2xl bg-teal-100 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
              <User className="w-7 h-7 text-teal-600" />
            </div>
            <h3 className="text-xl font-semibold text-gray-900 mb-2">Je suis patient·e ou proche</h3>
            <p className="text-gray-500 mb-4">Signalez une expérience, consultez les évaluations, trouvez de l'aide et des soignants sensibilisés.</p>
            <span className="text-teal-600 font-medium flex items-center gap-2">Accéder <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" /></span>
          </button>

          <button onClick={() => { setLoginType('professional'); setShowLogin(true); }} className="group p-6 md:p-8 rounded-2xl bg-white border-2 border-amber-100 hover:border-amber-300 hover:shadow-lg transition-all text-left">
            <div className="w-14 h-14 rounded-2xl bg-amber-100 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
              <Stethoscope className="w-7 h-7 text-amber-600" />
            </div>
            <h3 className="text-xl font-semibold text-gray-900 mb-2">Je suis professionnel·le de santé</h3>
            <p className="text-gray-500 mb-4">Signalez des situations, rejoignez le réseau pair-aidance ASPR-GE, accédez aux formations.</p>
            <span className="text-amber-600 font-medium flex items-center gap-2">Accéder <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" /></span>
          </button>
        </div>

        {/* Stats with reliability */}
        <div className="bg-white rounded-2xl border border-gray-100 p-6 mb-12">
          <div className="flex items-center justify-between mb-6">
            <h3 className="font-semibold text-gray-900">Statistiques de l'observatoire</h3>
            <ReliabilityBadge score={stats.reliability} />
          </div>
          <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
            <div className="text-center">
              <p className="text-3xl font-bold text-teal-600">{stats.total}</p>
              <p className="text-xs text-gray-500">Signalements</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-emerald-600">{stats.verified}</p>
              <p className="text-xs text-gray-500">Vérifiés</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-amber-600">{stats.avgDays}j</p>
              <p className="text-xs text-gray-500">Temps moyen</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-rose-600">{stats.institutions}</p>
              <p className="text-xs text-gray-500">Établissements</p>
            </div>
            <div className="text-center">
              <p className="text-3xl font-bold text-blue-600">{stats.reliability}%</p>
              <p className="text-xs text-gray-500">Fiabilité</p>
            </div>
          </div>
        </div>

        {/* How it works */}
        <div className="bg-gradient-to-r from-teal-50 to-emerald-50 rounded-2xl p-6 md:p-8 mb-12">
          <h3 className="text-lg font-semibold text-gray-900 mb-6 text-center">Comment fonctionne l'observatoire ?</h3>
          <div className="grid md:grid-cols-5 gap-4">
            {[
              { icon: ClipboardList, title: '1. Signalement', desc: 'Remplissez le formulaire avec vérification préalable' },
              { icon: ShieldCheck, title: '2. Modération', desc: 'Examen par nos modérateurs indépendants (48h)' },
              { icon: MessageCircle, title: '3. Droit de réponse', desc: 'L\'établissement peut contester (14 jours)' },
              { icon: FileCheck, title: '4. Validation', desc: 'Publication après période probatoire' },
              { icon: BarChart3, title: '5. Impact', desc: 'Mise à jour des évaluations' },
            ].map((s, i) => (
              <div key={i} className="text-center">
                <div className="w-12 h-12 rounded-full bg-white flex items-center justify-center mx-auto mb-3 shadow-sm">
                  <s.icon className="w-6 h-6 text-teal-600" />
                </div>
                <h4 className="font-medium text-gray-900 mb-1 text-sm">{s.title}</h4>
                <p className="text-xs text-gray-500">{s.desc}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Institutions */}
        <div className="bg-white rounded-2xl border border-gray-100 mb-12">
          <div className="p-6 border-b border-gray-100">
            <div className="flex items-center justify-between">
              <h3 className="font-semibold text-gray-900">Évaluations des établissements</h3>
              <button onClick={() => setView('open-data')} className="text-sm text-teal-600 flex items-center gap-1">
                <Database className="w-4 h-4" /> Open Data
              </button>
            </div>
          </div>
          <div className="divide-y divide-gray-50">
            {institutions.map(inst => (
              <button key={inst.id} onClick={() => setSelectedInst(inst)} className="w-full flex items-center gap-4 p-4 hover:bg-gray-50 text-left">
                <div className={`w-10 h-10 rounded-lg ${ratings[inst.rating].light} flex items-center justify-center`}>
                  <Building className={`w-5 h-5 ${ratings[inst.rating].text}`} />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="font-medium text-gray-900 truncate">{inst.fullName}</p>
                  <p className="text-xs text-gray-500">{inst.city} • {inst.reports} signalements • {inst.reliability}% fiable</p>
                </div>
                <RatingBadge r={inst.rating} />
              </button>
            ))}
          </div>
        </div>

        {/* Open Data CTA */}
        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-6 md:p-8 mb-12">
          <div className="flex flex-col md:flex-row items-center gap-6">
            <div className="w-16 h-16 rounded-2xl bg-blue-100 flex items-center justify-center flex-shrink-0">
              <Database className="w-8 h-8 text-blue-600" />
            </div>
            <div className="flex-1 text-center md:text-left">
              <h3 className="text-lg font-semibold text-gray-900 mb-2">Open Data & API</h3>
              <p className="text-gray-600">Accédez aux données anonymisées de l'observatoire. Téléchargez les datasets ou utilisez notre API REST pour vos recherches et analyses.</p>
            </div>
            <button onClick={() => setView('open-data')} className="px-6 py-3 rounded-xl bg-blue-600 text-white font-medium flex items-center gap-2">
              <Code className="w-5 h-5" /> Explorer
            </button>
          </div>
        </div>

        {/* Partners */}
        <div className="text-center">
          <p className="text-xs text-gray-400 mb-4">En partenariat avec</p>
          <div className="flex flex-wrap justify-center gap-6">
            {['Convivens Lab • HES-SO', 'FAANG', 'ASPR-GE', 'Suisse Drépano', 'KimboCare', 'Centre LAVI'].map(p => (
              <span key={p} className="text-sm text-gray-400">{p}</span>
            ))}
          </div>
        </div>
      </main>

      {/* Footer */}
      <footer className="bg-gray-50 border-t py-6 px-4 mt-12">
        <div className="max-w-6xl mx-auto flex flex-wrap items-center justify-between gap-4">
          <div className="flex items-center gap-4">
            <a href="tel:144" className="flex items-center gap-2 text-rose-600"><Phone className="w-4 h-4" /><span className="text-sm">Urgence : <strong>144</strong></span></a>
          </div>
          <div className="flex items-center gap-4 text-sm text-gray-400">
            <span className="flex items-center gap-1"><Lock className="w-4 h-4" /> Données anonymisées</span>
            <span className="flex items-center gap-1"><ShieldCheck className="w-4 h-4" /> Signalements vérifiés</span>
          </div>
        </div>
      </footer>

      {showLogin && <LoginModal />}
      {selectedInst && <InstDetail inst={selectedInst} onClose={() => setSelectedInst(null)} />}
    </div>
  );

  // === OPEN DATA PAGE ===
  const OpenDataPage = () => (
    <div className="min-h-screen bg-white">
      <header className="sticky top-0 bg-white border-b border-gray-100 z-40 px-4 py-4">
        <div className="max-w-4xl mx-auto flex items-center gap-4">
          <button onClick={() => setView('landing')} className="p-2 rounded-lg hover:bg-gray-100"><ChevronLeft className="w-5 h-5" /></button>
          <h1 className="text-lg font-semibold text-gray-900">Open Data & API</h1>
        </div>
      </header>
      <main className="max-w-4xl mx-auto px-4 py-8">
        <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-6 mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-2">Données ouvertes</h2>
          <p className="text-gray-600">Accédez librement aux données anonymisées de l'observatoire pour vos recherches, analyses et applications.</p>
        </div>

        {/* Datasets */}
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Datasets disponibles</h3>
        <div className="space-y-4 mb-8">
          {[
            { name: 'Évaluations des établissements', desc: 'Notes, critères, tendances par établissement', format: 'CSV, JSON', size: '124 KB', updated: '30 jan 2025' },
            { name: 'Signalements anonymisés', desc: 'Types d\'incidents, services, périodes (anonymisé)', format: 'CSV, JSON', size: '2.3 MB', updated: '30 jan 2025' },
            { name: 'Scores DMS agrégés', desc: 'Résultats du questionnaire par établissement', format: 'CSV, JSON', size: '89 KB', updated: '30 jan 2025' },
            { name: 'Séries temporelles', desc: 'Évolution des évaluations dans le temps', format: 'CSV, JSON', size: '456 KB', updated: '30 jan 2025' },
          ].map((d, i) => (
            <div key={i} className="bg-white rounded-xl border border-gray-100 p-4 flex items-center gap-4">
              <div className="w-12 h-12 rounded-lg bg-blue-50 flex items-center justify-center">
                <FileText className="w-6 h-6 text-blue-600" />
              </div>
              <div className="flex-1">
                <p className="font-medium text-gray-900">{d.name}</p>
                <p className="text-sm text-gray-500">{d.desc}</p>
                <p className="text-xs text-gray-400">{d.format} • {d.size} • Màj: {d.updated}</p>
              </div>
              <button className="px-4 py-2 rounded-lg bg-blue-100 text-blue-700 text-sm font-medium flex items-center gap-2">
                <Download className="w-4 h-4" /> Télécharger
              </button>
            </div>
          ))}
        </div>

        {/* API */}
        <h3 className="text-lg font-semibold text-gray-900 mb-4">API REST</h3>
        <div className="bg-gray-900 rounded-xl p-6 mb-6">
          <p className="text-gray-400 text-sm mb-2">Base URL</p>
          <code className="text-emerald-400 text-lg">https://api.carewatch.ch/v1</code>
        </div>

        <div className="space-y-4 mb-8">
          <h4 className="font-medium text-gray-900">Endpoints disponibles</h4>
          {[
            { method: 'GET', endpoint: '/institutions', desc: 'Liste des établissements avec évaluations' },
            { method: 'GET', endpoint: '/institutions/{id}', desc: 'Détail d\'un établissement' },
            { method: 'GET', endpoint: '/reports/stats', desc: 'Statistiques agrégées des signalements' },
            { method: 'GET', endpoint: '/dms/scores', desc: 'Scores DMS par établissement' },
            { method: 'GET', endpoint: '/timeseries', desc: 'Données temporelles' },
          ].map((e, i) => (
            <div key={i} className="flex items-center gap-4 p-3 rounded-lg bg-gray-50">
              <span className={`px-2 py-1 rounded text-xs font-mono font-bold ${e.method === 'GET' ? 'bg-emerald-100 text-emerald-700' : 'bg-blue-100 text-blue-700'}`}>{e.method}</span>
              <code className="text-sm text-gray-700 flex-1">{e.endpoint}</code>
              <span className="text-sm text-gray-500">{e.desc}</span>
            </div>
          ))}
        </div>

        <div className="bg-gray-50 rounded-xl p-6 mb-8">
          <h4 className="font-medium text-gray-900 mb-3">Exemple de requête</h4>
          <pre className="bg-gray-900 rounded-lg p-4 text-sm overflow-x-auto">
            <code className="text-gray-300">{`curl -X GET "https://api.carewatch.ch/v1/institutions" \\
  -H "Accept: application/json"`}</code>
          </pre>
        </div>

        {/* License */}
        <div className="bg-amber-50 rounded-xl p-6">
          <h4 className="font-medium text-amber-800 mb-2 flex items-center gap-2">
            <Scale className="w-5 h-5" /> Licence et conditions
          </h4>
          <p className="text-sm text-amber-700 mb-3">
            Les données sont publiées sous licence <strong>Creative Commons BY-NC-SA 4.0</strong>. 
            Vous pouvez les utiliser librement pour des usages non commerciaux avec attribution.
          </p>
          <ul className="text-sm text-amber-700 space-y-1">
            <li>• Attribution obligatoire : "Source: CareWatch.ch"</li>
            <li>• Usage commercial : contactez-nous</li>
            <li>• Pas de ré-identification des individus</li>
          </ul>
        </div>
      </main>
    </div>
  );

  // === ABOUT PAGE ===
  const AboutPage = () => (
    <div className="min-h-screen bg-white">
      <header className="sticky top-0 bg-white border-b border-gray-100 z-40 px-4 py-4">
        <div className="max-w-4xl mx-auto flex items-center gap-4">
          <button onClick={() => setView('landing')} className="p-2 rounded-lg hover:bg-gray-100"><ChevronLeft className="w-5 h-5" /></button>
          <h1 className="text-lg font-semibold text-gray-900">À propos</h1>
        </div>
      </header>
      <main className="max-w-4xl mx-auto px-4 py-8">
        <div className="bg-teal-50 rounded-2xl p-6 mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Notre mission</h2>
          <p className="text-gray-700">CareWatch est l'Observatoire Suisse de l'Équité des Soins, une plateforme indépendante et participative dédiée à l'amélioration de la qualité et de l'équité dans les établissements de santé suisses.</p>
        </div>

        <h3 className="text-xl font-semibold text-gray-900 mb-4">Protection contre les abus</h3>
        <div className="bg-white rounded-xl border border-gray-100 p-6 mb-8">
          <p className="text-gray-600 mb-4">Pour garantir la fiabilité des évaluations et protéger les établissements contre les signalements abusifs, nous avons mis en place plusieurs mécanismes :</p>
          <div className="space-y-3">
            {[
              { icon: ShieldCheck, title: 'Vérification préalable', desc: 'Code postal et charte de bonne conduite' },
              { icon: Eye, title: 'Modération indépendante', desc: 'Examen de chaque signalement sous 48h' },
              { icon: MessageCircle, title: 'Droit de réponse', desc: '14 jours pour contester un signalement' },
              { icon: Clock, title: 'Période probatoire', desc: 'Impact sur la note différé de 30 jours' },
              { icon: Scale, title: 'Score de fiabilité', desc: 'Pondération selon cohérence et vérification' },
            ].map((m, i) => (
              <div key={i} className="flex items-start gap-3 p-3 rounded-lg bg-gray-50">
                <m.icon className="w-5 h-5 text-teal-600 mt-0.5" />
                <div><p className="font-medium text-gray-900">{m.title}</p><p className="text-sm text-gray-500">{m.desc}</p></div>
              </div>
            ))}
          </div>
        </div>

        <h3 className="text-xl font-semibold text-gray-900 mb-4">Nos partenaires</h3>
        <div className="grid md:grid-cols-2 gap-4 mb-8">
          {resourceOrgs.map(o => (
            <div key={o.id} className="bg-gray-50 rounded-xl p-4">
              <p className="font-medium text-gray-900">{o.name}</p>
              <p className="text-sm text-gray-500">{o.fullName}</p>
            </div>
          ))}
        </div>

        <div className="bg-gray-100 rounded-xl p-6">
          <h4 className="font-semibold text-gray-900 mb-2">Contact</h4>
          <p className="text-gray-600">contact@carewatch.ch</p>
          <p className="text-gray-600">Convivens Lab, HEG Genève, HES-SO</p>
        </div>
      </main>
    </div>
  );

  // === METHODOLOGY PAGE ===
  const MethodologyPage = () => (
    <div className="min-h-screen bg-white">
      <header className="sticky top-0 bg-white border-b z-40 px-4 py-4">
        <div className="max-w-4xl mx-auto flex items-center gap-4">
          <button onClick={() => setView('landing')} className="p-2 rounded-lg hover:bg-gray-100"><ChevronLeft className="w-5 h-5" /></button>
          <h1 className="text-lg font-semibold text-gray-900">Méthodologie</h1>
        </div>
      </header>
      <main className="max-w-4xl mx-auto px-4 py-8">
        <h2 className="text-2xl font-bold text-gray-900 mb-6">Comment sont calculées les évaluations ?</h2>

        <div className="space-y-6">
          <section className="bg-white rounded-xl border p-6">
            <h3 className="font-semibold text-gray-900 mb-3">1. Score de fiabilité</h3>
            <p className="text-gray-600 mb-3">Chaque établissement dispose d'un score de fiabilité (0-100%) calculé selon :</p>
            <ul className="text-gray-600 space-y-1 text-sm">
              <li>• Nombre de signalements vérifiés vs contestés</li>
              <li>• Cohérence entre les signalements</li>
              <li>• Taux de preuves fournies</li>
              <li>• Historique des contestations validées</li>
            </ul>
          </section>

          <section className="bg-white rounded-xl border p-6">
            <h3 className="font-semibold text-gray-900 mb-3">2. Questionnaire DMS</h3>
            <p className="text-gray-600">Le questionnaire "Discrimination in Medical Settings" est un outil validé scientifiquement pour mesurer les expériences de discrimination dans les soins.</p>
          </section>

          <section className="bg-white rounded-xl border p-6">
            <h3 className="font-semibold text-gray-900 mb-3">3. Niveaux de notation</h3>
            <div className="space-y-2">
              {Object.entries(ratings).map(([k, r]) => (
                <div key={k} className="flex items-center gap-3 p-2">
                  <div className={`w-4 h-4 rounded-full ${r.bg}`} />
                  <span className="font-medium">{r.label}</span>
                  <Stars r={k} />
                </div>
              ))}
            </div>
          </section>

          <section className="bg-white rounded-xl border p-6">
            <h3 className="font-semibold text-gray-900 mb-3">4. Processus anti-bashing</h3>
            <div className="space-y-2 text-sm text-gray-600">
              <p>• Vérification préalable obligatoire (code postal, charte)</p>
              <p>• Modération sous 48h par équipe indépendante</p>
              <p>• Droit de contestation pour l'établissement (14 jours)</p>
              <p>• Impact sur la note différé de 30 jours</p>
              <p>• Signalements pondérés par le score de fiabilité</p>
            </div>
          </section>
        </div>
      </main>
    </div>
  );

  // === SIDEBAR ===
  const Sidebar = ({ type }) => {
    const menus = {
      patient: [
        { icon: Home, label: 'Accueil', v: 'patient-home' },
        { icon: Plus, label: 'Signaler', v: 'new-report' },
        { icon: ClipboardList, label: 'Mes signalements', v: 'my-reports' },
        { icon: Shield, label: 'Mes droits', v: 'rights' },
        { icon: Building, label: 'Établissements', v: 'institutions' },
        { icon: Stethoscope, label: 'Soignants', v: 'healthcare-pros' },
        { icon: Users, label: 'Ressources', v: 'resources' },
      ],
      professional: [
        { icon: Home, label: 'Accueil', v: 'professional-home' },
        { icon: Plus, label: 'Signaler', v: 'new-report' },
        { icon: Users, label: 'Pair-aidance', v: 'peer-support' },
        { icon: Building, label: 'Établissements', v: 'institutions' },
        { icon: BookOpen, label: 'Formations', v: 'formations' },
      ],
      admin: [
        { icon: BarChart3, label: 'Dashboard', v: 'dashboard' },
        { icon: Building, label: 'Établissements', v: 'institutions' },
        { icon: ClipboardList, label: 'Signalements', v: 'admin-reports' },
        { icon: UserCog, label: 'Utilisateurs', v: 'users' },
        { icon: Database, label: 'Open Data', v: 'open-data' },
        { icon: Settings, label: 'Paramètres', v: 'settings' },
      ],
    };
    const items = menus[type] || menus.patient;

    return (
      <aside className={`${sidebarOpen ? 'w-64' : 'w-16'} bg-white border-r flex-col hidden md:flex`}>
        <div className="p-4 border-b">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-xl bg-teal-100 flex items-center justify-center"><Shield className="w-5 h-5 text-teal-600" /></div>
            {sidebarOpen && <span className="font-bold text-gray-900">CareWatch</span>}
          </div>
        </div>
        <nav className="flex-1 p-3 space-y-1 overflow-y-auto">
          {items.map(i => (
            <button key={i.v} onClick={() => setView(i.v)} className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl ${view === i.v ? 'bg-teal-50 text-teal-700' : 'text-gray-600 hover:bg-gray-50'}`}>
              <i.icon className="w-5 h-5" />{sidebarOpen && <span className="text-sm">{i.label}</span>}
            </button>
          ))}
        </nav>
        <div className="p-3 border-t">
          <button onClick={() => setSidebarOpen(!sidebarOpen)} className="w-full flex items-center gap-3 px-3 py-2 rounded-xl text-gray-400 hover:bg-gray-50">
            {sidebarOpen ? <ChevronLeft className="w-5 h-5" /> : <ChevronRight className="w-5 h-5" />}
          </button>
          <button onClick={() => { setView('landing'); setUserType(null); }} className="w-full flex items-center gap-3 px-3 py-2 rounded-xl text-gray-400 hover:bg-gray-50">
            <LogOut className="w-5 h-5" />{sidebarOpen && <span className="text-sm">Déconnexion</span>}
          </button>
        </div>
      </aside>
    );
  };

  // === MOBILE NAV ===
  const MobileNav = ({ type }) => {
    const items = type === 'patient' 
      ? [{ icon: Home, v: 'patient-home' }, { icon: Plus, v: 'new-report' }, { icon: ClipboardList, v: 'my-reports' }, { icon: Shield, v: 'rights' }]
      : type === 'professional' 
      ? [{ icon: Home, v: 'professional-home' }, { icon: Plus, v: 'new-report' }, { icon: Users, v: 'peer-support' }]
      : [{ icon: BarChart3, v: 'dashboard' }, { icon: Building, v: 'institutions' }, { icon: ClipboardList, v: 'admin-reports' }];
    return (
      <nav className="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t flex justify-around py-2 z-40">
        {items.map(i => <button key={i.v} onClick={() => setView(i.v)} className={`p-3 rounded-xl ${view === i.v ? 'text-teal-600' : 'text-gray-400'}`}><i.icon className="w-6 h-6" /></button>)}
      </nav>
    );
  };

  // === PATIENT HOME ===
  const PatientHome = () => (
    <div className="p-4 md:p-8 pb-24">
      <div className="bg-gradient-to-r from-teal-50 to-emerald-50 rounded-2xl p-6 mb-6">
        <h2 className="text-xl font-bold text-gray-900 mb-2">Bienvenue</h2>
        <p className="text-gray-600 mb-4">Signalez une expérience, consultez vos droits ou trouvez de l'aide.</p>
        <button onClick={() => { setReportStep(0); setReportData({}); setDmsAnswers({}); setView('new-report'); }} className="px-6 py-3 rounded-xl bg-teal-600 text-white font-medium flex items-center gap-2">
          <Plus className="w-5 h-5" /> Faire un signalement
        </button>
      </div>
      
      <div className="grid grid-cols-2 gap-4 mb-6">
        {[
          { icon: Shield, label: 'Mes droits', v: 'rights', color: 'teal' },
          { icon: ClipboardList, label: 'Mes signalements', v: 'my-reports', color: 'amber' },
          { icon: Stethoscope, label: 'Soignants', v: 'healthcare-pros', color: 'emerald' },
          { icon: Users, label: 'Ressources', v: 'resources', color: 'rose' },
        ].map(item => (
          <button key={item.v} onClick={() => setView(item.v)} className="p-4 rounded-xl bg-white border hover:border-gray-200 text-left">
            <item.icon className={`w-8 h-8 text-${item.color}-600 mb-2`} />
            <p className="font-medium text-gray-900">{item.label}</p>
          </button>
        ))}
      </div>

      <div className="bg-white rounded-xl border p-4">
        <h3 className="font-medium text-gray-900 mb-3">Aide immédiate</h3>
        <a href="tel:144" className="flex items-center gap-3 p-3 rounded-lg bg-rose-50 text-rose-700 mb-2">
          <Phone className="w-5 h-5" /><div><p className="font-medium">144</p><p className="text-xs">Urgence médicale</p></div>
        </a>
        <a href="tel:143" className="flex items-center gap-3 p-3 rounded-lg bg-amber-50 text-amber-700">
          <MessageCircle className="w-5 h-5" /><div><p className="font-medium">143</p><p className="text-xs">La Main Tendue</p></div>
        </a>
      </div>
    </div>
  );

  // === MY REPORTS ===
  const MyReportsView = () => (
    <div className="p-4 md:p-8 pb-24 max-w-2xl mx-auto">
      <h2 className="text-xl font-bold text-gray-900 mb-4">Mes signalements</h2>
      {myReports.length === 0 ? (
        <div className="bg-white rounded-xl border p-6 text-center">
          <ClipboardList className="w-12 h-12 mx-auto mb-3 text-gray-300" />
          <p className="text-gray-500">Aucun signalement</p>
          <button onClick={() => setView('new-report')} className="mt-4 text-teal-600 font-medium">Faire un signalement</button>
        </div>
      ) : (
        <div className="space-y-4">
          {myReports.map(r => (
            <div key={r.id} className="bg-white rounded-xl border p-4">
              <div className="flex items-start justify-between mb-2">
                <div>
                  <p className="font-medium text-gray-900">{r.type}</p>
                  <p className="text-sm text-gray-500">{r.institution}</p>
                </div>
                <span className={`px-2 py-1 rounded text-xs ${r.status === 'Vérifié' ? 'bg-emerald-100 text-emerald-700' : r.status === 'En modération' ? 'bg-amber-100 text-amber-700' : 'bg-gray-100 text-gray-600'}`}>{r.status}</span>
              </div>
              <div className="flex items-center justify-between text-sm">
                <span className="text-gray-400">{r.date}</span>
                <span className="font-mono text-teal-600">{r.code}</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  // === RIGHTS VIEW ===
  const RightsView = () => (
    <div className="p-4 md:p-8 pb-24 max-w-2xl mx-auto">
      <h2 className="text-xl font-bold text-gray-900 mb-6">Vos droits</h2>
      <div className="space-y-4">
        {[
          { title: 'Droit à des soins de qualité', desc: 'Sans discrimination basée sur l\'origine, la couleur de peau, la religion.' },
          { title: 'Droit au respect', desc: 'Votre dignité et vos convictions doivent être respectées.' },
          { title: 'Droit à l\'information', desc: 'Information claire sur votre état et les traitements.' },
          { title: 'Droit de refuser', desc: 'Vous pouvez refuser un traitement après information.' },
          { title: 'Droit de porter plainte', desc: 'Signalement auprès de l\'établissement ou du médecin cantonal.' },
        ].map((r, i) => (
          <div key={i} className="bg-white rounded-xl border p-4">
            <h3 className="font-medium text-gray-900 mb-1">{r.title}</h3>
            <p className="text-sm text-gray-500">{r.desc}</p>
          </div>
        ))}
      </div>
    </div>
  );

  // === HEALTHCARE PROS ===
  const HealthcareProsView = () => (
    <div className="p-4 md:p-8 pb-24">
      <h2 className="text-xl font-semibold text-gray-900 mb-4">Soignants sensibilisés</h2>
      <div className="space-y-3">
        {healthcarePros.map(p => (
          <div key={p.id} className="bg-white rounded-xl border p-4 flex items-center gap-4">
            <div className="w-12 h-12 rounded-full bg-teal-100 flex items-center justify-center text-teal-700 font-semibold">
              {p.name.split(' ').map(n => n[0]).join('')}
            </div>
            <div className="flex-1">
              <p className="font-medium text-gray-900">{p.name}</p>
              <p className="text-sm text-teal-600">{p.specialty}</p>
              <p className="text-xs text-gray-500">{p.institution}</p>
            </div>
            <div className="flex items-center gap-1">
              <Star className="w-4 h-4 text-amber-500 fill-current" />
              <span className="text-sm">{p.rating}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

  // === RESOURCES ===
  const ResourcesView = () => (
    <div className="p-4 md:p-8 pb-24">
      <h2 className="text-xl font-semibold text-gray-900 mb-4">Ressources</h2>
      <div className="space-y-3">
        {resourceOrgs.map(o => (
          <div key={o.id} className="bg-white rounded-xl border p-4">
            <p className="font-medium text-gray-900">{o.name}</p>
            <p className="text-sm text-gray-500 mb-2">{o.fullName}</p>
            <div className="flex flex-wrap gap-1 mb-2">
              {o.services.map(s => <span key={s} className="px-2 py-0.5 rounded bg-teal-50 text-teal-700 text-xs">{s}</span>)}
            </div>
            <p className="text-xs text-gray-400">{o.phone}</p>
          </div>
        ))}
      </div>
    </div>
  );

  // === INSTITUTIONS ===
  const InstitutionsView = () => (
    <div className="p-4 md:p-8 pb-24">
      <h2 className="text-xl font-semibold text-gray-900 mb-4">Établissements</h2>
      <div className="space-y-3">
        {institutions.map(i => (
          <button key={i.id} onClick={() => setSelectedInst(i)} className="w-full bg-white rounded-xl border p-4 flex items-center gap-4 text-left hover:border-gray-200">
            <div className={`w-10 h-10 rounded-lg ${ratings[i.rating].light} flex items-center justify-center`}>
              <Building className={`w-5 h-5 ${ratings[i.rating].text}`} />
            </div>
            <div className="flex-1 min-w-0">
              <p className="font-medium text-gray-900 truncate">{i.fullName}</p>
              <p className="text-xs text-gray-500">{i.city} • {i.reliability}% fiable</p>
            </div>
            <RatingBadge r={i.rating} />
          </button>
        ))}
      </div>
      {selectedInst && <InstDetail inst={selectedInst} onClose={() => setSelectedInst(null)} />}
    </div>
  );

  // === DASHBOARD ===
  const Dashboard = () => (
    <div className="p-4 md:p-8">
      <h2 className="text-xl font-semibold text-gray-900 mb-6">Dashboard</h2>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        {[
          { label: 'Signalements', value: stats.total, color: 'teal' },
          { label: 'Vérifiés', value: stats.verified, color: 'emerald' },
          { label: 'En modération', value: 67, color: 'amber' },
          { label: 'Fiabilité', value: stats.reliability + '%', color: 'blue' },
        ].map(s => (
          <div key={s.label} className="bg-white rounded-xl border p-4">
            <p className={`text-2xl font-bold text-${s.color}-600`}>{s.value}</p>
            <p className="text-xs text-gray-500">{s.label}</p>
          </div>
        ))}
      </div>

      <div className="bg-white rounded-xl border p-4 mb-6">
        <h3 className="font-medium text-gray-900 mb-4">À surveiller</h3>
        {institutions.filter(i => i.rating === 'inadequate' || i.rating === 'requires_improvement').map(i => (
          <div key={i.id} className={`flex items-center gap-3 p-3 rounded-lg mb-2 ${i.rating === 'inadequate' ? 'bg-rose-50' : 'bg-amber-50'}`}>
            <AlertTriangle className={`w-5 h-5 ${i.rating === 'inadequate' ? 'text-rose-600' : 'text-amber-600'}`} />
            <span className="flex-1">{i.name}</span>
            <RatingBadge r={i.rating} size="xs" />
          </div>
        ))}
      </div>
    </div>
  );

  // === RENDER ===
  const renderContent = () => {
    switch (view) {
      case 'landing': return <Landing />;
      case 'about': return <AboutPage />;
      case 'methodology': return <MethodologyPage />;
      case 'open-data': return <OpenDataPage />;
      case 'patient-home': return <PatientHome />;
      case 'professional-home': return <PatientHome />;
      case 'new-report': return <NewReportForm step={reportStep} setStep={setReportStep} data={reportData} setData={setReportData} dmsAnswers={dmsAnswers} setDmsAnswers={setDmsAnswers} onSubmit={handleReportSubmit} onComplete={handleReportComplete} />;
      case 'my-reports': return <MyReportsView />;
      case 'rights': return <RightsView />;
      case 'healthcare-pros': return <HealthcareProsView />;
      case 'resources': return <ResourcesView />;
      case 'institutions': return <InstitutionsView />;
      case 'dashboard': return <Dashboard />;
      default: return <div className="p-8 text-gray-500">Vue: {view}</div>;
    }
  };

  if (['landing', 'about', 'methodology', 'open-data'].includes(view)) return renderContent();

  return (
    <div className="min-h-screen bg-gray-50 flex">
      <Sidebar type={userType} />
      <div className="flex-1 flex flex-col min-w-0">
        <header className="bg-white border-b px-4 md:px-8 py-4 flex items-center justify-between">
          <h1 className="text-lg font-semibold text-gray-900">{view.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}</h1>
          <button className="p-2 rounded-lg bg-gray-100 relative"><Bell className="w-5 h-5" /><span className="absolute -top-1 -right-1 w-4 h-4 bg-rose-500 rounded-full text-xs text-white flex items-center justify-center">2</span></button>
        </header>
        <main className="flex-1 overflow-auto">{renderContent()}</main>
        <MobileNav type={userType} />
      </div>
      {selectedInst && <InstDetail inst={selectedInst} onClose={() => setSelectedInst(null)} />}
    </div>
  );
}