// ============================================================
// ROOMS — Editorial grid with hover reveal
// ============================================================

function Rooms({ onReserve }) {
  const ref = useReveal();
  return (
    <section className="section reveal" ref={ref} id="rooms" data-screen-label="03 Rooms">
      <div className="container">
        <div className="section-head">
          <span className="num">— 02</span>
          <h2 className="title">프라이빗 룸 <span className="en">The Suites</span></h2>
          <span className="tail">06 spaces · Seoul</span>
        </div>

        <div className="rooms-grid">
          {ROOMS.map((r) => (
            <article
              key={r.id}
              className={"room-card " + r.span + (r.status === "warn" ? " limited" : "")}
              onClick={() => onReserve?.(r.id)}
              data-hover
            >
              <span className="num">{r.num}</span>
              <div className="imgwrap"><img src={r.img} alt="" /></div>
              <div className="content">
                <span className="tag">{r.tag}</span>
                <h4>{r.name}<span className="en">{r.en}</span></h4>
                <div className="meta-row">
                  <span><span className="k">수용</span>{r.capacity}</span>
                  <span><span className="k">시간</span>{r.hours}</span>
                </div>
                <div className="price-row">
                  <div className="price">
                    {r.price === "Inquire" ? "문의" : `₩${r.price}`}
                    <small>FROM · 4 HRS</small>
                  </div>
                  {r.status === "lock" ? (
                    <div className="avail" style={{color:"var(--ink-500)"}}><I.Lock /> MEMBERS</div>
                  ) : (
                    <div className="avail"><span className="d"></span>{r.avail}</div>
                  )}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Rooms = Rooms;