// REWIND website — HOME. Straight in: two vivid doorways. Image-led, no wash,
// no headline — just emblem + label + Enter. The monogram straddles the join.
function HomeView({ go }) {
  const D = window.RW_DATA;
  const U = window.RW_CONTENT.ui.home;
  const M = window.RW_CONTENT.media || {};
  return (
    <React.Fragment>
    <section className="hero">
      <button className="hero-half" data-mode="lounge" data-rw-field="homeLoungeHeroImage" onClick={() => go("lounge")} aria-label={U.enterLounge}>
        <img className="hv" src={M.homeLoungeHeroImage || window.RW_IMG.heroLounge} alt="" />
        <div className="hscrim"></div>
        <div className="hlabel">
          <RWIconLoop still={RWA("ic-icon-lounge")} video={RWA("v-lounge-wine-loop-360-alpha")} hevcVideo={RWA("v-lounge-wine-loop-360-alpha-hevc")} height={44} alt="Lounge" syncGroup="hero" />
          <span className="eyebrow">{U.lounge}</span>
        </div>
      </button>
      <button className="hero-half" data-mode="karaoke" data-rw-field="homeKaraokeHeroImage" onClick={() => go("karaoke")} aria-label={U.enterKaraoke}>
        <img className="hv" src={M.homeKaraokeHeroImage || window.RW_IMG.heroKaraoke} alt="" />
        <div className="hscrim"></div>
        <div className="hlabel">
          <RWIconLoop still={RWA("ic-icon-ktv")} video={RWA("v-karaoke-mic-loop-360-alpha")} hevcVideo={RWA("v-karaoke-mic-loop-360-alpha-hevc")} height={44} alt="Karaoke" syncGroup="hero" />
          <span className="eyebrow">{U.karaoke}</span>
        </div>
      </button>
      <div className="seam"></div>
      <div className="hinge">
        <video autoPlay loop muted playsInline aria-label="REWIND">
          <source src={RWA("v-logo-loop-360-alpha-hevc")} type={'video/mp4; codecs="hvc1"'} />
          <source src={RWA("v-logo-loop-360-alpha")} type="video/webm; codecs=vp9" />
        </video>
      </div>
      <div className="hero-foot" data-rw-field="homeCopy">{U.tagline}</div>
    </section>
    {/* mobile only — the tagline reads for the whole brand, not the Karaoke half */}
    <div className="hero-band" data-rw-field="homeCopy">{U.tagline}</div>

    {/* Visit — shown once, only on the home page */}
    <section className="sec" data-rw-field="homeCopy">
      <div className="wrap">
        <div className="foot-visit">
          <a className="vmap" data-rw-field="contactData" href={D.contact.mapUrl} target="_blank" rel="noopener" aria-label="Open in Google Maps">
            <img src={window.RW_IMG.map} alt="Map — 45-57 Davis St, Long Island City" />
          </a>
          <div className="visit">
            <span className="eyebrow">{U.visit}</span>
            <p className="rw-subtitle" style={{ margin: "12px 0 0", fontWeight: "var(--wt-light)" }}>{D.contact.address}<br />{D.contact.city}</p>
            <a className="btn btn--line btn--sm" data-rw-field="contactData" href={D.contact.mapUrl} target="_blank" rel="noopener" style={{ alignSelf: "flex-start", marginTop: "14px" }}>{U.directions}</a>
          </div>
        </div>
      </div>
    </section>
    </React.Fragment>);

}
window.HomeView = HomeView;