// Classe detail — desktop master/detail: student list on the left, selected student panel on right.

function ClasseDetail({ classeId, role, onBack }) {
  const { CLASSES, TEACHERS, STUDENTS_CE1 } = window.SCOLIA;
  const tById = Object.fromEntries(TEACHERS.map(tc => [tc.id, tc]));
  const c = CLASSES.find(x => x.id === classeId) || CLASSES[0];
  const teacher = tById[c.teacher];
  const students = STUDENTS_CE1;
  const [selId, setSel] = React.useState(students[0].id);
  const sel = students.find(s => s.id === selId);
  const [tab, setTab] = React.useState("suivi");
  const [search, setSearch] = React.useState("");
  const { toast, editEleve, editTeacher, confirm, t } = useApp();
  const filtered = students.filter(s => s.name.toLowerCase().includes(search.toLowerCase()));

  const [statuses, setStatuses] = React.useState(
    Object.fromEntries(students.map(s => [s.id, s.status]))
  );

  const presentCount = Object.values(statuses).filter(v => v === "ok").length;
  const lateCount    = Object.values(statuses).filter(v => v === "warn").length;
  const absentCount  = Object.values(statuses).filter(v => v === "bad").length;

  const changeStatus = (studentId, newStatus) => {
    setStatuses(prev => {
      const updated = {...prev, [studentId]: newStatus};
      const cls = window.SCOLIA.CLASSES.find(x => x.id === classeId);
      if (cls) {
        cls.present = Object.values(updated).filter(v => v === "ok").length;
        cls.late    = Object.values(updated).filter(v => v === "warn").length;
        cls.absent  = Object.values(updated).filter(v => v === "bad").length;
      }
      return updated;
    });
    toast("Présence mise à jour");
  };

  const STATUS_OPTS = [
    { v: "ok",   l: t("status_btn_p"), title: t("status_present"), col: "var(--brand)"  },
    { v: "warn", l: t("status_btn_r"), title: t("status_late"),    col: "var(--warn)"   },
    { v: "bad",  l: t("status_btn_a"), title: t("status_absent"),  col: "var(--danger)" },
  ];

  return (
    <div>
      <Topbar
        left={
          <div className="row gap-3" style={{alignItems: "center"}}>
            <button className="btn btn-ghost" onClick={onBack}>
              <Icons.ChevL size={16}/>{t("nav_classes")}
            </button>
            <div>
              <div className="eyebrow">Classe · {c.code}</div>
              <div className="h1" style={{marginTop: 2, fontSize: 32}}>{c.name}</div>
            </div>
          </div>
        }
        right={
          <>
            <button className="card row gap-3"
                    onClick={() => editTeacher(teacher)}
                    style={{padding: "6px 12px 6px 8px", alignItems: "center", borderRadius: 12, cursor: "pointer", background: "var(--surface)"}}>
              <Photo src={teacher.img} size={32}/>
              <div style={{textAlign: "left"}}>
                <div style={{fontSize: 11.5, color: "var(--brand)", fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase"}}>{t("teacher_role")}</div>
                <div style={{fontWeight: 700, color: "var(--brand-ink)"}}>{teacher.name}</div>
              </div>
            </button>
            <button className="icon-btn" onClick={() => toast("Conversation ouverte avec " + teacher.first)}><Icons.Msg size={18}/></button>
            <DropMenu trigger={<button className="icon-btn"><Icons.Dots size={18}/></button>} items={[
              {icon: Icons.Doc,   label: t("export_list"),    onClick: () => toast("Export CSV de la classe")},
              {icon: Icons.Paper, label: t("print_presence"), onClick: () => toast("Impression lancée")},
              {icon: Icons.Cal,   label: t("hist_presence"),  onClick: () => toast("Historique ouvert")},
              "-",
              {icon: Icons.X, label: t("archive_class"), danger: true,
               onClick: () => confirm({title: "Archiver cette classe ?", body: "Les élèves resteront accessibles via les archives.", confirmLabel: "Archiver", danger: true, onConfirm: () => toast("Classe archivée")})},
            ]}/>
            <button className="btn btn-primary" onClick={() => editEleve(sel)}><Icons.Plus size={16}/>{t("add_obs")}</button>
          </>
        }
      />

      <div className="card card-pad" style={{marginBottom: 20}}>
        <div className="row" style={{alignItems: "center", justifyContent: "space-between", marginBottom: 16}}>
          <div>
            <div className="eyebrow">{t("presence_du_jour")}</div>
            <div className="row gap-2" style={{alignItems: "baseline", marginTop: 4}}>
              <span className="display" style={{fontSize: 44}}>{presentCount}</span>
              <span style={{color: "var(--ink-4)", fontSize: 22, fontWeight: 600}}>/ {students.length}</span>
              <span className="chip" style={{marginLeft: 14}}><Icons.Clock size={12}/>9h05 · pointé par {teacher.first}</span>
            </div>
          </div>
          <div className="row gap-2">
            <button className="btn" onClick={() => toast("Vue jour active")}><Icons.Cal size={14}/>{t("today_btn")}</button>
            <button className="btn" onClick={() => toast("Historique présence ouvert")}>{t("history_btn")}</button>
          </div>
        </div>
        <div className="pbar" style={{height: 12, marginBottom: 12}}>
          <div className="ok"   style={{width: `${presentCount / students.length * 100}%`}}/>
          <div className="warn" style={{width: `${lateCount    / students.length * 100}%`}}/>
          <div className="bad"  style={{width: `${absentCount  / students.length * 100}%`}}/>
        </div>
        <div className="row gap-4">
          <span className="status ok"><span className="dot"/>{presentCount} {t("chip_presents")}</span>
          {lateCount   > 0 && <span className="status warn"><span className="dot"/>{lateCount} {t("chip_retards")}</span>}
          {absentCount > 0 && <span className="status bad"><span className="dot"/>{absentCount} {t("chip_absents")}</span>}
        </div>
      </div>

      <div className="row gap-5" style={{alignItems: "flex-start"}}>
        <div className="card" style={{flex: 1.05, minWidth: 0}}>
          <div className="row" style={{padding: "20px 22px 14px", justifyContent: "space-between", alignItems: "center"}}>
            <div className="h2">{t("students_label")} <span style={{color:"var(--ink-4)", fontWeight: 600, fontSize: 16}}>· {students.length}</span></div>
            <div className="row gap-2">
              <div className="search" style={{padding: "6px 10px"}}>
                <Icons.Search size={14}/>
                <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t("filter_ph")} style={{width: 140}}/>
              </div>
              <DropMenu trigger={<button className="btn"><Icons.Filter size={14}/></button>} items={[
                {label: t("filter_all_students"), onClick: () => toast(t("filter_all_students"))},
                {label: t("filter_present_only"), onClick: () => toast(t("filter_present_only"))},
                {label: t("filter_absent_only"),  onClick: () => toast(t("filter_absent_only"))},
                {label: t("filter_watch"),        onClick: () => toast(t("filter_watch"))},
              ]}/>
            </div>
          </div>
          <div>
            {filtered.map(s => {
              const active = s.id === selId;
              const st = statuses[s.id];
              return (
                <div key={s.id}
                     className="row gap-3"
                     style={{
                       width: "100%",
                       padding: "12px 22px",
                       alignItems: "center",
                       background: active ? "var(--brand-soft)" : "transparent",
                       borderLeft: `3px solid ${active ? "var(--brand)" : "transparent"}`,
                       borderBottom: "1px solid var(--border)",
                       cursor: "pointer",
                     }}
                     onClick={() => setSel(s.id)}>
                  <Sketch id={s.id} size={36}/>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div style={{fontWeight: 700, color: active ? "var(--brand-ink)" : "var(--ink)", fontSize: 14}}>
                      {s.name}
                    </div>
                    <div className="meta" style={{marginTop: 2}}>{s.note}</div>
                  </div>
                  <div className="row gap-1" onClick={e => e.stopPropagation()}>
                    {STATUS_OPTS.map(o => (
                      <button key={o.v}
                              onClick={() => changeStatus(s.id, o.v)}
                              title={o.title}
                              style={{
                                width: 28, height: 28, borderRadius: 8,
                                fontWeight: 700, fontSize: 11, border: "1.5px solid",
                                borderColor: st === o.v ? o.col : "var(--border)",
                                background: st === o.v ? o.col : "var(--surface)",
                                color: st === o.v ? "white" : "var(--ink-4)",
                                cursor: "pointer",
                              }}>
                        {o.l}
                      </button>
                    ))}
                  </div>
                  <Icons.ChevR size={16} style={{color: "var(--ink-5)"}}/>
                </div>
              );
            })}
          </div>
        </div>

        <ElevePanel student={sel} statuses={statuses} changeStatus={changeStatus} classe={c} teacher={teacher} tab={tab} setTab={setTab}/>
      </div>
    </div>
  );
}

function ElevePanel({ student, statuses, changeStatus, classe, teacher, tab, setTab }) {
  const { toast, editEleve, confirm, t } = useApp();
  const st = statuses[student.id];

  const TABS = [
    { key: "suivi",   label: t("tab_suivi")   },
    { key: "journal", label: t("tab_journal") },
    { key: "parents", label: t("tab_parents") },
    { key: "sante",   label: t("tab_sante")   },
    { key: "docs",    label: t("tab_docs")    },
  ];

  return (
    <div className="card" style={{flex: 1, position: "sticky", top: 20}}>
      <div className="row" style={{padding: "20px 22px 12px", justifyContent: "space-between"}}>
        <button className="row gap-3"
                onClick={() => editEleve(student)}
                style={{alignItems: "center", minWidth: 0, textAlign: "left", background: "transparent", padding: 0, cursor: "pointer"}}>
          <Sketch id={student.id} size={64}/>
          <div style={{minWidth: 0}}>
            <div className="h1" style={{fontSize: 26}}>{student.name}</div>
            <div className="meta" style={{marginTop: 4}}>
              {student.age} ans · {classe.name} · depuis {student.since}
            </div>
            <div className="row gap-2" style={{marginTop: 8}}>
              <span className={`status ${st==="ok"?"ok":st==="warn"?"warn":"bad"}`}>
                <span className="dot"/>
                {st==="ok" ? t("status_present") : st==="warn" ? t("status_late") : t("status_absent")}
              </span>
              <span className="chip">Référent · {teacher.first}</span>
            </div>
          </div>
        </button>
        <div className="row gap-2">
          <button className="icon-btn" onClick={() => toast("Message envoyé aux parents de " + student.name.split(" ")[0])}><Icons.Msg size={16}/></button>
          <DropMenu trigger={<button className="icon-btn"><Icons.Dots size={16}/></button>} items={[
            {icon: Icons.Settings, label: t("edit_file"),     onClick: () => editEleve(student)},
            {icon: Icons.Doc,      label: t("export_pdf"),    onClick: () => toast("Fiche élève exportée")},
            {icon: Icons.Cal,      label: t("program_rdv"),   onClick: () => toast("Créneau RDV envoyé")},
            "-",
            {icon: Icons.X, label: t("archive_student"), danger: true,
             onClick: () => confirm({title: "Archiver " + student.name + " ?", body: "L'élève sera retiré de la classe active. Réactivable depuis les archives.", confirmLabel: "Archiver", danger: true, onConfirm: () => toast("Élève archivé")})},
          ]}/>
        </div>
      </div>

      <div style={{padding: "0 22px 8px"}}>
        <div className="tabs" style={{width: "100%", display: "grid", gridTemplateColumns: "repeat(5, 1fr)"}}>
          {TABS.map(tb => (
            <button key={tb.key} className={tab === tb.key ? "active" : ""} onClick={() => setTab(tb.key)}>{tb.label}</button>
          ))}
        </div>
      </div>

      <div className="col gap-3" style={{padding: "16px 22px 22px", maxHeight: 600, overflowY: "auto"}}>

        {/* ====== SUIVI ====== */}
        {tab === "suivi" && (
          <>
            <div className="card card-pad" style={{boxShadow: "none"}}>
              <div className="row" style={{justifyContent: "space-between", alignItems: "center", marginBottom: 12}}>
                <div className="h3">{t("skills_title")}</div>
                <button className="btn btn-ghost" onClick={() => toast("Compétence ajoutée")}><Icons.Plus size={14}/>{t("add")}</button>
              </div>
              <div className="col gap-2">
                {[
                  { dom: "Lecture · décoder",  pct: 80, lvl: "Acquis" },
                  { dom: "Maths · numération",  pct: 55, lvl: "En cours" },
                  { dom: "Écriture · cursive",  pct: 30, lvl: "À renforcer" },
                ].map((comp, i) => (
                  <div key={i} className="row gap-3" style={{alignItems: "center"}}>
                    <div style={{flex: 1}}>
                      <div className="row" style={{justifyContent: "space-between", alignItems: "baseline", marginBottom: 4}}>
                        <div style={{fontSize: 13.5, fontWeight: 600, color: "var(--ink)"}}>{comp.dom}</div>
                        <div className="meta">{comp.lvl}</div>
                      </div>
                      <div className="pbar" style={{height: 6}}>
                        <div className="ok" style={{
                          width: `${comp.pct}%`,
                          background: comp.pct >= 70 ? "var(--brand)" : comp.pct >= 50 ? "var(--warn)" : "var(--danger)",
                        }}/>
                      </div>
                    </div>
                    <div className="tnum" style={{width: 36, textAlign: "right", fontWeight: 700, color: "var(--ink)"}}>
                      {comp.pct}%
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <button className="card card-pad"
                    onClick={() => editEleve(student)}
                    style={{borderStyle: "dashed", color: "var(--brand)", fontWeight: 700,
                            display: "flex", alignItems: "center", justifyContent: "center", gap: 8, padding: "16px", cursor: "pointer"}}>
              <Icons.Plus size={18}/>{t("add_obs")}
            </button>

            <div style={{padding: 18, background: "var(--brand-soft)", borderRadius: 14, border: "1px solid var(--brand-soft-2)"}}>
              <div className="row gap-2" style={{alignItems: "center", marginBottom: 8}}>
                <Icons.Doc size={14} style={{color: "var(--brand-ink)"}}/>
                <span style={{fontSize: 11, fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--brand-ink)"}}>
                  {t("last_obs")}
                </span>
              </div>
              <div style={{fontWeight: 700, color: "var(--brand-ink)", fontSize: 17, marginBottom: 4}}>Superbe</div>
              <div className="meta" style={{color: "var(--brand-ink)", opacity: .75}}>20 mai · 15h16 · par Marie</div>
              <div style={{marginTop: 10, color: "var(--ink-2)", fontSize: 13.5, lineHeight: 1.55}}>
                A pris la parole spontanément en regroupement pour expliquer son week-end. Vocabulaire précis, structure claire.
              </div>
            </div>

            <div className="row gap-2" style={{justifyContent: "space-between"}}>
              <button className="btn btn-ghost" onClick={() => toast("Synthèse IA en cours…")}><Icons.Sparkle size={14}/>{t("ia_summary")}</button>
              <button className="btn" onClick={() => toast("Historique des observations ouvert")}>{t("see_history")} <Icons.ChevR size={14}/></button>
            </div>
          </>
        )}

        {/* ====== JOURNAL ====== */}
        {tab === "journal" && (
          <div className="col gap-3">
            <div className="row" style={{justifyContent: "space-between", alignItems: "center"}}>
              <div className="h3">{t("journal_title")}</div>
              <button className="btn btn-ghost" onClick={() => toast("Entrée ajoutée")}><Icons.Plus size={14}/>{t("add")}</button>
            </div>
            {[
              { date: "Aujourd'hui · 14h30", by: "Marie Lambert", type: "obs",  text: "A pris la parole spontanément en regroupement. Vocabulaire précis, belle progression à l'oral." },
              { date: "Hier · 10h15",        by: "Marie Lambert", type: "note", text: "Mot des parents : possible absence la semaine prochaine — rendez-vous médical." },
              { date: "15 mai · 09h00",      by: "Sophie M.",     type: "rdv",  text: "RDV parents réalisé. Progrès notés en lecture. Léger point d'attention en maths." },
              { date: "10 mai · 11h20",      by: "Marie Lambert", type: "obs",  text: "Difficulté persistante sur la soustraction avec retenue. À retravailler en petit groupe." },
            ].map((e, i) => {
              const col = e.type === "obs" ? "var(--brand)" : e.type === "rdv" ? "var(--warn)" : "var(--ink-4)";
              const lbl = e.type === "obs" ? t("type_obs") : e.type === "rdv" ? t("type_rdv") : t("type_note");
              return (
                <div key={i} style={{
                  padding: "14px 16px",
                  borderLeft: `3px solid ${col}`,
                  background: "var(--surface-2)",
                  borderRadius: "0 10px 10px 0",
                }}>
                  <div className="row gap-2" style={{marginBottom: 6, alignItems: "center"}}>
                    <span style={{fontSize: 11, fontWeight: 700, color: col, letterSpacing: ".06em", textTransform: "uppercase"}}>{lbl}</span>
                    <span className="meta">· {e.by}</span>
                  </div>
                  <div style={{fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55}}>{e.text}</div>
                  <div className="meta" style={{marginTop: 6}}>{e.date}</div>
                </div>
              );
            })}
          </div>
        )}

        {/* ====== PARENTS ====== */}
        {tab === "parents" && (
          <div className="col gap-3">
            <div className="h3">{t("contacts_title")}</div>
            {[
              { role: "Parent 1", name: "Marc Martin",  rel: "Père", tel: "06 12 34 56 78", email: "marc.martin@gmail.com",   priority: true  },
              { role: "Parent 2", name: "Julie Martin", rel: "Mère", tel: "06 87 65 43 21", email: "j.martin@laposte.net",    priority: false },
            ].map((p, i) => (
              <div key={i} style={{padding: 16, border: "1px solid var(--border)", borderRadius: 12}}>
                <div className="row gap-3" style={{alignItems: "center", marginBottom: 12}}>
                  <Initials name={p.name} size={40}/>
                  <div style={{flex: 1}}>
                    <div style={{fontWeight: 700, color: "var(--ink)"}}>{p.name}</div>
                    <div className="meta">{p.rel} · {p.role}</div>
                  </div>
                  {p.priority && <span className="chip brand">{t("main_contact")}</span>}
                </div>
                <div className="col gap-2" style={{marginBottom: 12}}>
                  <div className="row gap-2" style={{alignItems: "center"}}>
                    <Icons.Msg size={14} style={{color: "var(--ink-4)", flexShrink: 0}}/>
                    <span className="meta tnum">{p.tel}</span>
                  </div>
                  <div className="row gap-2" style={{alignItems: "center"}}>
                    <Icons.Doc size={14} style={{color: "var(--ink-4)", flexShrink: 0}}/>
                    <span className="meta">{p.email}</span>
                  </div>
                </div>
                <div className="row gap-2">
                  <button className="btn" style={{flex: 1}} onClick={() => toast(t("message_btn") + " → " + p.name)}>
                    <Icons.Msg size={13}/>{t("message_btn")}
                  </button>
                  <button className="btn" style={{flex: 1}} onClick={() => toast("RDV proposé à " + p.name)}>
                    <Icons.Cal size={13}/>{t("rdv_btn")}
                  </button>
                </div>
              </div>
            ))}
            <div style={{padding: "12px 14px", background: "var(--surface-2)", borderRadius: 10}}>
              <div className="eyebrow" style={{marginBottom: 4}}>{t("pickup_auth")}</div>
              <div style={{fontSize: 13, color: "var(--ink-2)"}}>
                Peut être récupéré par : Marc Martin, Julie Martin, Nathalie Dubois (grand-mère).
              </div>
            </div>
          </div>
        )}

        {/* ====== SANTÉ ====== */}
        {tab === "sante" && (
          <div className="col gap-3">
            <div className="h3">{t("health_title")}</div>
            <div style={{padding: 16, border: "1px solid var(--border)", borderRadius: 12}}>
              <div className="eyebrow" style={{marginBottom: 8}}>{t("allergies_label")}</div>
              <div className="row gap-2">
                <span className="chip danger">Arachides</span>
                <span className="chip warn">Lactose (léger)</span>
              </div>
            </div>
            <div style={{padding: 16, border: "1px solid var(--border)", borderRadius: 12}}>
              <div className="eyebrow" style={{marginBottom: 8}}>{t("pai_label")}</div>
              <div style={{fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.55}}>
                PAI Allergie en vigueur. Épipen disponible en salle de classe et à l'infirmerie. Renouvellement octobre 2026.
              </div>
            </div>
            <div style={{padding: 16, border: "1px solid var(--border)", borderRadius: 12}}>
              <div className="eyebrow" style={{marginBottom: 8}}>{t("doctor_label")}</div>
              <div style={{fontWeight: 600, color: "var(--ink)"}}>Dr. Isabelle Renaud</div>
              <div className="meta">01 23 45 67 89 · Cabinet 15ème</div>
            </div>
            <div style={{padding: 16, border: "1px solid var(--border)", borderRadius: 12}}>
              <div className="row" style={{justifyContent: "space-between", alignItems: "center", marginBottom: 4}}>
                <div className="eyebrow">{t("last_visit_label")}</div>
                <span className="chip brand">Sept. 2025</span>
              </div>
              <div className="meta">Prochaine visite : septembre 2026</div>
            </div>
            <button className="btn" onClick={() => toast("Fiche santé exportée")}>
              <Icons.Doc size={14}/>{t("export_health")}
            </button>
          </div>
        )}

        {/* ====== DOCS ====== */}
        {tab === "docs" && (
          <div className="col gap-3">
            <div className="row" style={{justifyContent: "space-between", alignItems: "center"}}>
              <div className="h3">{t("docs_title")}</div>
              <button className="btn btn-primary" onClick={() => toast("Ouvrez Scolia sur votre téléphone pour scanner")}>
                <Icons.Plus size={14}/>{t("scan_btn")}
              </button>
            </div>

            <div style={{padding: 14, background: "var(--brand-soft)", borderRadius: 12, border: "1px solid var(--brand-soft-2)"}}>
              <div className="row gap-2" style={{alignItems: "center", marginBottom: 4}}>
                <Icons.Sparkle size={14} style={{color: "var(--brand-ink)"}}/>
                <span style={{fontSize: 11, fontWeight: 700, color: "var(--brand-ink)", letterSpacing: ".06em", textTransform: "uppercase"}}>
                  Connecté à l'app mobile
                </span>
              </div>
              <div style={{fontSize: 13, color: "var(--brand-ink)", opacity: .85, lineHeight: 1.5}}>
                Scannez un document depuis Scolia sur votre téléphone — il apparaîtra ici automatiquement.
              </div>
            </div>

            <div className="col gap-2">
              {[
                { n: "Acte de naissance",      s: "320 Ko",  date: "sept. 2023", ok: true  },
                { n: "Carnet de santé (scan)",  s: "1.4 Mo",  date: "oct. 2023",  ok: true  },
                { n: "PAI Allergie 2025-2026",  s: "210 Ko",  date: "oct. 2025",  ok: true  },
                { n: "Photo d'identité",         s: "890 Ko",  date: "sept. 2023", ok: true  },
                { n: "Autorisation de sortie",   s: "—",       date: "—",          ok: false },
              ].map((f, i) => (
                <button key={i}
                        className="row gap-3"
                        onClick={() => f.ok ? toast("Téléchargement : " + f.n) : toast("Document manquant — à fournir")}
                        style={{
                          padding: "12px 14px",
                          border: `1px solid ${f.ok ? "var(--border)" : "var(--warn-soft)"}`,
                          borderRadius: 10, alignItems: "center", textAlign: "left",
                          background: f.ok ? "var(--surface)" : "var(--warn-soft)",
                        }}>
                  <Icons.Doc size={18} style={{color: f.ok ? "var(--brand)" : "var(--warn)", flexShrink: 0}}/>
                  <div style={{flex: 1, minWidth: 0}}>
                    <div style={{fontWeight: 600, color: "var(--ink)", fontSize: 13.5,
                                 whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}>
                      {f.n}
                    </div>
                    <div className="meta">{f.ok ? `${f.s} · ${f.date}` : t("missing_doc")}</div>
                  </div>
                  {f.ok
                    ? <Icons.ChevR size={14} style={{color: "var(--ink-5)", flexShrink: 0}}/>
                    : <span className="chip warn">{t("to_provide")}</span>
                  }
                </button>
              ))}
            </div>
          </div>
        )}

      </div>
    </div>
  );
}

function Sketch({ id, size = 36 }) {
  const palette = ["#E4F4EC", "#FDE9CF", "#E2ECFB", "#F4E5F8", "#E8EFEA"];
  const h = id.charCodeAt(0) + id.charCodeAt(id.length-1);
  const bg = palette[h % palette.length];
  const variant = h % 4;
  return (
    <div className="avatar" style={{width: size, height: size, background: bg, color: "var(--ink-3)"}}>
      <svg width={size * 0.66} height={size * 0.66} viewBox="0 0 24 24" fill="none"
           stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="12" cy="9" r="3.4"/>
        <path d="M5 21c1-3.5 3.5-5 7-5s6 1.5 7 5"/>
        {variant === 0 && <path d="M9 8.5h6"/>}
        {variant === 1 && <path d="M10 11l1 1 3-3"/>}
        {variant === 2 && <circle cx="12" cy="9" r="1.2" fill="currentColor"/>}
        {variant === 3 && <path d="M9 6c1-1 5-1 6 0"/>}
      </svg>
    </div>
  );
}

window.ClasseDetail = ClasseDetail;
window.Sketch = Sketch;