/* eslint-disable */
// App shell — router, tweaks integration, mount.

const { useState: _appUseState, useEffect: _appUseEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8541E",
  "device": false,
  "honestMode": "full",
  "displaySerif": true
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ["#C8541E", "#F3E1D4", "#A8431A"], // terracotta (brief default)
  ["#0B1B2B", "#DCE3EC", "#1F3A57"], // navy mono
  ["#B8851D", "#F1E5C9", "#8A6314"], // saffron
];

function App() {
  const [route, setRoute] = _appUseState(window.__BYTESGLUE_SHOWCASE_ROUTE || "home");
  const [scrolled, setScrolled] = _appUseState(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent color tweak
  _appUseEffect(() => {
    const accent = tweaks.accent || "#C8541E";
    const palette = ACCENT_OPTIONS.find(p => p[0] === accent) || ACCENT_OPTIONS[0];
    document.documentElement.style.setProperty("--accent", palette[0]);
    document.documentElement.style.setProperty("--accent-soft", palette[1]);
    document.documentElement.style.setProperty("--accent-deep", palette[2]);
  }, [tweaks.accent]);

  // Display serif vs sans
  _appUseEffect(() => {
    document.documentElement.style.setProperty(
      "--display",
      tweaks.displaySerif ? "'Source Serif 4', Georgia, serif" : "'Inter', sans-serif"
    );
  }, [tweaks.displaySerif]);

  // Scroll tracking for nav
  _appUseEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Reset scroll on route change
  _appUseEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  }, [route]);

  const Pages = {
    home: <PageHome setRoute={setRoute} honestMode={tweaks.honestMode} />,
    rooms: <PageRooms setRoute={setRoute} />,
    location: <PageLocation />,
    dining: <PageDining />,
    about: <PageAbout />,
    honest: <PageHonest />,
    visa: <PageVisa />,
  };

  const content = (
    <>
      <Navbar route={route} setRoute={setRoute} scrolled={scrolled} />
      <main>{Pages[route] || Pages.home}</main>
      <Footer setRoute={setRoute} />
      <MobileStrip setRoute={setRoute} />
      <WhatsAppFab />
    </>
  );

  return (
    <>
      {tweaks.device ? (
        <div style={{ background: "linear-gradient(180deg, #FAF8F5 0%, #F1ECE5 100%)", minHeight: "100vh", padding: 24 }}>
          <p style={{ textAlign: "center", fontSize: 13, color: "var(--muted)", marginBottom: 8 }}>
            <span className="label" style={{ color: "var(--muted)" }}>Mobile preview · 390 × 844</span>
          </p>
          <div className="device-frame">
            <div className="device-scroll">{content}</div>
          </div>
        </div>
      ) : content}

      <TweaksPanel title="Tweaks · Panorama">
        <TweakSection label="Accent">
          <TweakColor label="Brand accent" value={tweaks.accent}
            options={ACCENT_OPTIONS.map(p => p[0])}
            onChange={(v) => setTweak("accent", v)} />
        </TweakSection>
        <TweakSection label="Type">
          <TweakToggle label="Serif display headlines" value={tweaks.displaySerif}
            onChange={(v) => setTweak("displaySerif", v)} />
        </TweakSection>
        <TweakSection label="Hero copy">
          <TweakRadio label="Tone" value={tweaks.honestMode}
            options={["mild", "full"]}
            onChange={(v) => setTweak("honestMode", v)} />
        </TweakSection>
        <TweakSection label="Preview">
          <TweakToggle label="Mobile device frame" value={tweaks.device}
            onChange={(v) => setTweak("device", v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Inject responsive CSS once
(function injectResponsive() {
  if (document.getElementById("__panorama_responsive")) return;
  const s = document.createElement("style");
  s.id = "__panorama_responsive";
  s.textContent = `
    .nav-mobile { display: none; }
    @media (max-width: 880px) {
      .nav-desktop { display: none !important; }
      .nav-mobile { display: flex !important; }
      .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
      .grid-2 { grid-template-columns: 1fr !important; }
      .grid-3 { grid-template-columns: 1fr 1fr !important; }
      .grid-4 { grid-template-columns: 1fr 1fr !important; }
      .booking-strip-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
      }
      .booking-strip-grid > *:last-child { grid-column: 1 / -1; }
      .form-grid { grid-template-columns: 1fr !important; }
      .grid-honest-top { grid-template-columns: 1fr !important; gap: 20px !important; }
    }
    @media (max-width: 540px) {
      .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
    }
    /* Inside device frame, force narrow layout regardless of viewport */
    .device-scroll .nav-desktop { display: none !important; }
    .device-scroll .nav-mobile { display: flex !important; }
    .device-scroll .hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .device-scroll .grid-2 { grid-template-columns: 1fr !important; }
    .device-scroll .grid-3 { grid-template-columns: 1fr !important; }
    .device-scroll .grid-4 { grid-template-columns: 1fr 1fr !important; }
    .device-scroll .booking-strip-grid {
      grid-template-columns: 1fr 1fr !important; gap: 10px !important;
    }
    .device-scroll .booking-strip-grid > *:last-child { grid-column: 1 / -1; }
    .device-scroll .form-grid { grid-template-columns: 1fr !important; }
    .device-scroll .grid-honest-top { grid-template-columns: 1fr !important; gap: 20px !important; }
    .device-scroll .section { padding: 40px 0 !important; }
    .device-scroll .section-tight { padding: 32px 0 !important; }
    .device-scroll .wrap, .device-scroll .wrap-tight { padding: 0 16px !important; }
    .device-scroll .mobile-strip { display: flex !important; }
    .device-scroll body { padding-bottom: 0; }
  `;
  document.head.appendChild(s);
})();

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