// Anthropomorphic, full-body Pixar/claymation-style cast.
// Each character stands bipedal in costume. Layered gradients give depth.
// viewBox is 240x340 (tall) — designed for hero/remix vertical frames.

// ── Anchor Dog: golden retriever in news anchor suit, holding mic ──
function AnchorDog({ size = 240 }) {
  const h = size * 340 / 240;
  return (
    <svg viewBox="0 0 240 340" width={size} height={h}>
      <defs>
        <radialGradient id="adFur" cx="0.4" cy="0.3" r="0.8">
          <stop offset="0" stopColor="#FFDE95" />
          <stop offset="0.55" stopColor="#E8A94A" />
          <stop offset="1" stopColor="#7A4A10" />
        </radialGradient>
        <radialGradient id="adSnout" cx="0.5" cy="0.3" r="0.8">
          <stop offset="0" stopColor="#FFEBC2" />
          <stop offset="1" stopColor="#B8722A" />
        </radialGradient>
        <linearGradient id="adSuit" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#2A3A7A" />
          <stop offset="1" stopColor="#0F1C4A" />
        </linearGradient>
        <linearGradient id="adShirt" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#fff" />
          <stop offset="1" stopColor="#E0E6F5" />
        </linearGradient>
      </defs>

      {/* legs / feet */}
      <rect x="96" y="300" width="20" height="32" rx="6" fill="#1A1228" />
      <rect x="124" y="300" width="20" height="32" rx="6" fill="#1A1228" />
      <ellipse cx="106" cy="332" rx="16" ry="6" fill="#0A0812" />
      <ellipse cx="134" cy="332" rx="16" ry="6" fill="#0A0812" />

      {/* suit body */}
      <path d="M 72 180 Q 60 220 66 270 Q 70 300 80 304 L 160 304 Q 170 300 174 270 Q 180 220 168 180 L 120 170 Z" fill="url(#adSuit)" />
      {/* suit lapels */}
      <path d="M 90 180 L 120 220 L 120 270 L 96 260 Z" fill="#0B1638" />
      <path d="M 150 180 L 120 220 L 120 270 L 144 260 Z" fill="#0B1638" />
      {/* shirt v */}
      <path d="M 106 178 L 134 178 L 120 218 Z" fill="url(#adShirt)" />
      {/* red tie */}
      <path d="M 116 180 L 124 180 L 128 200 L 120 232 L 112 200 Z" fill="#D22030" />
      <path d="M 116 180 L 124 180 L 122 186 L 118 186 Z" fill="#991620" />
      {/* lapel pin */}
      <circle cx="96" cy="202" r="3" fill="#FFD60A" />

      {/* left arm holding mic */}
      <path d="M 72 188 Q 48 220 40 250 Q 38 268 52 268 Q 62 268 66 252 Q 72 224 80 208 Z" fill="url(#adSuit)" />
      <circle cx="50" cy="268" r="11" fill="url(#adSnout)" />
      {/* microphone */}
      <rect x="38" y="232" width="6" height="34" rx="2" fill="#1A1228" />
      <ellipse cx="41" cy="226" rx="13" ry="16" fill="#2A2A36" />
      <ellipse cx="38" cy="220" rx="4" ry="6" fill="#5A5A6A" opacity="0.7" />
      {[...Array(6)].map((_, i) => (
        <line key={i} x1={31 + i*3} y1="216" x2={31 + i*3} y2="236" stroke="#0A0A12" strokeWidth="0.5" />
      ))}
      <rect x="30" y="238" width="22" height="3" fill="#FFD60A" />
      <text x="41" y="241" textAnchor="middle" fontFamily="Figtree" fontWeight="900" fontSize="3" fill="#0B1B4A">EPDO</text>

      {/* right arm down */}
      <path d="M 168 188 Q 188 220 190 260 Q 188 280 178 280 Q 168 280 166 260 Q 164 224 160 208 Z" fill="url(#adSuit)" />
      <circle cx="182" cy="278" r="11" fill="url(#adSnout)" />

      {/* head / neck */}
      <ellipse cx="120" cy="168" rx="18" ry="12" fill="url(#adSnout)" />
      {/* ears back layer */}
      <ellipse cx="66" cy="100" rx="22" ry="46" fill="#7A4A1A" transform="rotate(-10 66 100)" />
      <ellipse cx="174" cy="100" rx="22" ry="46" fill="#7A4A1A" transform="rotate(10 174 100)" />
      {/* head */}
      <ellipse cx="120" cy="112" rx="72" ry="70" fill="url(#adFur)" />
      {/* ears front */}
      <ellipse cx="60" cy="98" rx="20" ry="44" fill="#A87030" transform="rotate(-12 60 98)" />
      <ellipse cx="180" cy="98" rx="20" ry="44" fill="#A87030" transform="rotate(12 180 98)" />
      <ellipse cx="62" cy="108" rx="10" ry="22" fill="#FFD095" opacity="0.5" transform="rotate(-12 62 108)" />
      <ellipse cx="178" cy="108" rx="10" ry="22" fill="#FFD095" opacity="0.5" transform="rotate(12 178 108)" />
      {/* face highlight */}
      <ellipse cx="88" cy="96" rx="24" ry="34" fill="#FFE6A8" opacity="0.5" />
      {/* snout */}
      <ellipse cx="120" cy="142" rx="38" ry="30" fill="url(#adSnout)" />
      <ellipse cx="110" cy="134" rx="15" ry="9" fill="#FFF5D8" opacity="0.6" />
      {/* nose */}
      <ellipse cx="120" cy="126" rx="11" ry="7" fill="#1A0A00" />
      <ellipse cx="117" cy="123" rx="3" ry="2" fill="#fff" opacity="0.7" />
      {/* mouth open - speaking */}
      <path d="M 120 136 L 120 148" stroke="#1A0A00" strokeWidth="2.5" />
      <path d="M 106 150 Q 120 166 134 150 Q 128 160 120 160 Q 112 160 106 150 Z" fill="#3A0606" />
      <path d="M 110 152 Q 120 160 130 152 L 130 154 Q 120 160 110 154 Z" fill="#D84060" />
      <rect x="116" y="150" width="3" height="4" fill="#fff" />
      <rect x="120" y="150" width="3" height="4" fill="#fff" />
      {/* eyes */}
      <ellipse cx="94" cy="108" rx="14" ry="13" fill="#fff" />
      <ellipse cx="146" cy="108" rx="14" ry="13" fill="#fff" />
      <circle cx="96" cy="110" r="9" fill="#3A1A00" />
      <circle cx="148" cy="110" r="9" fill="#3A1A00" />
      <circle cx="96" cy="110" r="5" fill="#1A0A00" />
      <circle cx="148" cy="110" r="5" fill="#1A0A00" />
      <circle cx="99" cy="107" r="2.5" fill="#fff" />
      <circle cx="151" cy="107" r="2.5" fill="#fff" />
      {/* eyebrows raised - engaged on-camera */}
      <path d="M 82 88 Q 94 84 106 88" stroke="#5A3010" strokeWidth="3" fill="none" strokeLinecap="round" />
      <path d="M 134 88 Q 146 84 158 88" stroke="#5A3010" strokeWidth="3" fill="none" strokeLinecap="round" />
    </svg>
  );
}

// ── Chef Tomato: tomato in chef whites with toque, holding knife ──
function ChefTomato({ size = 240 }) {
  const h = size * 340 / 240;
  return (
    <svg viewBox="0 0 240 340" width={size} height={h}>
      <defs>
        <radialGradient id="ctBody" cx="0.4" cy="0.3" r="0.9">
          <stop offset="0" stopColor="#FF8A6A" />
          <stop offset="0.5" stopColor="#E83C28" />
          <stop offset="1" stopColor="#7A1010" />
        </radialGradient>
        <linearGradient id="ctCoat" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#fff" />
          <stop offset="1" stopColor="#D8E0EC" />
        </linearGradient>
        <linearGradient id="ctHat" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#fff" />
          <stop offset="1" stopColor="#E8ECF5" />
        </linearGradient>
      </defs>

      {/* legs */}
      <rect x="94" y="288" width="22" height="36" rx="8" fill="#1A1228" />
      <rect x="124" y="288" width="22" height="36" rx="8" fill="#1A1228" />
      <ellipse cx="105" cy="326" rx="17" ry="6" fill="#0A0812" />
      <ellipse cx="135" cy="326" rx="17" ry="6" fill="#0A0812" />

      {/* chef coat body wrapping the tomato */}
      <path d="M 50 220 Q 40 260 52 290 L 90 296 L 90 260 L 150 260 L 150 296 L 188 290 Q 200 260 190 220 Q 160 200 120 200 Q 80 200 50 220 Z" fill="url(#ctCoat)" />
      {/* coat buttons column (double-breasted) */}
      <circle cx="108" cy="232" r="3" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.8" />
      <circle cx="108" cy="248" r="3" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.8" />
      <circle cx="108" cy="264" r="3" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.8" />
      <circle cx="132" cy="232" r="3" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.8" />
      <circle cx="132" cy="248" r="3" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.8" />
      <circle cx="132" cy="264" r="3" fill="#D4D9E3" stroke="#8A92A8" strokeWidth="0.8" />
      {/* coat lapel fold */}
      <path d="M 60 222 L 108 232 L 108 295 L 58 292 Z" fill="#fff" stroke="#C8D0DE" strokeWidth="1" />
      <path d="M 180 222 L 132 232 L 132 295 L 182 292 Z" fill="#fff" stroke="#C8D0DE" strokeWidth="1" />

      {/* left arm holding knife */}
      <path d="M 50 228 Q 30 258 34 288 Q 38 302 52 296 Q 58 280 62 264 Q 66 244 70 230 Z" fill="url(#ctCoat)" />
      <circle cx="42" cy="294" r="13" fill="url(#ctBody)" />
      {/* chef knife */}
      <rect x="14" y="290" width="22" height="8" rx="2" fill="#2A1A10" />
      <path d="M 36 288 L 82 286 L 82 302 L 36 300 Z" fill="#E8EDF5" stroke="#A8B0C0" strokeWidth="1" />
      <path d="M 36 288 L 82 286 L 82 294 Z" fill="#fff" opacity="0.6" />

      {/* right arm: thumbs up */}
      <path d="M 190 228 Q 210 258 206 288 Q 202 300 188 296 Q 182 280 178 264 Q 174 244 170 230 Z" fill="url(#ctCoat)" />
      <circle cx="198" cy="292" r="13" fill="url(#ctBody)" />
      <rect x="196" y="270" width="6" height="20" rx="2" fill="url(#ctBody)" />

      {/* tomato HEAD with leaves */}
      <circle cx="120" cy="136" r="70" fill="url(#ctBody)" />
      <ellipse cx="94" cy="108" rx="20" ry="34" fill="#FFB8A0" opacity="0.45" />
      {/* leaves */}
      <path d="M 120 74 Q 96 68 80 78 Q 84 92 102 94 Q 92 106 100 116 Q 116 114 120 96 Z" fill="#4E8830" />
      <path d="M 120 74 Q 144 68 160 78 Q 156 92 138 94 Q 148 106 140 116 Q 124 114 120 96 Z" fill="#4E8830" />
      <path d="M 120 66 L 120 52" stroke="#2E5E1C" strokeWidth="4" strokeLinecap="round" />

      {/* CHEF HAT / TOQUE */}
      <ellipse cx="120" cy="60" rx="44" ry="10" fill="#fff" stroke="#C8D0DE" strokeWidth="1" />
      <path d="M 80 60 Q 70 20 100 16 Q 110 6 122 10 Q 138 4 150 16 Q 172 18 166 42 Q 178 50 164 60 Z" fill="url(#ctHat)" stroke="#C8D0DE" strokeWidth="1" />
      <circle cx="100" cy="28" r="10" fill="#fff" />
      <circle cx="128" cy="22" r="12" fill="#fff" />
      <circle cx="148" cy="32" r="11" fill="#fff" />
      {/* hat band */}
      <rect x="76" y="56" width="88" height="6" fill="#2A1A10" />

      {/* eyes */}
      <ellipse cx="94" cy="132" rx="13" ry="14" fill="#fff" />
      <ellipse cx="146" cy="132" rx="13" ry="14" fill="#fff" />
      <circle cx="96" cy="134" r="9" fill="#1A0A00" />
      <circle cx="148" cy="134" r="9" fill="#1A0A00" />
      <circle cx="99" cy="131" r="2.5" fill="#fff" />
      <circle cx="151" cy="131" r="2.5" fill="#fff" />
      {/* eyebrows / concentration */}
      <path d="M 80 114 Q 94 108 106 112" stroke="#5A0606" strokeWidth="3" fill="none" strokeLinecap="round" />
      <path d="M 134 112 Q 146 108 160 114" stroke="#5A0606" strokeWidth="3" fill="none" strokeLinecap="round" />
      {/* mouth - determined smile */}
      <path d="M 90 164 Q 120 184 150 164 Q 134 180 120 180 Q 106 180 90 164 Z" fill="#2A0406" />
      <path d="M 104 174 Q 120 182 136 174 L 136 176 Q 120 182 104 176 Z" fill="#D84060" />
      <rect x="112" y="172" width="4" height="5" fill="#fff" />
      <rect x="122" y="172" width="4" height="5" fill="#fff" />
      {/* cheek blush */}
      <circle cx="66" cy="158" r="10" fill="#FF7A8A" opacity="0.45" />
      <circle cx="174" cy="158" r="10" fill="#FF7A8A" opacity="0.45" />
    </svg>
  );
}

// ── Standup Robot: robot at mic stand under spotlight ──
function StandupRobot({ size = 240 }) {
  const h = size * 340 / 240;
  return (
    <svg viewBox="0 0 240 340" width={size} height={h}>
      <defs>
        <linearGradient id="srBody" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#F5F7FC" />
          <stop offset="1" stopColor="#8A98B8" />
        </linearGradient>
        <radialGradient id="srScreen" cx="0.4" cy="0.35" r="0.8">
          <stop offset="0" stopColor="#1B2B5C" />
          <stop offset="1" stopColor="#05091F" />
        </radialGradient>
        <linearGradient id="srLeather" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#3A2818" />
          <stop offset="1" stopColor="#1A0E06" />
        </linearGradient>
      </defs>

      {/* spotlight cone */}
      <path d="M 120 0 L 40 340 L 200 340 Z" fill="#FFD60A" opacity="0.15" />
      <path d="M 120 0 L 70 340 L 170 340 Z" fill="#FFE86A" opacity="0.2" />

      {/* legs / feet */}
      <rect x="96" y="290" width="20" height="36" rx="4" fill="#39456A" />
      <rect x="124" y="290" width="20" height="36" rx="4" fill="#39456A" />
      <rect x="90" y="324" width="32" height="8" rx="2" fill="#1A2040" />
      <rect x="118" y="324" width="32" height="8" rx="2" fill="#1A2040" />

      {/* leather jacket body - standup comic style */}
      <path d="M 62 186 Q 52 220 58 270 Q 64 296 80 298 L 160 298 Q 176 296 182 270 Q 188 220 178 186 L 120 174 Z" fill="url(#srLeather)" />
      {/* zipper */}
      <line x1="120" y1="190" x2="120" y2="296" stroke="#8A6838" strokeWidth="2" strokeDasharray="3 2" />
      <circle cx="120" cy="220" r="3" fill="#C89A50" />
      {/* collar */}
      <path d="M 90 186 L 120 210 L 150 186 L 160 200 L 120 232 L 80 200 Z" fill="#2A1A08" />

      {/* arms with jacket */}
      <path d="M 62 196 Q 40 230 36 266 Q 38 284 52 282 Q 62 264 66 244 Q 70 216 76 200 Z" fill="url(#srLeather)" />
      <path d="M 178 196 Q 200 230 204 266 Q 202 284 188 282 Q 178 264 174 244 Q 170 216 164 200 Z" fill="url(#srLeather)" />
      {/* metal hands */}
      <circle cx="44" cy="278" r="12" fill="url(#srBody)" stroke="#39456A" strokeWidth="1.5" />
      <circle cx="196" cy="278" r="12" fill="url(#srBody)" stroke="#39456A" strokeWidth="1.5" />

      {/* mic stand in left hand */}
      <rect x="28" y="230" width="4" height="88" fill="#2A2A36" />
      <rect x="18" y="314" width="24" height="4" rx="2" fill="#2A2A36" />
      <rect x="26" y="218" width="8" height="14" rx="2" fill="#2A2A36" />
      <ellipse cx="30" cy="214" rx="10" ry="12" fill="#2A2A36" />
      <ellipse cx="27" cy="210" rx="3" ry="5" fill="#5A5A6A" opacity="0.7" />

      {/* antenna */}
      <line x1="120" y1="32" x2="120" y2="16" stroke="#39456A" strokeWidth="3" strokeLinecap="round" />
      <circle cx="120" cy="12" r="6" fill="#FF5E8A" />
      <circle cx="118" cy="10" r="2" fill="#FFB4C4" />

      {/* HEAD - rounded rect */}
      <rect x="46" y="36" width="148" height="140" rx="28" fill="url(#srBody)" stroke="#39456A" strokeWidth="2" />
      {/* screen face */}
      <rect x="62" y="58" width="116" height="88" rx="18" fill="url(#srScreen)" />
      {/* eyes - laughing emoji style */}
      <path d="M 78 90 Q 88 74 98 90" stroke="#6BE4B5" strokeWidth="4" fill="none" strokeLinecap="round" />
      <path d="M 142 90 Q 152 74 162 90" stroke="#6BE4B5" strokeWidth="4" fill="none" strokeLinecap="round" />
      {/* big smile - laughing mid-joke */}
      <path d="M 80 108 Q 120 136 160 108 L 158 112 Q 120 138 82 112 Z" fill="#6BE4B5" />
      <path d="M 96 124 Q 120 134 144 124 L 144 126 Q 120 134 96 126 Z" fill="#0A1F2A" />
      {/* screen scan lines */}
      <line x1="62" y1="76" x2="178" y2="76" stroke="#6BE4B5" strokeWidth="0.5" opacity="0.25" />
      <line x1="62" y1="116" x2="178" y2="116" stroke="#6BE4B5" strokeWidth="0.5" opacity="0.25" />
      {/* screen glare */}
      <path d="M 62 58 Q 70 54 100 54 L 110 62 L 62 72 Z" fill="#fff" opacity="0.15" />
      {/* speaker grill (under screen) */}
      <rect x="72" y="156" width="96" height="14" rx="4" fill="#39456A" />
      {[...Array(7)].map((_,i) => <rect key={i} x={78 + i*12} y="159" width="6" height="8" fill="#6A7894" />)}
      {/* ear bolts */}
      <circle cx="54" cy="106" r="5" fill="#39456A" />
      <circle cx="186" cy="106" r="5" fill="#39456A" />
      <circle cx="54" cy="106" r="2" fill="#8A98B8" />
      <circle cx="186" cy="106" r="2" fill="#8A98B8" />
    </svg>
  );
}

Object.assign(window, { AnchorDog, ChefTomato, StandupRobot });
