/* ════════════════════════════════════════════════════════════════════
 * Fiesta Logo components — React + Babel inline (sin build step).
 * Renderiza el badge "26" del header.
 * ════════════════════════════════════════════════════════════════════ */
const FT = {
  bg:     '#FFFFFF',
  paper:  '#F8F8F8',
  ink:    '#1F1308',
  yellow: '#F4C430',
  red:    '#D2232A',
  green:  '#0E6B3E',
  pink:   '#E6007E',
  cobalt: '#1E4FB8',
};

/* Badge "26" — cuadrado redondeado, fondo ink, texto amarillo Bowlby */
const BanditaFoilBadge = ({ size = 40 }) => (
  <div style={{
    width:          size,
    height:         size,
    background:     FT.ink,
    border:         `2px solid ${FT.ink}`,
    borderRadius:   8,
    display:        'flex',
    alignItems:     'center',
    justifyContent: 'center',
    boxShadow:      `3px 3px 0 ${FT.yellow}`,
    flexShrink:     0,
  }}>
    <span style={{
      fontFamily:  "'Bowlby One SC', sans-serif",
      fontSize:    size * 0.43,
      color:       FT.yellow,
      lineHeight:  1,
      fontStyle:   'normal',
      userSelect:  'none',
    }}>26</span>
  </div>
);

/* Sticker grande — actualizado con paleta Fiesta (no se monta en producción) */
const BanditaSticker = ({ scale = 0.52 }) => {
  const W = 480 * scale, H = 320 * scale;
  return (
    <div style={{
      display:         'inline-block',
      background:      FT.ink,
      backgroundImage: 'repeating-linear-gradient(45deg,rgba(255,255,255,0.06) 0 14px,transparent 14px 28px)',
      padding:         56 * scale,
    }}>
      <div style={{
        width:        W,
        height:       H,
        background:   FT.bg,
        border:       `${4 * scale}px solid ${FT.ink}`,
        borderRadius: 16 * scale,
        padding:      22 * scale,
        transform:    'rotate(-3deg)',
        boxShadow:    `${10*scale}px ${10*scale}px 0 ${FT.red},${10*scale}px ${10*scale}px 0 ${4*scale}px ${FT.ink}`,
        position:     'relative',
        display:      'flex',
        flexDirection:'column',
      }}>
        <div style={{ position: 'absolute', inset: 8 * scale,
                      border: `${2 * scale}px dashed ${FT.ink}`,
                      borderRadius: 10 * scale, opacity: 0.25, pointerEvents: 'none' }} />
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 * scale }}>
          <div style={{ display: 'flex', gap: 4 * scale }}>
            {[FT.red, FT.yellow, FT.green, FT.pink].map((c, i) =>
              <div key={i} style={{ width: 14 * scale, height: 14 * scale, background: c,
                                    border: `${1.5 * scale}px solid ${FT.ink}`, borderRadius: '50%' }} />)}
          </div>
          <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11 * scale, color: FT.ink,
                        fontWeight: 700, letterSpacing: 1 }}>№ 001 / CL</div>
        </div>
        {/* Barra tricolor en lugar de holo */}
        <div style={{ height: 20 * scale, marginBottom: 14 * scale, borderRadius: 2,
                      border: `1.5px solid ${FT.ink}`,
                      background: `linear-gradient(90deg, ${FT.red} 0%, ${FT.yellow} 50%, ${FT.green} 100%)` }} />
        <div style={{
          fontFamily:    "'Bowlby One SC', sans-serif",
          fontStyle:     'normal',
          fontSize:      96 * scale,
          lineHeight:    0.85,
          color:         FT.red,
          letterSpacing: -2,
          textTransform: 'uppercase',
          textShadow:    `${3 * scale}px ${3 * scale}px 0 ${FT.yellow}`,
        }}>
          <div>Mundial</div>
          <div style={{ color: FT.ink, textShadow: `${3 * scale}px ${3 * scale}px 0 ${FT.red}` }}>2026 ★</div>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div style={{ fontFamily: 'Space Mono, monospace', fontSize: 11 * scale, color: FT.ink, lineHeight: 1.4 }}>
            <div style={{ fontWeight: 700, color: FT.red }}>POLLA · 6 BANDITAS</div>
            <div>FIFA WORLD CUP 2026</div>
          </div>
          <div style={{
            fontFamily:    "'Bowlby One SC', sans-serif",
            fontStyle:     'normal',
            fontSize:      28 * scale,
            color:         FT.ink,
            background:    FT.yellow,
            padding:       `${2 * scale}px ${10 * scale}px`,
            border:        `${2 * scale}px solid ${FT.ink}`,
            transform:     'rotate(4deg)',
          }}>26</div>
        </div>
        <div style={{
          position: 'absolute', bottom: 40 * scale, right: 40 * scale,
          width: 90 * scale, height: 90 * scale,
          background:    FT.yellow,
          border:        `${3 * scale}px solid ${FT.ink}`,
          borderRadius:  8,
          transform:     'rotate(15deg)',
          display:       'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column',
          boxShadow:     `${5 * scale}px ${5 * scale}px 0 ${FT.ink}`,
          fontFamily:    "'Bowlby One SC', sans-serif",
        }}>
          <div style={{ fontSize: 26 * scale, color: FT.ink, lineHeight: 1, fontStyle: 'normal' }}>26</div>
          <div style={{ fontSize: 9 * scale, fontFamily: 'Caveat, cursive',
                        color: FT.pink, marginTop: 2 * scale, fontWeight: 700 }}>mundial</div>
        </div>
      </div>
    </div>
  );
};

const badgeRoot = document.getElementById('logo-badge');
if (badgeRoot) ReactDOM.createRoot(badgeRoot).render(<BanditaFoilBadge size={40} />);