/* 6ix Mela — contact info strip */
const CONTACTS = [
  { ic: 'mail', l: 'General', v: 'info@6ixmela.com', href: 'mailto:info@6ixmela.com' },
  { ic: 'star', l: 'Sponsorship', v: 'sponsors@theplug.ca', href: 'mailto:sponsors@theplug.ca' },
  { ic: 'briefcase', l: 'Partners & Creators', v: 'partners@theplug.ca', href: 'mailto:partners@theplug.ca' },
  { ic: 'mic', l: 'Press & Media', v: 'press@theplug.ca', href: 'mailto:press@theplug.ca' },
  { ic: 'map-pin', l: 'Find Us', v: 'Sobeys Stadium, Toronto', href: null },
];

function ContactStrip() {
  return (
    <section className="section tight contact-strip" id="contact">
      <div className="maxw">
        <div className="eyebrow eyebrow-cyan">Reach the team</div>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(2rem,4vw,3.2rem)', textTransform: 'uppercase', lineHeight: .95, margin: '14px 0 0' }}>Get In Touch</h2>
        <div className="contact-cards">
          {CONTACTS.map((c) => (
            <div key={c.l} className="contact-card">
              <div className="c-ic"><Icon name={c.ic} size={26} /></div>
              <div className="c-l">{c.l}</div>
              {c.href
                ? <a className="c-v" href={c.href}>{c.v}</a>
                : <div className="c-v">{c.v}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.ContactStrip = ContactStrip;