/* 6ix Mela — ticket tiers. GA + VIP Floor buy on Ticketmaster; Box Suite by enquiry. */
const TICKETS_URL = 'https://www.ticketmaster.ca/6ix-mela-toronto-ontario-09-12-2026/event/100064F08F4C6125';
const TIERS = [
  { id: 'ga', cls: 'ga', name: 'General Admission', price: 'From $77', unit: '', badge: null, action: 'buy',
    feats: ['General admission seat', 'One mega stage, all night', 'Food & drink on site', 'Doors 6 PM – 11 PM'] },
  { id: 'vip', cls: 'vip', name: 'VIP Floor', price: 'From $300', unit: '', badge: 'MOST POPULAR', feat: true, action: 'buy',
    feats: ['Everything in GA', 'Premium VIP floor — closest to the stage', 'Express entry lanes', 'VIP bar + lounge'] },
  { id: 'box', cls: 'cabana', name: 'Box Suite', price: 'By enquiry', unit: '', badge: 'BY ENQUIRY', action: 'enquire',
    feats: ['Private box suite', 'Premium elevated stage views', 'Group bookings', 'The full mela, elevated'] },
];

function Tickets({ onEnquire }) {
  return (
    <section className="section tickets" id="tickets">
      <div className="maxw">
        <div className="sec-head">
          <div>
            <div className="eyebrow">Pricing subject to increase!</div>
            <h2>Get In</h2>
            <div className="under-bar"></div>
          </div>
          <p className="sec-sub" style={{ marginTop: 0 }}>Lock in the lowest price the festival will ever be.</p>
        </div>
        <div className="tier-grid">
          {TIERS.map((t) => (
            <div key={t.id} className={'tier ' + t.cls + (t.feat ? ' feat' : '')}>
              <div className="tier-top">
                {t.badge && <span className="tier-badge">{t.badge}</span>}
                <div className="tier-name">{t.name}</div>
                <div className="tier-price">{t.price}{t.unit && <small> {t.unit}</small>}</div>
              </div>
              <div className="tier-perf"></div>
              <div className="tier-body">
                {t.feats.map((f, i) => (
                  <div key={i} className="tier-feat"><Icon name="check" size={18} /> {f}</div>
                ))}
                {t.action === 'buy' ? (
                  <React.Fragment>
                    <a className={'btn ' + (t.feat ? 'btn-primary' : 'btn-ghost')} href={TICKETS_URL} target="_blank" rel="noopener">
                      Buy {t.name} <Icon name="arrow-up-right" size={16} />
                    </a>
                    <div className="ext-link">Secure checkout · opens Ticketmaster</div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <button className="btn btn-gold" onClick={onEnquire}>
                      Enquire <Icon name="arrow-up-right" size={16} />
                    </button>
                    <div className="ext-link">Or email <a href="mailto:info@6ixmela.com">info@6ixmela.com</a></div>
                  </React.Fragment>
                )}
              </div>
            </div>
          ))}
        </div>
        <div className="ticket-note">
          <Icon name="ticket" size={22} style={{ color: 'var(--cyan)', flex: 'none' }} />
          <span className="mono">Tickets are sold through Ticketmaster, our official ticketing partner — beware resellers. Group and accessibility options available at checkout.</span>
          <a className="btn btn-primary btn-sm" href={TICKETS_URL} target="_blank" rel="noopener">All Ticket Options <Icon name="arrow-up-right" size={14} /></a>
        </div>
      </div>
    </section>
  );
}
window.Tickets = Tickets;