/* global React */
// Real ball assets + BNB logo for use throughout the app.
// Replaces emojis 🥈 🥇 ⚽ 🟡 with branded imagery.

function Ball({ variant = "silver", size = 22 }) {
  const src = variant === "gold" ? "assets/gold.png" : "assets/silver.png";
  return (
    <img
      src={src}
      width={size}
      height={size}
      className={`ball-icon ball-${variant}`}
      alt={variant === "gold" ? "GOLD" : "SILVER"}
      draggable={false}
    />
  );
}

// Logo — protocol GOLDBALL token logo (uses assets/logo.png).
function Logo({ size = 22 }) {
  return (
    <img
      src="assets/logo.png"
      width={size}
      height={size}
      className="ball-icon ball-logo"
      alt="GOLDBALL"
      draggable={false}
    />
  );
}

// BNB logo — official-style yellow diamond mark, inline SVG so it scales cleanly.
function Bnb({ size = 18 }) {
  return (
    <svg viewBox="0 0 32 32" width={size} height={size} className="bnb-icon" aria-label="BNB">
      <circle cx="16" cy="16" r="16" fill="#F0B90B"/>
      <g fill="#FFFFFF">
        {/* center diamond */}
        <path d="M16 13.32 L18.68 16 L16 18.68 L13.32 16 Z"/>
        {/* top */}
        <path d="M16 7.05 L11.85 11.2 L13.32 12.67 L16 9.99 L18.68 12.67 L20.15 11.2 Z"/>
        {/* bottom */}
        <path d="M16 24.95 L11.85 20.8 L13.32 19.33 L16 22.01 L18.68 19.33 L20.15 20.8 Z"/>
        {/* left */}
        <path d="M7.05 16 L9.55 13.5 L11.02 14.97 L9.99 16 L11.02 17.03 L9.55 18.5 Z"/>
        {/* right */}
        <path d="M24.95 16 L22.45 13.5 L20.98 14.97 L22.01 16 L20.98 17.03 L22.45 18.5 Z"/>
      </g>
    </svg>
  );
}

function PlayerToon({ size = 26 }) {
  // Generic comic-style player avatar — no specific celebrity.
  // A confident grinning footballer with a jersey number "9".
  return (
    <svg viewBox="0 0 60 60" width={size} height={size} className="player-toon" aria-label="Player Token">
      <defs>
        <linearGradient id="pt-jersey" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#0ecb81"/>
          <stop offset="100%" stopColor="#067d4f"/>
        </linearGradient>
        <linearGradient id="pt-skin" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#f4c8a0"/>
          <stop offset="100%" stopColor="#d09a6b"/>
        </linearGradient>
        <radialGradient id="pt-bg" cx="50%" cy="40%">
          <stop offset="0%" stopColor="#1a2530"/>
          <stop offset="100%" stopColor="#0a0f15"/>
        </radialGradient>
      </defs>
      {/* circular background */}
      <circle cx="30" cy="30" r="29" fill="url(#pt-bg)" stroke="#0ecb81" strokeWidth="1.2"/>
      {/* jersey collar */}
      <path d="M14 50 Q14 38 22 35 L38 35 Q46 38 46 50 L46 60 L14 60 Z" fill="url(#pt-jersey)"/>
      {/* jersey stripe */}
      <rect x="14" y="42" width="32" height="2.5" fill="#ffffff" opacity="0.7"/>
      {/* number */}
      <text x="30" y="55" textAnchor="middle" fontFamily="'Manrope', sans-serif" fontWeight="800" fontSize="9" fill="#ffffff" opacity="0.9">9</text>
      {/* neck */}
      <rect x="26" y="30" width="8" height="6" fill="url(#pt-skin)"/>
      {/* head */}
      <ellipse cx="30" cy="23" rx="11" ry="12" fill="url(#pt-skin)"/>
      {/* hair (short fade) */}
      <path d="M19 19 Q22 12 30 11 Q38 12 41 19 L41 16 Q36 13 30 13 Q24 13 19 16 Z" fill="#2a1a0a"/>
      <path d="M19 19 Q22 17 41 19 L41 22 Q30 21 19 22 Z" fill="#2a1a0a"/>
      {/* eyes */}
      <circle cx="26" cy="23" r="1.4" fill="#0a0a0a"/>
      <circle cx="34" cy="23" r="1.4" fill="#0a0a0a"/>
      <circle cx="26.4" cy="22.6" r="0.4" fill="#ffffff"/>
      <circle cx="34.4" cy="22.6" r="0.4" fill="#ffffff"/>
      {/* eyebrows — confident */}
      <path d="M22.5 19.5 L27.5 20" stroke="#2a1a0a" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      <path d="M32.5 20 L37.5 19.5" stroke="#2a1a0a" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      {/* nose */}
      <path d="M30 24 L29 28 L31 28 Z" fill="#c08868" opacity="0.6"/>
      {/* smile */}
      <path d="M26 29 Q30 32 34 29" stroke="#7a3520" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
      <path d="M27 29.5 Q30 31 33 29.5" fill="#ffffff"/>
    </svg>
  );
}

Object.assign(window, { Ball, Logo, Bnb, PlayerToon });
