/* ============================================================
   Bookmaker chip set — uses user-supplied 3D logo PNG assets.
   Each PNG carries the chrome/3D effect; the container is
   minimal so the logo reads cleanly.
   ============================================================ */

// Bookmakers with 3D PNG assets in assets/bookmakers/3d/
const ASSETS_3D = {
  '1xbet':      'assets/bookmakers/3d/1xbet.png',
  'parimatch':  'assets/bookmakers/3d/parimatch.png',
  'polymarket': 'assets/bookmakers/3d/polymarket.png',
  'stake':      'assets/bookmakers/3d/stake.png',
  'bcgame':     'assets/bookmakers/3d/bc-game.png',
  'bc-game':    'assets/bookmakers/3d/bc-game.png',
  'saba':       'assets/bookmakers/3d/saba.png',
  'raybet':     'assets/bookmakers/3d/raybet.png',
  'sbobet':     'assets/bookmakers/3d/sbobet.png',
};

function BookmakerLogo({ id, size = 'lg' }) {
  const sizes = {
    lg: { h: 56, maxW: 168 },
    md: { h: 36, maxW: 110 },
    sm: { h: 22, maxW: 72 },
  };
  const sz = sizes[size] || sizes.lg;

  const src = ASSETS_3D[id];

  if (src) {
    return (
      <span style={{
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: sz.h,
        padding: 0,
        background: 'transparent',
        filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.55)) drop-shadow(0 0 8px rgba(150,200,255,0.10))',
        lineHeight: 0,
      }}>
        <img
          src={src}
          alt={id}
          style={{
            height: '100%',
            width: 'auto',
            maxWidth: sz.maxW,
            display: 'block',
            objectFit: 'contain',
          }}
          draggable={false}
        />
      </span>
    );
  }

  // Fallback for bookmakers without a 3D asset — styled monogram chip.
  const bk = (window.BOOKMAKERS && window.BOOKMAKERS[id]) || { name: id, mono: id.slice(0, 3).toUpperCase(), bg: '#1d2740', fg: '#caa86b' };
  return (
    <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: Math.min(sz.h, 32),
      padding: '4px 10px',
      borderRadius: 8,
      background: 'linear-gradient(180deg, rgba(40,60,100,0.55), rgba(10,18,38,0.85)), #0c1322',
      border: '1px solid rgba(170,210,255,0.18)',
      boxShadow: 'inset 0 1.4px 0 rgba(255,255,255,0.20), inset 0 -4px 12px -10px rgba(0,0,0,0.7), 0 2px 8px -2px rgba(0,0,0,0.5)',
      fontFamily: '"Inter", -apple-system, sans-serif',
      fontWeight: 900, fontStyle: 'italic',
      letterSpacing: '-0.02em',
      fontSize: Math.min(sz.h * 0.4, 14),
      color: '#eaf1ff',
      whiteSpace: 'nowrap',
    }}>{bk.name}</span>
  );
}

function BookmakerChipReal({ id, size = 'sm' }) {
  return <BookmakerLogo id={id} size={size === 'lg' ? 'md' : 'sm'} />;
}

Object.assign(window, { BookmakerLogo, BookmakerChipReal });