/* global React, ReactDOM,
   Nav, Hero, Marquee, Pause, ViewSection, Amenities, Workcation, Gallery, Stay, Quote, Village, Cta, Foot,
   useReveal, useParallax,
   TweaksPanel, useTweaks, TweakSection, TweakColor, TweakToggle, TweakRadio */
const { useEffect } = React;

const PALETTES = {
  paper: ["#ECE4D2", "#1A1F1A", "#C24F2C"],   // warm paper, ink, terracotta
  forest:["#E6E8DC", "#1B2418", "#3D6E3A"],   // soft moss
  dawn:  ["#F2E1D2", "#23202A", "#A8506E"],   // dawn pink
  slate: ["#DCDDD4", "#171818", "#3E5C76"],   // mountain slate
};

function App(){
  const [t, setT] = useTweaks(/*EDITMODE-BEGIN*/{
    "palette": "paper",
    "grain": true,
    "parallax": true
  }/*EDITMODE-END*/);

  useReveal();
  useParallax();

  useEffect(() => {
    const [paper, ink, terra] = PALETTES[t.palette] || PALETTES.paper;
    const r = document.documentElement.style;
    r.setProperty("--paper", paper);
    r.setProperty("--ink", ink);
    r.setProperty("--terra", terra);
  }, [t.palette]);

  useEffect(() => {
    if (!t.parallax) {
      document.querySelectorAll("[data-parallax]").forEach(el => { el.style.transform = "none"; });
    }
  }, [t.parallax]);

  return (
    <>
      {t.grain && <div className="grain" aria-hidden="true"></div>}
      <Nav />
      <Hero />
      <Marquee />
      <Pause />
      <ViewSection />
      <Amenities />
      <Workcation />
      <Gallery />
      <Stay />
      <Quote />
      <Village />
      <Cta />
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakRadio label="Mood" value={t.palette} onChange={(v) => setT('palette', v)}
            options={[
              { value: "paper",  label: "Paper" },
              { value: "forest", label: "Forest" },
              { value: "dawn",   label: "Dawn" },
              { value: "slate",  label: "Slate" },
            ]} />
        </TweakSection>
        <TweakSection title="Motion + Texture">
          <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setT('grain', v)} />
          <TweakToggle label="Parallax" value={t.parallax} onChange={(v) => setT('parallax', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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