/* Bozo Belfort — the $CLOWNZ mascot.
   Original character drawn in simple geometric SVG: circles, ellipses, polygons, paths.
   No copyrighted/branded references. */

function Mascot({ size = 360, mood = "smug", small = false }) {
  // mood = "smug" | "scheming" | "rugged"
  const mouth = mood === "rugged"
    ? <path d="M120,180 Q150,210 180,180" stroke="#000" strokeWidth="6" fill="none" strokeLinecap="round" />
    : mood === "scheming"
      ? <path d="M115,178 Q150,170 185,178 Q150,200 115,178 Z" fill="#000" />
      : <path d="M115,178 Q150,205 185,178 Q150,210 115,178 Z" fill="#fff" stroke="#000" strokeWidth="3" />;

  return (
    <svg viewBox="0 0 300 360" width={size} height={size * 1.2} style={{ display: "block" }}>
      {/* SHADOW */}
      <ellipse cx="150" cy="345" rx="100" ry="10" fill="rgba(0,0,0,.6)" />

      {/* BODY: suit jacket */}
      <path d="M60,330 L80,250 L120,235 L150,225 L180,235 L220,250 L240,330 Z" fill="#1a0b2e" stroke="#000" strokeWidth="4" />
      {/* Lapels */}
      <path d="M120,235 L150,260 L130,300 Z" fill="#0a0612" stroke="#000" strokeWidth="3" />
      <path d="M180,235 L150,260 L170,300 Z" fill="#0a0612" stroke="#000" strokeWidth="3" />
      {/* Tiny tie */}
      <polygon points="148,255 152,255 156,265 144,265" fill="#ff2d55" stroke="#000" strokeWidth="2" />
      <polygon points="144,265 156,265 160,300 140,300" fill="#ff2d55" stroke="#000" strokeWidth="2" />
      {/* Pocket square: a tiny rug */}
      <rect x="190" y="262" width="22" height="14" fill="#39ff14" stroke="#000" strokeWidth="2" />
      <line x1="194" y1="262" x2="194" y2="276" stroke="#000" strokeWidth="1" />
      <line x1="200" y1="262" x2="200" y2="276" stroke="#000" strokeWidth="1" />
      <line x1="206" y1="262" x2="206" y2="276" stroke="#000" strokeWidth="1" />

      {/* NECK */}
      <rect x="138" y="218" width="24" height="20" fill="#fff7e8" stroke="#000" strokeWidth="3" />

      {/* COLLAR (clown ruffle) */}
      <g>
        {[0,1,2,3,4,5,6,7].map(i => (
          <circle key={i} cx={90 + i*17} cy="232" r="14" fill={i % 2 ? "#ff2bd6" : "#ffd60a"} stroke="#000" strokeWidth="3" />
        ))}
      </g>

      {/* HEAD */}
      <ellipse cx="150" cy="150" rx="78" ry="86" fill="#fff7e8" stroke="#000" strokeWidth="4" />
      {/* EARS */}
      <ellipse cx="72" cy="155" rx="10" ry="14" fill="#fff7e8" stroke="#000" strokeWidth="3" />
      <ellipse cx="228" cy="155" rx="10" ry="14" fill="#fff7e8" stroke="#000" strokeWidth="3" />

      {/* WIG — explosion of curls */}
      <g>
        {[
          [60,90,22,"#ff2d55"],[90,60,26,"#ffd60a"],[130,50,24,"#39ff14"],
          [170,52,26,"#00e5ff"],[210,62,24,"#ff2bd6"],[240,90,22,"#ffd60a"],
          [50,120,18,"#ff2bd6"],[250,120,18,"#39ff14"]
        ].map(([cx,cy,r,c],i)=>(
          <circle key={i} cx={cx} cy={cy} r={r} fill={c} stroke="#000" strokeWidth="3" />
        ))}
      </g>

      {/* TINY TOP HAT */}
      <g transform="translate(150,40) rotate(-12)">
        <ellipse cx="0" cy="6" rx="36" ry="6" fill="#000" stroke="#000" strokeWidth="2" />
        <rect x="-22" y="-30" width="44" height="36" fill="#000" stroke="#000" strokeWidth="2" />
        <rect x="-22" y="-12" width="44" height="6" fill="#ffd60a" />
        <circle cx="14" cy="-9" r="3" fill="#ff2d55" />
      </g>

      {/* EYEBROWS — diagonal, scheming */}
      <path d="M95,118 L130,108" stroke="#000" strokeWidth="6" strokeLinecap="round" />
      <path d="M170,108 L205,118" stroke="#000" strokeWidth="6" strokeLinecap="round" />

      {/* EYE PATCHES (clown makeup diamonds) */}
      <polygon points="115,135 130,115 145,135 130,160" fill="#ff2bd6" stroke="#000" strokeWidth="3" />
      <polygon points="155,135 170,115 185,135 170,160" fill="#ff2bd6" stroke="#000" strokeWidth="3" />

      {/* EYES — dollar signs */}
      <circle cx="130" cy="138" r="9" fill="#fff" stroke="#000" strokeWidth="2.5" />
      <circle cx="170" cy="138" r="9" fill="#fff" stroke="#000" strokeWidth="2.5" />
      <text x="130" y="143" textAnchor="middle" fontFamily="Bungee Shade, system-ui" fontSize="14" fill="#39ff14" fontWeight="900">$</text>
      <text x="170" y="143" textAnchor="middle" fontFamily="Bungee Shade, system-ui" fontSize="14" fill="#39ff14" fontWeight="900">$</text>

      {/* CHEEKS */}
      <circle cx="100" cy="170" r="14" fill="#ff2d55" opacity=".6" />
      <circle cx="200" cy="170" r="14" fill="#ff2d55" opacity=".6" />

      {/* NOSE — the iconic red ball */}
      <circle cx="150" cy="170" r="16" fill="#ff2d55" stroke="#000" strokeWidth="3" />
      <circle cx="145" cy="166" r="4" fill="#fff" opacity=".7" />

      {/* MOUTH */}
      {mouth}
      {/* Smug grin teeth */}
      {mood === "smug" && (
        <rect x="140" y="184" width="6" height="6" fill="#ffd60a" />
      )}

      {/* HANDS holding money bag */}
      <g transform="translate(40,280)">
        <circle cx="14" cy="14" r="14" fill="#fff7e8" stroke="#000" strokeWidth="3" />
        {/* sleeve */}
        <rect x="-6" y="-8" width="22" height="16" fill="#1a0b2e" stroke="#000" strokeWidth="3" />
      </g>

      {/* MONEY BAG */}
      <g transform="translate(220,275)">
        <path d="M0,10 Q0,-4 10,-6 L20,-6 Q30,-4 30,10 Q35,40 0,40 Q-5,30 0,10 Z" fill="#39ff14" stroke="#000" strokeWidth="3" />
        <text x="15" y="22" textAnchor="middle" fontFamily="Bungee Shade, system-ui" fontSize="16" fill="#000">$</text>
        <path d="M2,-6 L28,-6 L24,-12 L6,-12 Z" fill="#1a0b2e" stroke="#000" strokeWidth="3" />
      </g>

      {/* ROGUE TEAR / SWEAT — only when rugged */}
      {mood === "rugged" && (
        <path d="M125,150 Q120,165 125,170 Q130,165 125,150" fill="#00e5ff" stroke="#000" strokeWidth="2" />
      )}
    </svg>
  );
}

/* Smaller portrait variant for grid cards — simplified */
function ClownPortrait({ kind = "vc" }) {
  // Just color the wig/suit/accessories per archetype
  const palettes = {
    vc:   { wig: "#39ff14", suit: "#0a0612", accent: "#ffd60a", tag: "VC" },
    shill:{ wig: "#ff2bd6", suit: "#1a0b2e", accent: "#00e5ff", tag: "SHILL" },
    mm:   { wig: "#00e5ff", suit: "#0a0612", accent: "#ff2d55", tag: "MM" },
    cex:  { wig: "#ff2d55", suit: "#1a0b2e", accent: "#39ff14", tag: "CEX" },
    pump: { wig: "#ffd60a", suit: "#0a0612", accent: "#ff2bd6", tag: "P&D" },
  };
  const p = palettes[kind] || palettes.vc;
  return (
    <svg viewBox="0 0 200 200" width="100%" height="100%" style={{ display: "block" }}>
      <rect width="200" height="200" fill={`url(#stripes-${kind})`} />
      <defs>
        <pattern id={`stripes-${kind}`} width="20" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <rect width="20" height="20" fill="#1a0b2e" />
          <rect width="10" height="20" fill="#0a0612" />
        </pattern>
      </defs>
      {/* shoulders / suit */}
      <path d="M30,200 L50,140 L80,128 L100,124 L120,128 L150,140 L170,200 Z" fill={p.suit} stroke="#000" strokeWidth="3"/>
      <polygon points="80,128 100,148 90,180 80,200" fill="#000" />
      <polygon points="120,128 100,148 110,180 120,200" fill="#000" />
      {/* tie */}
      <polygon points="98,148 102,148 105,158 95,158 " fill={p.accent} stroke="#000" strokeWidth="2"/>
      <polygon points="95,158 105,158 108,182 92,182" fill={p.accent} stroke="#000" strokeWidth="2"/>
      {/* ruffle */}
      {[0,1,2,3,4,5].map(i => (
        <circle key={i} cx={62 + i*16} cy="135" r="10" fill={i%2?p.accent:p.wig} stroke="#000" strokeWidth="2.5" />
      ))}
      {/* head */}
      <ellipse cx="100" cy="86" rx="50" ry="56" fill="#fff7e8" stroke="#000" strokeWidth="3" />
      {/* wig */}
      {[[60,50,16],[80,38,18],[100,32,18],[120,38,18],[140,50,16],[145,80,12],[55,80,12]].map(([cx,cy,r],i)=>(
        <circle key={i} cx={cx} cy={cy} r={r} fill={p.wig} stroke="#000" strokeWidth="2.5" />
      ))}
      {/* eye patches */}
      <polygon points="78,80 88,68 98,80 88,96" fill={p.accent} stroke="#000" strokeWidth="2"/>
      <polygon points="102,80 112,68 122,80 112,96" fill={p.accent} stroke="#000" strokeWidth="2"/>
      <circle cx="88" cy="82" r="5" fill="#000"/>
      <circle cx="112" cy="82" r="5" fill="#000"/>
      <circle cx="89" cy="80" r="1.5" fill="#fff"/>
      <circle cx="113" cy="80" r="1.5" fill="#fff"/>
      {/* cheeks */}
      <circle cx="68" cy="106" r="8" fill="#ff2d55" opacity=".55"/>
      <circle cx="132" cy="106" r="8" fill="#ff2d55" opacity=".55"/>
      {/* nose */}
      <circle cx="100" cy="106" r="11" fill="#ff2d55" stroke="#000" strokeWidth="2"/>
      {/* mouth — smug */}
      <path d="M82,122 Q100,138 118,122" stroke="#000" strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* tag */}
      <g transform="translate(140,150)">
        <rect x="-2" y="-2" width="50" height="22" fill="#000" stroke={p.accent} strokeWidth="2" rx="4"/>
        <text x="23" y="13" textAnchor="middle" fontFamily="Bungee, system-ui" fontSize="11" fill={p.accent}>{p.tag}</text>
      </g>
    </svg>
  );
}

/* Avatar for jeeter rows — pure colorful blob with a clown nose */
function JeeterAvatar({ seed = 0 }) {
  const wigs = ["#ff2d55","#ffd60a","#39ff14","#00e5ff","#ff2bd6","#fff7e8"];
  const w = wigs[seed % wigs.length];
  const a = wigs[(seed+2) % wigs.length];
  return (
    <svg viewBox="0 0 60 60" width="100%" height="100%">
      <rect width="60" height="60" fill="#1a0b2e"/>
      {/* wig */}
      <circle cx="14" cy="18" r="9" fill={w} stroke="#000" strokeWidth="2"/>
      <circle cx="46" cy="18" r="9" fill={w} stroke="#000" strokeWidth="2"/>
      <circle cx="30" cy="10" r="9" fill={w} stroke="#000" strokeWidth="2"/>
      {/* face */}
      <ellipse cx="30" cy="34" rx="20" ry="20" fill="#fff7e8" stroke="#000" strokeWidth="2"/>
      {/* eyes */}
      <polygon points="20,30 26,24 32,30 26,36" fill={a} stroke="#000" strokeWidth="1.5"/>
      <polygon points="34,30 40,24 46,30 40,36" fill={a} stroke="#000" strokeWidth="1.5"/>
      <circle cx="26" cy="30" r="2" fill="#000"/>
      <circle cx="40" cy="30" r="2" fill="#000"/>
      {/* nose */}
      <circle cx="33" cy="42" r="5" fill="#ff2d55" stroke="#000" strokeWidth="1.5"/>
      {/* mouth */}
      <path d="M22,48 Q33,54 44,48" stroke="#000" strokeWidth="2" fill="none" strokeLinecap="round"/>
    </svg>
  );
}

window.Mascot = Mascot;
window.ClownPortrait = ClownPortrait;
window.JeeterAvatar = JeeterAvatar;