// ============================================================
// EVENTS — with model images as event thumbnails
// ============================================================

function Events() {
  const ref = useReveal();
  const railRef = useRef(null);
  const scroll = (dir) => {
    const el = railRef.current;
    if (!el) return;
    el.scrollBy({ left: dir * 380, behavior: "smooth" });
  };

  return (
    <section className="section reveal" ref={ref} id="events" data-screen-label="04 Events">
      <div className="container">
        <div className="section-head">
          <span className="num">— 03</span>
          <h2 className="title">이번 달 이벤트 <span className="en">This Month</span></h2>
          <div className="events-head-extra">
            <span className="tail">May · 2026</span>
            <div className="rail-arrows">
              <button aria-label="prev" onClick={() => scroll(-1)}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9 3L5 7L9 11" stroke="currentColor" strokeWidth="1" strokeLinecap="square"/></svg>
              </button>
              <button aria-label="next" onClick={() => scroll(1)}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5 3L9 7L5 11" stroke="currentColor" strokeWidth="1" strokeLinecap="square"/></svg>
              </button>
            </div>
          </div>
        </div>

        <div className="events-rail" ref={railRef}>
          {EVENTS.map((e) => (
            <article key={e.id} className="event-card">
              <div className="event-img">
                <img src={e.img} alt="" />
                <div className="event-date">{e.date}</div>
                <div className="event-tag">{e.tag}</div>
              </div>
              <div className="event-body">
                <div className="event-en">{e.en}</div>
                <div className="event-kr">{e.kr}</div>
                <div style={{fontSize:13, color:'var(--ink-400)', fontFamily:'Pretendard,sans-serif', marginTop:4}}>{e.chef}</div>
                <div className="event-meta">
                  <span>소개 입장</span>
                  <span className="seats">{e.seats}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Events = Events;