// Shared UI primitives + brand
// Palette: Portuguese green / gold / red / cream
const C = {
  green: '#0a6b3a',
  greenDeep: '#053a1f',
  greenInk: '#021a0e',
  gold: '#ffc83d',
  goldDeep: '#e69a00',
  red: '#d6263a',
  redDeep: '#971120',
  cream: '#fdf7e8',
  paper: '#fff8e7',
  ink: '#0d1410',
};
window.C = C;

// "CRAQUES 26" wordmark logo (no copyrighted imagery)
function Logo({ size = 22, light = false }) {
  const fg = light ? C.cream : C.greenInk;
  const accent = light ? C.gold : C.red;
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
      fontSize: size, letterSpacing: '0.04em', color: fg, lineHeight: 1,
    }}>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: size * 1.15, height: size * 1.15, borderRadius: 6,
        background: accent, color: light ? C.greenInk : C.cream,
        transform: 'rotate(-4deg)', fontWeight: 900,
        fontSize: size * 0.65, paddingTop: 2,
      }}>C26</span>
      <span>CRAQUES <span style={{ color: accent }}>26</span></span>
    </div>
  );
}

// Big CTA button — chunky, glossy, with shadow
function CTA({ children, onClick, color = 'gold', full = true, small = false, style = {} }) {
  const bg = color === 'gold' ? C.gold : color === 'red' ? C.red : C.green;
  const fg = color === 'gold' ? C.greenInk : C.cream;
  const shadow = color === 'gold' ? C.goldDeep : color === 'red' ? C.redDeep : C.greenDeep;
  return (
    <button
      onClick={(e) => { window.Sound?.playSelect(); onClick && onClick(e); }}
      style={{
        width: full ? '100%' : 'auto',
        padding: small ? '12px 18px' : '18px 22px',
        border: 'none', borderRadius: 16,
        background: `linear-gradient(180deg, ${bg} 0%, ${shadow} 100%)`,
        color: fg, fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
        fontSize: small ? 16 : 22, letterSpacing: '0.05em', textTransform: 'uppercase',
        fontWeight: 700, boxShadow: `0 4px 0 ${shadow}, 0 8px 18px rgba(0,0,0,0.18)`,
        cursor: 'pointer', position: 'relative', transition: 'transform 0.08s',
        ...style,
      }}
      onMouseDown={(e) => e.currentTarget.style.transform = 'translateY(2px)'}
      onMouseUp={(e) => e.currentTarget.style.transform = ''}
      onMouseLeave={(e) => e.currentTarget.style.transform = ''}
    >{children}</button>
  );
}

// Sticker card. Uses player artwork when provided, with a colored fallback.
function Cromo({ team = 'POR', num = 7, pos = 'AVA', name = 'Jogador', img = null, rare = false, tilt = 0, size = 1 }) {
  // team color map (fictional palette for generic codes)
  const teamColors = {
    POR: ['#c8102e', '#015e2e'], BRA: ['#fedf00', '#009739'], ARG: ['#75aadb', '#fff'],
    FRA: ['#0055a4', '#ef4135'], ESP: ['#aa151b', '#f1bf00'], GER: ['#000', '#dd0000'],
    ENG: ['#fff', '#cf081f'], NED: ['#ae1c28', '#21468b'], BEL: ['#000', '#fdda24'],
    ITA: ['#008c45', '#cd212a'], CRO: ['#f0263c', '#171796'], MEX: ['#006847', '#ce1126'],
    USA: ['#3c3b6e', '#b22234'], URU: ['#7b8cde', '#fcd116'], JPN: ['#fff', '#bc002d'],
    KOR: ['#fff', '#003478'], MAR: ['#c1272d', '#006233'], SEN: ['#00853f', '#fdef42'],
  };
  const [c1, c2] = teamColors[team] || ['#444', '#888'];
  const displayName = name.toUpperCase();
  const nameFontSize = displayName.length > 16 ? 8.5 * size : displayName.length > 12 ? 9.5 * size : 11 * size;
  return (
    <div style={{
      width: 90 * size, height: 132 * size, borderRadius: 8 * size,
      background: `linear-gradient(135deg, ${c1} 0%, ${c1} 45%, ${c2} 55%, ${c2} 100%)`,
      position: 'relative', overflow: 'hidden',
      boxShadow: rare
        ? `0 6px 16px rgba(255,200,60,0.5), inset 0 0 0 ${2 * size}px ${C.gold}`
        : '0 4px 12px rgba(0,0,0,0.25)',
      transform: `rotate(${tilt}deg)`, flexShrink: 0,
      fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
    }}>
      {/* holographic shine for rare */}
      {rare && <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 70%)',
        animation: 'shine 2.2s linear infinite',
        zIndex: 3,
      }} />}
      {img && <img
        src={img}
        alt={name}
        style={{
          position: 'absolute',
          inset: 4 * size,
          width: `calc(100% - ${8 * size}px)`,
          height: `calc(100% - ${8 * size}px)`,
          objectFit: 'cover',
          borderRadius: 5 * size,
          boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.25)',
        }}
      />}
      {/* number circle */}
      <div style={{
        position: 'absolute', top: 6 * size, right: 6 * size,
        width: 28 * size, height: 28 * size, borderRadius: '50%',
        background: C.cream, color: C.greenInk, display: 'flex',
        alignItems: 'center', justifyContent: 'center',
        fontSize: 18 * size, fontWeight: 900,
        boxShadow: '0 1px 2px rgba(0,0,0,0.3)', zIndex: 4,
      }}>{num}</div>
      {/* silhouette area (just a gradient bubble) */}
      {!img && <div style={{
        position: 'absolute', inset: 0, top: 30 * size, bottom: 32 * size,
        background: 'radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.18) 0%, transparent 60%)',
      }} />}
      {/* bottom band */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        background: 'rgba(0,0,0,0.7)', color: '#fff',
        padding: `${3 * size}px ${6 * size}px ${5 * size}px`,
        fontSize: 9 * size, letterSpacing: '0.05em', zIndex: 4,
      }}>
        <div style={{ fontSize: nameFontSize, fontWeight: 700, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{displayName}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', opacity: 0.85 }}>
          <span>{team}</span><span>{pos}</span>
        </div>
      </div>
      {rare && <div style={{
        position: 'absolute', top: 6 * size, left: 6 * size,
        background: C.gold, color: C.greenInk, fontSize: 8 * size,
        padding: '2px 5px', borderRadius: 3, fontWeight: 900,
        zIndex: 4,
      }}>RARO</div>}
    </div>
  );
}

// Ticker / countdown chip
function Chip({ children, color = C.red, style = {} }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 999,
      background: color, color: '#fff',
      fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
      fontSize: 13, letterSpacing: '0.06em',
      ...style,
    }}>{children}</div>
  );
}

// Section heading
function SectionTitle({ kicker, title, light = false }) {
  return (
    <div style={{ marginBottom: 14 }}>
      {kicker && <div style={{
        fontFamily: '"Bebas Neue", sans-serif', fontSize: 13,
        color: light ? C.gold : C.red, letterSpacing: '0.12em',
        marginBottom: 4,
      }}>{kicker}</div>}
      <div style={{
        fontFamily: '"Bebas Neue", "Arial Black", sans-serif',
        fontSize: 30, lineHeight: 0.95, letterSpacing: '0.01em',
        color: light ? C.cream : C.greenInk, textTransform: 'uppercase',
      }}>{title}</div>
    </div>
  );
}

// Stadium-stripe background pattern
function StadiumBg({ children, style = {} }) {
  return (
    <div style={{
      background: `
        radial-gradient(ellipse at 50% 0%, rgba(255,200,60,0.18) 0%, transparent 60%),
        repeating-linear-gradient(90deg, ${C.green} 0px, ${C.green} 24px, ${C.greenDeep} 24px, ${C.greenDeep} 48px)
      `,
      position: 'relative', ...style,
    }}>{children}</div>
  );
}

Object.assign(window, { Logo, CTA, Cromo, Chip, SectionTitle, StadiumBg });