/* ============ ROOMS — pricing cards ============ */
function Rooms({ onBook }) {
  const S = window.SITE;
  return (
    <section id="rooms" className="section rooms">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Stay with us</Eyebrow>
          <Reveal as="h2" className="display">Find your <em className="muted-em">bunk in the clouds.</em></Reveal>
          <Reveal as="p" delay={100}>From social six-bed dorms to a private room with the whole valley as your window — every stay opens onto the Skydeck.</Reveal>
        </div>

        <div className="room-grid">
          {S.rooms.map((r, i) => (
            <Reveal key={r.id} className={`room ${r.id === "private" ? "feat" : ""}`} delay={i * 110}>
              <div className="room-media">
                <Photo src={r.img} alt={r.name} label={r.label} rounded="0" style={{ height: "100%" }} />
                <span className="room-badge"><Icon name="circle" /> {r.badge}</span>
              </div>
              <div className="room-body">
                <h3 className="serif">{r.name}</h3>
                <p className="room-blurb">{r.blurb}</p>
                <ul className="room-feat">
                  {r.features.map((f) => (
                    <li key={f}><Icon name="check" /> {f}</li>
                  ))}
                </ul>
                <div className="room-foot">
                  <div className="room-price">
                    <span className="rp-cur">₹</span><span className="rp-n serif">{r.price.toLocaleString("en-IN")}</span>
                    <span className="rp-unit">{r.unit}</span>
                  </div>
                  <button className="btn btn-primary room-btn" onClick={() => onBook(r.id)}>Book</button>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .room {
          background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
          display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
        }
        .room:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: var(--primary); }
        .room.feat { border-color: var(--accent); }
        html[data-theme="dark"] .room.feat { box-shadow: 0 0 0 1px var(--accent), 0 0 40px -16px var(--accent); }
        .room-media { position: relative; height: 210px; overflow: hidden; }
        .room-media .ph { height: 100%; }
        .room-media .ph img { transition: transform .6s var(--ease); }
        .room:hover .room-media .ph img { transform: scale(1.06); }
        .room-badge {
          position: absolute; top: 14px; left: 14px; z-index: 2; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
          background: var(--surface); color: var(--primary); padding: 6px 12px; border-radius: 99px; border: 1px solid var(--border);
          display: inline-flex; align-items: center; gap: 7px;
        }
        .room-badge .ic { font-size: 7px; color: #38c172; }
        html[data-theme="dark"] .room-badge { box-shadow: 0 0 18px -6px var(--glow); }

        .room-body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
        .room-body h3 { font-size: 1.7rem; }
        .room-blurb { color: var(--text-2); font-size: 14.5px; margin-top: 10px; }
        .room-feat { list-style: none; margin: 20px 0 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .room-feat li { font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 11px; }
        .room-feat .ic { color: var(--primary); font-size: 11px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); flex-shrink: 0; padding: 4px; box-sizing: border-box; }
        .room-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border); }
        .room-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px; }
        .rp-cur { font-size: 1.1rem; color: var(--text-2); }
        .rp-n { font-size: 2.1rem; color: var(--text); line-height: 1; }
        .rp-unit { font-size: 12px; color: var(--text-3); width: 100%; margin-top: 2px; }
        .room-btn { padding: 12px 26px; }
        @media (max-width: 880px) { .room-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Rooms });
