// ============ EVENT CALENDAR ============
const LUMA_EVENTS = [
  {
    eyebrow: "01 / Grand Final",
    title: "Alpha Arena Final",
    venue: "Level 2 / Event Hall 3",
    embedUrl: "https://luma.com/embed/event/evt-J3DG0uwN73Ojs95/simple?utm_source=alpha_arena_homepage",
    eventUrl: "https://luma.com/9y3mnj6s",
  },
  {
    eyebrow: "02 / Afterhours",
    title: "After Party",
    venue: "LG / Sunset Deck / Invite Only",
    embedUrl: "https://luma.com/embed/event/evt-73Yan3KPhVrPhoq/simple?utm_source=alpha_arena_homepage",
    eventUrl: "https://luma.com/rtq9pgu5",
  },
];

function LumaEventCard({ event, index }) {
  return (
    <article className="aa-event-card" data-reveal="card" style={{"--reveal-delay": `${100 + index * 90}ms`}}>
      <div className="aa-event-card-head">
        <div className="aa-event-card-copy">
          <span className="aa-event-card-eyebrow mono">{event.eyebrow}</span>
          <p className="display aa-event-card-title">{event.title}</p>
          <span className="aa-event-card-venue mono">{event.venue}</span>
        </div>
        <a
          className="aa-event-card-link mono"
          href={event.eventUrl}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={`Open ${event.title} on Luma`}
        >
          Open On Luma
          <svg viewBox="0 0 14 14" aria-hidden="true">
            <path d="M3 11L11 3M5 3H11V9" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/>
          </svg>
        </a>
      </div>

      <div className="aa-event-calendar-frame">
        <iframe
          src={event.embedUrl}
          width="600"
          height="720"
          frameBorder="0"
          allowFullScreen
          title={`${event.title} registration on Luma`}
          tabIndex={0}
          loading={index === 0 ? "eager" : "lazy"}
        />
      </div>
    </article>
  );
}

function EventCalendar() {
  return (
    <section
      id="top"
      className="aa-event-calendar"
      aria-label="Alpha Arena Coinfest events on August 20, 2026"
    >
      <div className="aa-event-calendar-shell">
        <div className="aa-event-calendar-copy" data-reveal="up">
          <div className="aa-event-calendar-kicker mono">Alpha Arena At Coinfest</div>
          <p className="display aa-event-calendar-date">
            <time dateTime="2026-08-20">August 20, 2026</time>
          </p>
          <div className="aa-event-calendar-meta mono">
            <span>Coinfest Asia / Bali</span>
            <time dateTime="2026-08-20T13:00:00+08:00">Main Competition Starts At 13:00 WITA (UTC+8)</time>
          </div>
        </div>

        <div className="aa-event-calendar-events">
          {LUMA_EVENTS.map((event, index) => (
            <LumaEventCard key={event.eventUrl} event={event} index={index}/>
          ))}
        </div>
      </div>
    </section>
  );
}

window.EventCalendar = EventCalendar;