// Bingo the Ape — our original mascot. Simple geometric ape.
// Poses: 'wink', 'thumbs', 'peek', 'dab', 'wave'

function Bingo({ pose = 'wink', size = 120, style = {} }) {
  // colors
  const fur = '#4A2B1A';
  const furLight = '#6B3E24';
  const face = '#E8B88A';
  const faceDark = '#C98F5E';
  const mouth = '#8B3A2E';
  const eye = '#140602';
  const hi = '#FFF7E6';

  const W = 200;
  const H = 200;

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width={size} height={size} style={style}>
      {pose === 'wink' && <BingoWink {...{fur,furLight,face,faceDark,mouth,eye,hi}} />}
      {pose === 'thumbs' && <BingoThumbs {...{fur,furLight,face,faceDark,mouth,eye,hi}} />}
      {pose === 'peek' && <BingoPeek {...{fur,furLight,face,faceDark,mouth,eye,hi}} />}
      {pose === 'dab' && <BingoDab {...{fur,furLight,face,faceDark,mouth,eye,hi}} />}
      {pose === 'wave' && <BingoWave {...{fur,furLight,face,faceDark,mouth,eye,hi}} />}
    </svg>
  );
}

function BingoWink({fur,furLight,face,faceDark,mouth,eye,hi}) {
  return (
    <g>
      {/* ears */}
      <circle cx="38" cy="88" r="22" fill={fur}/>
      <circle cx="38" cy="88" r="11" fill={faceDark}/>
      <circle cx="162" cy="88" r="22" fill={fur}/>
      <circle cx="162" cy="88" r="11" fill={faceDark}/>
      {/* head */}
      <ellipse cx="100" cy="100" rx="70" ry="72" fill={fur}/>
      {/* face mask */}
      <ellipse cx="100" cy="115" rx="52" ry="54" fill={face}/>
      {/* forehead tuft */}
      <path d="M60 52 Q 75 38 100 45 Q 125 38 140 52 Q 130 60 100 58 Q 70 60 60 52 Z" fill={furLight}/>
      {/* brows */}
      <path d="M62 88 Q 78 80 92 88" stroke={fur} strokeWidth="6" fill="none" strokeLinecap="round"/>
      <path d="M108 88 Q 122 80 138 88" stroke={fur} strokeWidth="6" fill="none" strokeLinecap="round"/>
      {/* eyes — left open, right winking */}
      <circle cx="78" cy="108" r="8" fill={eye}/>
      <circle cx="80" cy="105" r="2.4" fill={hi}/>
      <path d="M114 108 Q 124 104 132 108" stroke={eye} strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* snout */}
      <ellipse cx="100" cy="140" rx="30" ry="22" fill={faceDark}/>
      <ellipse cx="92" cy="132" rx="3" ry="4" fill={eye}/>
      <ellipse cx="108" cy="132" rx="3" ry="4" fill={eye}/>
      {/* smile */}
      <path d="M82 148 Q 100 162 118 148" stroke={mouth} strokeWidth="5" fill="none" strokeLinecap="round"/>
    </g>
  );
}

function BingoThumbs({fur,furLight,face,faceDark,mouth,eye,hi}) {
  return (
    <g>
      {/* ears */}
      <circle cx="38" cy="82" r="22" fill={fur}/>
      <circle cx="38" cy="82" r="11" fill={faceDark}/>
      <circle cx="162" cy="82" r="22" fill={fur}/>
      <circle cx="162" cy="82" r="11" fill={faceDark}/>
      {/* head */}
      <ellipse cx="100" cy="95" rx="68" ry="70" fill={fur}/>
      <ellipse cx="100" cy="110" rx="50" ry="52" fill={face}/>
      <path d="M62 48 Q 78 34 100 41 Q 122 34 138 48 Q 128 56 100 54 Q 72 56 62 48 Z" fill={furLight}/>
      {/* closed happy eyes */}
      <path d="M68 100 Q 78 92 90 100" stroke={eye} strokeWidth="5" fill="none" strokeLinecap="round"/>
      <path d="M110 100 Q 120 92 132 100" stroke={eye} strokeWidth="5" fill="none" strokeLinecap="round"/>
      <ellipse cx="100" cy="135" rx="28" ry="20" fill={faceDark}/>
      <ellipse cx="92" cy="128" rx="2.8" ry="3.5" fill={eye}/>
      <ellipse cx="108" cy="128" rx="2.8" ry="3.5" fill={eye}/>
      {/* big grin */}
      <path d="M80 143 Q 100 160 120 143 Q 100 152 80 143 Z" fill={mouth}/>
      <path d="M80 143 Q 100 160 120 143" stroke={eye} strokeWidth="4" fill="none" strokeLinecap="round"/>
      {/* thumbs up arm */}
      <rect x="155" y="150" width="22" height="38" rx="10" fill={fur}/>
      <circle cx="166" cy="148" r="16" fill={face}/>
      <rect x="162" y="128" width="8" height="20" rx="4" fill={face}/>
      <path d="M162 128 L 162 120 L 170 120 L 170 128" stroke={faceDark} strokeWidth="1.5" fill="none"/>
    </g>
  );
}

function BingoPeek({fur,furLight,face,faceDark,mouth,eye,hi}) {
  // just head + one hand peeking
  return (
    <g>
      <circle cx="38" cy="85" r="22" fill={fur}/>
      <circle cx="38" cy="85" r="11" fill={faceDark}/>
      <circle cx="162" cy="85" r="22" fill={fur}/>
      <circle cx="162" cy="85" r="11" fill={faceDark}/>
      <ellipse cx="100" cy="100" rx="70" ry="72" fill={fur}/>
      <ellipse cx="100" cy="115" rx="52" ry="54" fill={face}/>
      <path d="M60 52 Q 75 38 100 45 Q 125 38 140 52 Q 130 60 100 58 Q 70 60 60 52 Z" fill={furLight}/>
      {/* curious eyes looking up */}
      <circle cx="78" cy="108" r="9" fill="#fff"/>
      <circle cx="80" cy="104" r="5" fill={eye}/>
      <circle cx="81" cy="102" r="1.6" fill={hi}/>
      <circle cx="122" cy="108" r="9" fill="#fff"/>
      <circle cx="124" cy="104" r="5" fill={eye}/>
      <circle cx="125" cy="102" r="1.6" fill={hi}/>
      <ellipse cx="100" cy="140" rx="30" ry="22" fill={faceDark}/>
      <ellipse cx="92" cy="132" rx="3" ry="4" fill={eye}/>
      <ellipse cx="108" cy="132" rx="3" ry="4" fill={eye}/>
      <ellipse cx="100" cy="150" rx="12" ry="6" fill={mouth}/>
    </g>
  );
}

function BingoDab({fur,furLight,face,faceDark,mouth,eye,hi}) {
  return (
    <g>
      {/* dab arm up to face */}
      <rect x="118" y="40" width="18" height="70" rx="9" fill={fur} transform="rotate(-25 127 75)"/>
      {/* other arm out */}
      <rect x="30" y="100" width="70" height="18" rx="9" fill={fur} transform="rotate(-10 65 109)"/>
      <circle cx="18" cy="100" r="14" fill={face}/>
      {/* head tucked into arm */}
      <circle cx="35" cy="75" r="18" fill={fur}/>
      <circle cx="35" cy="75" r="9" fill={faceDark}/>
      <ellipse cx="95" cy="95" rx="60" ry="62" fill={fur}/>
      <ellipse cx="95" cy="108" rx="44" ry="46" fill={face}/>
      {/* cool eyes */}
      <path d="M65 98 Q 75 92 85 98" stroke={eye} strokeWidth="5" fill="none" strokeLinecap="round"/>
      <path d="M105 98 Q 115 92 125 98" stroke={eye} strokeWidth="5" fill="none" strokeLinecap="round"/>
      <ellipse cx="95" cy="130" rx="26" ry="18" fill={faceDark}/>
      <ellipse cx="88" cy="124" rx="2.5" ry="3" fill={eye}/>
      <ellipse cx="102" cy="124" rx="2.5" ry="3" fill={eye}/>
      <path d="M80 138 Q 95 145 110 138" stroke={mouth} strokeWidth="5" fill="none" strokeLinecap="round"/>
    </g>
  );
}

function BingoWave({fur,furLight,face,faceDark,mouth,eye,hi}) {
  return (
    <g>
      <circle cx="38" cy="85" r="22" fill={fur}/>
      <circle cx="38" cy="85" r="11" fill={faceDark}/>
      <circle cx="162" cy="85" r="22" fill={fur}/>
      <circle cx="162" cy="85" r="11" fill={faceDark}/>
      <ellipse cx="100" cy="100" rx="70" ry="72" fill={fur}/>
      <ellipse cx="100" cy="115" rx="52" ry="54" fill={face}/>
      <path d="M60 52 Q 75 38 100 45 Q 125 38 140 52 Q 130 60 100 58 Q 70 60 60 52 Z" fill={furLight}/>
      <circle cx="78" cy="108" r="8" fill={eye}/>
      <circle cx="80" cy="105" r="2.4" fill={hi}/>
      <circle cx="122" cy="108" r="8" fill={eye}/>
      <circle cx="124" cy="105" r="2.4" fill={hi}/>
      <ellipse cx="100" cy="140" rx="30" ry="22" fill={faceDark}/>
      <path d="M82 146 Q 100 160 118 146" stroke={mouth} strokeWidth="5" fill="none" strokeLinecap="round"/>
      {/* waving hand */}
      <rect x="155" y="30" width="22" height="50" rx="10" fill={fur} transform="rotate(15 166 55)"/>
      <circle cx="175" cy="28" r="16" fill={face}/>
    </g>
  );
}

window.Bingo = Bingo;
