// REWIND website — KARAOKE. Video-led hero, then the rooms (copy + photos), then
// hours, then the rate table — the romance leads, the numbers follow.
// Private-room info lives on Events · Private.
function KaraokeView({ reserve, go }) {
  const D = window.RW_DATA;
  const C = window.RW_CONTENT;
  const U = C.ui.karaoke;
  const M = C.media || {};
  const media = (value, fallback) => value ? (/^(data:|https?:|\/|uploads\/)/.test(value) ? value : RWA(value)) : fallback;
  const cols = U.rateColumns.map((column) => column.day);
  const times = U.rateColumns.map((column) => column.time);
  const rooms = U.rateRooms;
  const roomShots = [
    { src: M.roomSmallOneImage || window.RW_IMG.roomSmall1, tier: rooms[0].shortName, cap: rooms[0].shortCapacity },
    { src: M.roomSmallTwoImage || window.RW_IMG.roomSmall2, tier: rooms[0].shortName, cap: rooms[0].shortCapacity },
    { src: M.roomSmallThreeImage || window.RW_IMG.roomSmall3, tier: rooms[0].shortName, cap: rooms[0].shortCapacity },
    { src: M.roomLargeOneImage || window.RW_IMG.roomLarge1, tier: rooms[1].shortName, cap: rooms[1].shortCapacity },
    { src: M.roomLargeTwoImage || window.RW_IMG.roomLarge2, tier: rooms[1].shortName, cap: rooms[1].shortCapacity },
    { src: media(M.roomPartyImage, RWA("room-party-1")), tier: rooms[2].shortName, cap: rooms[2].shortCapacity },
  ];
  const menuUrl = (D.menuLinks && D.menuLinks.karaoke) || D.menuPdf;
  return (
    <div data-mode="karaoke">
      {/* video-led hero */}
      <section className="phero" data-rw-field="karaokeHeroVideoData">
        <RWVideo className="pimg" src={media(D.video && D.video.karaoke, RWA("v-rewind-ktv-720"))} poster={media(M.karaokeHeroImage, RWA("c-rewind2368-1920w"))} />
        <div className="pscrim"></div>
        <div className="plabel">
          <img src={RWA("ic-ktv")} alt="" height="42" />
          <span className="eyebrow" style={{ color: "var(--ink)" }}>{U.hero}</span>
        </div>
      </section>

      {/* the rooms — themed, bespoke */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: "var(--vs-5)" }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.roomsHeading}</h2>
          </div>
          <div className="prose"><p style={{ color: "var(--ink-muted)" }}>{C.karaokeRooms}</p></div>
          <div className="roomrail" style={{ marginTop: "var(--vs-5)" }}>
            {roomShots.map((r) => (
              <figure key={r.src} className="roomcard">
                <div className="frame"><RWZoomImg src={r.src} alt="" loading="lazy" /></div>
                <figcaption className="roomcap"><span className="rt">{r.tier}</span><span className="rp">{r.cap}</span></figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
      {/* hours — after the copy, per review */}
      <RWHours mode="ktv" accent="neon" />

      {/* rooms + rates */}
      <section className="sec" id="rates" style={{ position: "relative" }}>
        <div className="kbg"><img src={M.karaokeRatesImage || window.RW_IMG.karaokeProduct} alt="" /><div className="ks"></div></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <div className="sec-head">
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.ratesHeading}</h2>
          </div>

          <div className="rates-scroll">
            <table className="rates">
              <caption className="vh">{U.rateCaption}</caption>
              <thead>
                <tr>
                  <th scope="col" style={{ textAlign: "left" }}><span className="vh">{U.roomColumn}</span></th>
                  {cols.map((c, i) => <th key={i} scope="col">{c}<small>{times[i]}</small></th>)}
                </tr>
              </thead>
              <tbody>
                {rooms.map((r) => (
                  <tr key={r.name}>
                    <td className="room"><span className="rn">{r.name}</span><span className="rc">{r.capacity}</span></td>
                    {r.prices.map((cell, i) => <td key={i} data-label={cols[i] + " · " + times[i]}><span className="price">{cell.price}</span><span className="unit">{cell.unit}</span></td>)}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          <div className="addons">
            {U.addons.map((addon) => <span className="addon" key={addon.name}>{addon.name} <b>{addon.price}</b></span>)}
          </div>
          <div style={{ marginTop: "var(--vs-4)", maxWidth: "72ch", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
            <div className="cta-row" style={{ justifyContent: "center", marginBottom: "var(--vs-4)" }}>
              <a className="btn btn--champ" href={D.reservations.ktv || D.reservations.base} target="_blank" rel="noopener">{U.reserve}</a>
              <a className="btn btn--line" href={menuUrl} target="_blank" rel="noopener">{U.menu}</a>
            </div>
            <p className="fineprint" style={{ color: "var(--ink)", margin: "0 auto" }}>{U.finePrint}</p>
          </div>
        </div>
      </section>

    </div>
  );
}
window.KaraokeView = KaraokeView;