// app.jsx — wiring, tweaks, view switching
const { useState: useAppState, useEffect: useAppEffect, useRef: useAppRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTreatment": "centered",
  "cardStyle": "image",
  "mood": "dark",
  "motion": 50,
  "accent": "#C9A24B"
}/*EDITMODE-END*/;

function scrollToId(id, smooth = true) {
  const el = document.getElementById(id);
  if (!el) return;
  const y = el.getBoundingClientRect().top + window.scrollY - 72;
  window.scrollTo({ top: id === "top" ? 0 : y, behavior: smooth ? "smooth" : "auto" });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = useAppState("main");
  const [preset, setPreset] = useAppState("");
  const pending = useAppRef(null);

  // motion + accent + mood -> CSS vars
  useAppEffect(() => {
    const root = document.documentElement;
    const m = Math.max(0, Math.min(100, t.motion)) / 100;
    root.style.setProperty("--parallax", m.toFixed(3));
    root.style.setProperty("--reveal-rise", `${Math.round(6 + 26 * m)}px`);
    root.style.setProperty("--reveal-dur", m === 0 ? "0.01s" : `${(0.7 + 0.5 * m).toFixed(2)}s`);
    root.style.setProperty("--gold", t.accent);
    root.dataset.mood = t.mood;
  }, [t.motion, t.accent, t.mood]);

  const goMain = (cb) => {
    if (view !== "main") { pending.current = cb; setView("main"); window.scrollTo({ top: 0, behavior: "auto" }); }
    else { cb && cb(); }
  };

  // run pending scroll once main remounts
  useAppEffect(() => {
    if (view === "main" && pending.current) {
      const cb = pending.current; pending.current = null;
      requestAnimationFrame(() => setTimeout(cb, 40));
    }
  }, [view]);

  const onGo = ({ target, view: v }) => {
    if (v && v !== "main") { setView(v); window.scrollTo({ top: 0, behavior: "auto" }); return; }
    goMain(() => target && scrollToId(target));
  };
  const onReserve = (vehicle) => {
    if (typeof vehicle === "string") setPreset(vehicle);
    goMain(() => scrollToId("reserve"));
  };
  const onHome = () => onGo({ target: "top" });

  return (
    <div className="app" data-view={view}>
      <TopNav view={view} onGo={onGo} onReserve={() => onReserve()} onHome={onHome} />

      {view === "main" ? (
        <main className="view view-main" key="main">
          <Hero treatment={t.heroTreatment} onReserve={() => onReserve()} onFleet={() => scrollToId("fleet")} />
          <Fleet cardStyle={t.cardStyle} onReserve={onReserve} />
          <Standard />
          <ChauffeurTeaser onExplore={() => onGo({ view: "chauffeur" })} />
          <Process />
          <SeaAir onInquire={() => onGo({ view: "seaair" })} />
          <Testimonials />
          <InvestTeaser onExplore={() => onGo({ view: "invest" })} />
          <Reserve preset={preset} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </main>
      ) : view === "bally" ? (
        <div className="view view-bally" key="bally">
          <Bally onReserve={() => onReserve()} onHome={onHome} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </div>
      ) : view === "seaair" ? (
        <div className="view view-seaair" key="seaair">
          <SeaAirPage onHome={onHome} onReserve={() => onReserve()} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </div>
      ) : view === "invest" ? (
        <div className="view view-invest" key="invest">
          <Invest onHome={onHome} onReserve={() => onReserve()} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </div>
      ) : view === "chauffeur" ? (
        <div className="view view-chauffeur" key="chauffeur">
          <Chauffeur onHome={onHome} onReserve={() => onReserve()} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </div>
      ) : view === "fleet-page" ? (
        <div className="view view-fleet-page" key="fleet-page">
          <FleetPage onHome={onHome} onReserve={onReserve} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </div>
      ) : (
        <div className="view view-about" key="about">
          <About onHome={onHome} onReserve={() => onReserve()} />
          <Footer onGo={onGo} onReserve={() => onReserve()} />
        </div>
      )}

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Treatment" value={t.heroTreatment}
          options={["centered", "editorial", "minimal"]}
          onChange={(v) => setTweak("heroTreatment", v)} />
        <TweakSection label="Fleet" />
        <TweakRadio label="Card style" value={t.cardStyle}
          options={["image", "editorial"]}
          onChange={(v) => setTweak("cardStyle", v)} />
        <TweakSection label="Atmosphere" />
        <TweakRadio label="Mood" value={t.mood}
          options={["dark", "gilded"]}
          onChange={(v) => setTweak("mood", v)} />
        <TweakSlider label="Motion" value={t.motion} min={0} max={100} step={10}
          onChange={(v) => setTweak("motion", v)} />
        <TweakColor label="Accent" value={t.accent}
          options={["#C9A24B", "#BE9C57", "#D7B25E", "#A8884A"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </div>
  );
}

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