// Avatar.jsx — initials avatar with optional presence dot
function Avatar({ name = "?", size = 36, tint = "#BFDDF5", presence, style }) {
  const initials = name.split(/\s+/).map(p => p[0]).slice(0, 2).join("").toUpperCase();
  return (
    <div style={{ position: "relative", width: size, height: size, flexShrink: 0, ...style }}>
      <div style={{
        width: size, height: size, borderRadius: 999,
        background: tint, color: "#15161A",
        display: "grid", placeItems: "center",
        fontFamily: "Manrope, sans-serif", fontWeight: 700,
        fontSize: Math.max(10, Math.round(size * 0.36)),
        letterSpacing: "0.01em",
      }}>{initials}</div>
      {presence && (
        <span style={{
          position: "absolute", bottom: -1, right: -1,
          width: Math.max(8, size * 0.28),
          height: Math.max(8, size * 0.28),
          background: presence === "online" ? "#2E7D5B" : "#8A8C93",
          border: "2px solid var(--bg)", borderRadius: 999,
        }} />
      )}
    </div>
  );
}

// Tints cycle for member avatars (warm palette, soft)
const AVATAR_TINTS = ["#F4D6A8", "#BFDDF5", "#C8E6D3", "#F4C7C0", "#E0D0F0", "#D8E0A8"];
function tintFor(name) {
  let h = 0;
  for (const ch of name || "?") h = (h * 31 + ch.charCodeAt(0)) >>> 0;
  return AVATAR_TINTS[h % AVATAR_TINTS.length];
}

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