import { useState, useRef, useCallback } from "react";
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
  BarChart, Bar, ResponsiveContainer, AreaChart, Area
} from "recharts";

/* ══════════ DONNÉES KPI ══════════ */
// Latence par endpoint (3 calls : search, competences, match)
const kpiLatency = [
  { t:"Lun", search:1.2, competences:1.8, match:2.9 },
  { t:"Mar", search:1.4, competences:2.1, match:3.2 },
  { t:"Mer", search:1.1, competences:1.6, match:2.6 },
  { t:"Jeu", search:1.8, competences:2.4, match:3.7 },
  { t:"Ven", search:1.3, competences:1.9, match:2.8 },
  { t:"Sam", search:1.0, competences:1.5, match:2.3 },
  { t:"Dim", search:0.9, competences:1.3, match:2.0 },
];
// Requêtes/jour par endpoint
const kpiEndpoints = [
  { t:"Lun", search:85, extract:42, competences:38, match:31 },
  { t:"Mar", search:91, extract:48, competences:44, match:37 },
  { t:"Mer", search:78, extract:38, competences:35, match:28 },
  { t:"Jeu", search:105, extract:61, competences:57, match:49 },
  { t:"Ven", search:96, extract:54, competences:50, match:42 },
  { t:"Sam", search:45, extract:22, competences:19, match:14 },
  { t:"Dim", search:38, extract:18, competences:15, match:10 },
];
// Tokens par type d'appel LLM (3 call types, coûts réels)
const kpiLLM = [
  { t:"00h", search:320, comp:0,    match:0,    cost:0.001 },
  { t:"04h", search:110, comp:0,    match:0,    cost:0.000 },
  { t:"08h", search:980, comp:760,  match:1240, cost:0.009 },
  { t:"12h", search:1640,comp:1280, match:2080, cost:0.019 },
  { t:"16h", search:1820,comp:1420, match:2310, cost:0.022 },
  { t:"20h", search:1240,comp:970,  match:1580, cost:0.015 },
  { t:"23h", search:480, comp:360,  match:580,  cost:0.006 },
];
// Usage hebdo par persona + adoption match
const kpiUsage = [
  { t:"S1", sophie:42, karim:18, match:18 },
  { t:"S2", sophie:55, karim:27, match:29 },
  { t:"S3", sophie:61, karim:35, match:38 },
  { t:"S4", sophie:78, karim:44, match:51 },
  { t:"S5", sophie:90, karim:52, match:64 },
  { t:"S6", sophie:105,karim:63, match:79 },
];
// Taux d'adoption match (% users who use match after competences)
const kpiMatchAdoption = [
  { t:"S1", taux:30, retention:45 },
  { t:"S2", taux:38, retention:52 },
  { t:"S3", taux:47, retention:61 },
  { t:"S4", taux:56, retention:69 },
  { t:"S5", taux:64, retention:75 },
  { t:"S6", taux:71, retention:82 },
];
// Scores match distribution hebdo
const kpiMatchScores = [
  { t:"S1", excellent:18, bon:31, partiel:35, faible:16, score_moy:62 },
  { t:"S2", excellent:22, bon:35, partiel:31, faible:12, score_moy:66 },
  { t:"S3", excellent:28, bon:38, partiel:26, faible:8,  score_moy:71 },
  { t:"S4", excellent:33, bon:40, partiel:22, faible:5,  score_moy:75 },
  { t:"S5", excellent:38, bon:42, partiel:16, faible:4,  score_moy:79 },
  { t:"S6", excellent:44, bon:41, partiel:12, faible:3,  score_moy:83 },
];
// Métriques métier : précision, satisfaction, match_rate
const kpiMetier = [
  { t:"S1", precision:71, satisfaction:68, export:55, match_score:62 },
  { t:"S2", precision:74, satisfaction:72, export:61, match_score:66 },
  { t:"S3", precision:79, satisfaction:75, export:67, match_score:71 },
  { t:"S4", precision:83, satisfaction:80, export:74, match_score:75 },
  { t:"S5", precision:87, satisfaction:84, export:79, match_score:79 },
  { t:"S6", precision:91, satisfaction:89, export:85, match_score:83 },
];
// Compétences détectées / validées / matchées
const kpiCompetences = [
  { t:"S1", detected:3.1, validated:2.4, matched:1.8 },
  { t:"S2", detected:3.4, validated:2.8, matched:2.2 },
  { t:"S3", detected:4.0, validated:3.3, matched:2.7 },
  { t:"S4", detected:4.2, validated:3.6, matched:3.1 },
  { t:"S5", detected:4.6, validated:4.0, matched:3.5 },
  { t:"S6", detected:5.0, validated:4.4, matched:3.9 },
];

/* ══════════ PERSONAS ══════════ */
const PERSONAS = {
  sophie: {
    id: "sophie", name: "Sophie", age: 38, icon: "👩‍💼",
    role: "Conseillère France Travail — Caen",
    color: "#059669", colorSoft: "#ECFDF5", colorMid: "#A7F3D0",
    defaultMode: "keywords",
    tagline: "Code ROME en 30 sec → PPAE sans ressaisie",
    context: "Open-space bruyant. Écran 19\". PPAE + Emploi Store ouverts. 23 mails non lus. Demandeur en face. 35 min max par entretien.",
    goal: "Identifier en 2 clics les codes ROME + NAF correspondant au profil oral du demandeur, pour orienter et remplir le PPAE sans friction.",
    skills: ["Écoute active","Reformulation métier","Connaissance ROME","Orientation emploi","Saisie PPAE","Gestion du temps"],
    pains: ["847 résultats non triés → signal noyé dans le bruit","Codes NAF hybrides (ex: BTP + logistique)","Temps de saisie > temps d'échange humain"],
    success: "Elle tourne l'écran vers le demandeur, clique Copier, colle dans le PPAE. Zéro ressaisie.",
    rgaa: ["Contraste AA minimum","Navigation clavier","Lecteur d'écran"],
    quickActions: ["Copier ROME","Copier NAF","Envoyer PPAE"],
    placeholder: "ex: agent logistique polyvalent, infirmière coordinatrice…",
    tip: "💡 Dites simplement le métier décrit par le demandeur — le micro est activable",
  },
  karim: {
    id: "karim", name: "Karim", age: 44, icon: "🎯",
    role: "Chasseur de Tête indépendant — Paris/TGV",
    color: "#2563EB", colorSoft: "#EFF6FF", colorMid: "#BFDBFE",
    defaultMode: "annonce",
    tagline: "Annonce brute → ROME + NAF + Compétences en 12 sec",
    context: "MacBook en mobilité. ATS Bullhorn ouvert. Annonce client reçue à 18h avec fautes et acronymes. Brief client à 9h le lendemain.",
    goal: "Extraire en 10 secondes les codes ROME + NAF d'une annonce brute pour lancer immédiatement le sourcing LinkedIn Recruiter.",
    skills: ["Lecture annonce","Sourcing LinkedIn","Qualification profil","Connaissance secteurs","Négociation","Gestion mandats"],
    pains: ["Annonce non normalisée → perte de temps de qualification","Secteur mentionné sans code NAF (ex: 'industrie métallurgique')","Plusieurs ROME possibles → hésitation sur le sourcing"],
    success: "Il copie le code ROME, ouvre LinkedIn Recruiter, colle dans le filtre, lance la recherche. 12 secondes chrono.",
    rgaa: ["Copier en 1 clic","Résultat lisible mobile","Export rapide"],
    quickActions: ["Copier ROME","Copier NAF","Ouvrir LinkedIn","Exporter fiche"],
    placeholder: "Collez l'annonce brute complète — même avec fautes et acronymes internes…",
    tip: "💡 Collez l'annonce telle quelle, l'IA normalise et extrait ROME, NAF et compétences",
  },
};

/* ══════════ SECTEURS ══════════ */
const SECTORS = [
  {id:"all",label:"Tous secteurs",icon:"🌐"},
  {id:"IT",label:"IT & Digital",icon:"💻"},
  {id:"Santé",label:"Santé & Social",icon:"🏥"},
  {id:"BTP",label:"BTP & Industrie",icon:"🏗"},
  {id:"Commerce",label:"Commerce & Vente",icon:"🛒"},
  {id:"RH",label:"RH & Formation",icon:"👥"},
  {id:"Finance",label:"Finance & Gestion",icon:"📊"},
  {id:"Transport",label:"Transport & Logistique",icon:"🚛"},
];

const LEVELS = [
  {id:"all",label:"Tous niveaux"},{id:"CAP",label:"CAP/BEP"},
  {id:"BAC",label:"Bac"},{id:"BAC+2",label:"Bac+2"},
  {id:"BAC+3",label:"Bac+3/4"},{id:"BAC+5",label:"Bac+5+"},
];

/* ══════════ ATOMS ══════════ */
const Spinner = () => (
  <div style={{width:16,height:16,border:"2px solid #E2E8F0",borderTop:"2px solid #2563EB",borderRadius:"50%",animation:"spin .7s linear infinite",flexShrink:0}}/>
);
const Skel = ({w="100%",h=14,r=6,mb=0}) => (
  <div style={{width:w,height:h,borderRadius:r,marginBottom:mb,background:"linear-gradient(90deg,#F1F5F9 25%,#E2E8F0 50%,#F1F5F9 75%)",backgroundSize:"200% 100%",animation:"shimmer 1.4s infinite"}}/>
);

const BdgType = ({type}) => {
  const m = {
    exact:{bg:"#DCFCE7",c:"#15803D",br:"#86EFAC",l:"Exact"},
    proche:{bg:"#DBEAFE",c:"#1D4ED8",br:"#93C5FD",l:"Proche"},
    "associé":{bg:"#FEF3C7",c:"#B45309",br:"#FCD34D",l:"Associé"},
    naf:{bg:"#EDE9FE",c:"#6D28D9",br:"#C4B5FD",l:"NAF"},
    clé:{bg:"#DCFCE7",c:"#166534",br:"#86EFAC",l:"Clé métier"},
    transverse:{bg:"#F3E8FF",c:"#7E22CE",br:"#D8B4FE",l:"Transverse"},
  }[type]||{bg:"#F1F5F9",c:"#475569",br:"#CBD5E1",l:type};
  return <span style={{display:"inline-flex",alignItems:"center",padding:"2px 8px",borderRadius:20,fontSize:10,fontWeight:800,letterSpacing:"0.07em",textTransform:"uppercase",background:m.bg,color:m.c,border:`1px solid ${m.br}`}}>{m.l}</span>;
};

function CopyBtn({text,label="Copier",onCopy,accent="#2563EB"}){
  const[ok,setOk]=useState(false);
  return <button onClick={()=>{navigator.clipboard.writeText(text);setOk(true);onCopy?.();setTimeout(()=>setOk(false),1800);}} style={{display:"inline-flex",alignItems:"center",gap:4,padding:"5px 12px",borderRadius:6,fontSize:11,fontWeight:600,border:`1px solid ${ok?"#A7F3D0":"#E2E8F0"}`,background:ok?"#ECFDF5":"#F8FAFC",color:ok?"#059669":"#6B7280",cursor:"pointer",transition:"all .2s",whiteSpace:"nowrap",flexShrink:0}}>
    {ok?"✓":"⎘"} {ok?"Copié":label}
  </button>;
}

function exportCSV(rows, filename="export") {
  const csv = rows.map(r=>r.map(v=>`"${String(v).replace(/"/g,'""')}"`).join(";")).join("\n");
  const a = document.createElement("a");
  a.href = "data:text/csv;charset=utf-8,\uFEFF"+encodeURIComponent(csv);
  a.download = `${filename}_${Date.now()}.csv`;
  a.click();
}

/* ══════════ DOSSIER LIGHT ATOMS ══════════ */
const DTag = ({label,color}) => (
  <span style={{background:color+"18",color,border:`1px solid ${color}44`,padding:"2px 10px",borderRadius:20,fontSize:11,fontWeight:600}}>{label}</span>
);
const DCard = ({children,style={}}) => (
  <div style={{background:"#FFFFFF",border:"1px solid #E2E8F0",borderRadius:12,padding:20,boxShadow:"0 1px 3px rgba(0,0,0,.05)",...style}}>{children}</div>
);
const DSec = ({title,children}) => (
  <div style={{marginBottom:24}}>
    <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:12}}>
      <div style={{width:3,height:20,background:"#2563EB",borderRadius:2}}/>
      <h3 style={{margin:0,fontSize:11,fontFamily:"Syne,sans-serif",color:"#2563EB",letterSpacing:"0.1em",textTransform:"uppercase"}}>{title}</h3>
    </div>
    {children}
  </div>
);
const DStep = ({n,label,detail,tags}) => (
  <div style={{display:"flex",gap:12,marginBottom:14}}>
    <div style={{minWidth:26,height:26,borderRadius:"50%",background:"#2563EB",color:"#FFF",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:800,fontSize:12,fontFamily:"Syne,sans-serif",flexShrink:0}}>{n}</div>
    <div>
      <div style={{color:"#0F172A",fontWeight:600,fontSize:13}}>{label}</div>
      {detail&&<div style={{color:"#6B7280",fontSize:11,marginTop:3,lineHeight:1.6}}>{detail}</div>}
      {tags&&<div style={{marginTop:6,display:"flex",flexWrap:"wrap",gap:5}}>{tags.map((t,i)=><DTag key={i} label={t.l} color={t.c}/>)}</div>}
    </div>
  </div>
);
const KPIBox = ({label,value,unit,delta,color}) => (
  <div style={{background:color+"12",border:`1px solid ${color}33`,borderRadius:10,padding:"14px 18px",flex:1,minWidth:120,boxShadow:"0 1px 2px rgba(0,0,0,.04)"}}>
    <div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.08em"}}>{label}</div>
    <div style={{color,fontSize:24,fontWeight:800,fontFamily:"Syne,sans-serif",marginTop:4}}>{value}<span style={{fontSize:12,marginLeft:4}}>{unit}</span></div>
    {delta!=null&&<div style={{color:delta>0?"#059669":"#E11D48",fontSize:11,marginTop:2}}>{delta>0?"▲":"▼"} {Math.abs(delta)}% vs S-1</div>}
  </div>
);
const TT = {contentStyle:{background:"#FFFFFF",border:"1px solid #E2E8F0",color:"#0F172A",fontSize:11,borderRadius:8,boxShadow:"0 4px 12px rgba(0,0,0,.1)"}};

/* ══════════ MATCH ANNONCES PAR COMPÉTENCES ══════════ */
function MatchAnnonces({competences, codes, persona}) {
  const pc = PERSONAS[persona];
  const[annonce,setAnnonce]=useState("");
  const[loading,setLoading]=useState(false);
  const[result,setResult]=useState(null);
  const[error,setError]=useState("");
  const[open,setOpen]=useState(false);
  const fileRef=useRef();

  const allCompetences = competences
    ? Object.values(competences).flat()
    : [];

  const match = useCallback(async() => {
    if(!annonce.trim()||!allCompetences.length) return;
    setLoading(true); setResult(null); setError("");
    try {
      const res = await fetch("/api/claude", {
        method:"POST", headers:{"Content-Type":"application/json"},
        body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1200,
          messages:[{role:"user",content:
`Expert RH et référentiel ROME. 
Compétences du profil : ${allCompetences.join(", ")}
Codes ROME du profil : ${codes.join(", ")}

Annonce d'emploi :
${annonce.slice(0,3000)}

Analyse le niveau de correspondance. Retourne UNIQUEMENT JSON valide sans markdown :
{"score":85,"niveau":"Excellent|Bon|Partiel|Faible","titre_poste":"...","competences_matchees":["..."],"competences_manquantes":["..."],"competences_bonus":["compétences dans l'annonce non requises mais utiles"],"rome_annonce":"XXXXX","recommandation":"2-3 phrases d'analyse pour le recruteur/conseiller","points_forts":["2-3 atouts du profil pour ce poste"],"points_vigilance":["1-2 points à vérifier en entretien"]}`
          }]})
      });
      const data = await res.json();
      const raw = data.content?.[0]?.text||"";
      setResult(JSON.parse(raw.replace(/```json|```/g,"").trim()));
    } catch{ setError("Erreur d'analyse. Réessayez."); }
    finally{ setLoading(false); }
  },[annonce, allCompetences, codes]);

  const scoreColor = (s) => s>=80?"#059669":s>=60?"#D97706":s>=40?"#EA580C":"#E11D48";
  const scoreLabel = (s) => s>=80?"Excellent":s>=60?"Bon":s>=40?"Partiel":"Faible";
  const scoreBg = (s) => s>=80?"#ECFDF5":s>=60?"#FFFBEB":s>=40?"#FFF7ED":"#FFF1F2";

  if(!allCompetences.length) return null;

  return (
    <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginTop:12}}>
      <button onClick={()=>setOpen(o=>!o)} style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",transition:"background .15s"}} onMouseEnter={e=>e.currentTarget.style.background="#F8FAFC"} onMouseLeave={e=>e.currentTarget.style.background="none"}>
        <div style={{display:"flex",alignItems:"center",gap:10}}>
          <div style={{width:32,height:32,borderRadius:9,background:"linear-gradient(135deg,#7C3AED20,#2563EB20)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,border:"1.5px solid #C7D2FE"}}>🎯</div>
          <div>
            <div style={{fontSize:14,fontWeight:700,color:"#0F172A"}}>Matcher une annonce</div>
            <div style={{fontSize:11,color:"#9CA3AF"}}>Score de correspondance profil ↔ offre d'emploi · {allCompetences.length} compétences disponibles</div>
          </div>
        </div>
        <span style={{fontSize:16,color:"#9CA3AF",transition:"transform .2s",transform:open?"rotate(180deg)":"none"}}>⌄</span>
      </button>

      {open&&(
        <div style={{padding:"0 20px 20px",animation:"fadeIn .3s ease"}}>
          <div style={{height:1,background:"#E2E8F0",marginBottom:16}}/>

          {/* Compétences disponibles */}
          <div style={{background:"#F8FAFC",borderRadius:10,padding:"12px 14px",marginBottom:14,border:"1px solid #E2E8F0"}}>
            <div style={{fontSize:10.5,fontWeight:700,color:"#9CA3AF",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:8}}>Profil — {allCompetences.length} compétences à matcher</div>
            <div style={{display:"flex",flexWrap:"wrap",gap:6}}>
              {allCompetences.slice(0,20).map((c,i)=>(
                <span key={i} style={{padding:"3px 10px",borderRadius:20,fontSize:11,fontWeight:500,background:pc.colorSoft,color:pc.color,border:`1px solid ${pc.colorMid}`}}>{c}</span>
              ))}
              {allCompetences.length>20&&<span style={{padding:"3px 10px",borderRadius:20,fontSize:11,color:"#9CA3AF"}}>+{allCompetences.length-20} autres</span>}
            </div>
          </div>

          {/* Input annonce */}
          <div style={{marginBottom:12}}>
            <textarea value={annonce} onChange={e=>setAnnonce(e.target.value)} rows={5}
              placeholder="Collez ici l'offre d'emploi à évaluer pour ce profil…"
              style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"12px 14px",fontSize:13,color:"#0F172A",outline:"none",resize:"vertical",lineHeight:1.7,transition:"all .2s"}}
              onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}}
              onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/>
          </div>
          <div style={{display:"flex",gap:9,marginBottom:16}}>
            <button onClick={()=>fileRef.current?.click()} style={{display:"flex",alignItems:"center",gap:5,padding:"8px 14px",borderRadius:8,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:12,fontWeight:600,cursor:"pointer"}}>📎 Fichier</button>
            <input ref={fileRef} type="file" accept=".txt,.doc,.docx,.pdf" style={{display:"none"}} onChange={e=>{const f=e.target.files?.[0];if(!f)return;const r=new FileReader();r.onload=ev=>setAnnonce(ev.target.result);r.readAsText(f)}}/>
            <button onClick={match} disabled={loading||!annonce.trim()}
              style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,padding:"10px",borderRadius:9,background:loading||!annonce.trim()?"#F1F5F9":"linear-gradient(135deg,#7C3AED,#2563EB)",border:"none",color:loading||!annonce.trim()?"#9CA3AF":"#FFF",fontWeight:700,fontSize:13,cursor:loading||!annonce.trim()?"not-allowed":"pointer",boxShadow:!loading&&annonce.trim()?"0 2px 10px rgba(124,58,237,.3)":"none"}}>
              {loading?<><Spinner/>Calcul du score…</>:<>⚡ Calculer le score de match</>}
            </button>
          </div>

          {error&&<div style={{padding:"12px 16px",background:"#FFF1F2",border:"1px solid #FECDD3",borderRadius:9,color:"#9F1239",fontSize:12,marginBottom:12}}>⚠ {error}</div>}

          {loading&&(
            <div style={{display:"flex",flexDirection:"column",gap:10}}>
              <div style={{background:"#F8FAFC",borderRadius:12,padding:20,border:"1px solid #E2E8F0"}}>
                <Skel w="40%" h={40} r={8} mb={14}/><Skel w="70%" h={13} mb={8}/><Skel w="55%" h={13}/>
              </div>
            </div>
          )}

          {result&&(
            <div style={{animation:"fadeIn .4s ease",display:"flex",flexDirection:"column",gap:12}}>

              {/* Score hero */}
              <div style={{background:scoreBg(result.score),border:`2px solid ${scoreColor(result.score)}33`,borderRadius:14,padding:"20px 22px",display:"flex",alignItems:"center",gap:20}}>
                <div style={{flexShrink:0,textAlign:"center"}}>
                  <div style={{fontSize:52,fontWeight:900,color:scoreColor(result.score),lineHeight:1,fontFamily:"Syne,sans-serif"}}>{result.score}</div>
                  <div style={{fontSize:11,fontWeight:700,color:scoreColor(result.score),marginTop:2}}>/100</div>
                </div>
                <div style={{flex:1}}>
                  <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:8,flexWrap:"wrap"}}>
                    <span style={{background:scoreColor(result.score),color:"#FFF",fontSize:12,fontWeight:800,padding:"4px 14px",borderRadius:20}}>{scoreLabel(result.score)}</span>
                    {result.titre_poste&&<span style={{fontSize:13,fontWeight:700,color:"#0F172A"}}>{result.titre_poste}</span>}
                    {result.rome_annonce&&<span style={{fontFamily:"monospace",fontSize:12,fontWeight:700,color:"#2563EB",background:"#EFF6FF",padding:"2px 9px",borderRadius:6,border:"1px solid #BFDBFE"}}>{result.rome_annonce}</span>}
                  </div>
                  {/* Score bar */}
                  <div style={{height:8,background:"rgba(0,0,0,.08)",borderRadius:4,overflow:"hidden",marginBottom:8}}>
                    <div style={{height:"100%",width:`${result.score}%`,background:`linear-gradient(90deg,${scoreColor(result.score)},${scoreColor(result.score)}CC)`,borderRadius:4,transition:"width 1.2s cubic-bezier(.4,0,.2,1)"}}/>
                  </div>
                  <p style={{fontSize:13,color:"#374151",lineHeight:1.65,margin:0}}>{result.recommandation}</p>
                </div>
              </div>

              {/* 3 colonnes : matchées / manquantes / bonus */}
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:10}}>
                <div style={{background:"#ECFDF5",borderRadius:12,padding:"14px 16px",border:"1.5px solid #A7F3D0"}}>
                  <div style={{fontSize:10.5,fontWeight:800,color:"#059669",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>✓ Matchées ({result.competences_matchees?.length||0})</div>
                  <div style={{display:"flex",flexDirection:"column",gap:5}}>
                    {(result.competences_matchees||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#065F46"}}><span style={{color:"#059669",flexShrink:0}}>●</span>{c}</div>)}
                  </div>
                </div>
                <div style={{background:"#FFF7ED",borderRadius:12,padding:"14px 16px",border:"1.5px solid #FED7AA"}}>
                  <div style={{fontSize:10.5,fontWeight:800,color:"#EA580C",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>⚠ Manquantes ({result.competences_manquantes?.length||0})</div>
                  <div style={{display:"flex",flexDirection:"column",gap:5}}>
                    {(result.competences_manquantes||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#9A3412"}}><span style={{color:"#EA580C",flexShrink:0}}>○</span>{c}</div>)}
                  </div>
                </div>
                <div style={{background:"#EFF6FF",borderRadius:12,padding:"14px 16px",border:"1.5px solid #BFDBFE"}}>
                  <div style={{fontSize:10.5,fontWeight:800,color:"#2563EB",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>+ Bonus ({result.competences_bonus?.length||0})</div>
                  <div style={{display:"flex",flexDirection:"column",gap:5}}>
                    {(result.competences_bonus||[]).map((c,i)=><div key={i} style={{display:"flex",alignItems:"center",gap:6,fontSize:12,color:"#1E40AF"}}><span style={{color:"#2563EB",flexShrink:0}}>+</span>{c}</div>)}
                  </div>
                </div>
              </div>

              {/* Points forts / vigilance */}
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                <div style={{background:"#F8FAFC",borderRadius:12,padding:"14px 16px",border:"1px solid #E2E8F0"}}>
                  <div style={{fontSize:10.5,fontWeight:800,color:"#374151",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>💪 Points forts</div>
                  {(result.points_forts||[]).map((p,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:6,alignItems:"flex-start"}}><span style={{color:"#059669",flexShrink:0,marginTop:1}}>✓</span><span style={{fontSize:12,color:"#374151"}}>{p}</span></div>)}
                </div>
                <div style={{background:"#FFFBEB",borderRadius:12,padding:"14px 16px",border:"1px solid #FDE68A"}}>
                  <div style={{fontSize:10.5,fontWeight:800,color:"#92400E",letterSpacing:"0.07em",textTransform:"uppercase",marginBottom:10}}>🔍 Points de vigilance</div>
                  {(result.points_vigilance||[]).map((p,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:6,alignItems:"flex-start"}}><span style={{color:"#D97706",flexShrink:0,marginTop:1}}>!</span><span style={{fontSize:12,color:"#92400E"}}>{p}</span></div>)}
                </div>
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

/* ══════════ COMPETENCES SECTION ══════════ */
function CompetencesBlock({codes, persona}) {
  const[loading,setLoading]=useState(false);
  const[competences,setCompetences]=useState(null);
  const[open,setOpen]=useState(false);
  const pc = PERSONAS[persona];

  const fetchCompetences = useCallback(async() => {
    if(!codes?.length) return;
    setLoading(true); setOpen(true);
    try {
      const res = await fetch("/api/claude", {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:800,messages:[{role:"user",content:
          `Expert ROME France Travail. Pour les codes ROME suivants : ${codes.join(", ")}\nRetourne UNIQUEMENT JSON valide sans markdown :\n{"cles_metier":["..."],"transverses":["..."],"numeriques":["..."],"savoir_etre":["..."],"certifications":["..."]}\ncles_metier: 5-7 compétences techniques cœur de métier. transverses: 3-4 compétences transversales. numeriques: 2-3 outils/logiciels. savoir_etre: 3-4 compétences comportementales. certifications: 2-3 certifications ou habilitations utiles.`
        }]})
      });
      const data = await res.json();
      const raw = data.content?.[0]?.text||"";
      setCompetences(JSON.parse(raw.replace(/```json|```/g,"").trim()));
    } catch{ setCompetences(null); }
    finally{ setLoading(false); }
  },[codes]);

  const categories = competences ? [
    {key:"cles_metier",label:"Cœur de métier",color:pc.color,bg:pc.colorSoft,type:"clé"},
    {key:"transverses",label:"Transversales",color:"#7C3AED",bg:"#F5F3FF",type:"transverse"},
    {key:"numeriques",label:"Outils & digital",color:"#0891B2",bg:"#ECFEFF",type:"proche"},
    {key:"savoir_etre",label:"Savoir-être",color:"#D97706",bg:"#FFFBEB",type:"associé"},
    {key:"certifications",label:"Certifications",color:"#6B7280",bg:"#F1F5F9",type:"exact"},
  ] : [];

  return (
    <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:14,overflow:"hidden",boxShadow:"0 1px 2px rgba(0,0,0,.05)"}}>
      <button onClick={()=>open?setOpen(false):fetchCompetences()} style={{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",padding:"14px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",transition:"background .15s"}} onMouseEnter={e=>e.currentTarget.style.background="#F8FAFC"} onMouseLeave={e=>e.currentTarget.style.background="none"}>
        <div style={{display:"flex",alignItems:"center",gap:10}}>
          <div style={{width:32,height:32,borderRadius:9,background:pc.colorSoft,display:"flex",alignItems:"center",justifyContent:"center",fontSize:16,border:`1.5px solid ${pc.colorMid}`}}>🧩</div>
          <div>
            <div style={{fontSize:14,fontWeight:700,color:"#0F172A"}}>Compétences associées</div>
            <div style={{fontSize:11,color:"#9CA3AF"}}>Référentiel ROME · cœur métier, transversales, certifications</div>
          </div>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:8}}>
          {loading&&<Spinner/>}
          <span style={{fontSize:16,color:"#9CA3AF",transition:"transform .2s",transform:open?"rotate(180deg)":"none"}}>⌄</span>
        </div>
      </button>
      {open&&!loading&&competences&&(
        <div style={{padding:"0 20px 20px",animation:"fadeIn .3s ease"}}>
          <div style={{height:1,background:"#E2E8F0",marginBottom:16}}/>
          <div style={{display:"flex",flexDirection:"column",gap:14}}>
            {categories.map(cat=>(competences[cat.key]||[]).length>0&&(
              <div key={cat.key}>
                <div style={{fontSize:11,fontWeight:800,letterSpacing:"0.07em",textTransform:"uppercase",color:cat.color,marginBottom:8}}>{cat.label}</div>
                <div style={{display:"flex",flexWrap:"wrap",gap:7}}>
                  {(competences[cat.key]||[]).map((c,i)=>(
                    <div key={i} style={{display:"flex",alignItems:"center",gap:6,padding:"5px 12px",borderRadius:20,background:cat.bg,border:`1.5px solid ${cat.color}33`,cursor:"pointer",transition:"all .15s"}} title="Cliquer pour copier" onClick={()=>navigator.clipboard.writeText(c)}>
                      <span style={{fontSize:12,fontWeight:600,color:cat.color}}>{c}</span>
                      <span style={{fontSize:10,color:cat.color,opacity:.6}}>⎘</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:14,display:"flex",gap:8}}>
            <CopyBtn text={Object.values(competences).flat().join(", ")} label="Tout copier"/>
            <button onClick={()=>exportCSV([["Catégorie","Compétence"],...Object.entries(competences).flatMap(([k,vs])=>vs.map(v=>[k,v]))],"competences")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 12px",borderRadius:6,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:11,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button>
          </div>
          {/* Match annonce sur base compétences */}
          <MatchAnnonces competences={competences} codes={codes} persona={persona}/>
        </div>
      )}
    </div>
  );
}

/* ══════════ TOOL MODULE ══════════ */
function ToolModule({persona}) {
  const pc = PERSONAS[persona];
  const[mode,setMode]=useState(pc.defaultMode);
  const[input,setInput]=useState("");
  const[annonceText,setAnnonceText]=useState("");
  const[sector,setSector]=useState("all");
  const[level,setLevel]=useState("all");
  const[typeFilter,setTypeFilter]=useState("all");
  const[sortBy,setSortBy]=useState("pertinence");
  const[loading,setLoading]=useState(false);
  const[results,setResults]=useState(null);
  const[compared,setCompared]=useState([]);
  const[listening,setListening]=useState(false);
  const[error,setError]=useState("");
  const fileRef=useRef();

  const hasContent = mode==="keywords" ? input.trim().length>1 : annonceText.trim().length>20;
  const getQ = () => mode==="keywords" ? input.trim() : annonceText.trim();

  const analyze = useCallback(async() => {
    if(!hasContent) return;
    setLoading(true); setResults(null); setError("");
    const sh = sector!=="all"?`Secteur prioritaire : ${sector}. `:"";
    const lh = level!=="all"?`Niveau de qualification cible : ${level}. `:"";
    const prompt = mode==="keywords"
      ? `Expert ROME France Travail. ${sh}${lh}Persona : ${pc.name} (${pc.role}).\nMots-clés : "${getQ()}"\nRetourne UNIQUEMENT JSON valide sans markdown :\n[{"code":"XXXXX","intitule":"titre officiel exact","type":"exact|proche|associé","description":"1-2 phrases","domaine":"secteur","grandDomaine":"lettre + libellé","niveauAcces":"ex: Bac+2"}]\n5 à 7 codes ROME pertinents triés.`
      : `Expert RH ROME NAF. ${sh}Persona : ${pc.name} (${pc.role}).\nAnalyse cette offre. Retourne UNIQUEMENT JSON valide sans markdown :\n{"rome_principal":{"code":"XXXXX","intitule":"...","description":"...","domaine":"..."},"rome_alternatifs":[{"code":"XXXXX","intitule":"...","type":"proche|associé","domaine":"..."}],"naf":{"code":"XX.XXX","intitule":"...","secteur":"..."},"synthese":"2-3 phrases","mots_cles":["5-7 mots-clés"],"niveau":"junior|confirmé|senior|expert","contrat":"CDI|CDD|Stage|Alternance|Freelance|Non précisé","teletravail":"Oui|Partiel|Non|Non précisé","localisation":"ville si précisée ou vide"}\n\nOffre :\n${getQ().slice(0,4000)}`;
    try {
      const res = await fetch("/api/claude", {
        method:"POST", headers:{"Content-Type":"application/json"},
        body: JSON.stringify({model:"claude-sonnet-4-20250514",max_tokens:1400,messages:[{role:"user",content:prompt}]})
      });
      const data = await res.json();
      const raw = data.content?.[0]?.text||"";
      setResults(JSON.parse(raw.replace(/```json|```/g,"").trim()));
    } catch{ setError("Erreur d'analyse. Vérifiez votre connexion."); }
    finally{ setLoading(false); }
  },[mode,input,annonceText,sector,level,persona]);

  const startListen = () => {
    const SR = window.SpeechRecognition||window.webkitSpeechRecognition;
    if(!SR) return;
    const r = new SR(); r.lang="fr-FR";
    r.onresult=e=>setInput(e.results[0][0].transcript);
    r.onend=()=>setListening(false);
    r.start(); setListening(true);
  };

  const filtered = (() => {
    if(!results||!Array.isArray(results)) return results;
    let r=[...results];
    if(typeFilter!=="all") r=r.filter(x=>x.type===typeFilter);
    if(sortBy==="alpha") r=[...r].sort((a,b)=>a.intitule.localeCompare(b.intitule));
    if(sortBy==="type") r=[...r].sort((a,b)=>["exact","proche","associé"].indexOf(a.type)-["exact","proche","associé"].indexOf(b.type));
    return r;
  })();

  const codesForCompetences = results
    ? Array.isArray(results) ? results.map(r=>r.code) : [results.rome_principal?.code,...(results.rome_alternatifs||[]).map(r=>r.code)].filter(Boolean)
    : [];

  const lvlC={junior:{bg:"#EDE9FE",c:"#6D28D9"},confirmé:{bg:"#DBEAFE",c:"#1D4ED8"},senior:{bg:"#FEF3C7",c:"#B45309"},expert:{bg:"#FEE2E2",c:"#B91C1C"}};
  const ctrC={CDI:{bg:"#DCFCE7",c:"#15803D"},CDD:{bg:"#FEF3C7",c:"#B45309"},Stage:{bg:"#EDE9FE",c:"#6D28D9"},Alternance:{bg:"#DBEAFE",c:"#1D4ED8"},Freelance:{bg:"#FEE2E2",c:"#B91C1C"}};

  return (
    <div>
      {/* Persona context banner */}
      <div style={{background:pc.colorSoft,border:`1.5px solid ${pc.colorMid}`,borderRadius:12,padding:"12px 18px",marginBottom:20,display:"flex",alignItems:"center",gap:14}}>
        <span style={{fontSize:26}}>{pc.icon}</span>
        <div style={{flex:1}}>
          <div style={{fontWeight:800,fontSize:14,color:pc.color}}>{pc.name} — {pc.role}</div>
          <div style={{fontSize:12,color:"#6B7280",marginTop:2}}>{pc.tagline}</div>
        </div>
        <div style={{fontSize:11,color:pc.color,background:"#FFF",border:`1px solid ${pc.colorMid}`,borderRadius:8,padding:"5px 12px",fontWeight:700}}>{pc.tip}</div>
      </div>

      {/* Mode toggle */}
      <div style={{display:"flex",gap:8,marginBottom:16}}>
        {[{id:"keywords",icon:"⌖",label:"Mots-clés → ROME"},{id:"annonce",icon:"⊡",label:"Annonce → ROME + NAF + Compétences"}].map(m=>(
          <button key={m.id} onClick={()=>{setMode(m.id);setResults(null);setError("")}}
            style={{flex:1,padding:"10px 14px",borderRadius:10,border:`1.5px solid ${mode===m.id?pc.color:"#E2E8F0"}`,background:mode===m.id?pc.colorSoft:"#FFF",color:mode===m.id?pc.color:"#6B7280",fontWeight:mode===m.id?700:500,fontSize:13,cursor:"pointer",transition:"all .2s",display:"flex",alignItems:"center",justifyContent:"center",gap:7,boxShadow:mode===m.id?`0 2px 8px ${pc.color}25`:"0 1px 2px rgba(0,0,0,.05)"}}>
            <span style={{fontSize:16}}>{m.icon}</span>{m.label}
          </button>
        ))}
      </div>

      {/* Filtres secteur */}
      <div style={{marginBottom:12,overflowX:"auto",paddingBottom:4}}>
        <div style={{display:"flex",gap:7,width:"max-content"}}>
          {SECTORS.map(s=>(
            <button key={s.id} onClick={()=>setSector(s.id)} style={{display:"inline-flex",alignItems:"center",gap:5,padding:"5px 13px",borderRadius:20,fontSize:12,fontWeight:sector===s.id?700:400,border:`1.5px solid ${sector===s.id?pc.color:"#E2E8F0"}`,background:sector===s.id?pc.colorSoft:"#FFF",color:sector===s.id?pc.color:"#6B7280",cursor:"pointer",whiteSpace:"nowrap",transition:"all .15s"}}>
              <span>{s.icon}</span>{s.label}
            </button>
          ))}
        </div>
      </div>

      {/* Filtres niveau */}
      <div style={{display:"flex",gap:7,flexWrap:"wrap",alignItems:"center",marginBottom:20}}>
        <span style={{fontSize:11,color:"#9CA3AF",fontWeight:700,textTransform:"uppercase",letterSpacing:"0.06em"}}>Niveau :</span>
        {LEVELS.map(l=>(
          <button key={l.id} onClick={()=>setLevel(l.id)} style={{padding:"4px 11px",borderRadius:16,fontSize:11.5,fontWeight:level===l.id?700:400,border:`1px solid ${level===l.id?"#0891B2":"#E2E8F0"}`,background:level===l.id?"#ECFEFF":"#FFF",color:level===l.id?"#0891B2":"#9CA3AF",cursor:"pointer",transition:"all .15s"}}>
            {l.label}
          </button>
        ))}
      </div>

      {/* Search box */}
      <div style={{background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:16,padding:20,boxShadow:"0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05)",marginBottom:16}}>
        {mode==="keywords" ? (
          <div style={{display:"flex",gap:10}}>
            <div style={{flex:1,position:"relative"}}>
              <span style={{position:"absolute",left:13,top:"50%",transform:"translateY(-50%)",fontSize:17,opacity:.4,pointerEvents:"none"}}>🔍</span>
              <input value={input} onChange={e=>setInput(e.target.value)} onKeyDown={e=>e.key==="Enter"&&analyze()}
                placeholder={pc.placeholder}
                style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"12px 48px 12px 42px",fontSize:14,color:"#0F172A",outline:"none",transition:"all .2s"}}
                onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}}
                onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/>
              <button onClick={startListen} style={{position:"absolute",right:13,top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",fontSize:17,color:listening?"#E11D48":"#9CA3AF",animation:listening?"pulse 1s infinite":"none"}}>🎤</button>
            </div>
            <button onClick={analyze} disabled={loading||!hasContent}
              style={{display:"flex",alignItems:"center",gap:8,padding:"0 22px",borderRadius:10,background:loading||!hasContent?"#F1F5F9":`linear-gradient(135deg,${pc.color},#0891B2)`,border:"none",color:loading||!hasContent?"#9CA3AF":"#FFF",fontWeight:700,fontSize:14,cursor:loading||!hasContent?"not-allowed":"pointer",transition:"all .2s",boxShadow:!loading&&hasContent?`0 2px 10px ${pc.color}35`:"none",whiteSpace:"nowrap"}}>
              {loading?<><Spinner/>Analyse…</>:<>→ Analyser</>}
            </button>
          </div>
        ) : (
          <>
            <textarea value={annonceText} onChange={e=>setAnnonceText(e.target.value)} rows={7}
              placeholder={pc.placeholder}
              style={{width:"100%",background:"#FFF",border:"1.5px solid #E2E8F0",borderRadius:10,padding:"13px 16px",fontSize:13.5,color:"#0F172A",outline:"none",resize:"vertical",lineHeight:1.7,marginBottom:12,transition:"all .2s"}}
              onFocus={e=>{e.target.style.borderColor=pc.color;e.target.style.boxShadow=`0 0 0 3px ${pc.color}18`}}
              onBlur={e=>{e.target.style.borderColor="#E2E8F0";e.target.style.boxShadow="none"}}/>
            <div style={{display:"flex",gap:10}}>
              <button onClick={()=>fileRef.current?.click()} style={{display:"flex",alignItems:"center",gap:6,padding:"9px 16px",borderRadius:8,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:13,fontWeight:600,cursor:"pointer"}}>📎 Importer</button>
              <input ref={fileRef} type="file" accept=".txt,.doc,.docx,.pdf" style={{display:"none"}} onChange={e=>{const f=e.target.files?.[0];if(!f)return;const r=new FileReader();r.onload=ev=>setAnnonceText(ev.target.result);r.readAsText(f)}}/>
              <button onClick={analyze} disabled={loading||!hasContent}
                style={{flex:1,display:"flex",alignItems:"center",justifyContent:"center",gap:8,padding:"11px",borderRadius:10,background:loading||!hasContent?"#F1F5F9":`linear-gradient(135deg,${pc.color},#0891B2)`,border:"none",color:loading||!hasContent?"#9CA3AF":"#FFF",fontWeight:700,fontSize:14,cursor:loading||!hasContent?"not-allowed":"pointer",boxShadow:!loading&&hasContent?`0 2px 10px ${pc.color}35`:"none"}}>
                {loading?<><Spinner/>Extraction…</>:<>⟶ Extraire ROME + NAF + Compétences</>}
              </button>
            </div>
          </>
        )}
      </div>

      {/* Comparateur */}
      {compared.length>0&&(
        <div style={{background:"#EEF2FF",border:"1.5px solid #C7D2FE",borderRadius:14,padding:"14px 18px",marginBottom:16}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
            <span style={{fontSize:12,fontWeight:800,color:"#4F46E5",letterSpacing:"0.06em",textTransform:"uppercase"}}>⚖ Comparateur — {compared.length} code{compared.length>1?"s":""}</span>
            <CopyBtn text={compared.map(c=>c.code).join(", ")} label="Tout copier"/>
          </div>
          <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
            {compared.map((item,i)=>(
              <div key={i} style={{display:"flex",alignItems:"center",gap:7,padding:"7px 12px",background:"#FFF",borderRadius:9,border:"1px solid #C7D2FE",boxShadow:"0 1px 2px rgba(0,0,0,.04)"}}>
                <span style={{fontFamily:"monospace",fontWeight:800,color:"#4F46E5",fontSize:13}}>{item.code}</span>
                <span style={{fontSize:12,color:"#374151",maxWidth:130,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.intitule}</span>
                <BdgType type={item.type}/>
                <button onClick={()=>setCompared(p=>p.filter((_,idx)=>idx!==i))} style={{background:"none",border:"none",cursor:"pointer",fontSize:13,color:"#9CA3AF",padding:0}}>×</button>
              </div>
            ))}
          </div>
        </div>
      )}

      {error&&<div style={{padding:"13px 18px",background:"#FFF1F2",border:"1px solid #FECDD3",borderRadius:10,color:"#9F1239",fontSize:13,fontWeight:500,marginBottom:16}}><span>⚠ {error}</span></div>}

      {/* Skeletons */}
      {loading&&<div style={{display:"flex",flexDirection:"column",gap:10}}>
        {[1,2,3].map(i=><div key={i} style={{background:"#FFF",borderRadius:14,padding:20,border:"1.5px solid #E2E8F0"}}>
          <div style={{display:"flex",gap:8,marginBottom:10}}><Skel w="70px" h={11} r={20}/><Skel w="100px" h={11} r={20}/></div>
          <Skel w="50%" h={20} mb={8}/><Skel w="85%" h={12} mb={5}/><Skel w="65%" h={12}/>
        </div>)}
      </div>}

      {/* Résultats Keywords */}
      {!loading&&results&&Array.isArray(results)&&(
        <div style={{animation:"fadeIn .35s ease"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:10}}>
            <div style={{display:"flex",alignItems:"center",gap:10,flexWrap:"wrap"}}>
              <span style={{background:pc.color,color:"#FFF",fontWeight:800,fontSize:13,padding:"3px 12px",borderRadius:20}}>{filtered?.length||0}</span>
              <span style={{fontSize:13,color:"#6B7280"}}>code{(filtered?.length||0)>1?"s":""} ROME identifié{(filtered?.length||0)>1?"s":""}</span>
              {["exact","proche","associé"].map(t=>{const n=results.filter(r=>r.type===t).length;return n>0&&<span key={t} style={{fontSize:11,fontWeight:700,padding:"2px 9px",borderRadius:20,background:t==="exact"?"#DCFCE7":t==="proche"?"#DBEAFE":"#FEF3C7",color:t==="exact"?"#15803D":t==="proche"?"#1D4ED8":"#B45309"}}>{n} {t}</span>})}
            </div>
            <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
              <select value={typeFilter} onChange={e=>setTypeFilter(e.target.value)} style={{padding:"5px 10px",borderRadius:7,border:"1px solid #E2E8F0",background:"#FFF",fontSize:12,color:"#374151",outline:"none",cursor:"pointer"}}>
                <option value="all">Tous types</option>
                <option value="exact">Exact</option>
                <option value="proche">Proche</option>
                <option value="associé">Associé</option>
              </select>
              <select value={sortBy} onChange={e=>setSortBy(e.target.value)} style={{padding:"5px 10px",borderRadius:7,border:"1px solid #E2E8F0",background:"#FFF",fontSize:12,color:"#374151",outline:"none",cursor:"pointer"}}>
                <option value="pertinence">Pertinence</option>
                <option value="alpha">Alphabétique</option>
                <option value="type">Par type</option>
              </select>
              <button onClick={()=>exportCSV([["Code ROME","Intitulé","Type","Domaine","Niveau",...(results.map(r=>r.code))],[...results.map(r=>[r.code,r.intitule,r.type||"",r.domaine||"",r.niveauAcces||""])].flat()],"rome_export")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 11px",borderRadius:7,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:12,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button>
              <CopyBtn text={results.map(r=>r.code).join(", ")} label="Tout copier"/>
            </div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:10,marginBottom:16}}>
            {(filtered||[]).map((r,i)=>(
              <div key={r.code+i} style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",transition:"all .2s",animation:`fadeUp .3s ease ${i*.06}s both"`,display:"flex",alignItems:"flex-start",gap:14}}
                onMouseEnter={e=>{e.currentTarget.style.borderColor=pc.color;e.currentTarget.style.boxShadow=`0 4px 20px ${pc.color}15`}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor="#E2E8F0";e.currentTarget.style.boxShadow="0 1px 2px rgba(0,0,0,.05)"}}>
                <div style={{flexShrink:0,width:34,height:34,borderRadius:9,background:pc.colorSoft,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:900,fontSize:12,color:pc.color,fontFamily:"monospace",border:`1.5px solid ${pc.colorMid}`}}>{i+1}</div>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:7,flexWrap:"wrap"}}>
                    <span style={{fontFamily:"monospace",fontSize:15.5,fontWeight:700,color:pc.color,letterSpacing:"0.04em"}}>{r.code}</span>
                    <BdgType type={r.type}/>
                    {r.domaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 8px",background:"#F8FAFC",borderRadius:6,border:"1px solid #E2E8F0"}}>{r.domaine}</span>}
                    {r.niveauAcces&&<span style={{fontSize:11,color:"#4F46E5",padding:"2px 8px",background:"#EEF2FF",borderRadius:6,border:"1px solid #C7D2FE"}}>{r.niveauAcces}</span>}
                    {r.grandDomaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 8px",background:"#F8FAFC",borderRadius:6,border:"1px solid #E2E8F0"}}>{r.grandDomaine}</span>}
                  </div>
                  <div style={{fontSize:15,fontWeight:700,color:"#0F172A",marginBottom:4,lineHeight:1.3}}>{r.intitule}</div>
                  <div style={{fontSize:13,color:"#6B7280",lineHeight:1.65}}>{r.description}</div>
                </div>
                <div style={{display:"flex",flexDirection:"column",gap:5,flexShrink:0}}>
                  <CopyBtn text={r.code}/>
                  <button onClick={()=>compared.find(c=>c.code===r.code)?setCompared(p=>p.filter(c=>c.code!==r.code)):(compared.length<4&&setCompared(p=>[...p,r]))} style={{display:"flex",alignItems:"center",gap:4,padding:"4px 11px",borderRadius:6,fontSize:11,fontWeight:600,border:`1px solid ${compared.find(c=>c.code===r.code)?"#C7D2FE":"#E2E8F0"}`,background:compared.find(c=>c.code===r.code)?"#EEF2FF":"#F8FAFC",color:compared.find(c=>c.code===r.code)?"#4F46E5":"#6B7280",cursor:"pointer",opacity:(!compared.find(c=>c.code===r.code)&&compared.length>=4)?.4:1}}>
                    {compared.find(c=>c.code===r.code)?"✓ Ajouté":"⚖ Comparer"}
                  </button>
                </div>
              </div>
            ))}
          </div>
          {/* Compétences pour mots-clés */}
          <CompetencesBlock codes={codesForCompetences} persona={persona}/>
        </div>
      )}

      {/* Résultats Annonce */}
      {!loading&&results&&!Array.isArray(results)&&(
        <div style={{animation:"fadeIn .4s ease"}}>
          {/* Hero ROME */}
          <div style={{background:"#FFF",borderRadius:16,padding:"22px 24px",border:`2px solid ${pc.color}`,boxShadow:`0 4px 20px ${pc.color}12`,marginBottom:12}}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",flexWrap:"wrap",gap:12,marginBottom:14}}>
              <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
                <span style={{background:pc.color,color:"#FFF",fontSize:10,fontWeight:800,padding:"3px 9px",borderRadius:20,letterSpacing:"0.08em",textTransform:"uppercase"}}>ROME Principal</span>
                {results.niveau&&lvlC[results.niveau]&&<span style={{...lvlC[results.niveau],fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,textTransform:"capitalize",background:lvlC[results.niveau].bg,color:lvlC[results.niveau].c}}>{results.niveau}</span>}
                {results.contrat&&results.contrat!=="Non précisé"&&ctrC[results.contrat]&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:ctrC[results.contrat].bg,color:ctrC[results.contrat].c}}>{results.contrat}</span>}
                {results.teletravail&&results.teletravail!=="Non précisé"&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:"#ECFDF5",color:"#059669"}}>🏠 {results.teletravail}</span>}
                {results.localisation&&<span style={{fontSize:11,fontWeight:700,padding:"3px 10px",borderRadius:20,background:"#F8FAFC",color:"#6B7280",border:"1px solid #E2E8F0"}}>📍 {results.localisation}</span>}
              </div>
              <div style={{display:"flex",gap:7,flexWrap:"wrap"}}>
                <CopyBtn text={results.rome_principal.code} label="Copier ROME" accent={pc.color}/>
                <CopyBtn text={[results.rome_principal.code,...(results.rome_alternatifs||[]).map(r=>r.code)].join(", ")} label="Tous ROME"/>
                <button onClick={()=>exportCSV([["Type","Code","Intitulé"],["Principal",results.rome_principal.code,results.rome_principal.intitule],...(results.rome_alternatifs||[]).map(r=>["Alternatif",r.code,r.intitule]),["NAF",results.naf.code,results.naf.intitule]],"extraction_annonce")} style={{display:"flex",alignItems:"center",gap:4,padding:"5px 11px",borderRadius:6,border:"1px solid #E2E8F0",background:"#F8FAFC",color:"#6B7280",fontSize:11,fontWeight:600,cursor:"pointer"}}>⬇ CSV</button>
              </div>
            </div>
            <div style={{display:"flex",alignItems:"flex-start",gap:16}}>
              <span style={{fontFamily:"monospace",fontSize:26,fontWeight:700,color:pc.color,letterSpacing:"0.04em",flexShrink:0,lineHeight:1}}>{results.rome_principal.code}</span>
              <div>
                <div style={{fontWeight:800,fontSize:17,color:"#0F172A",marginBottom:5,lineHeight:1.3}}>{results.rome_principal.intitule}</div>
                {results.rome_principal.description&&<div style={{fontSize:13,color:"#6B7280",lineHeight:1.65}}>{results.rome_principal.description}</div>}
              </div>
            </div>
          </div>

          {/* Alternatifs */}
          {results.rome_alternatifs?.length>0&&(
            <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginBottom:12}}>
              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12,paddingBottom:8,borderBottom:"1px solid #E2E8F0"}}>ROME Alternatifs</div>
              <div style={{display:"flex",flexDirection:"column",gap:8}}>
                {results.rome_alternatifs.map((r,i)=>(
                  <div key={i} style={{display:"flex",alignItems:"center",gap:12,padding:"9px 13px",background:"#F8FAFC",borderRadius:9,border:"1px solid #E2E8F0"}}>
                    <span style={{fontFamily:"monospace",fontWeight:700,color:pc.color,fontSize:13,flexShrink:0}}>{r.code}</span>
                    <span style={{fontSize:13.5,color:"#374151",flex:1}}>{r.intitule}</span>
                    {r.domaine&&<span style={{fontSize:11,color:"#9CA3AF",padding:"2px 7px",background:"#FFF",borderRadius:5,border:"1px solid #E2E8F0",flexShrink:0}}>{r.domaine}</span>}
                    <BdgType type={r.type||"proche"}/>
                    <CopyBtn text={r.code}/>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* NAF + Synthèse */}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:12}}>
            <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)"}}>
              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12}}>Code NAF / APE</div>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:10}}>
                <div><span style={{fontFamily:"monospace",fontSize:20,fontWeight:700,color:"#7C3AED"}}>{results.naf.code}</span><div style={{fontSize:13,color:"#374151",marginTop:4}}>{results.naf.intitule}</div>{results.naf.secteur&&<div style={{fontSize:11,color:"#9CA3AF",marginTop:2}}>{results.naf.secteur}</div>}</div>
                <CopyBtn text={results.naf.code}/>
              </div>
            </div>
            <div style={{background:"#F8FAFC",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0"}}>
              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:10}}>Synthèse</div>
              <p style={{fontSize:13,color:"#374151",lineHeight:1.75,margin:0}}>{results.synthese}</p>
            </div>
          </div>

          {/* Mots-clés */}
          {results.mots_cles?.length>0&&(
            <div style={{background:"#FFF",borderRadius:14,padding:"16px 20px",border:"1.5px solid #E2E8F0",boxShadow:"0 1px 2px rgba(0,0,0,.05)",marginBottom:12}}>
              <div style={{fontSize:10.5,fontWeight:800,letterSpacing:"0.09em",textTransform:"uppercase",color:"#9CA3AF",marginBottom:12}}>Mots-clés détectés</div>
              <div style={{display:"flex",flexWrap:"wrap",gap:8}}>
                {results.mots_cles.map((k,i)=><span key={i} style={{padding:"4px 12px",borderRadius:20,fontSize:12,fontWeight:600,background:pc.colorSoft,color:pc.color,border:`1px solid ${pc.colorMid}`}}>{k}</span>)}
              </div>
            </div>
          )}

          {/* Compétences enrichies */}
          <CompetencesBlock codes={codesForCompetences} persona={persona}/>
        </div>
      )}
    </div>
  );
}

/* ══════════ DOSSIER MODULE ══════════ */
function DossierModule() {
  const[dtab,setDtab]=useState(0);
  const DNAV=["👤 Personas","🗺 Parcours UX","🏗 Architecture","📈 KPIs CEO"];

  return (
    <div style={{background:"#FFFFFF",borderRadius:16,overflow:"hidden",border:"1px solid #E2E8F0",boxShadow:"0 1px 3px rgba(0,0,0,.07),0 4px 12px rgba(0,0,0,.05)"}}>
      {/* Dossier header — accent band */}
      <div style={{background:"linear-gradient(135deg,#0F172A 0%,#1E3A5F 100%)",padding:"20px 28px 0",borderBottom:"1px solid #E2E8F0"}}>
        <div style={{display:"flex",alignItems:"baseline",gap:12,marginBottom:4}}>
          <h2 style={{margin:0,fontFamily:"Syne,sans-serif",fontSize:18,color:"#FFFFFF",letterSpacing:"0.06em"}}>ROME·NAF MATCHER</h2>
          <span style={{color:"#94A3B8",fontSize:11}}>— Dossier de conception UX · v2.0</span>
        </div>
        <p style={{margin:"0 0 16px",color:"#94A3B8",fontSize:12}}>Personas · Parcours UX · Architecture · KPIs CEO</p>
        <div style={{display:"flex",gap:0}}>
          {DNAV.map((n,i)=>(
            <button key={i} onClick={()=>setDtab(i)} style={{background:"none",border:"none",cursor:"pointer",padding:"10px 18px",fontSize:12,fontFamily:"Syne,sans-serif",fontWeight:700,letterSpacing:"0.04em",color:dtab===i?"#FFFFFF":"#64748B",borderBottom:dtab===i?"2px solid #38BDF8":"2px solid transparent",transition:"all .2s"}}>
              {n}
            </button>
          ))}
        </div>
      </div>

      <div style={{padding:"28px",background:"#F8FAFC",fontFamily:"DM Sans,sans-serif",color:"#0F172A"}}>

        {/* ── PERSONAS ── */}
        {dtab===0&&(
          <div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginBottom:18}}>
              {Object.values(PERSONAS).map(p=>(
                <DCard key={p.id}>
                  <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:16}}>
                    <div style={{width:50,height:50,borderRadius:"50%",background:`linear-gradient(135deg,${p.color}66,${p.color})`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:22}}>{p.icon}</div>
                    <div>
                      <div style={{fontFamily:"Syne,sans-serif",fontSize:16,fontWeight:700,color:p.color}}>{p.name}, {p.age} ans</div>
                      <div style={{color:"#8B9BB4",fontSize:11}}>{p.role}</div>
                    </div>
                  </div>
                  <DSec title="Contexte & environnement">
                    <p style={{color:"#374151",fontSize:12,lineHeight:1.7,margin:0}}>{p.context}</p>
                  </DSec>
                  <DSec title="Objectif principal">
                    <p style={{color:"#374151",fontSize:12,lineHeight:1.7,margin:0}}>{p.goal}</p>
                  </DSec>
                  <DSec title="Compétences mobilisées">
                    <div style={{display:"flex",flexWrap:"wrap",gap:5}}>{p.skills.map(s=><DTag key={s} label={s} color={p.color}/>)}</div>
                  </DSec>
                  <DSec title="Frustrations clés">
                    {p.pains.map((f,i)=><div key={i} style={{display:"flex",gap:7,marginBottom:5,alignItems:"flex-start"}}><span style={{color:"#E11D48",marginTop:2,flexShrink:0}}>✕</span><span style={{color:"#374151",fontSize:12}}>{f}</span></div>)}
                  </DSec>
                  <div style={{background:p.color+"15",border:`1px solid ${p.color}30`,borderRadius:8,padding:10}}>
                    <div style={{color:"#8B9BB4",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:4}}>Critère de succès</div>
                    <em style={{color:p.color,fontSize:12}}>"{p.success}"</em>
                  </div>
                </DCard>
              ))}
            </div>
            {/* Persona secondaire Mehdi */}
            <DCard>
              <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:14}}>
                <div style={{width:40,height:40,borderRadius:"50%",background:"linear-gradient(135deg,#7B2D8B,#C77DFF)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18}}>🧍</div>
                <div>
                  <div style={{fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,color:"#C77DFF"}}>Mehdi, 29 ans <span style={{fontSize:11,color:"#8B9BB4",fontWeight:400}}>— Demandeur d'emploi (persona secondaire)</span></div>
                  <div style={{color:"#8B9BB4",fontSize:11}}>Cuisine, laptop, 3 onglets Indeed. Ne maîtrise pas le vocabulaire ROME officiel.</div>
                </div>
              </div>
              <div style={{display:"flex",gap:16,flexWrap:"wrap"}}>
                <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Frustration</div><p style={{color:"#374151",fontSize:12,margin:0}}>Il dit "manutentionnaire" ou "cariste" — l'outil traduit en ROME sans jargon imposé.</p></div>
                <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Compétences</div><div style={{display:"flex",flexWrap:"wrap",gap:5}}>{["Langage naturel","Saisie vocale","Autonomie numérique"].map(c=><DTag key={c} label={c} color="#7C3AED"/>)}</div></div>
                <div style={{flex:1,minWidth:180}}><div style={{color:"#9CA3AF",fontSize:10,textTransform:"uppercase",letterSpacing:"0.07em",marginBottom:6}}>Succès</div><p style={{color:"#374151",fontSize:12,margin:0}}>Screenshot du résultat, rappelle Sophie avec le code en main.</p></div>
              </div>
            </DCard>
          </div>
        )}

        {/* ── PARCOURS UX ── */}
        {dtab===1&&(
          <div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16,marginBottom:18}}>
              <DCard><div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:8}}>LOI DE MILLER · 7±2</div><p style={{color:"#374151",fontSize:12,margin:0,lineHeight:1.7}}>Chaque écran affiche <strong style={{color:"#0F172A"}}>max 5 résultats ROME</strong> visibles sans scroll. Codes NAF : 3 maximum en premier plan. Pagination pour le reste.</p></DCard>
              <DCard><div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:8}}>LOI DE HICK · Réduire les choix</div><p style={{color:"#374151",fontSize:12,margin:0,lineHeight:1.7}}>2 modules distincts dès l'accueil. Zéro configuration. Le résultat principal est mis en avant — les alternatifs sont secondaires.</p></DCard>
            </div>
            <DCard style={{marginBottom:18}}>
              <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:14}}>UX HONEYCOMB (Morville) — Application au ROME·NAF Matcher</div>
              <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:8}}>
                {[{dim:"Utile",desc:"Matching ROME/NAF réel, pertinent, opérationnel",c:"#059669"},{dim:"Utilisable",desc:"3 clics max pour un résultat. Interface épurée.",c:"#2563EB"},{dim:"Désirable",desc:"Design sobre et pro. Pas de surcharge visuelle.",c:"#D97706"},{dim:"Trouvable",desc:"Recherche vocale + texte + upload visibles au 1er regard",c:"#7C3AED"},{dim:"Accessible",desc:"RGAA AA : contraste, clavier, screen reader",c:"#EA580C"},{dim:"Crédible",desc:"Référentiel France Travail officiel. Source citée.",c:"#E11D48"},{dim:"Valeur",desc:"Gain de temps mesurable pour Sophie (PPAE) et Karim (sourcing)",c:"#059669"}].map(h=>(
                  <div key={h.dim} style={{background:h.c+"10",border:`1px solid ${h.c}28`,borderRadius:8,padding:10}}>
                    <div style={{color:h.c,fontFamily:"Syne,sans-serif",fontSize:11,fontWeight:700}}>{h.dim}</div>
                    <div style={{color:"#6B7280",fontSize:10,marginTop:4,lineHeight:1.5}}>{h.desc}</div>
                  </div>
                ))}
              </div>
            </DCard>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:16}}>
              <DCard>
                <div style={{color:"#52B788",fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,marginBottom:14}}>👩‍💼 Parcours Sophie — Mots-clés → ROME + NAF</div>
                <DStep n="1" label="Accueil — Choix du module" detail="Sophie voit 2 boutons. Elle clique sur 'Mots-clés → ROME'. 2 sec." tags={[{l:"Hick : 2 choix max",c:"#E9C46A"},{l:"< 2 sec",c:"#52B788"}]}/>
                <DStep n="2" label="Saisie orale ou texte" detail="Microphone actif. Elle dit 'agent logistique polyvalent BTP'. Transcription temps réel." tags={[{l:"Web Speech API",c:"#2E86C1"},{l:"Feedback pulse",c:"#C77DFF"}]}/>
                <DStep n="3" label="Validation & appel API" detail="Skeleton loader < 1.5s. Indicateur de progression visible." tags={[{l:"API /rome/search",c:"#E9C46A"},{l:"LLM Claude",c:"#F4A261"}]}/>
                <DStep n="4" label="Résultats ROME principal" detail="1 grande carte : code + intitulé + badge 'Exact'. 3 ROME proches. 1 NAF suggéré." tags={[{l:"Miller : 5 résultats max",c:"#E9C46A"},{l:"Contraste RGAA AA",c:"#52B788"}]}/>
                <DStep n="5" label="Copier → PPAE" detail="Bouton 'Copier le code' → clipboard. Toast 2 sec. Zéro ressaisie." tags={[{l:"1 action = 1 clic",c:"#52B788"},{l:"Toast non bloquant",c:"#2E86C1"}]}/>
                <DStep n="6" label="Compétences associées" detail="Section dépliable : compétences ROME liées (ex: 'Conduite chariot', 'Gestion stocks')." tags={[{l:"Progressive disclosure",c:"#C77DFF"}]}/>
              </DCard>
              <DCard>
                <div style={{color:"#2E86C1",fontFamily:"Syne,sans-serif",fontSize:14,fontWeight:700,marginBottom:14}}>🎯 Parcours Karim — Annonce → ROME + NAF + Compétences</div>
                <DStep n="1" label="Choix module 2" detail="Karim clique sur 'Annonce → ROME+NAF'. 3 tabs : Texte / Fichier / URL." tags={[{l:"3 modes d'input",c:"#2E86C1"}]}/>
                <DStep n="2" label="Coller l'annonce brute" detail="Textarea large. Il paste 400 mots avec fautes et acronymes. Aucun reformatage requis." tags={[{l:"Tolérance au bruit",c:"#E9C46A"}]}/>
                <DStep n="3" label="Extraction automatique" detail="Appel LLM. Résultat en < 2s. Skeleton pendant l'attente." tags={[{l:"API /rome/extract",c:"#F4A261"},{l:"Timeout 8s max",c:"#E63946"}]}/>
                <DStep n="4" label="Résultats structurés" detail="Code ROME principal + 2 alternatifs + NAF + Synthèse + 5 mots-clés extraits." tags={[{l:"Miller : max 5 KW",c:"#E9C46A"},{l:"Hiérarchie claire",c:"#2E86C1"}]}/>
                <DStep n="5" label="Compétences extraites" detail="Section générée : compétences métier, transversales, outils, savoir-être, certifications." tags={[{l:"Compétences clés",c:"#52B788"},{l:"Transverses",c:"#C77DFF"}]}/>
                <DStep n="6" label="Export & action" detail="'Copier ROME', 'Copier NAF', 'Exporter CSV'. Karim copie ROME → LinkedIn Recruiter." tags={[{l:"Export 1 clic",c:"#52B788"},{l:"< 12 sec total",c:"#E9C46A"}]}/>
              </DCard>
            </div>
          </div>
        )}

        {/* ── ARCHITECTURE ── */}
        {dtab===2&&(
          <div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18,marginBottom:18}}>
              <DCard>
                <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:14}}>🔌 API ENDPOINTS</div>
                {[
                  {m:"GET",ep:"/rome/{code_name}",desc:"Recherche ROME par nom métier (mots-clés)"},
                  {m:"GET",ep:"/rome/select/{code}_{id}",desc:"Récupère un code ROME précis par ID"},
                  {m:"POST",ep:"/rome/extract",desc:"Annonce brute → ROME + NAF extraits par LLM"},
                  {m:"GET",ep:"/naf/{code}",desc:"Détails d'un code NAF"},
                  {m:"POST",ep:"/rome/competences",desc:"Compétences associées à un code ROME"},
                  {m:"GET",ep:"/rome/nearby/{code}",desc:"Codes ROME proches (voisinage sémantique)"},
                  {m:"GET",ep:"/analytics/kpi",desc:"Dashboard KPI infrastructure et métier"},
                  {m:"POST",ep:"/rome/match",desc:"Score de match compétences ↔ annonce"},
                ].map(api=>(
                  <div key={api.ep} style={{display:"flex",gap:9,marginBottom:10,alignItems:"flex-start"}}>
                    <span style={{background:api.m==="GET"?"#DCFCE7":"#DBEAFE",color:api.m==="GET"?"#15803D":"#1D4ED8",padding:"2px 7px",borderRadius:4,fontSize:10,fontWeight:700,fontFamily:"monospace",minWidth:38,textAlign:"center",flexShrink:0}}>{api.m}</span>
                    <div><code style={{color:"#0F172A",fontSize:11}}>{api.ep}</code><div style={{color:"#6B7280",fontSize:10,marginTop:2}}>{api.desc}</div></div>
                  </div>
                ))}
              </DCard>
              <div style={{display:"flex",flexDirection:"column",gap:14}}>
                <DCard>
                  <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:12}}>🤖 STACK LLM</div>
                  {[
                    {label:"Modèle principal",val:"Claude Sonnet (Anthropic)",c:"#EA580C"},
                    {label:"Fallback",val:"Mistral-7B-Instruct (local)",c:"#7C3AED"},
                    {label:"Hébergement",val:"HuggingFace Spaces (prod)",c:"#2563EB"},
                    {label:"Température",val:"0.1 (précision > créativité)",c:"#D97706"},
                    {label:"Max tokens",val:"1400 tokens / requête",c:"#059669"},
                    {label:"Prompt strategy",val:"System prompt strict JSON + few-shot",c:"#059669"},
                  ].map(s=>(
                    <div key={s.label} style={{display:"flex",justifyContent:"space-between",marginBottom:8,alignItems:"center"}}>
                      <span style={{color:"#6B7280",fontSize:11}}>{s.label}</span>
                      <span style={{color:s.c,fontSize:11,fontWeight:600,textAlign:"right",maxWidth:"55%"}}>{s.val}</span>
                    </div>
                  ))}
                </DCard>
                <DCard>
                  <div style={{color:"#1D4ED8",fontFamily:"Syne,sans-serif",fontSize:12,fontWeight:700,marginBottom:12}}>🐳 DOCKER COMPOSE</div>
                  <div style={{fontFamily:"monospace",fontSize:10,color:"#374151",lineHeight:1.9,background:"#F1F5F9",padding:12,borderRadius:6,border:"1px solid #E2E8F0"}}>
                    <span style={{color:"#059669"}}>services:</span><br/>
                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>frontend:</span> react:18 · port 3000<br/>
                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>api:</span> fastapi · port 8000<br/>
                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>llm:</span> claude/mistral · port 11434<br/>
                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>db:</span> postgres:15 · port 5432<br/>
                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>cache:</span> redis:7 · port 6379<br/>
                    &nbsp;&nbsp;<span style={{color:"#2563EB"}}>nginx:</span> reverse-proxy · port 80
                  </div>
                </DCard>
              </div>
            </div>
          </div>
        )}

        {/* ── KPIs CEO ── */}
        {dtab===3&&(
          <div>

            {/* ── KPI Infrastructure ── */}
            <DSec title="📡 KPI Infrastructure">
              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
                <KPIBox label="Latence moy. search" value="1.3" unit="s" delta={-8} color="#059669"/>
                <KPIBox label="Latence moy. match" value="2.8" unit="s" delta={-5} color="#2563EB"/>
                <KPIBox label="Uptime" value="99.4" unit="%" delta={0.2} color="#0891B2"/>
                <KPIBox label="Cache hit rate" value="67" unit="%" delta={8} color="#D97706"/>
                <KPIBox label="Req. match/jour" value="211" unit="" delta={22} color="#7C3AED"/>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>LATENCE PAR ENDPOINT (secondes)</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <AreaChart data={kpiLatency}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area type="monotone" dataKey="search" stroke="#059669" fill="#05996912" name="Search (s)" strokeWidth={2}/><Area type="monotone" dataKey="competences" stroke="#D97706" fill="#D9770612" name="Compétences (s)" strokeWidth={2}/><Area type="monotone" dataKey="match" stroke="#7C3AED" fill="#7C3AED12" name="Match (s)" strokeWidth={2}/></AreaChart>
                  </ResponsiveContainer>
                </DCard>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>REQUÊTES/JOUR PAR ENDPOINT</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <BarChart data={kpiEndpoints}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="search" fill="#059669" name="/rome/search" radius={[3,3,0,0]} stackId="a"/><Bar dataKey="extract" fill="#2563EB" name="/rome/extract" radius={[0,0,0,0]} stackId="a"/><Bar dataKey="competences" fill="#D97706" name="/rome/competences" radius={[0,0,0,0]} stackId="a"/><Bar dataKey="match" fill="#7C3AED" name="/rome/match" radius={[3,3,0,0]} stackId="a"/></BarChart>
                  </ResponsiveContainer>
                </DCard>
              </div>
            </DSec>

            {/* ── KPI LLM ── */}
            <DSec title="🤖 KPI Infrastructure LLM">
              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
                <KPIBox label="Tokens search moy." value="487" unit="tok" delta={-4} color="#059669"/>
                <KPIBox label="Tokens compét. moy." value="812" unit="tok" delta={-2} color="#D97706"/>
                <KPIBox label="Tokens match moy." value="1 320" unit="tok" delta={-6} color="#7C3AED"/>
                <KPIBox label="Coût/jour estimé" value="0.22" unit="€" delta={12} color="#EA580C"/>
                <KPIBox label="JSON parse OK" value="97.8" unit="%" delta={1.1} color="#2563EB"/>
              </div>
              <DCard>
                <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>TOKENS PAR TYPE D'APPEL & COÛT ESTIMÉ / HEURE</div>
                <ResponsiveContainer width="100%" height={170}>
                  <AreaChart data={kpiLLM}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis yAxisId="left" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis yAxisId="right" orientation="right" tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area yAxisId="left" type="monotone" dataKey="search" stroke="#059669" fill="#05996912" name="Tokens search"/><Area yAxisId="left" type="monotone" dataKey="comp" stroke="#D97706" fill="#D9770612" name="Tokens compét."/><Area yAxisId="left" type="monotone" dataKey="match" stroke="#7C3AED" fill="#7C3AED12" name="Tokens match"/><Area yAxisId="right" type="monotone" dataKey="cost" stroke="#EA580C" fill="#EA580C12" name="Coût €" strokeDasharray="4 2"/></AreaChart>
                </ResponsiveContainer>
              </DCard>
            </DSec>

            {/* ── KPI Business ── */}
            <DSec title="💼 KPI Business">
              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
                <KPIBox label="Utilisateurs actifs" value="168" unit="/sem" delta={18} color="#D97706"/>
                <KPIBox label="Taux adoption match" value="71" unit="%" delta={11} color="#7C3AED"/>
                <KPIBox label="Taux export CSV" value="74" unit="%" delta={9} color="#059669"/>
                <KPIBox label="Taux retour semaine" value="63" unit="%" delta={7} color="#2563EB"/>
                <KPIBox label="NPS estimé" value="+41" unit="" delta={5} color="#EA580C"/>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>SESSIONS PAR PERSONA + USAGE MATCH</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <BarChart data={kpiUsage}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="sophie" fill="#059669" name="Sophie (Conseillère)" radius={[3,3,0,0]}/><Bar dataKey="karim" fill="#2563EB" name="Karim (Chasseur)" radius={[3,3,0,0]}/><Bar dataKey="match" fill="#7C3AED" name="Sessions avec Match" radius={[3,3,0,0]}/></BarChart>
                  </ResponsiveContainer>
                </DCard>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>TAUX ADOPTION MATCH & RÉTENTION (%)</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <LineChart data={kpiMatchAdoption}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[0,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Line type="monotone" dataKey="taux" stroke="#7C3AED" strokeWidth={2.5} dot={{r:3,fill:"#7C3AED"}} name="Taux adoption Match %"/><Line type="monotone" dataKey="retention" stroke="#2563EB" strokeWidth={2.5} dot={{r:3,fill:"#2563EB"}} name="Taux rétention %"/></LineChart>
                  </ResponsiveContainer>
                </DCard>
              </div>
            </DSec>

            {/* ── KPI Match ── */}
            <DSec title="⚡ KPI Matcher d'annonces">
              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
                <KPIBox label="Score match moyen" value="83" unit="/100" delta={4} color="#7C3AED"/>
                <KPIBox label="Matches Excellent+Bon" value="85" unit="%" delta={7} color="#059669"/>
                <KPIBox label="Compét. matchées moy." value="3.9" unit="/session" delta={12} color="#2563EB"/>
                <KPIBox label="Compét. manquantes moy." value="1.4" unit="/session" delta={-18} color="#EA580C"/>
                <KPIBox label="Durée analyse match" value="2.8" unit="s" delta={-9} color="#D97706"/>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>DISTRIBUTION DES SCORES MATCH (%)</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <BarChart data={kpiMatchScores}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Bar dataKey="excellent" fill="#059669" name="Excellent (≥80)" radius={[3,3,0,0]} stackId="s"/><Bar dataKey="bon" fill="#2563EB" name="Bon (60-79)" stackId="s"/><Bar dataKey="partiel" fill="#D97706" name="Partiel (40-59)" stackId="s"/><Bar dataKey="faible" fill="#E11D48" name="Faible (<40)" radius={[0,0,3,3]} stackId="s"/></BarChart>
                  </ResponsiveContainer>
                </DCard>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>ÉVOLUTION SCORE MATCH MOYEN /100</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <AreaChart data={kpiMatchScores}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[50,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Area type="monotone" dataKey="score_moy" stroke="#7C3AED" fill="#7C3AED18" strokeWidth={2.5} name="Score moyen /100" dot={{r:4,fill:"#7C3AED"}}/></AreaChart>
                  </ResponsiveContainer>
                </DCard>
              </div>
            </DSec>

            {/* ── KPI Métier ── */}
            <DSec title="🎯 KPI Métier">
              <div style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:14}}>
                <KPIBox label="Précision ROME" value="91" unit="%" delta={4} color="#059669"/>
                <KPIBox label="Satisfaction globale" value="89" unit="%" delta={5} color="#D97706"/>
                <KPIBox label="Taux copie code" value="85" unit="%" delta={6} color="#2563EB"/>
                <KPIBox label="Temps moyen résultat" value="1.8" unit="s" delta={-15} color="#EA580C"/>
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>PRÉCISION ROME / SATISFACTION / EXPORT / SCORE MATCH (%)</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <LineChart data={kpiMetier}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis domain={[50,100]} tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Line type="monotone" dataKey="precision" stroke="#059669" strokeWidth={2} dot={false} name="Précision ROME %"/><Line type="monotone" dataKey="satisfaction" stroke="#D97706" strokeWidth={2} dot={false} name="Satisfaction %"/><Line type="monotone" dataKey="export" stroke="#2563EB" strokeWidth={2} dot={false} name="Taux export %"/><Line type="monotone" dataKey="match_score" stroke="#7C3AED" strokeWidth={2} dot={false} strokeDasharray="4 2" name="Score match moy."/></LineChart>
                  </ResponsiveContainer>
                </DCard>
                <DCard>
                  <div style={{color:"#6B7280",fontSize:10,marginBottom:10,fontFamily:"Syne,sans-serif",letterSpacing:"0.08em",textTransform:"uppercase"}}>COMPÉTENCES DÉTECTÉES / VALIDÉES / MATCHÉES / SESSION</div>
                  <ResponsiveContainer width="100%" height={160}>
                    <AreaChart data={kpiCompetences}><CartesianGrid strokeDasharray="3 3" stroke="#E2E8F0"/><XAxis dataKey="t" tick={{fill:"#9CA3AF",fontSize:10}}/><YAxis tick={{fill:"#9CA3AF",fontSize:10}}/><Tooltip {...TT}/><Legend wrapperStyle={{fontSize:11}}/><Area type="monotone" dataKey="detected" stroke="#D97706" fill="#D9770610" strokeWidth={2} name="Détectées"/><Area type="monotone" dataKey="validated" stroke="#2563EB" fill="#2563EB10" strokeWidth={2} name="Validées"/><Area type="monotone" dataKey="matched" stroke="#7C3AED" fill="#7C3AED10" strokeWidth={2} name="Matchées"/></AreaChart>
                  </ResponsiveContainer>
                </DCard>
              </div>
            </DSec>

          </div>
        )}
      </div>
    </div>
  );
}

/* ══════════ APP ROOT ══════════ */
export default function App() {
  const[persona,setPersona]=useState("sophie");
  const[mainTab,setMainTab]=useState("tool"); // tool | dossier
  const pc = PERSONAS[persona];

  return (
    <div style={{minHeight:"100vh",background:"#F4F6F9",fontFamily:"'Outfit','DM Sans',sans-serif",color:"#0F172A"}}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@600;700&family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600&display=swap');
        *{box-sizing:border-box;margin:0;padding:0}
        @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
        @keyframes spin{to{transform:rotate(360deg)}}
        @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}
        @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
        input,textarea,button,select{font-family:inherit}
        ::-webkit-scrollbar{width:5px;height:5px}
        ::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px}
      `}</style>

      {/* ── HEADER ── */}
      <header style={{background:"#FFF",borderBottom:"1.5px solid #E2E8F0",position:"sticky",top:0,zIndex:100,boxShadow:"0 1px 0 rgba(0,0,0,.04)"}}>
        <div style={{maxWidth:960,margin:"0 auto",padding:"0 24px"}}>
          <div style={{display:"flex",alignItems:"center",gap:14,paddingTop:14,paddingBottom:12,borderBottom:"1px solid #F8FAFC",flexWrap:"wrap",rowGap:8}}>
            <div style={{width:40,height:40,borderRadius:11,background:"linear-gradient(135deg,#2563EB,#0891B2)",display:"flex",alignItems:"center",justifyContent:"center",fontSize:18,boxShadow:"0 2px 8px rgba(37,99,235,.3)",flexShrink:0}}>🎯</div>
            <div style={{flex:1,minWidth:140}}>
              <div style={{fontWeight:900,fontSize:17,color:"#0F172A",letterSpacing:"-.01em",lineHeight:1.2}}>ROME NAF Pro</div>
              <div style={{fontSize:11,color:"#9CA3AF"}}>Décodeur IA · Référentiel France Travail · v4.0</div>
            </div>

            {/* Persona switcher */}
            <div style={{display:"flex",gap:1,background:"#F1F5F9",borderRadius:10,padding:3,border:"1px solid #E2E8F0"}}>
              {Object.values(PERSONAS).map(p=>(
                <button key={p.id} onClick={()=>setPersona(p.id)} style={{display:"flex",alignItems:"center",gap:7,padding:"7px 14px",borderRadius:8,border:"none",background:persona===p.id?"#FFF":"none",color:persona===p.id?p.color:"#9CA3AF",fontWeight:persona===p.id?800:500,fontSize:12.5,cursor:"pointer",transition:"all .2s",boxShadow:persona===p.id?"0 1px 3px rgba(0,0,0,.08)":"none",whiteSpace:"nowrap"}}>
                  <span style={{fontSize:16}}>{p.icon}</span>
                  <span>{p.name}</span>
                  <span style={{fontSize:10,opacity:.7}}>— {p.id==="sophie"?"Conseillère":"Chasseur"}</span>
                </button>
              ))}
            </div>

            {/* Main tab switcher */}
            <div style={{display:"flex",gap:6}}>
              {[{id:"tool",label:"🔍 Outil",},{id:"dossier",label:"📋 Dossier UX"}].map(t=>(
                <button key={t.id} onClick={()=>setMainTab(t.id)} style={{padding:"7px 16px",borderRadius:8,border:`1.5px solid ${mainTab===t.id?"#2563EB":"#E2E8F0"}`,background:mainTab===t.id?"#EFF6FF":"#FFF",color:mainTab===t.id?"#2563EB":"#6B7280",fontWeight:mainTab===t.id?700:500,fontSize:12,cursor:"pointer",transition:"all .2s"}}>
                  {t.label}
                </button>
              ))}
            </div>
          </div>
          {/* Persona indicator */}
          <div style={{padding:"8px 0",display:"flex",alignItems:"center",gap:10}}>
            <span style={{fontSize:18}}>{pc.icon}</span>
            <span style={{fontSize:12.5,fontWeight:600,color:pc.color}}>{pc.name}</span>
            <span style={{fontSize:11,color:"#9CA3AF"}}>·</span>
            <span style={{fontSize:11,color:"#9CA3AF"}}>{pc.role}</span>
            <span style={{fontSize:11,color:"#9CA3AF"}}>·</span>
            <span style={{fontSize:11,color:pc.color,fontWeight:600}}>{pc.tagline}</span>
          </div>
        </div>
      </header>

      {/* ── MAIN ── */}
      <main style={{maxWidth:960,margin:"0 auto",padding:"24px 24px 80px"}}>
        {mainTab==="tool"&&<ToolModule persona={persona}/>}
        {mainTab==="dossier"&&<DossierModule/>}
      </main>

      <footer style={{borderTop:"1.5px solid #E2E8F0",background:"#FFF",padding:"14px 24px",textAlign:"center"}}>
        <span style={{fontSize:11,color:"#CBD5E1"}}>ROME NAF Pro v4 · Claude (Anthropic) · Référentiel France Travail · <strong style={{color:"#9CA3AF"}}>RGAA AA</strong> · Données stockées localement</span>
      </footer>
    </div>
  );
}