// REWIND website — app shell. HOME shows the two doorways; Lounge, Karaoke,
// Public events and Private event are their own views. Reservations are a single
// CTA straight to SevenRooms (rooms deep-link to their own booking flow).
const RW_VIEW_OF = { Home: "home", Lounge: "lounge", Karaoke: "karaoke" };
const RW_PREVIEW_VIEW_BY_COLLECTION = {
  "site-page-home": "home",
  "site-page-our-story": "ourstory",
  "site-page-bar-dining": "lounge",
  "site-page-karaoke": "karaoke",
  "site-page-private-events": "private",
  "site-page-public-events": "publicevents",
  "events": "publicevents",
  "site-page-faq": "faq",
  // Contact lives in the shared footer and tracking has no visitor-facing
  // screen, so their established site anchor is the home shell.
  "site-page-contact-footer": "home",
  "site-page-tracking": "home"
};
const RW_PREVIEW_MARKER_BY_VIEW = {
  home: "REWIND — home",
  ourstory: "The Vision",
  lounge: "The Lounge",
  karaoke: "Karaoke Rooms",
  private: "Your Event Details",
  publicevents: "Upcoming Events",
  faq: "FAQ"
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "landing": "Home",
  "storySpace": 70,
  "cropTuner": false
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const previewCollection = new URLSearchParams(window.location.search).get("collection");
  const previewView = RW_PREVIEW_VIEW_BY_COLLECTION[previewCollection];
  const [view, setView] = React.useState(previewView || RW_VIEW_OF[t.landing] || "home");
  const priorPreviewView = React.useRef(previewView);

  // The collection chooses the preview's opening page, but it must not win
  // over visitor navigation when live-preview causes a reconciliation.  Only a
  // genuinely different collection should retarget an already-open preview.
  React.useEffect(() => {
    if (previewView && previewView !== priorPreviewView.current) setView(previewView);
    if (!previewView && priorPreviewView.current) setView(RW_VIEW_OF[t.landing] || "home");
    priorPreviewView.current = previewView;
  }, [previewView, t.landing]);
  React.useEffect(() => {window.scrollTo({ top: 0, behavior: "auto" });}, [view]);

  // Temporary photo-crop tuner (rw-crop.js). Remove with the tweak once baked in.
  React.useEffect(() => {
    try { localStorage.setItem("rw-crop-mode", t.cropTuner ? "1" : "0"); } catch (e) {}
    if (window.RWCrop) window.RWCrop.set(!!t.cropTuner);
  }, [t.cropTuner, view]);

  // Mobile vertical rhythm + reading density (CSS levels under 620px).
  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.vrhythm = "tight";
    r.dataset.vdensity = "compact";
  }, []);

  const go = (v) => setView(v);
  // Single reservation path → rewindnyc.com/reservations (covers Lounge & Karaoke).
  const reserve = () => window.open(window.RW_DATA.reservations.base, "_blank", "noopener");

  const loungeMode = view === "karaoke" ? "karaoke" : "lounge";
  return (
    <div data-mode={loungeMode} data-rw-preview-view={view} data-rw-preview-marker={RW_PREVIEW_MARKER_BY_VIEW[view] || "REWIND — home"} style={{ minHeight: "100vh" }}>
      <RWStamps fields={["navCopy", "logo"]}><SiteNav current={view} go={go} onReserve={reserve} /></RWStamps>

      {view === "home" && <HomeView go={go} />}
      {view === "lounge" && <RWStamps fields={["loungeHeroImage", "loungeFeatureImage", "loungeBarImage", "loungeMezzanineImage", "loungeTableImage", "barData", "cocktailProgramData", "foodProgramData", "loungeCopy", "hoursCopy", "hoursTableData", "reservationsData", "menuPdfData", "menuLinksData", "loungeInfoData", "videoData"]}><LoungeView onReserve={reserve} go={go} /></RWStamps>}
      {view === "karaoke" && <RWStamps fields={["karaokeHeroImage", "roomSmallOneImage", "roomSmallTwoImage", "roomSmallThreeImage", "roomLargeOneImage", "roomLargeTwoImage", "roomPartyImage", "karaokeRatesImage", "karaokeRoomsData", "karaokeCopy", "hoursCopy", "hoursTableData", "reservationsData", "menuPdfData", "menuLinksData", "videoData"]}><KaraokeView reserve={reserve} go={go} /></RWStamps>}
      {view === "publicevents" && <RWStamps fields={["publicEventsHeroImage", "publicEvents", "eventAssets", "publicEventsCopy", "rsvpUrlData"]}><PublicEventsView go={go} /></RWStamps>}
      {view === "private" && <RWStamps fields={["privateHeroImage", "privateLoungeImage", "privateEventRoomImage", "privateEventsCopy", "formEndpointData"]}><PrivateEventView /></RWStamps>}
      {view === "ourstory" && <RWStamps fields={["storyHeroImage", "storyEntranceImage", "kenPortraitImage", "chefPortraitImage", "storyEventImage", "storyVisionOne", "storyVisionTwo", "ourStoryData", "experienceData", "cocktailProgramData", "foodProgramData", "storyCopy", "eventsData", "reservationsData"]}><OurStoryView go={go} space={t.storySpace / 100} /></RWStamps>}
      {view === "faq" && <RWStamps fields={["faqData", "faqNoteData", "faqCopy"]}><FaqView go={go} /></RWStamps>}

      <RWStamps fields={["footerCopy", "contactData", "footerHoursData", "footerHoursNoteData", "phone", "generalEmail", "address", "footerHoursNote"]}><SiteFooter go={go} /></RWStamps>

      <RWLightbox />

      <window.TweaksPanel>
        <window.TweakSection label="Landing" />
        <window.TweakRadio label="Opens on" value={t.landing}
        options={["Home", "Lounge", "Karaoke"]} onChange={(v) => setTweak("landing", v)} />
        <window.TweakSection label="Our Story" />
        <window.TweakSlider label="Text spacing" value={t.storySpace} min={40} max={100} step={5} unit="%"
        onChange={(v) => setTweak("storySpace", v)} />
        <window.TweakSection label="Photo crop (temporary)" />
        <window.TweakToggle label="Tune thumbnails" value={t.cropTuner}
        onChange={(v) => setTweak("cropTuner", v)} />
      </window.TweaksPanel>
    </div>);

}
const rwRoot = ReactDOM.createRoot(document.getElementById("root"));
window.RW_RENDER = () => rwRoot.render(<App />);
window.RW_RENDER();