/* burp.agency — Mascot
   Mascot in a colored geometric shape. The mascot image stays ink-black
   by default; pass `color="cream"` to invert it to white/cream for dark bgs.
   (No CSS mask — that broke in some browsers; plain <img> with filter is
   more reliable.)

   Usage:
     <Mascot shape="circle" bg="orange"     size={88} rotate={-4} />
     <Mascot shape="rect"   bg="paleOrange" size={88} aspect="3/2" />
     <Mascot shape="star"   bg="ink"        size={110} color="cream" />
*/

const MASCOT_COLOR_VARS = {
  ink:        'var(--color-ink)',
  cream:      'var(--color-cream)',
  orange:     'var(--color-orange)',
  paleOrange: 'var(--color-pale-orange)',
  charcoal:   'var(--color-charcoal)',
  white:      '#ffffff',
};

const MASCOT_SHAPES = {
  circle: { borderRadius: '50%' },
  square: { borderRadius: 0 },
  rect:   { borderRadius: 0 },
  pill:   { borderRadius: 999 },
  star:   {
    clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
    borderRadius: 0,
  },
};

const Mascot = ({
  shape = 'circle',
  bg = 'orange',
  color = 'ink',         // 'ink' = default black mascot; 'cream'/'white' = inverted
  size = 80,
  aspect,                // e.g. "3/2" for rect
  rotate = 0,
  border = true,
  asset = 'assets/burp-mascot.png',
  scale = 0.78,
  style,
}) => {
  const width  = aspect ? size * (parseFloat(aspect.split('/')[0]) / parseFloat(aspect.split('/')[1])) : size;
  const height = size;
  const bgVal     = MASCOT_COLOR_VARS[bg]    || bg;
  const inverted  = color === 'cream' || color === 'white';
  const hasBorder = border && (shape !== 'star');

  return (
    <div style={{
      width, height,
      background: bgVal,
      border: hasBorder ? '1px solid var(--color-ink)' : 'none',
      transform: rotate ? `rotate(${rotate}deg)` : undefined,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, overflow: 'hidden',
      transition: 'transform .25s cubic-bezier(.22,1,.36,1)',
      ...MASCOT_SHAPES[shape],
      ...style,
    }}>
      <img src={asset} alt=""
           style={{
             width:  `${scale * 100}%`,
             height: `${scale * 100}%`,
             objectFit: 'contain',
             filter: inverted ? 'invert(1)' : 'none',
             pointerEvents: 'none',
             userSelect: 'none',
           }} />
    </div>
  );
};

Object.assign(window, { Mascot, MASCOT_COLOR_VARS, MASCOT_SHAPES });