/** Animated male agent face: blinks, breathes, and moves its mouth while speaking. */
export function AgentFace({ speaking, active, size = 280 }: { speaking: boolean; active: boolean; size?: number }) {
  return (
    <div className="relative animate-breathe" style={{ width: size, height: size }}>
      <div className={`absolute inset-0 rounded-full bg-brand blur-3xl transition-opacity ${speaking ? "opacity-50" : active ? "opacity-25" : "opacity-10"}`} />
      <svg viewBox="0 0 200 200" className="relative h-full w-full" role="img" aria-label="Echo agent">
        <defs>
          <linearGradient id="skin" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="oklch(0.78 0.06 55)" />
            <stop offset="1" stopColor="oklch(0.62 0.07 45)" />
          </linearGradient>
          <linearGradient id="suit" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="oklch(0.35 0.08 230)" />
            <stop offset="1" stopColor="oklch(0.22 0.04 250)" />
          </linearGradient>
        </defs>
        <path d="M30 200 C35 160 65 145 100 145 C135 145 165 160 170 200 Z" fill="url(#suit)" />
        <path d="M88 145 L100 170 L112 145 Z" fill="oklch(0.7 0.17 35)" />
        <rect x="88" y="125" width="24" height="24" rx="8" fill="url(#skin)" />
        <ellipse cx="100" cy="88" rx="44" ry="52" fill="url(#skin)" />
        <ellipse cx="56" cy="92" rx="6" ry="10" fill="url(#skin)" />
        <ellipse cx="144" cy="92" rx="6" ry="10" fill="url(#skin)" />
        <path d="M56 80 C52 40 80 28 104 30 C132 32 150 50 144 82 C140 64 128 54 112 52 C92 50 70 56 56 80 Z" fill="oklch(0.2 0.02 40)" />
        <path d="M74 74 Q84 69 92 73" stroke="oklch(0.2 0.02 40)" strokeWidth="3.5" fill="none" strokeLinecap="round" />
        <path d="M108 73 Q116 69 126 74" stroke="oklch(0.2 0.02 40)" strokeWidth="3.5" fill="none" strokeLinecap="round" />
        <g className="animate-blink">
          <ellipse cx="83" cy="86" rx="6" ry="6.5" fill="oklch(0.98 0 0)" />
          <ellipse cx="117" cy="86" rx="6" ry="6.5" fill="oklch(0.98 0 0)" />
          <circle cx="84" cy="87" r="3.4" fill="oklch(0.55 0.13 225)" />
          <circle cx="118" cy="87" r="3.4" fill="oklch(0.55 0.13 225)" />
          <circle cx="84" cy="87" r="1.5" fill="oklch(0.1 0 0)" />
          <circle cx="118" cy="87" r="1.5" fill="oklch(0.1 0 0)" />
        </g>
        <path d="M100 92 Q96 104 100 108 Q103 109 105 107" stroke="oklch(0.5 0.07 40)" strokeWidth="2" fill="none" strokeLinecap="round" />
        <path d="M70 108 Q72 132 100 138 Q128 132 130 108 Q124 126 100 128 Q76 126 70 108 Z" fill="oklch(0.25 0.02 40 / 0.35)" />
        <g style={{ transformOrigin: "100px 118px", transformBox: "view-box" }} className={speaking ? "animate-talk" : ""}>
          <ellipse cx="100" cy="118" rx="11" ry={speaking ? 6 : 1.6} fill="oklch(0.3 0.08 20)" />
        </g>
      </svg>
    </div>
  );
}