// events.jsx
function Events() {
  return (
    <section className="events" id="events">
      <div className="container">
        <SectionHeader label="◤ TOURNAMENTS & EVENTS" title={<>大会・体験会の<br/>スケジュール</>} subtitle="全国で開催されるジュニア大会、親子体験会、オープンリーグ。はじめての人も、手ぶらで来て遊べます。" />
        <div className="event-list">
          {window.EVENT_ITEMS.map((e, i) => (
            <div key={i} className="event-card">
              <div className="event-date"><div className="event-date-day">{e.day}</div><div className="event-date-month">{e.month}</div></div>
              <div className="event-body">
                <span className="event-tag">{e.tag}</span>
                <h3 className="event-title">{e.title}</h3>
                <div className="event-meta">{e.meta}</div>
                <p className="event-desc">{e.desc}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 60, textAlign: 'center' }}>
          <a href="Tournament Calendar.html" className="pop-btn orange">イベント一覧 →</a>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Events });