// src/app.jsx — composes everything

const { useEffect: useE } = React;

// Site configuration — previously controlled by the tweaks panel.
const SITE = {
  palette: "mono",       // "mono" | "warm" | "glass"
  fonts:   "editorial",  // "editorial" | "modern" | "ritual"
  motion:  "medium",     // "none" | "low" | "medium" | "heavy"
  bubbles: true,
};

function App() {
  const palette = PALETTES[SITE.palette] || PALETTES.warm;
  const fonts   = FONT_PAIRS[SITE.fonts] || FONT_PAIRS.editorial;
  const alt     = palette.alt || palette; // sandy alt only defined on mono

  // sync CSS vars on root
  useE(() => {
    const r = document.documentElement.style;
    r.setProperty("--bg", palette.bg);
    r.setProperty("--ink", palette.ink);
    r.setProperty("--accent", palette.accent);
    r.setProperty("--font-display", fonts.display);
    r.setProperty("--font-body", fonts.body);
    document.body.style.background = palette.bg;
    document.body.style.color = palette.ink;
    document.body.style.fontFamily = fonts.body;
  }, [palette, fonts]);

  return (
    <>
      {SITE.bubbles && <BubbleField palette={palette} motion={SITE.motion} />}

      <main style={{position:"relative", zIndex:10, maxWidth: 1600, margin:"0 auto"}}>
        <Header        palette={palette} fonts={fonts} />
        <Hero          palette={palette} fonts={fonts} motion={SITE.motion} />
        <SandWrap palette={palette} alt={alt}>
          <Approach    palette={alt} fonts={fonts} />
        </SandWrap>
        <Sessions      palette={palette} fonts={fonts} motion={SITE.motion} />
        <SandWrap palette={palette} alt={alt}>
          <Enhancements palette={alt} fonts={fonts} />
        </SandWrap>
        <Membership    palette={palette} fonts={fonts} motion={SITE.motion} />
        <SandWrap palette={palette} alt={alt}>
          <Practitioner palette={alt} fonts={fonts} />
        </SandWrap>
        <Testimonials  palette={palette} fonts={fonts} />
        <SandWrap palette={palette} alt={alt}>
          <Faq         palette={alt} fonts={fonts} />
        </SandWrap>
        <Visit         palette={palette} fonts={fonts} motion={SITE.motion} />
      </main>

      <MobileBookBar palette={palette} />
    </>
  );
}

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