/* GUIDKO App — Moniteur (Instructor) + Accueil (Front desk) screens */

// ============ MONITEUR ============
function MoniteurApp({ section, navigate }) {
  switch (section) {
    case "overview": return <MoniteurOverview navigate={navigate}/>;
    case "planning": return <PlanningModule role="moniteur"/>;
    case "students": return <StudentsModule role="moniteur"/>;
    case "vehicles": return <AutoModule role="moniteur" navigate={navigate}/>;
    case "earnings": return <MoniteurEarnings/>;
    case "profile": return <SettingsModule role="moniteur" navigate={navigate}/>;
    default: return <MoniteurOverview navigate={navigate}/>;
  }
}

function MoniteurOverview({ navigate }) {
  const C = GK.colors;
  const { t } = useI18n();
  const store = useStore();
  const toast = useToast();
  const me = store.state.user || { name: "Marc Lefèvre" };
  const upName = (me.name || "Marc Lefèvre").toUpperCase();
  const myLessons = store.state.lessons.filter(l => l.instructorId === "m1" && l.day === 0).sort((a,b) => a.hour - b.hour);
  const live = myLessons.find(l => l.status === "live");
  const liveStudent = live && studentById(store.state, live.studentId);

  return (
    <>
      <Topbar subtitle={t(`LUNDI 18 MARS · ${upName}`,`MON 18 MAR · ${upName}`)} title={t("Ta journée, en clair.","Your day, made clear.")}
        actions={<Button kind="primary" onClick={() => toast.push(t("Arrivée pointée à 08:00","Clocked in at 08:00"),"signal")}>{t("Pointer arrivée","Clock in")}</Button>}/>
      <PageBody>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          <KPI label={t("HEURES AUJOURD'HUI","HOURS TODAY")} value="6,5h" sub={t("dont 2h conduite","2h driving")}/>
          <KPI label={t("ÉLÈVES VUS","STUDENTS SEEN")} value={`${myLessons.filter(l=>l.status==="done").length}/${myLessons.length}`} sub={t("aujourd'hui","today")}/>
          <KPI label={t("PROCHAIN","NEXT")} value={live ? "Live" : (myLessons[0] ? `${String(myLessons[0].hour).padStart(2,"0")}h` : "—")} delta={liveStudent ? liveStudent.name.split(" ")[0] : ""} deltaTone="flame"/>
          <KPI label={t("CETTE SEMAINE","THIS WEEK")} value="32h" delta="+4h" sub={t("vs sem. dernière","vs last week")}/>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 14, marginTop: 14 }}>
          <Card style={{ padding: 22 }}>
            <Label style={{ marginBottom: 16 }}>{t("TIMELINE · AUJOURD'HUI","TIMELINE · TODAY")}</Label>
            <div style={{ position: "relative", paddingLeft: 48 }}>
              <div style={{ position: "absolute", left: 58, top: 4, bottom: 4, width: 1, background: C.softLine }}/>
              {myLessons.map((l) => {
                const s = studentById(store.state, l.studentId);
                const ty = store.state.types[l.type];
                const isLive = l.status === "live";
                return (
                  <div key={l.id} style={{ position: "relative", display: "flex", alignItems: "center", gap: 16, padding: "9px 0" }}>
                    <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, color: C.slate, width: 40, position: "absolute", left: -48 }}>{String(l.hour).padStart(2,"0")}:00</span>
                    <span style={{ position: "absolute", left: 3, width: 12, height: 12, borderRadius: 6, background: isLive ? C.flame : "#fff", border: `2px solid ${ty.color}`, boxShadow: isLive ? `0 0 0 4px ${C.flame}33` : "none" }}/>
                    <div style={{ flex: 1, padding: "12px 16px", background: isLive ? "#fff" : "#FBF8EE", borderRadius: 9, border: `1px solid ${isLive ? C.flame : C.softLine}`, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{s ? s.name : "—"} · {ty.l}</div>
                      <Pill tone={isLive ? "flame" : l.status === "done" ? "signal" : "neutral"}>{isLive ? t("En cours","Live") : l.status === "done" ? t("Terminé","Done") : t("À venir","Soon")}</Pill>
                    </div>
                  </div>
                );
              })}
            </div>
          </Card>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {live && liveStudent ? (
              <Card style={{ padding: 22, borderLeft: `3px solid ${C.flame}` }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}><Pill tone="flame">● {t("EN COURS","LIVE")}</Pill><span style={{ fontSize: 12, color: C.slate }}>{String(live.hour).padStart(2,"0")}:00 — {String(live.hour+1).padStart(2,"0")}:00</span></div>
                <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 14 }}>
                  <Avatar name={liveStudent.name} size={52} tone={liveStudent.tone}/>
                  <div><div style={{ fontSize: 18, fontWeight: 600 }}>{liveStudent.name}</div><div style={{ fontSize: 13, color: C.slate }}>{store.state.types[live.type].l} · {liveStudent.hours}e heure</div></div>
                </div>
                <Button kind="primary" full style={{ marginTop: 18 }} onClick={() => { store.setLessonStatus(live.id, "done"); toast.push(t("Cours terminé. Bravo !","Lesson ended. Nice!"),"signal"); }}>{t("Terminer le cours","End lesson")}</Button>
              </Card>
            ) : (
              <Card style={{ padding: 22 }}><Label style={{ marginBottom: 8 }}>{t("AUCUN COURS EN COURS","NO LIVE LESSON")}</Label><div style={{ fontSize: 14, color: C.slate }}>{t("Profite de ta pause ☕","Enjoy your break ☕")}</div></Card>
            )}
            <Card style={{ padding: 22 }}>
              <Label style={{ marginBottom: 8 }}>{t("MES GAINS · MARS","MY EARNINGS · MAR")}</Label>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}><span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 44, lineHeight: 1 }}>2 840 €</span><Pill tone="signal">+18%</Pill></div>
              <div style={{ marginTop: 14 }}><BarChart data={[{l:"S1",v:640},{l:"S2",v:720},{l:"S3",v:680},{l:"S4",v:800}]} width={280} height={110} accentIndex={3}/></div>
            </Card>
            <MoniteurModes/>
          </div>
        </div>
      </PageBody>
    </>
  );
}

function MoniteurEarnings() {
  const C = GK.colors;
  const { t } = useI18n();
  return (
    <>
      <Topbar subtitle={t("RÉMUNÉRATION","EARNINGS")} title={t("Mes gains","My earnings")} search={false}/>
      <PageBody>
        <Card dark style={{ padding: 28, marginBottom: 14 }}>
          <Label color="#7A82A8" style={{ marginBottom: 8 }}>{t("MARS 2026","MAR 2026")}</Label>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14 }}><span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 72, lineHeight: 0.95 }}>2 840 €</span><Pill tone="signal">+18%</Pill></div>
          <div style={{ fontSize: 13, color: "#9098B5", marginTop: 6 }}>{t("142h facturables · prochain virement 31 mars","142h billable · next payout Mar 31")}</div>
          <div style={{ marginTop: 18 }}><SparkLine data={[1400,1700,1980,2200,2480,2640,2820,2840]} color={C.flame} width={500} height={70}/></div>
        </Card>
        <Card style={{ padding: 22 }}>
          <Label style={{ marginBottom: 12 }}>{t("DÉTAIL HEBDOMADAIRE","WEEKLY BREAKDOWN")}</Label>
          {[["S12","38h","800 €",14],["S11","32h","680 €",-8],["S10","36h","720 €",4],["S09","30h","640 €",-2]].map(([w,h,v,g],i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", padding: "12px 0", borderTop: i===0?"none":`1px solid ${C.softLine}` }}>
              <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, color: C.slate, width: 40 }}>{w}</span>
              <div style={{ flex: 1, marginLeft: 12 }}><div style={{ fontSize: 14, fontWeight: 600 }}>{h}</div><div style={{ fontSize: 11, color: g>0?C.signal:C.flame }}>{g>0?"+":""}{g}% {t("vs sem.","vs wk")}</div></div>
              <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 15, fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </Card>
        <Card style={{ padding: 22, marginTop: 14, borderLeft: `3px solid ${C.flame}` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 6 }}>
            <span style={{ width: 28, height: 28, borderRadius: 8, background: C.ink, color: C.flame, display: "grid", placeItems: "center", fontSize: 14 }}>✦</span>
            <Label style={{ marginBottom: 0 }}>{t("LIA BOOSTE TES REVENUS","LIA BOOSTS YOUR EARNINGS")}</Label>
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
            <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 40, lineHeight: 1 }}>+540 €</span>
            <Pill tone="signal">+24% {t("ce mois","this month")}</Pill>
          </div>
          <div style={{ fontSize: 13, color: C.slate, marginTop: 8, lineHeight: 1.5 }}>
            {t("Tes heures assistées par Lia se facturent plus cher et tu en gardes 62%. Lia te seconde — elle ne te remplace pas.","Your Lia-assisted hours bill higher and you keep 62%. Lia supports you — it doesn't replace you.")}
          </div>
        </Card>
          {/* Cross-service: moniteur → conducteur covoiturage / livreur */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 14 }}>
            <Card style={{ padding: 18, background: "#FBF8EE" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ fontSize: 20 }}>⇅</span><div style={{ fontWeight: 600, fontSize: 14 }}>{t("Covoiturer après ta journée","Carpool after your day")}</div></div>
              <div style={{ fontSize: 12.5, color: C.slate, lineHeight: 1.5 }}>{t("Transforme ton trajet retour en revenu. Tes élèves cherchent des trajets.","Turn your commute into income. Your students look for rides.")}</div>
              <Button size="sm" kind="ink" style={{ marginTop: 12 }} onClick={() => navigate("/covoit/driver")}>{t("Devenir conducteur","Become driver")} →</Button>
            </Card>
            <Card style={{ padding: 18 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}><span style={{ fontSize: 20 }}>🚴</span><div style={{ fontWeight: 600, fontSize: 14 }}>{t("Livrer entre tes cours","Deliver between lessons")}</div></div>
              <div style={{ fontSize: 12.5, color: C.slate, lineHeight: 1.5 }}>{t("Complète ta rémunération en livrant avec ton véhicule.","Supplement your income by delivering with your vehicle.")}</div>
              <Button size="sm" kind="ghost" style={{ marginTop: 12 }} onClick={() => navigate("/livraison/livreur")}>{t("GUIDKO Livraison","GUIDKO Delivery")} →</Button>
            </Card>
          </div>
      </PageBody>
    </>
  );
}

function AccueilApp({ section, navigate }) {
  switch (section) {
    case "overview": return <AccueilHall navigate={navigate}/>;
    case "enroll": return <EnrollModule/>;
    case "students": return <StudentsModule role="accueil"/>;
    case "planning": return <PlanningModule role="accueil"/>;
    case "vehicles": return <AutoModule role="accueil" navigate={navigate}/>;
    case "settings": return <SettingsModule role="accueil" navigate={navigate}/>;
    default: return <AccueilHall navigate={navigate}/>;
  }
}

function AccueilHall({ navigate }) {
  const C = GK.colors;
  const { t } = useI18n();
  const store = useStore();
  const toast = useToast();
  const newStudents = store.state.students.filter(s => s.status === "new");
  const todayVisits = [
    { name: "Manon Girard", reason: t("Signature contrat","Contract signing"), time: "09:30", tone: 0, status: "wait" },
    { name: "Julien Pré", reason: t("Renseignements forfait","Package inquiry"), time: "10:00", tone: 2, status: "wait" },
    { name: "Léa Mercier", reason: t("Dépôt dossier examen","Exam file drop"), time: "11:15", tone: 1, status: "done" },
    { name: "Karim Sow", reason: t("Paiement mensualité","Installment payment"), time: "14:00", tone: 3, status: "upcoming" },
  ];

  return (
    <>
      <Topbar subtitle={t("ACCUEIL · AUTO-ÉCOLE LUBASA","FRONT DESK · LUBASA")} title={t("Hall d'accueil","Reception hall")}
        actions={<Button kind="primary" onClick={() => navigate("/accueil/enroll")}>+ {t("Nouvelle inscription","New enrollment")}</Button>}/>
      <PageBody>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          <KPI label={t("VISITES AUJOURD'HUI","TODAY'S VISITS")} value="12" delta="+3" sub={t("4 sur rendez-vous","4 booked")} icon="◎"/>
          <KPI label={t("INSCRIPTIONS · MOIS","ENROLLMENTS · MO")} value="8" delta="+2" sub={t("objectif 10","target 10")} icon="✎"/>
          <KPI label={t("DOSSIERS À TRAITER","FILES TO PROCESS")} value={newStudents.length} delta={t("à valider","to validate")} deltaTone="flame" icon="!"/>
          <KPI label={t("APPELS EN ATTENTE","CALLS WAITING")} value="3" deltaTone="sky" delta={t("rappeler","call back")} icon="✆"/>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 14, marginTop: 14 }}>
          <Card style={{ padding: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
              <Label>{t("FILE D'ATTENTE · AUJOURD'HUI","QUEUE · TODAY")}</Label>
              <Pill tone="flame">2 {t("en attente","waiting")}</Pill>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {todayVisits.map((v, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 14px", borderRadius: 10, background: v.status === "wait" ? "#FFF1EB" : "#fff", border: `1px solid ${v.status === "wait" ? C.flame+"44" : C.softLine}` }}>
                  <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, color: C.slate, width: 42 }}>{v.time}</span>
                  <Avatar name={v.name} size={36} tone={v.tone}/>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 14, fontWeight: 600 }}>{v.name}</div><div style={{ fontSize: 12, color: C.slate }}>{v.reason}</div></div>
                  {v.status === "wait" ? <Button size="sm" kind="flame" onClick={() => toast.push(t("Élève appelé au comptoir","Student called to desk"),"signal")}>{t("Recevoir","Receive")}</Button>
                    : v.status === "done" ? <Pill tone="signal">{t("Reçu","Done")}</Pill> : <Pill tone="neutral">{t("À venir","Soon")}</Pill>}
                </div>
              ))}
            </div>
          </Card>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Card style={{ padding: 22 }}>
              <Label style={{ marginBottom: 12 }}>{t("DOSSIERS À VALIDER","FILES TO VALIDATE")}</Label>
              {newStudents.length ? newStudents.map(s => (
                <div key={s.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderTop: `1px solid ${C.softLine}` }}>
                  <Avatar name={s.name} size={32} tone={s.tone}/>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 13, fontWeight: 600 }}>{s.name}</div><div style={{ fontSize: 11, color: C.slate }}>{t("Inscrit","Enrolled")} {s.enrolled}</div></div>
                  <Button size="sm" kind="light" onClick={() => { store.updateStudent(s.id, { status: "active" }); toast.push(t("Dossier validé","File validated"),"signal"); }}>{t("Valider","Validate")}</Button>
                </div>
              )) : <div style={{ fontSize: 13, color: C.slate, padding: "10px 0" }}>{t("Tous les dossiers sont à jour ✓","All files up to date ✓")}</div>}
            </Card>
            <Card dark style={{ padding: 22 }}>
              <Label color="#7A82A8" style={{ marginBottom: 8 }}>{t("RACCOURCIS","SHORTCUTS")}</Label>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                {[[t("Inscrire","Enroll"),"✎","/accueil/enroll"],[t("Planning","Schedule"),"▤","/accueil/planning"],[t("Élèves","Students"),"★","/accueil/students"],[t("Véhicules","Vehicles"),"⇄","/accueil/vehicles"]].map(([n,g,r]) => (
                  <div key={n} onClick={() => navigate(r)} style={{ padding: 14, background: "#1F2542", borderRadius: 9, cursor: "pointer", display: "flex", alignItems: "center", gap: 10 }}>
                    <span style={{ color: C.flame, fontSize: 16 }}>{g}</span><span style={{ fontSize: 13, color: "#fff" }}>{n}</span>
                  </div>
                ))}
              </div>
            </Card>
          </div>
        </div>
      </PageBody>
    </>
  );
}

function EnrollModule() {
  const C = GK.colors;
  const { t } = useI18n();
  const store = useStore();
  const toast = useToast();
  const [f, setF] = React.useState({ name: "", age: "18", email: "", phone: "", pkg: "20", instructorId: "m1", pay: "full" });
  const up = (k, v) => setF(s => ({ ...s, [k]: v }));
  const valid = f.name && f.email;

  function submit() {
    store.addStudent({ name: f.name, age: +f.age, tone: Math.floor(Math.random()*5), code: 0, hours: 0, hoursTotal: +f.pkg, progress: 5, instructorId: f.instructorId, balance: +f.pkg * 42, status: "new", phase: "Code", enrolled: "Mar 2026" });
    toast.push(t("Inscription enregistrée ! Email de bienvenue envoyé.","Enrollment saved! Welcome email sent."), "signal");
    setF({ name: "", age: "18", email: "", phone: "", pkg: "20", instructorId: "m1", pay: "full" });
  }

  return (
    <>
      <Topbar subtitle={t("NOUVELLE INSCRIPTION","NEW ENROLLMENT")} title={t("Inscrire un élève","Enroll a student")} search={false}/>
      <PageBody>
        <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 20, maxWidth: 900 }}>
          <Card style={{ padding: 24 }}>
            <Label style={{ marginBottom: 16 }}>{t("INFORMATIONS ÉLÈVE","STUDENT INFO")}</Label>
            <Input label={t("Nom complet","Full name")} value={f.name} onChange={v => up("name", v)} placeholder="Prénom Nom"/>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <Input label={t("Âge","Age")} value={f.age} onChange={v => up("age", v)} type="number"/>
              <Input label={t("Téléphone","Phone")} value={f.phone} onChange={v => up("phone", v)} placeholder="06 12 34 56 78"/>
            </div>
            <Input label="Email" value={f.email} onChange={v => up("email", v)} placeholder="email@exemple.fr"/>
            <Select label={t("Moniteur attribué","Assigned instructor")} value={f.instructorId} onChange={v => up("instructorId", v)} options={store.state.instructors.map(m => ({ value: m.id, label: m.name }))}/>
          </Card>

          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            <Card style={{ padding: 24 }}>
              <Label style={{ marginBottom: 14 }}>{t("FORFAIT","PACKAGE")}</Label>
              {[["20",t("Forfait 20h · Permis B","20h · B license"),"840 €"],["30",t("Forfait 30h · Confort","30h · Comfort"),"1 260 €"],["40",t("Forfait 40h · Sérénité","40h · Serenity"),"1 680 €"]].map(([v,n,p]) => (
                <div key={v} onClick={() => up("pkg", v)} style={{ padding: 14, borderRadius: 10, marginBottom: 8, cursor: "pointer", background: f.pkg === v ? "#FF5A1F0D" : "#fff", border: `1.5px solid ${f.pkg === v ? C.flame : C.softLine}` }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span style={{ fontSize: 13, fontWeight: 600 }}>{n}</span>
                    <span style={{ fontFamily: "'Instrument Serif', serif", fontSize: 20 }}>{p}</span>
                  </div>
                </div>
              ))}
            </Card>
            <Card style={{ padding: 24 }}>
              <Label style={{ marginBottom: 12 }}>{t("PAIEMENT","PAYMENT")}</Label>
              <Segmented value={f.pay} onChange={v => up("pay", v)} options={[{value:"full",label:t("Comptant","Full")},{value:"4x",label:"4×"}]}/>
              <Button kind="flame" full style={{ marginTop: 16, opacity: valid ? 1 : 0.5 }} onClick={() => valid && submit()}>{t("Valider l'inscription","Confirm enrollment")} →</Button>
            </Card>
          </div>
        </div>
      </PageBody>
    </>
  );
}

// Mode double du moniteur : affilié à des auto-écoles ET/OU indépendant.
function MoniteurModes() {
  const C = GK.colors;
  const { t } = useI18n();
  const toast = useToast();
  const [indep, setIndep] = React.useState(true);
  const [schools, setSchools] = React.useState([
    { name: "Auto-École Lubasa", role: t("Salarié · 24h/sem","Staff · 24h/wk"), on: true, share: "0%" },
    { name: "Conduite+ Lyon",     role: t("Vacataire · à la demande","Freelance · on demand"), on: true, share: "15%" },
    { name: "Drive Académie",     role: t("Invitation reçue","Invite received"), on: false, share: "—" },
  ]);
  return (
    <Card style={{ padding: 20 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
        <Label style={{ flex: 1 }}>{t("MES MODES DE TRAVAIL","MY WORK MODES")}</Label>
        <Pill tone="signal">{schools.filter(s=>s.on).length + (indep?1:0)} {t("actifs","active")}</Pill>
      </div>
      <p style={{ fontSize: 12, color: C.slate, margin: "0 0 14px", lineHeight: 1.45 }}>{t("Travaille en auto-école ET en indépendant — en même temps. Cet espace reste privé : le gérant n'y a pas accès.","Work for schools AND solo — at once. This space stays private: the manager can't see it.")}</p>

      {/* Mode indépendant */}
      <div style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", borderRadius: 10, background: indep ? "#FFF1EB" : C.paper, border: `1px solid ${indep ? C.flame+"55" : C.softLine}`, marginBottom: 10 }}>
        <span style={{ fontSize: 20 }}>♟</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 13.5, fontWeight: 600 }}>{t("Mode indépendant","Independent mode")}</div>
          <div style={{ fontSize: 11, color: C.slate }}>{t("Tes propres élèves, tes tarifs, 100% des gains.","Your own students, your rates, 100% earnings.")}</div>
        </div>
        <Toggle on={indep} onChange={setIndep}/>
      </div>

      {/* Auto-écoles affiliées */}
      <Label style={{ marginBottom: 8 }}>{t("AUTO-ÉCOLES AFFILIÉES","AFFILIATED SCHOOLS")}</Label>
      <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
        {schools.map((s, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 11px", borderRadius: 9, background: C.paper }}>
            <span style={{ width: 30, height: 30, borderRadius: 8, background: "#fff", border: `1px solid ${C.softLine}`, display: "grid", placeItems: "center", fontSize: 14 }}>🎓</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{s.name}</div>
              <div style={{ fontSize: 11, color: C.slate }}>{s.role}{s.share !== "—" ? ` · ${t("commission","fee")} ${s.share}` : ""}</div>
            </div>
            {s.on
              ? <button onClick={() => setSchools(ss => ss.map((x,j)=>j===i?{...x,on:false}:x))} style={{ padding: "5px 10px", borderRadius: 999, border: `1px solid ${C.signal}`, background: "#EAF7F0", color: "#0a7d4a", fontSize: 11, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>✓ {t("Actif","On")}</button>
              : <button onClick={() => { setSchools(ss => ss.map((x,j)=>j===i?{...x,on:true,role:t("Vacataire","Freelance")}:x)); toast.push(t("Invitation acceptée","Invite accepted"),"signal"); }} style={{ padding: "5px 10px", borderRadius: 999, border: `1px solid ${C.flame}`, background: "#fff", color: C.flame, fontSize: 11, fontWeight: 600, cursor: "pointer", fontFamily: "inherit" }}>{t("Accepter","Accept")}</button>}
          </div>
        ))}
      </div>
    </Card>
  );
}

Object.assign(window, { MoniteurApp, AccueilApp, MoniteurModes });