const { useState, useEffect, useRef } = React;
/* ---------- Avatar ---------- */
const AV_HUES = [152, 26, 210, 268, 330, 95, 188];
const AV_ARABIC = /[\u0600-\u06FF\u0750-\u077F\u08A0-\u08FF\uFB50-\uFDFF\uFE70-\uFEFF]/;
function Avatar({ name, size = 30 }) {
  const n = name || "";
  /* Arabic is cursive, so two initials fuse into one connected cluster instead
     of reading as separate letters — "محمد القاضاه" came out as "ما", a word.
     Arabic convention has no two-letter initial, so those names get one letter. */
  const parts = n.trim().split(/\s+/).filter(Boolean);
  const initials = parts.slice(0, AV_ARABIC.test(n) ? 1 : 2).map((p) => p[0]).join("").toUpperCase();
  let h = 0; for (let i = 0; i < n.length; i++) h = (h * 31 + n.charCodeAt(i)) % 997;
  const hue = AV_HUES[h % AV_HUES.length];
  return (
    <span className="avatar" style={{
      width: size, height: size, fontSize: size * 0.36,
      background: "oklch(0.92 0.045 " + hue + ")", color: "oklch(0.38 0.09 " + hue + ")"
    }}>{initials}</span>
  );
}


Object.assign(window, { AV_HUES, Avatar });