/* 6ix Mela — sponsorship CTA (partner logo wall hidden until deals close) */
function Sponsors({ onBecome }) {
  return (
    <section className="section sponsors" id="sponsors">
      <img className="ornament" src="assets/logo-v2.png" alt=""
        style={{ position: 'absolute', width: 460, opacity: .08, left: -150, bottom: -160, mixBlendMode: 'screen', pointerEvents: 'none' }} />
      <div className="maxw" style={{ position: 'relative', zIndex: 2 }}>
        <div className="sec-head">
          <div>
            <div className="eyebrow eyebrow-gold">Partner with us</div>
            <h2>Become A Sponsor</h2>
            <div className="under-bar"></div>
          </div>
          <p className="sec-sub" style={{ marginTop: 0 }}>Put your brand in front of the whole 6ix outside — activations, booths, stage and on-site presence. Let's build something big.</p>
        </div>
        <div className="sponsor-cta" style={{ textAlign: 'left', marginTop: 8 }}>
          <button className="btn btn-gold btn-lg" onClick={onBecome}>Become A Sponsor <Icon name="arrow-up-right" size={18} /></button>
          <p className="mela-body" style={{ marginTop: 16, color: 'var(--fg-3)' }}>Or email <a href="mailto:sponsors@theplug.ca" style={{ color: 'var(--gold)' }}>sponsors@theplug.ca</a></p>
        </div>
      </div>
    </section>
  );
}
window.Sponsors = Sponsors;