// Ported from pizza-codex/src/ui/art/avatars.tsx — TS removed, globals attached.
var P = window.P;

function AvatarBase({ ring, bg = P.cream, size = 56, children }) {
  return (
    <svg viewBox="0 0 64 64" width={size} height={size} style={{ display: 'block' }}>
      <circle cx="32" cy="32" r="29" fill={bg} stroke={P.brown} strokeWidth="2.5" />
      <circle cx="32" cy="32" r="29" fill="none" stroke={ring} strokeWidth="4" />
      {children}
    </svg>
  );
}

function ChefAvatar({ size = 56 }) {
  return (
    <AvatarBase ring={P.yellow} size={size}>
      <path d="M 18 24 Q 18 14, 26 14 Q 28 10, 32 10 Q 36 10, 38 14 Q 46 14, 46 24 L 46 28 L 18 28 Z" fill={P.cream} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
      <path d="M 18 28 L 46 28" stroke={P.brown} strokeWidth="2" />
      <circle cx="32" cy="40" r="12" fill={P.skin} stroke={P.brown} strokeWidth="2.5" />
      <circle cx="28" cy="40" r="1.8" fill={P.brown} />
      <circle cx="36" cy="40" r="1.8" fill={P.brown} />
      <path d="M 28 46 Q 32 49, 36 46" stroke={P.brown} strokeWidth="1.8" fill="none" strokeLinecap="round" />
      <circle cx="25" cy="44" r="1.5" fill={P.orange} opacity="0.5" />
      <circle cx="39" cy="44" r="1.5" fill={P.orange} opacity="0.5" />
    </AvatarBase>
  );
}

function BearAvatar({ size = 56 }) {
  return (
    <AvatarBase ring={P.green} size={size}>
      <circle cx="20" cy="20" r="6" fill="#8B5A3C" stroke={P.brown} strokeWidth="2" />
      <circle cx="44" cy="20" r="6" fill="#8B5A3C" stroke={P.brown} strokeWidth="2" />
      <circle cx="20" cy="20" r="2.5" fill={P.orange} />
      <circle cx="44" cy="20" r="2.5" fill={P.orange} />
      <circle cx="32" cy="34" r="16" fill="#A06B42" stroke={P.brown} strokeWidth="2.5" />
      <ellipse cx="32" cy="42" rx="10" ry="8" fill={P.skin} />
      <circle cx="26" cy="32" r="2" fill={P.brown} />
      <circle cx="38" cy="32" r="2" fill={P.brown} />
      <ellipse cx="32" cy="40" rx="2.5" ry="1.8" fill={P.brown} />
      <path d="M 32 42 L 32 45 M 29 46 Q 32 48, 35 46" stroke={P.brown} strokeWidth="1.5" fill="none" strokeLinecap="round" />
    </AvatarBase>
  );
}

function FoxAvatar({ size = 56 }) {
  return (
    <AvatarBase ring={P.cream} size={size}>
      <path d="M 16 18 L 22 8 L 26 22 Z" fill={P.orange} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
      <path d="M 48 18 L 42 8 L 38 22 Z" fill={P.orange} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
      <path d="M 18 28 Q 22 44, 32 50 Q 42 44, 46 28 Q 40 22, 32 22 Q 24 22, 18 28 Z" fill={P.orange} stroke={P.brown} strokeWidth="2.5" strokeLinejoin="round" />
      <path d="M 26 36 Q 32 48, 38 36 Q 36 32, 32 32 Q 28 32, 26 36 Z" fill={P.cream} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
      <circle cx="26" cy="32" r="2" fill={P.brown} />
      <circle cx="38" cy="32" r="2" fill={P.brown} />
      <ellipse cx="32" cy="38" rx="2" ry="1.5" fill={P.brown} />
    </AvatarBase>
  );
}

function OwlAvatar({ size = 56 }) {
  return (
    <AvatarBase ring={P.cream} size={size}>
      <path d="M 18 18 L 22 10 L 26 20 Z" fill={P.brownLite} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
      <path d="M 46 18 L 42 10 L 38 20 Z" fill={P.brownLite} stroke={P.brown} strokeWidth="2" strokeLinejoin="round" />
      <ellipse cx="32" cy="36" rx="16" ry="18" fill="#8B5A3C" stroke={P.brown} strokeWidth="2.5" />
      <ellipse cx="32" cy="42" rx="10" ry="10" fill={P.skin} />
      <circle cx="25" cy="32" r="6" fill={P.cream} stroke={P.brown} strokeWidth="2" />
      <circle cx="39" cy="32" r="6" fill={P.cream} stroke={P.brown} strokeWidth="2" />
      <circle cx="25" cy="32" r="2.5" fill={P.brown} />
      <circle cx="39" cy="32" r="2.5" fill={P.brown} />
      <path d="M 30 38 L 34 38 L 32 42 Z" fill={P.orange} stroke={P.brown} strokeWidth="1.5" strokeLinejoin="round" />
    </AvatarBase>
  );
}

Object.assign(window, { ChefAvatar, BearAvatar, FoxAvatar, OwlAvatar });