/* rooms.jsx — room grid + slide-in detail overlay */
const { useEffect: useEffectR } = React;

function Rooms({ onOpen }) {
  const rooms = window.RIAD.rooms;
  return (
    <section className="section" id="rooms">
      <div className="wrap">
        <SectionHead
          eyebrow="Rooms & Suites"
          title="Six rooms, each with its own name."
          sub="No two are alike — they took the names the family gave them, for a colour, a tree, or a lantern. Tap any room for its story, the facts, and a closer look."
        />
        <Reveal className="rooms-grid">
          {rooms.map((r, idx) => (
            <button className="room-card" key={r.id} onClick={() => onOpen(idx)}>
              <div className="cover">
                <div className="img" style={{ backgroundImage: "url(" + window.PX(r.cover, 900) + ")" }}></div>
                <span className="num">{String(idx + 1).padStart(2, "0")}</span>
              </div>
              <div className="body">
                <div className="meta">
                  {r.meta.map((m, k) => (
                    <React.Fragment key={k}>{k > 0 ? <span className="dot">/</span> : null}<span>{m}</span></React.Fragment>
                  ))}
                </div>
                <h3>{r.name}</h3>
                <p className="story">{r.story.split(". ")[0]}.</p>
                <div className="detail-row">
                  <span className="price">{r.currency}{r.priceFrom} <small>/ night</small></span>
                  <span className="more">View room <span className="arr">&rarr;</span></span>
                </div>
              </div>
            </button>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function RoomOverlay({ room, onClose, onReserve, openLightbox }) {
  const open = !!room;

  // Lock body scroll only while the overlay is actually open. This component is
  // always mounted, so gating on `open` (and cleaning up) is what frees the page.
  useEffectR(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.classList.add("locked");
    return () => { document.removeEventListener("keydown", onKey); document.body.classList.remove("locked"); };
  }, [open, onClose]);

  const facts = room ? room.facts : {};
  const galleryImgs = room ? room.gallery.map((id) => ({ src: window.PX(id, 1600), cap: room.name })) : [];

  return (
    <React.Fragment>
      <div className={"ov-scrim" + (open ? " show" : "")} onClick={onClose}></div>
      <aside className={"ov-panel" + (open ? " show" : "")} aria-hidden={!open} data-screen-label="Room detail">
        {room ? (
          <React.Fragment>
            <div className="ov-scroll">
              <div className="ov-hero" style={{ backgroundImage: "url(" + window.PX(room.cover, 1400) + ")" }}>
                <div className="grad"></div>
                <button className="ov-close" aria-label="Close" onClick={onClose}>&#10005;</button>
                <div className="cap">
                  <p className="eyebrow">{room.meta.join(" · ")}</p>
                  <h2>{room.name}</h2>
                </div>
              </div>
              <div className="ov-pad">
                <div className="facts">
                  <div className="f"><span className="k">Sleeps</span><span className="v">{facts.occupancy}</span></div>
                  <div className="f"><span className="k">Bed</span><span className="v">{facts.bed}</span></div>
                  <div className="f"><span className="k">Size</span><span className="v">{facts.size}</span></div>
                  <div className="f"><span className="k">View</span><span className="v">{facts.view}</span></div>
                </div>

                <div className="ov-section">
                  <p className="eyebrow">The room</p>
                  <p>{room.story}</p>
                </div>

                <div className="ov-section">
                  <p className="eyebrow">In the room</p>
                  <ul className="amen">
                    {room.amenities.map((a, k) => <li key={k}>{a}</li>)}
                  </ul>
                </div>

                <div className="ov-section">
                  <p className="eyebrow">A closer look</p>
                  <div className="ov-gallery">
                    {room.gallery.map((id, k) => (
                      <div key={k} className="g" style={{ backgroundImage: "url(" + window.PX(id, 600) + ")" }}
                        onClick={() => openLightbox(galleryImgs, k)}></div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
            <div className="ov-action">
              <span className="price">{room.currency}{room.priceFrom}<small>per night, incl. breakfast</small></span>
              <button className="btn-solid" onClick={() => onReserve(room)}>Reserve this room</button>
            </div>
          </React.Fragment>
        ) : null}
      </aside>
    </React.Fragment>
  );
}

Object.assign(window, { Rooms, RoomOverlay });