/* GUIDAROUTE — produit autonome, créé par Schneider.
   Partenaire de la plateforme GUIDKO (collaboration Kevin × Schneider).
   Lia (code & GPS) est une création indépendante : les apps GUIDKO en DÉPENDENT
   via ce dossier `lia-gps/`, mais le GPS reste un produit à part.
   Toute la connaissance route : trafic, météo, travaux, piétons/cyclistes, zones à risque,
   vitesse, état du véhicule, profil du conducteur. Prédiction · guidance · prévention.
   + Apprentissage du code EN CONTINU + Mode Examen + Coaching tous profils.
   Téléchargeable : Mobile · CarPlay · Android Auto. */

const GPS_KNOWLEDGE = [
  { k: "traffic", g: "🚦", fr: "Trafic temps réel", en: "Live traffic", val: { fr: "Fluide → ralentissement dans 800 m", en: "Clear → slowdown in 800 m" }, tone: "sky" },
  { k: "weather", g: "🌧", fr: "Météo", en: "Weather", val: { fr: "Pluie légère · chaussée glissante", en: "Light rain · slippery road" }, tone: "flame" },
  { k: "works",   g: "🚧", fr: "Travaux", en: "Roadworks", val: { fr: "Voie réduite à 600 m", en: "Lane closed in 600 m" }, tone: "flame" },
  { k: "vuln",    g: "🚸", fr: "Usagers vulnérables", en: "Vulnerable users", val: { fr: "École à proximité · piétons", en: "School nearby · pedestrians" }, tone: "danger" },
  { k: "speed",   g: "⏱", fr: "Vitesse autorisée", en: "Speed limit", val: { fr: "50 → 30 km/h (zone)", en: "50 → 30 km/h (zone)" }, tone: "signal" },
  { k: "vehicle", g: "🚗", fr: "État véhicule", en: "Vehicle status", val: { fr: "Pneus OK · carburant 62%", en: "Tires OK · fuel 62%" }, tone: "signal" },
];

const GPS_DRIVE = [
  { instr: { fr: "Tout droit sur 400 m", en: "Straight for 400 m" }, icon: "↑", tone: "signal",
    lia: { fr: "Chaussée mouillée : augmente la distance de sécurité à 3 secondes.", en: "Wet road: increase safe distance to 3 seconds." },
    predict: { fr: "Feu probablement rouge dans 250 m — relâche l'accélérateur.", en: "Light likely red in 250 m — ease off the gas." },
    quiz: { q: { fr: "Par temps de pluie, la distance de sécurité doit être…", en: "In the rain, safe distance must be…" }, a: [{ fr: "Réduite", en: "Reduced" }, { fr: "Doublée", en: "Doubled" }, { fr: "Inchangée", en: "Unchanged" }], correct: 1 } },
  { instr: { fr: "Tourne à droite — Rue de l'École", en: "Turn right — School Street" }, icon: "↱", tone: "flame",
    lia: { fr: "Clignotant maintenant. École à droite : 30 km/h, surveille les enfants.", en: "Signal now. School on the right: 30 km/h, watch for children." },
    predict: { fr: "Sortie d'école à 16h30 — forte présence piétonne attendue.", en: "School out at 4:30pm — heavy pedestrian flow expected." },
    quiz: { q: { fr: "Aux abords d'une école, la priorité absolue va…", en: "Near a school, absolute priority goes to…" }, a: [{ fr: "Aux voitures", en: "To cars" }, { fr: "Aux piétons", en: "To pedestrians" }, { fr: "Aux bus", en: "To buses" }], correct: 1 } },
  { instr: { fr: "Rond-point : 2ᵉ sortie", en: "Roundabout: 2nd exit" }, icon: "↻", tone: "sky",
    lia: { fr: "Cède le passage à gauche. Clignotant droit avant ta sortie.", en: "Yield to the left. Right signal before your exit." },
    predict: { fr: "Cycliste à 4h sur l'anneau — laisse-le s'insérer.", en: "Cyclist at 4 o'clock on the ring — let them merge." },
    quiz: { q: { fr: "Au rond-point, on cède le passage…", en: "At a roundabout, you yield…" }, a: [{ fr: "À droite", en: "To the right" }, { fr: "À gauche", en: "To the left" }, { fr: "À personne", en: "To no one" }], correct: 1 } },
  { instr: { fr: "Destination à 150 m à gauche", en: "Destination 150 m on the left" }, icon: "◎", tone: "signal",
    lia: { fr: "Prépare-toi à t'arrêter. Vérifie l'angle mort avant de te ranger.", en: "Prepare to stop. Check blind spot before pulling over." },
    predict: { fr: "Place libre dans 40 m à droite — créneau conseillé.", en: "Free spot in 40 m on the right — parallel park advised." },
    quiz: { q: { fr: "Avant de se rabattre, on vérifie…", en: "Before pulling over, you check…" }, a: [{ fr: "Le rétro seulement", en: "Mirror only" }, { fr: "Rétro + angle mort", en: "Mirror + blind spot" }, { fr: "Rien", en: "Nothing" }], correct: 1 } },
];

const GPS_EXAM = [
  { q: { fr: "Cette ligne blanche continue, je peux la franchir ?", en: "This solid white line, may I cross it?" }, img: "🛣", a: [{ fr: "Oui si la voie est libre", en: "Yes if clear" }, { fr: "Non, c'est interdit", en: "No, forbidden" }, { fr: "Oui pour doubler", en: "Yes to overtake" }], correct: 1, why: { fr: "Une ligne continue ne se franchit jamais.", en: "A solid line must never be crossed." } },
  { q: { fr: "Un feu orange clignotant signifie…", en: "A flashing amber light means…" }, img: "🟠", a: [{ fr: "Arrêt obligatoire", en: "Mandatory stop" }, { fr: "Prudence, passage autorisé", en: "Caution, may proceed" }, { fr: "Demi-tour", en: "U-turn" }], correct: 1, why: { fr: "Orange clignotant = prudence, le passage reste autorisé.", en: "Flashing amber = caution, you may proceed." } },
  { q: { fr: "Distance d'arrêt à 50 km/h sur sol sec ?", en: "Stopping distance at 50 km/h on dry ground?" }, img: "📏", a: [{ fr: "≈ 13 m", en: "≈ 13 m" }, { fr: "≈ 25 m", en: "≈ 25 m" }, { fr: "≈ 40 m", en: "≈ 40 m" }], correct: 1, why: { fr: "≈ 25 m (réaction + freinage).", en: "≈ 25 m (reaction + braking)." } },
  { q: { fr: "Taux d'alcool max permis probatoire ?", en: "Max blood alcohol, probationary licence?" }, img: "🍷", a: [{ fr: "0,5 g/L", en: "0.5 g/L" }, { fr: "0,2 g/L", en: "0.2 g/L" }, { fr: "0,8 g/L", en: "0.8 g/L" }], correct: 1, why: { fr: "0,2 g/L en permis probatoire (quasi zéro).", en: "0.2 g/L for probationary (near zero)." } },
  { q: { fr: "Priorité à une intersection sans signalisation ?", en: "Priority at an unmarked intersection?" }, img: "✛", a: [{ fr: "À gauche", en: "To the left" }, { fr: "À droite", en: "To the right" }, { fr: "Au plus rapide", en: "To the fastest" }], correct: 1, why: { fr: "Priorité à droite par défaut.", en: "Priority to the right by default." } },
];

const GPS_PROFILES = [
  { k: "eleve",   g: "▲", fr: "Élève", en: "Student", focus: { fr: "Apprentissage guidé, code en continu, préparation examen.", en: "Guided learning, continuous code, exam prep." } },
  { k: "moniteur",g: "♛", fr: "Moniteur", en: "Instructor", focus: { fr: "Outil de pédagogie : Lia complète, ne remplace pas. Bilan d'élève.", en: "Teaching tool: Lia assists, never replaces. Student report." } },
  { k: "covoit",  g: "⇅", fr: "Covoitureur", en: "Carpooler", focus: { fr: "Éco-conduite, ponctualité, sécurité passagers.", en: "Eco-driving, punctuality, passenger safety." } },
  { k: "livreur", g: "📦", fr: "Livreur", en: "Courier", focus: { fr: "Itinéraires optimisés, arrêts sûrs, code respecté sous pression.", en: "Optimized routes, safe stops, code under pressure." } },
  { k: "senior",  g: "🧓", fr: "Conducteur senior", en: "Senior driver", focus: { fr: "Rappels doux, anticipation renforcée, confort.", en: "Gentle reminders, stronger anticipation, comfort." } },
];

function GpsApp({ section, navigate }) {
  const C = GK.colors;
  const { t } = useI18n();
  const GPS_TAB_KEYS = ["drive", "map", "learn", "exam", "coach"];
  const [tab, setTab] = React.useState(GPS_TAB_KEYS.includes(section) ? section : "drive");
  React.useEffect(() => { if (GPS_TAB_KEYS.includes(section)) setTab(section); }, [section]);
  const [profile, setProfile] = React.useState("eleve");
  const tabs = [
    { k: "drive", fr: "Navigation", en: "Navigation", g: "🧭" },
    { k: "map",   fr: "Carte ressources", en: "Resource map", g: "🗺️" },
    { k: "learn", fr: "Code en continu", en: "Continuous code", g: "★" },
    { k: "exam",  fr: "Mode examen", en: "Exam mode", g: "🎓" },
    { k: "coach", fr: "Coaching", en: "Coaching", g: "✦" },
  ];

  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column", background: C.paper, fontFamily: "'Geist', sans-serif", overflow: "hidden" }}>
      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "13px 24px", background: C.ink, color: "#fff", flexShrink: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 22, letterSpacing: "-0.01em" }}>Lia</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, color: C.flame, letterSpacing: "0.16em" }}>GPS</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 8.5, color: "#7A82A8", letterSpacing: "0.1em", paddingLeft: 12, borderLeft: "1px solid #1F2542" }}>📲 MOBILE · CARPLAY · ANDROID AUTO</span>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 8.5, color: "#5B6388", letterSpacing: "0.08em" }}>· {t("PRODUIT PARTENAIRE × GUIDKO", "PARTNER PRODUCT × GUIDKO")}</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <LangSelector dark compact/>
          <Button kind="light" size="sm" onClick={() => navigate("/login")}>{t("Quitter", "Exit")}</Button>
        </div>
      </header>

      <div style={{ display: "flex", gap: 6, padding: "10px 24px", background: C.ink, borderTop: "1px solid #1F2542", flexShrink: 0, overflowX: "auto" }}>
        {tabs.map(tb => {
          const on = tb.k === tab;
          return <button key={tb.k} onClick={() => setTab(tb.k)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "8px 15px", borderRadius: 999, border: "none", cursor: "pointer", whiteSpace: "nowrap", fontSize: 13, fontWeight: 600, fontFamily: "inherit", background: on ? C.flame : "#1F2542", color: "#fff" }}>{tb.g} {t(tb.fr, tb.en)}</button>;
        })}
        <div style={{ marginLeft: "auto", display: "inline-flex", alignItems: "center", gap: 8 }}>
          <span style={{ fontSize: 11, color: "#7A82A8", fontFamily: "'Geist Mono', monospace", letterSpacing: "0.08em" }}>{t("PROFIL", "PROFILE")}</span>
          <select value={profile} onChange={e => setProfile(e.target.value)} style={{ background: "#1F2542", color: "#fff", border: "1px solid #2A3260", borderRadius: 8, padding: "6px 10px", fontSize: 12.5, fontFamily: "inherit", cursor: "pointer" }}>
            {GPS_PROFILES.map(p => <option key={p.k} value={p.k}>{p.g} {t(p.fr, p.en)}</option>)}
          </select>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "hidden", display: "flex", flexDirection: "column" }}>
        {tab === "drive" && <GpsDrive profile={profile}/>}
        {tab === "map" && <GpsMap profile={profile} navigate={navigate}/>}
        {tab === "learn" && <GpsLearn/>}
        {tab === "exam" && <GpsExam/>}
        {tab === "coach" && <GpsCoach profile={profile} setProfile={setProfile}/>}
      </div>
    </div>
  );
}

// ---------- Carte de ressources : couches de l'écosystème sur la route ----------
const MAP_LAYERS = [
  { k: "safety",    g: "⚠", fr: "Sécurité routière", en: "Road safety",   color: "#E11D48", core: true },
  { k: "moniteur",  g: "♛", fr: "Moniteurs",         en: "Instructors",   color: "#FF5A1F" },
  { k: "covoit",    g: "⇅", fr: "Covoiturages",      en: "Carpools",      color: "#0FB76B" },
  { k: "livraison", g: "📦", fr: "Missions",          en: "Missions",      color: "#3B6FF8" },
  { k: "market",    g: "⇄", fr: "Véhicules",         en: "Vehicles",      color: "#A78BFA" },
  { k: "services",  g: "⛽", fr: "Services",          en: "Stations",      color: "#6B7280" },
];

const MAP_POINTS = [
  // Sécurité (cœur du GPS — capteurs, caméras, radars, dangers)
  { id: "s1", layer: "safety", x: 38, y: 30, g: "📷", title: { fr: "Radar tronçon", en: "Average-speed camera" }, meta: { fr: "Vitesse moyenne contrôlée · 50 km/h", en: "Avg speed enforced · 50 km/h" }, cta: null },
  { id: "s2", layer: "safety", x: 64, y: 55, g: "🚸", title: { fr: "Zone école — 30", en: "School zone — 30" }, meta: { fr: "Sortie 16h30 · forte présence piétonne", en: "Out 4:30pm · heavy pedestrians" }, cta: null },
  { id: "s3", layer: "safety", x: 22, y: 68, g: "🧊", title: { fr: "Capteur : chaussée glissante", en: "Sensor: slippery road" }, meta: { fr: "Pluie + verglas possible · distance ×2", en: "Rain + ice risk · distance ×2" }, cta: null },
  // Moniteurs proches
  { id: "m1", layer: "moniteur", x: 50, y: 42, g: "♛", title: { fr: "Marc Lefèvre · 4.9★", en: "Marc Lefèvre · 4.9★" }, meta: { fr: "Permis B · dispo aujourd'hui · 350 m", en: "B licence · free today · 350 m" }, cta: { fr: "Réserver une leçon", en: "Book a lesson" }, route: "/eleve/overview" },
  { id: "m2", layer: "moniteur", x: 71, y: 28, g: "♛", title: { fr: "Sofia Nkamba · 4.8★", en: "Sofia Nkamba · 4.8★" }, meta: { fr: "Moto A/A2 · 1.2 km", en: "Moto A/A2 · 1.2 km" }, cta: { fr: "Voir le profil", en: "View profile" }, route: "/eleve/overview" },
  // Covoiturages
  { id: "c1", layer: "covoit", x: 30, y: 48, g: "⇅", title: { fr: "Paris → Lyon · 3 places", en: "Paris → Lyon · 3 seats" }, meta: { fr: "Départ 18h · 29 € · 200 m", en: "Leaves 6pm · €29 · 200 m" }, cta: { fr: "Réserver le trajet", en: "Book the ride" }, route: "/covoit/overview" },
  { id: "c2", layer: "covoit", x: 58, y: 72, g: "⇅", title: { fr: "Retour de cours · 2 places", en: "Ride home · 2 seats" }, meta: { fr: "Pour élèves · 6 € · 500 m", en: "For students · €6 · 500 m" }, cta: { fr: "Rejoindre", en: "Join" }, route: "/covoit/overview" },
  // Missions livraison
  { id: "l1", layer: "livraison", x: 44, y: 60, g: "📦", title: { fr: "Mission repas · 7,20 €", en: "Food mission · €7.20" }, meta: { fr: "Vélo/scooter · 1.4 km · urgent", en: "Bike/moped · 1.4 km · urgent" }, cta: { fr: "Accepter la mission", en: "Accept mission" }, route: "/livraison/livreur" },
  { id: "l2", layer: "livraison", x: 80, y: 64, g: "🏭", title: { fr: "Tournée B2B · 94 €", en: "B2B tour · €94" }, meta: { fr: "Camionnette · multi-arrêts", en: "Van · multi-stop" }, cta: { fr: "Voir la tournée", en: "View tour" }, route: "/livraison/b2b" },
  // Véhicules (marché auto)
  { id: "v1", layer: "market", x: 26, y: 36, g: "🚗", title: { fr: "Peugeot 208 · 12 400 €", en: "Peugeot 208 · €12,400" }, meta: { fr: "À vendre · particulier · 800 m", en: "For sale · private · 800 m" }, cta: { fr: "Voir l'annonce", en: "View listing" }, route: "/auto/market" },
  { id: "v2", layer: "market", x: 68, y: 44, g: "🔑", title: { fr: "Clio double-commande", en: "Dual-control Clio" }, meta: { fr: "Location auto-école · 55 €/j", en: "School rental · €55/day" }, cta: { fr: "Louer", en: "Rent" }, route: "/auto/market" },
  // Services
  { id: "r1", layer: "services", x: 54, y: 24, g: "⛽", title: { fr: "Station · Gazole 1,72 €", en: "Station · Diesel €1.72" }, meta: { fr: "Le moins cher du secteur · 600 m", en: "Cheapest nearby · 600 m" }, cta: { fr: "Itinéraire", en: "Route" }, route: null },
  { id: "r2", layer: "services", x: 40, y: 78, g: "🔌", title: { fr: "Borne recharge · 4 libres", en: "Charging · 4 free" }, meta: { fr: "150 kW · 400 m", en: "150 kW · 400 m" }, cta: { fr: "Itinéraire", en: "Route" }, route: null },
  { id: "r3", layer: "services", x: 76, y: 80, g: "🅿", title: { fr: "Parking · 12 places", en: "Parking · 12 free" }, meta: { fr: "2,40 €/h · sécurisé", en: "€2.40/h · secure" }, cta: { fr: "Itinéraire", en: "Route" }, route: null },
];

function GpsMap({ profile, navigate }) {
  const C = GK.colors;
  const { t, lang } = useI18n();
  const toast = (window.useToast ? window.useToast() : { push: () => {} });
  // Sécurité toujours active (axe central) ; autres couches togglables
  const [active, setActive] = React.useState({ safety: true, moniteur: true, covoit: true, livraison: true, market: false, services: false });
  const [sel, setSel] = React.useState(null);
  const [offline, setOffline] = React.useState(false);
  const layerOf = (k) => MAP_LAYERS.find(l => l.k === k);
  const visible = MAP_POINTS.filter(p => active[p.layer]);
  const selected = MAP_POINTS.find(p => p.id === sel);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 340px", height: "100%", overflow: "hidden" }}>
      {/* MAP CANVAS */}
      <div style={{ position: "relative", background: "#0A0E1B", overflow: "hidden" }}>
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }} viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
          <defs><pattern id="gpsgrid" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M8 0 L0 0 0 8" fill="none" stroke="#ffffff09" strokeWidth="0.2"/></pattern></defs>
          <rect width="100" height="100" fill="url(#gpsgrid)"/>
          {/* roads */}
          <path d="M0 50 L100 46" stroke="#1A2036" strokeWidth="5" fill="none"/>
          <path d="M48 0 L54 100" stroke="#1A2036" strokeWidth="5" fill="none"/>
          <path d="M0 80 Q40 70 100 78" stroke="#161C2E" strokeWidth="3.5" fill="none"/>
          <path d="M20 0 Q30 40 18 100" stroke="#161C2E" strokeWidth="3.5" fill="none"/>
          {/* active route highlight */}
          <path d="M48 96 L50 50 L72 28" stroke="#FF5A1F" strokeWidth="1.4" fill="none" strokeDasharray="2 2" opacity="0.85"/>
          {/* you are here */}
          <circle cx="48" cy="96" r="2.4" fill="#3B6FF8"/>
          <circle cx="48" cy="96" r="4.2" fill="none" stroke="#3B6FF8" strokeWidth="0.5" opacity="0.5"/>
          {/* points */}
          {visible.map(p => {
            const lyr = layerOf(p.layer);
            const on = p.id === sel;
            return (
              <g key={p.id} onClick={() => setSel(p.id)} style={{ cursor: "pointer" }}>
                <circle cx={p.x} cy={p.y} r={on ? 4.6 : 3.4} fill={lyr.color} opacity={on ? 1 : 0.92} stroke="#0A0E1B" strokeWidth="0.6"/>
                {on && <circle cx={p.x} cy={p.y} r="6.4" fill="none" stroke={lyr.color} strokeWidth="0.5" opacity="0.6"/>}
              </g>
            );
          })}
        </svg>
        {/* point emojis layered on top (HTML for crispness) */}
        {visible.map(p => (
          <div key={p.id} onClick={() => setSel(p.id)} title={p.title[lang] || p.title.fr}
            style={{ position: "absolute", left: `${p.x}%`, top: `${p.y}%`, transform: "translate(-50%,-50%)", fontSize: p.id === sel ? 15 : 12, cursor: "pointer", filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.6))", transition: "font-size .12s" }}>{p.g}</div>
        ))}
        {/* layer toggles */}
        <div style={{ position: "absolute", top: 14, left: 14, display: "flex", flexDirection: "column", gap: 6, background: "rgba(11,15,31,0.82)", border: "1px solid #1F2949", borderRadius: 12, padding: 10, backdropFilter: "blur(6px)" }}>
          <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 8, letterSpacing: "0.14em", color: "#7A82A8", marginBottom: 2 }}>{t("COUCHES", "LAYERS")}</div>
          {MAP_LAYERS.map(l => {
            const on = active[l.k];
            return (
              <button key={l.k} onClick={() => { if (l.core) return; setActive(a => ({ ...a, [l.k]: !a[l.k] })); }} disabled={l.core}
                style={{ display: "flex", alignItems: "center", gap: 8, padding: "5px 9px", borderRadius: 8, border: "none", cursor: l.core ? "default" : "pointer", background: on ? l.color + "26" : "transparent", color: on ? "#fff" : "#6B7390", fontSize: 11.5, fontWeight: 600, fontFamily: "inherit", textAlign: "left" }}>
                <span style={{ width: 8, height: 8, borderRadius: 999, background: on ? l.color : "#3A4068" }}/>
                <span style={{ flex: 1 }}>{l.g} {t(l.fr, l.en)}</span>
                {l.core && <span style={{ fontSize: 8, color: l.color }}>●</span>}
              </button>
            );
          })}
        </div>
        {/* core axis banner */}
        <div style={{ position: "absolute", bottom: 14, left: 14, right: 354, padding: "9px 13px", background: "rgba(225,29,72,0.14)", border: "1px solid rgba(225,29,72,0.4)", borderRadius: 10, color: "#FB7185", fontSize: 11.5, fontWeight: 600, display: "flex", alignItems: "center", gap: 8, backdropFilter: "blur(4px)" }}>
          ⚠ {t("Axe central : sécurité routière temps réel (caméras + capteurs) — toujours active.", "Core axis: real-time road safety (cameras + sensors) — always on.")}
        </div>
        {/* offline toggle */}
        <button onClick={() => { setOffline(o => !o); toast.push(offline ? t("Mode hors-ligne désactivé","Offline mode off") : t("Carte téléchargée — navigation hors-ligne prête","Map downloaded — offline navigation ready"), "signal"); }}
          style={{ position: "absolute", top: 14, right: 14, display: "inline-flex", alignItems: "center", gap: 7, padding: "8px 13px", borderRadius: 999, border: `1px solid ${offline ? "#3DDC97" : "#1F2949"}`, background: offline ? "rgba(15,183,107,0.18)" : "rgba(11,15,31,0.82)", color: offline ? "#3DDC97" : "#C9CEE3", fontSize: 12, fontWeight: 600, cursor: "pointer", fontFamily: "inherit", backdropFilter: "blur(6px)" }}>
          {offline ? "✓ " + t("Hors-ligne prêt","Offline ready") : "⬇ " + t("Télécharger hors-ligne","Download offline")}
        </button>
      </div>

      {/* SIDE PANEL — la carte au trésor → bénéfices réels */}
      <div className="gk-scroll" style={{ background: C.paper, borderLeft: `1px solid ${C.softLine}`, overflowY: "auto", padding: 18 }}>
        {selected ? (
          <>
            <button onClick={() => setSel(null)} style={{ background: "none", border: "none", color: C.slate, fontSize: 13, cursor: "pointer", marginBottom: 14, padding: 0 }}>← {t("Tout voir", "See all")}</button>
            <div style={{ width: 56, height: 56, borderRadius: 14, background: layerOf(selected.layer).color + "22", display: "grid", placeItems: "center", fontSize: 26, marginBottom: 12 }}>{selected.g}</div>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, letterSpacing: "0.14em", color: layerOf(selected.layer).color }}>{(layerOf(selected.layer)[lang] || layerOf(selected.layer).fr).toUpperCase()}</div>
            <h3 style={{ fontSize: 19, fontWeight: 700, margin: "5px 0 8px" }}>{selected.title[lang] || selected.title.fr}</h3>
            <p style={{ fontSize: 13.5, color: C.slate, lineHeight: 1.5, marginBottom: 18 }}>{selected.meta[lang] || selected.meta.fr}</p>
            {selected.cta ? (
              <Button kind="flame" full onClick={() => { if (selected.route && navigate) navigate(selected.route); else toast.push(t("Itinéraire lancé", "Route started"), "signal"); }}>{selected.cta[lang] || selected.cta.fr} →</Button>
            ) : (
              <div style={{ padding: 13, background: "#FCEEF1", borderRadius: 10, borderLeft: `3px solid #E11D48`, fontSize: 12.5, color: "#b3163b", lineHeight: 1.5 }}>{t("Information de sécurité — Lia t'avertit en temps réel pendant la conduite.", "Safety info — Lia warns you in real time while driving.")}</div>
            )}
            <div style={{ marginTop: 16, padding: 12, background: "#fff", border: `1px solid ${C.softLine}`, borderRadius: 10, fontSize: 11.5, color: C.slate, lineHeight: 1.5 }}>
              🗺 {t("La carte mène au bénéfice réel : chaque point relie la conduite à un service GUIDKO.", "The map leads to real benefit: each point links driving to a GUIDKO service.")}
            </div>
          </>
        ) : (
          <>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, letterSpacing: "0.16em", color: C.flame, marginBottom: 6 }}>{t("AUTOUR DE TOI", "AROUND YOU")}</div>
            <h3 style={{ fontFamily: "'Instrument Serif', serif", fontSize: 26, fontWeight: 400, lineHeight: 1, marginBottom: 4 }}>{t("La route, vivante", "The road, alive")}</h3>
            <p style={{ fontSize: 12.5, color: C.slate, lineHeight: 1.5, marginBottom: 16 }}>{t("Ce que les GPS classiques ignorent : les ressources de l'écosystème, ici, maintenant.", "What classic GPS ignores: ecosystem resources, here, now.")}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {visible.filter(p => p.layer !== "safety").map(p => {
                const lyr = layerOf(p.layer);
                return (
                  <div key={p.id} onClick={() => setSel(p.id)} style={{ display: "flex", gap: 11, padding: "11px 12px", background: "#fff", border: `1px solid ${C.softLine}`, borderRadius: 11, cursor: "pointer", alignItems: "center" }}>
                    <div style={{ width: 36, height: 36, borderRadius: 10, background: lyr.color + "22", display: "grid", placeItems: "center", fontSize: 17, flexShrink: 0 }}>{p.g}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.title[lang] || p.title.fr}</div>
                      <div style={{ fontSize: 11, color: C.slate, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{p.meta[lang] || p.meta.fr}</div>
                    </div>
                    <span style={{ color: lyr.color, fontSize: 15 }}>→</span>
                  </div>
                );
              })}
            </div>
          </>
        )}
      </div>
    </div>
  );
}

function GpsDrive({ profile }) {
  const C = GK.colors;
  const { t, lang } = useI18n();
  const [on, setOn] = React.useState(false);
  const [i, setI] = React.useState(0);
  const [voice, setVoice] = React.useState(true);
  const [quizAns, setQuizAns] = React.useState(null);
  const [score, setScore] = React.useState(0);
  const step = GPS_DRIVE[i];
  const toneColor = { sky: C.sky, flame: C.flame, danger: "#E11D48", signal: C.signal };

  React.useEffect(() => { if (!on) return; const id = setInterval(() => { setI(x => (x + 1) % GPS_DRIVE.length); setQuizAns(null); }, 7000); return () => clearInterval(id); }, [on]);
  React.useEffect(() => {
    if (!on || !voice) return;
    try { const u = new SpeechSynthesisUtterance(step.lia[lang] || step.lia.fr); u.lang = lang === "fr" ? "fr-FR" : lang === "pt" ? "pt-BR" : lang === "es" ? "es-ES" : "en-US"; u.rate = 1.0; window.speechSynthesis.cancel(); window.speechSynthesis.speak(u); } catch (e) {}
  }, [i, on, voice]);

  return (
    <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1.5fr 1fr", overflow: "hidden" }}>
      <div style={{ position: "relative", background: "#070B18", overflow: "hidden" }}>
        <svg width="100%" height="100%" style={{ position: "absolute", inset: 0 }}>
          <defs><pattern id="gpsgrid" width="46" height="46" patternUnits="userSpaceOnUse"><path d="M46 0 L0 0 0 46" fill="none" stroke="#ffffff09" strokeWidth="1"/></pattern></defs>
          <rect width="100%" height="100%" fill="url(#gpsgrid)"/>
          <path d="M 70 620 Q 150 480 200 400 Q 260 300 240 200 Q 230 130 330 90" stroke="#1A2240" strokeWidth="30" fill="none" strokeLinecap="round"/>
          <path d="M 70 620 Q 150 480 200 400 Q 260 300 240 200 Q 230 130 330 90" stroke={toneColor[step.tone]} strokeWidth="5" fill="none" strokeDasharray="3 13" strokeLinecap="round"/>
          <circle cx="70" cy="620" r="9" fill={C.signal}/>
          <circle cx="330" cy="90" r="11" fill={C.flame}/>
          <g opacity="0.9"><circle cx="205" cy="395" r="15" fill="none" stroke="#E11D48" strokeWidth="2"/><text x="205" y="401" fontSize="15" textAnchor="middle">🚸</text></g>
          <g opacity="0.9"><circle cx="248" cy="250" r="14" fill="none" stroke="#FF8854" strokeWidth="2"/><text x="248" y="256" fontSize="13" textAnchor="middle">🚧</text></g>
        </svg>
        <div style={{ position: "absolute", top: 16, left: 16, right: 16, background: "rgba(7,11,24,0.9)", border: "1px solid #1F2949", borderRadius: 14, padding: "13px 16px", color: "#fff", display: "flex", gap: 13, backdropFilter: "blur(6px)" }}>
          <div style={{ width: 46, height: 46, borderRadius: 11, background: toneColor[step.tone], display: "grid", placeItems: "center", fontSize: 22, flexShrink: 0 }}>{step.icon}</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, color: "#7A82A8", letterSpacing: "0.14em" }}>{t("PROCHAINE MANŒUVRE", "NEXT MANEUVER")}</div>
            <div style={{ fontSize: 16, fontWeight: 600, marginTop: 2 }}>{step.instr[lang] || step.instr.fr}</div>
          </div>
          <div style={{ textAlign: "right" }}><div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 26, lineHeight: 1 }}>30</div><div style={{ fontSize: 9, color: "#7A82A8" }}>km/h</div></div>
        </div>
        {on && (
          <div style={{ position: "absolute", bottom: 16, left: 16, right: 16, background: "rgba(255,90,31,0.14)", border: "1px solid rgba(255,90,31,0.4)", borderRadius: 12, padding: "12px 15px", color: "#fff", display: "flex", gap: 10, alignItems: "center", backdropFilter: "blur(6px)" }}>
            <span style={{ fontSize: 18 }}>🔮</span>
            <div><div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 8.5, color: C.flame, letterSpacing: "0.14em" }}>{t("PRÉDICTION LIA", "LIA PREDICTION")}</div><div style={{ fontSize: 13.5, marginTop: 2 }}>{step.predict[lang] || step.predict.fr}</div></div>
          </div>
        )}
        {!on && <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", background: "rgba(5,8,20,0.65)" }}>
          <div style={{ textAlign: "center" }}>
            <div style={{ fontSize: 44, marginBottom: 12 }}>🛰</div>
            <Button kind="flame" size="lg" onClick={() => setOn(true)}>▶ {t("Démarrer la conduite", "Start driving")}</Button>
            <div style={{ color: "#7A82A8", fontSize: 12, marginTop: 12 }}>{t("Lia voit la route, le trafic, la météo, les piétons — et te guide.", "Lia sees the road, traffic, weather, pedestrians — and guides you.")}</div>
          </div>
        </div>}
      </div>

      <div className="gk-scroll" style={{ background: C.paper, padding: 18, display: "flex", flexDirection: "column", gap: 12, borderLeft: `1px solid ${C.softLine}`, overflowY: "auto" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <span style={{ width: 30, height: 30, borderRadius: 9, background: C.ink, color: C.flame, display: "grid", placeItems: "center", fontSize: 14 }}>✦</span>
          <div style={{ flex: 1 }}><div style={{ fontWeight: 700 }}>Lia</div><div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 9, color: on ? C.signal : C.slate, letterSpacing: "0.12em" }}>● {on ? t("EN DIRECT", "LIVE") : t("PRÊTE", "READY")}</div></div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: C.slate }}><Toggle on={voice} onChange={setVoice}/> {t("Voix", "Voice")}</div>
        </div>

        <Card style={{ padding: 16, borderLeft: `3px solid ${toneColor[step.tone]}` }}>
          <Label style={{ marginBottom: 7 }}>{t("GUIDANCE EN DIRECT", "LIVE GUIDANCE")}</Label>
          <div style={{ fontSize: 16, lineHeight: 1.45, fontWeight: 500 }}>{on ? (step.lia[lang] || step.lia.fr) : t("Lance la conduite pour activer la guidance de Lia.", "Start driving to activate Lia's guidance.")}</div>
        </Card>

        <Label>{t("CE QUE LIA SAIT, LÀ, MAINTENANT", "WHAT LIA KNOWS, RIGHT NOW")}</Label>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          {GPS_KNOWLEDGE.map(kn => (
            <div key={kn.k} style={{ background: "#fff", border: `1px solid ${C.softLine}`, borderRadius: 10, padding: "10px 11px" }}>
              <div style={{ fontSize: 11, color: C.slate, display: "flex", alignItems: "center", gap: 6 }}><span style={{ fontSize: 14 }}>{kn.g}</span>{t(kn.fr, kn.en)}</div>
              <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 4, color: toneColor[kn.tone] }}>{kn.val[lang] || kn.val.fr}</div>
            </div>
          ))}
        </div>

        {on && step.quiz && (
          <Card dark style={{ padding: 16 }}>
            <Label color="#7A82A8" style={{ marginBottom: 8 }}>★ {t("CODE EN SITUATION", "CODE IN CONTEXT")}</Label>
            <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 10 }}>{step.quiz.q[lang] || step.quiz.q.fr}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {step.quiz.a.map((opt, k) => {
                const answered = quizAns !== null;
                const correct = k === step.quiz.correct;
                const bg = answered ? (correct ? "#0FB76B" : (k === quizAns ? "#E11D48" : "#1F2542")) : "#1F2542";
                return <button key={k} disabled={answered} onClick={() => { setQuizAns(k); if (correct) setScore(s => s + 1); }} style={{ textAlign: "left", padding: "10px 13px", borderRadius: 8, border: "none", cursor: answered ? "default" : "pointer", background: bg, color: "#fff", fontSize: 13, fontFamily: "inherit" }}>{opt[lang] || opt.fr}{answered && correct ? " ✓" : ""}</button>;
              })}
            </div>
            {quizAns !== null && <div style={{ fontSize: 12, color: "#9098B5", marginTop: 9 }}>✦ {t("Lia transforme chaque trajet en révision. Score code :", "Lia turns every trip into revision. Code score:")} <strong style={{ color: C.flame }}>{score}</strong></div>}
          </Card>
        )}

        <div style={{ display: "flex", gap: 4 }}>{GPS_DRIVE.map((_, k) => <span key={k} style={{ flex: 1, height: 4, borderRadius: 2, background: k === i && on ? C.flame : "#E0DAC8" }}/>)}</div>
        {on && <Button kind="light" full onClick={() => { setOn(false); try { window.speechSynthesis.cancel(); } catch (e) {} }}>■ {t("Arrêter", "Stop")}</Button>}
        <div style={{ padding: 12, background: "#FFF1EB", borderRadius: 10, borderLeft: `3px solid ${C.flame}`, fontSize: 12, lineHeight: 1.5 }}>💡 {t("Lia guide et prévient — elle ne prend jamais le volant. Profil actif :", "Lia guides and prevents — it never takes the wheel. Active profile:")} <strong>{t(GPS_PROFILES.find(p => p.k === profile).fr, GPS_PROFILES.find(p => p.k === profile).en)}</strong></div>
      </div>
    </div>
  );
}

function GpsLearn() {
  const C = GK.colors;
  const { t, lang } = useI18n();
  const [i, setI] = React.useState(0);
  const [ans, setAns] = React.useState(null);
  const [stats, setStats] = React.useState({ ok: 0, total: 0 });
  const bank = [...GPS_DRIVE.map(s => s.quiz), ...GPS_EXAM.map(e => ({ q: e.q, a: e.a, correct: e.correct }))];
  const q = bank[i % bank.length];

  function answer(k) {
    if (ans !== null) return;
    setAns(k);
    setStats(s => ({ ok: s.ok + (k === q.correct ? 1 : 0), total: s.total + 1 }));
  }
  const pct = stats.total ? Math.round(stats.ok / stats.total * 100) : 0;

  return (
    <PageBody style={{ background: C.paper }}>
      <div style={{ maxWidth: 720, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12, marginBottom: 18 }}>
          <KPI label={t("RÉPONDUES", "ANSWERED")} value={stats.total}/>
          <KPI label={t("TAUX DE RÉUSSITE", "SUCCESS RATE")} value={pct + "%"} deltaTone="signal" delta={pct >= 80 ? t("Prêt examen", "Exam-ready") : t("Continue", "Keep going")}/>
          <KPI label={t("SÉRIE", "STREAK")} value={stats.ok} icon="🔥"/>
        </div>
        <Card style={{ padding: 26 }}>
          <Label style={{ marginBottom: 8 }}>★ {t("CODE EN CONTINU — ALIMENTÉ PAR LIA", "CONTINUOUS CODE — POWERED BY LIA")}</Label>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 28, lineHeight: 1.15, marginBottom: 18 }}>{q.q[lang] || q.q.fr}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {q.a.map((opt, k) => {
              const answered = ans !== null;
              const correct = k === q.correct;
              const bg = answered ? (correct ? "#EAF7F0" : (k === ans ? "#FCEEF1" : "#fff")) : "#fff";
              const bd = answered ? (correct ? C.signal : (k === ans ? "#E11D48" : C.softLine)) : C.softLine;
              return <button key={k} disabled={answered} onClick={() => answer(k)} style={{ textAlign: "left", padding: "14px 16px", borderRadius: 11, border: `1.5px solid ${bd}`, background: bg, cursor: answered ? "default" : "pointer", fontSize: 15, fontFamily: "inherit" }}>{opt[lang] || opt.fr}{answered && correct ? "  ✓" : ""}</button>;
            })}
          </div>
          {ans !== null && <Button kind="primary" full style={{ marginTop: 16 }} onClick={() => { setI(x => x + 1); setAns(null); }}>{t("Question suivante", "Next question")} →</Button>}
        </Card>
        <div style={{ marginTop: 14, padding: 14, background: C.ink, color: "#fff", borderRadius: 12, fontSize: 13, lineHeight: 1.5 }}>✦ {t("Lia personnalise les questions selon tes erreurs, ton profil et ce que tu rencontres réellement sur la route.", "Lia tailors questions to your mistakes, your profile and what you actually meet on the road.")}</div>
      </div>
    </PageBody>
  );
}

function GpsExam() {
  const C = GK.colors;
  const { t, lang } = useI18n();
  const [i, setI] = React.useState(0);
  const [ans, setAns] = React.useState(null);
  const [results, setResults] = React.useState([]);
  const done = results.length === GPS_EXAM.length;
  const q = GPS_EXAM[i];
  const correct = results.filter(Boolean).length;

  function answer(k) { if (ans !== null) return; setAns(k); }
  function next() { setResults(r => [...r, ans === q.correct]); setAns(null); setI(x => x + 1); }

  if (done) {
    const pass = correct >= 4;
    return (
      <PageBody style={{ background: C.paper }}>
        <Card dark style={{ padding: 40, textAlign: "center", maxWidth: 520, margin: "0 auto" }}>
          <div style={{ fontSize: 56, marginBottom: 8 }}>{pass ? "🎉" : "📚"}</div>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 60, lineHeight: 1 }}>{correct}/{GPS_EXAM.length}</div>
          <Pill tone={pass ? "signal" : "flame"} style={{ marginTop: 12 }}>{pass ? t("ADMIS — seuil officiel atteint", "PASS — official threshold met") : t("À retravailler", "Needs work")}</Pill>
          <div style={{ fontSize: 13, color: "#9098B5", marginTop: 16, lineHeight: 1.5 }}>{t("Lia a noté tes points faibles et adaptera ton entraînement en continu.", "Lia logged your weak points and will adapt your training continuously.")}</div>
          <Button kind="light" full style={{ marginTop: 20 }} onClick={() => { setI(0); setResults([]); setAns(null); }}>{t("Refaire un examen blanc", "Retry mock exam")}</Button>
        </Card>
      </PageBody>
    );
  }

  return (
    <PageBody style={{ background: C.paper }}>
      <div style={{ maxWidth: 640, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <Label>🎓 {t("EXAMEN BLANC OFFICIEL", "OFFICIAL MOCK EXAM")}</Label>
          <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, color: C.slate }}>{i + 1} / {GPS_EXAM.length}</span>
        </div>
        <div style={{ display: "flex", gap: 4, marginBottom: 18 }}>{GPS_EXAM.map((_, k) => <span key={k} style={{ flex: 1, height: 5, borderRadius: 3, background: k < results.length ? (results[k] ? C.signal : "#E11D48") : k === i ? C.flame : "#E0DAC8" }}/>)}</div>
        <Card style={{ padding: 26 }}>
          <div style={{ fontSize: 46, textAlign: "center", marginBottom: 12 }}>{q.img}</div>
          <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 26, lineHeight: 1.15, marginBottom: 18, textAlign: "center" }}>{q.q[lang] || q.q.fr}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {q.a.map((opt, k) => {
              const answered = ans !== null;
              const isC = k === q.correct;
              const bg = answered ? (isC ? "#EAF7F0" : (k === ans ? "#FCEEF1" : "#fff")) : "#fff";
              const bd = answered ? (isC ? C.signal : (k === ans ? "#E11D48" : C.softLine)) : C.softLine;
              return <button key={k} disabled={answered} onClick={() => answer(k)} style={{ textAlign: "left", padding: "14px 16px", borderRadius: 11, border: `1.5px solid ${bd}`, background: bg, cursor: answered ? "default" : "pointer", fontSize: 15, fontFamily: "inherit" }}>{opt[lang] || opt.fr}{answered && isC ? "  ✓" : ""}</button>;
            })}
          </div>
          {ans !== null && <>
            <div style={{ marginTop: 14, padding: 13, background: C.cream, borderRadius: 10, fontSize: 13, lineHeight: 1.5 }}>💬 <strong>Lia :</strong> {q.why[lang] || q.why.fr}</div>
            <Button kind="primary" full style={{ marginTop: 12 }} onClick={next}>{i + 1 < GPS_EXAM.length ? t("Suivant", "Next") : t("Voir le résultat", "See result")} →</Button>
          </>}
        </Card>
      </div>
    </PageBody>
  );
}

function GpsCoach({ profile, setProfile }) {
  const C = GK.colors;
  const { t, lang } = useI18n();
  const p = GPS_PROFILES.find(x => x.k === profile);
  const metrics = [
    { fr: "Anticipation", en: "Anticipation", v: 86 },
    { fr: "Respect du code", en: "Code compliance", v: 92 },
    { fr: "Éco-conduite", en: "Eco-driving", v: 74 },
    { fr: "Souplesse", en: "Smoothness", v: 80 },
  ];
  return (
    <PageBody style={{ background: C.paper }}>
      <div style={{ maxWidth: 820, margin: "0 auto" }}>
        <Label style={{ marginBottom: 12 }}>✦ {t("COACHING ADAPTÉ — CHAQUE PROFIL, CHAQUE SITUATION", "ADAPTIVE COACHING — EVERY PROFILE, EVERY SITUATION")}</Label>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 18 }}>
          {GPS_PROFILES.map(pr => {
            const on = pr.k === profile;
            return <button key={pr.k} onClick={() => setProfile(pr.k)} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "9px 15px", borderRadius: 11, border: `1px solid ${on ? C.ink : C.softLine}`, background: on ? C.ink : "#fff", color: on ? "#fff" : C.ink, cursor: "pointer", fontSize: 13.5, fontWeight: on ? 600 : 500, fontFamily: "inherit" }}>{pr.g} {t(pr.fr, pr.en)}</button>;
          })}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
          <Card dark style={{ padding: 24 }}>
            <div style={{ fontSize: 32, marginBottom: 10 }}>{p.g}</div>
            <div style={{ fontFamily: "'Instrument Serif', serif", fontSize: 30, lineHeight: 1 }}>{t(p.fr, p.en)}</div>
            <div style={{ fontSize: 13.5, color: "#C9CEE3", marginTop: 10, lineHeight: 1.5 }}>{p.focus[lang] || p.focus.fr}</div>
            <div style={{ marginTop: 16, padding: 13, background: "#1F2542", borderRadius: 10, borderLeft: `3px solid ${C.flame}`, fontSize: 12.5, color: "#C9CEE3", lineHeight: 1.5 }}>✦ {t("Lia adapte son volume sonore, sa fréquence de rappels et son niveau de détail à ce profil.", "Lia adapts its volume, reminder frequency and detail level to this profile.")}</div>
          </Card>
          <Card style={{ padding: 24 }}>
            <Label style={{ marginBottom: 16 }}>{t("BILAN DE CONDUITE — DERNIER TRAJET", "DRIVING REPORT — LAST TRIP")}</Label>
            {metrics.map(m => (
              <div key={m.fr} style={{ marginBottom: 14 }}>
                <div style={{ display: "flex", justifyContent: "space-between", fontSize: 13, marginBottom: 5 }}><span>{t(m.fr, m.en)}</span><span className="mono" style={{ fontWeight: 600 }}>{m.v}%</span></div>
                <div style={{ height: 7, borderRadius: 4, background: C.cream, overflow: "hidden" }}><div style={{ height: "100%", width: m.v + "%", background: m.v >= 85 ? C.signal : m.v >= 75 ? C.flame : "#E11D48", borderRadius: 4 }}/></div>
              </div>
            ))}
            <div style={{ marginTop: 8, fontSize: 12.5, color: C.slate, lineHeight: 1.5 }}>{t("Astuce Lia : anticipe davantage les ralentissements pour gagner en souplesse et en sécurité.", "Lia tip: anticipate slowdowns more to gain smoothness and safety.")}</div>
          </Card>
        </div>

        <Card style={{ padding: 20, marginTop: 14, background: "#FBF8EE", display: "flex", gap: 14, alignItems: "center" }}>
          <span style={{ fontSize: 26 }}>🤝</span>
          <div style={{ flex: 1, fontSize: 13, color: C.slate, lineHeight: 1.5 }}>{t("Lia est un outil au service du moniteur et du conducteur — elle renforce leur métier, ne le remplace pas. Plus d'humains formés, mieux accompagnés.", "Lia is a tool serving instructors and drivers — it strengthens their craft, never replaces it. More people trained, better supported.")}</div>
        </Card>
      </div>
    </PageBody>
  );
}

window.GpsApp = GpsApp;
window.LiaGpsApp = GpsApp; // alias produit autonome