// app.jsx — root
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "default",
  "dark": false,
  "density": "regular",
  "type": "serif-first",
  "heroVariant": "lede",
  "cursorSpot": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = React.useState("de");

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.dark ? "dark" : "light");
    r.setAttribute("data-palette", t.palette);
    r.setAttribute("data-density", t.density);
    r.setAttribute("data-type", t.type);
  }, [t]);

  // Scroll to a hash target after the app has rendered (e.g. arriving from a method page link)
  React.useEffect(() => {
    const scrollToHash = () => {
      const id = window.location.hash.replace("#", "");
      if (!id) return;
      const el = document.getElementById(id);
      if (el) window.scrollTo({ top: el.offsetTop - 70, behavior: "smooth" });
    };
    const timer = setTimeout(scrollToHash, 240);
    window.addEventListener("hashchange", scrollToHash);
    return () => { clearTimeout(timer); window.removeEventListener("hashchange", scrollToHash); };
  }, []);

  return (
    <>
      {t.cursorSpot && <CursorSpot />}
      <Nav lang={lang} setLang={setLang} />
      <Hero lang={lang} variant={t.heroVariant} />
      <Gallery lang={lang} />
      <Offerings lang={lang} />
      <BodyMap lang={lang} />
      <Services lang={lang} />
      <Journey lang={lang} />
      <About lang={lang} />
      <Testimonials lang={lang} />
      <Booking lang={lang} />
      <Location lang={lang} />
      <Footer lang={lang} />

      <CookieConsent lang={lang} />

      <TweaksPanel title="Tweaks — New Motion">
        <TweakSection label="Palette" />
        <TweakRadio label="Scheme" value={t.palette}
                    options={[
                      { value: "default", label: "Warm" },
                      { value: "ocean", label: "Ocean" },
                      { value: "swiss", label: "Swiss" },
                      { value: "earth", label: "Earth" },
                      { value: "forest", label: "Forest" },
                    ]}
                    onChange={(v) => setTweak("palette", v)} />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />

        <TweakSection label="Typography" />
        <TweakRadio label="Pairing" value={t.type}
                    options={[
                      { value: "serif-first", label: "Serif" },
                      { value: "grotesk", label: "Grotesk" },
                      { value: "mono-quirk", label: "Mono" },
                    ]}
                    onChange={(v) => setTweak("type", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
                    options={[
                      { value: "compact", label: "Compact" },
                      { value: "regular", label: "Regular" },
                      { value: "airy", label: "Airy" },
                    ]}
                    onChange={(v) => setTweak("density", v)} />
        <TweakRadio label="Hero" value={t.heroVariant}
                    options={[
                      { value: "lede", label: "Text" },
                      { value: "media", label: "Media" },
                    ]}
                    onChange={(v) => setTweak("heroVariant", v)} />

        <TweakSection label="Motion" />
        <TweakToggle label="Cursor halo" value={t.cursorSpot} onChange={(v) => setTweak("cursorSpot", v)} />
      </TweaksPanel>
    </>
  );
}

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