const EVENTS = [
  {
    title: "Workshop: CHOREOGRPAHY with Yoyo Frozay",
    lineup: "Step into the music and bring your own energy. Open for all, just come and move..",
    date: { day: 16, mo: 'APR', dow: 'Thu', time: '4:30-7PM', venue: 'ISC 1st Floor Atrium' },
    tag: 'WORKSHOPS',
    code: 'UMBMP-047',
  },
  {
    title: "OPEN MIC: Night 2",
    lineup: "Perform your own music, sing yur fav songs, or tbh anything!! This is your momeent!!",
    date: { day: 23, mo: 'APR', dow: '', time: '7-10:30PM', venue: '' },
    tag: 'OPEN MIC',
    code: 'UMBMP-048',
    variant: 2,
  },
  {
    title: "BEAT BATTLE",
    lineup: "Use our samples. Bring the heat. 3 most creative beats win!!",
    date: { day: 30, mo: 'APR', dow: '', time: '7-8:30PM', venue: '' },
    tag: 'BEAT BATTLE',
    code: 'UMBMP-049',
    variant: 3,
  },
  {
    title: "Spring Showcase: Beacon Fest",
    lineup: "Live sets from 17 members · NOAH RICHARDSON × NICK SHEA × more · Catered.",
    date: { day: 7, mo: 'MAY', dow: 'Thu', time: '4-10PM', venue: 'Campus Centre Lawn' },
    tag: 'SHOWCASE',
    code: 'UMBMP-050',
    variant: 4,
  },
];

function Ticket({ e }) {
  return (
    <div className={"ticket" + (e.variant ? " variant-" + e.variant : "")}>
      <div className="stub">
        <span>{e.code}</span>
        <span>ADMIT ONE</span>
      </div>
      <div className="body">
        <div className="meta">
          <span className="tag">{e.tag}</span>
          <span>{e.date.dow.toUpperCase()} · {e.date.time}</span>
        </div>
        <h3>{e.title}</h3>
        <p className="lineup">{e.lineup}</p>
        <div className="date-block">
          <div>
            <div className="day">{e.date.day}</div>
            <span className="mo">{e.date.mo}</span>
          </div>
          <div className="when">
            <b>{e.date.venue}</b>
            <span>{e.date.dow} · {e.date.time}</span>
          </div>

        </div>
      </div>
    </div>
  );
}

function Events() {
  return (
    <section className="container" id="events">
      <SectionHead
        num="[02] / UPCOMING"
        title="Tear off a stub. <em>See you there.</em>"
        sub="Events rotate monthly."
      />
      <div className="tickets">
        {EVENTS.map((e, i) => <Ticket key={i} e={e} />)}
      </div>
    </section>
  );
}

Object.assign(window, { Events });