// REWIND website — THE LOUNGE. Video-led hero, the editorial block + interior
// strip, then hours, then the full menu story merged in-page:
// The Cocktail Program (Five Elements + the five signatures) and The Food
// Program. One reservation CTA. Full priced list lives in the PDF.
function LoungeView({ onReserve, go }) {
  const D = window.RW_DATA;
  const C = window.RW_CONTENT;
  const U = C.ui.lounge;
  const M = C.media || {};
  const media = (value, fallback) => value ? (/^(data:|https?:|\/|uploads\/)/.test(value) ? value : RWA(value)) : fallback;
  // One signature per element, in menu order: 金 木 水 火 土.
  const cocktailPhotos = [
    { src: RWA("el-metal-round-table"), name: "Round Table" },
    { src: RWA("el-wood-past-lives"), name: "Past Lives" },
    { src: RWA("el-water-spring-caress"), name: "Spring Caress" },
    { src: RWA("el-fire-night-roast"), name: "Night Roast" },
    { src: RWA("el-earth-moonlit-aroma"), name: "Moonlit Aroma" },
  ];
  const foodPhotos = [
    RWA("c-torounicaviar-rewind2670"),
    RWA("c-salt-and-pepper-wings-rewind2656"),
    RWA("c-riceballs-rewind2678"),
    RWA("wagyudon-rewind2711"),
    RWA("c-jjajangbucatini-rewind2696"),
    RWA("c-hummus-scallion-pancake-rewind2662"),
    RWA("c-fish-balls-rewind2657"),
    RWA("c-eggsando-rewind2671"),
    RWA("claypot-rewind2699"),
    RWA("c-chawanmushi-rewind2680"),
  ];
  return (
    <div>
      {/* video-led hero */}
      <section className="phero" data-rw-field="loungeHeroVideoData">
        <RWVideo className="pimg" src={media(D.video && D.video.lounge, RWA("v-rewind-lounge-720"))} poster={media(M.loungeHeroImage, RWA("c-rewind2283"))} />
        <div className="pscrim"></div>
        <div className="plabel">
          <img src={RWA("ic-lounge")} alt="" height="42" />
          <span className="eyebrow" style={{ color: "var(--ink)" }}>{U.hero}</span>
        </div>
      </section>

      {/* editorial block — the romance copy leads, hours follow it */}
      <section className="sec">
        <div className="wrap">
          <div className="lgrid">
            <div className="frame ar45"><RWZoomImg src={M.loungeFeatureImage || window.RW_IMG.loungeLight} alt="The Lounge at Rewind" /></div>
            <div>
              <h2 className="rw-heading" style={{ margin: 0 }}>{U.heading}</h2>
              <p className="lead" data-rw-field="barBody" style={{ margin: "18px 0 0" }}>{C.bar.body}</p>
              <div className="meta-line" style={{ marginTop: "var(--vs-3)", color: "var(--champagne)" }}>
                {D.loungeInfo.expect}
              </div>
              <div className="cta-row">
                <a className="btn btn--champ" href={D.reservations.lounge || D.reservations.base} target="_blank" rel="noopener">{U.reserve}</a>
                <a className="btn btn--line" href={(D.menuLinks && D.menuLinks.lounge) || D.menuPdf} target="_blank" rel="noopener">{U.menu}</a>
              </div>
            </div>
          </div>
          {/* interior strip — click to enlarge */}
          <div className="strip">
            <div><div className="frame"><RWZoomImg src={media(M.loungeBarImage, RWA("c-rewind2337"))} alt="The bar at Rewind" /></div></div>
            <div><div className="frame"><RWZoomImg src={M.loungeMezzanineImage || window.RW_IMG.spaceMezzanine} alt="Hand-carved Tang and Song dynasty poetry above the banquettes" /></div></div>
            <div><div className="frame"><RWZoomImg src={media(M.loungeTableImage, RWA("c-rewind2339"))} alt="A marble table in the lounge" /></div></div>
          </div>
        </div>
      </section>

      {/* hours — after the copy, per review */}
      <RWHours mode="lounge" accent="champ" />

      {/* The Cocktail Program — Five Elements + the five signatures */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: "var(--vs-5)" }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.cocktails}</h2>
          </div>
          <div className="prose"><p data-rw-field="cocktailProgramBody">{C.cocktailProgram.body}</p></div>

          {/* The Five Elements */}
          <div className="elrow">
            {C.cocktailProgram.elements.map((el) => (
              <div key={el.name} className="elcell">
                <span className="elcn">{el.cn}</span>
                <span className="elname">{el.name}</span>
                <span className="elflav">{el.flavor}</span>
              </div>
            ))}
          </div>

          {/* one signature per element */}
          <div className="photorow photorow--5" style={{ marginTop: "var(--vs-5)" }}>
            {C.cocktailProgram.elements.map((el, i) => (
              <figure key={el.name} style={{ margin: 0 }}>
                <div className="frame"><RWZoomImg src={cocktailPhotos[i].src} alt={cocktailPhotos[i].name} style={cocktailPhotos[i].pos ? { objectPosition: cocktailPhotos[i].pos } : undefined} /></div>
                <figcaption style={{ marginTop: "10px", textAlign: "center", display: "flex", flexDirection: "column", gap: "2px" }}>
                  <span className="elcn">{el.cn}</span>
                  <span className="eyebrow" style={{ color: "var(--ink)" }}>{el.name} &middot; {el.flavor}</span>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* The Food Program — description, then the plates */}
      <section className="sec">
        <div className="wrap">
          <div className="sec-head" style={{ marginBottom: "var(--vs-5)" }}>
            <h2 className="rw-marquee title" style={{ margin: 0 }}>{U.food}</h2>
          </div>
          <div className="prose"><p data-rw-field="foodProgramBody">{C.foodProgram.body}</p></div>

          <div className="photorow photorow--5" style={{ marginTop: "var(--vs-5)" }}>
            {foodPhotos.map((src, i) => (
              <div key={src} className={"frame" + (i === 6 ? " hide-mob" : "")} style={{ aspectRatio: "1 / 1" }}><RWZoomImg src={src} alt="" loading="lazy" /></div>
            ))}
          </div>
        </div>
      </section>
    </div>);

}
window.LoungeView = LoungeView;