function PromoFlyer({ theme, t }) {
  const p = t.promo;
  if (!p) return null;
  const href = 'https://wa.me/5491133720000?text=' + encodeURIComponent(p.waText);
  const track = () => window.trackContacto && window.trackContacto();
  const disp = {
    fontFamily: theme.display,
    fontStyle: theme.displayItalic ? 'italic' : 'normal',
    fontWeight: theme.displayWeight
  };
  return (
    <section id="show-en-vivo" data-screen-label="Show en vivo" style={{
      background: theme.ink, color: theme.bg, padding: '80px 28px'
    }}>
      <div className="ls-promo-grid" style={{
        maxWidth: '1100px', margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'minmax(0, 420px) minmax(0, 1fr)', gap: '64px', alignItems: 'center'
      }}>
        <a href={href} target="_blank" rel="noopener noreferrer" onClick={track} aria-label={p.cta}
          style={{
            display: 'block', borderRadius: theme.radius, overflow: 'hidden',
            transform: 'rotate(-2deg)', boxShadow: '0 18px 40px rgba(0,0,0,0.35)',
            transition: 'transform 0.25s ease'
          }}
          onMouseEnter={(e) => e.currentTarget.style.transform = 'rotate(0deg) scale(1.02)'}
          onMouseLeave={(e) => e.currentTarget.style.transform = 'rotate(-2deg)'}>
          <img src="assets/flyer-salsa-en-vivo.jpg" alt={p.alt} style={{ display: 'block', width: '100%', height: 'auto' }} />
        </a>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
          <div style={{
            fontFamily: theme.mono, fontSize: '12px', letterSpacing: '0.18em', textTransform: 'uppercase',
            fontWeight: 700, display: 'flex', alignItems: 'center', gap: '8px'
          }}><span style={{ color: theme.accent2 }}>●</span> {p.kicker}</div>
          <div style={{ ...disp, fontSize: 'clamp(48px, 6vw, 96px)', lineHeight: 0.92, letterSpacing: '-0.04em', color: theme.accent2 }}>
            {p.title}
          </div>
          <div style={{ ...disp, fontSize: 'clamp(24px, 2.4vw, 34px)', letterSpacing: '-0.02em', lineHeight: 1.05 }}>{p.date}</div>
          <div style={{ fontFamily: theme.body, fontSize: '18px', fontWeight: 600, lineHeight: 1.4 }}>{p.artist}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            {p.prices.map((pr) =>
            <span key={pr} style={{
              padding: '8px 14px', borderRadius: '999px', border: `1px solid ${theme.bg}`,
              fontFamily: theme.mono, fontSize: '12px', letterSpacing: '0.08em', fontWeight: 700
            }}>{pr}</span>
            )}
          </div>
          <a href={href} target="_blank" rel="noopener noreferrer" onClick={track} style={{
            alignSelf: 'flex-start', marginTop: '6px',
            padding: '20px 26px', borderRadius: theme.radius,
            background: theme.accent, color: theme.bg, textDecoration: 'none',
            fontFamily: theme.body, fontSize: '17px', fontWeight: 700,
            display: 'inline-flex', alignItems: 'center', gap: '14px'
          }}>{p.cta} <span>→</span></a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { PromoFlyer });