// App entry — wires sections, smooth scroll, active section, tweaks panel

const { useState: useState_a, useEffect: useEffect_a, useRef: useRef_a } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "lavender",
  "showDoodles": true,
  "scriptAccent": true,
  "ctaIntensity": "glow",
  "density": "comfy"
}/*EDITMODE-END*/;

const THEMES = {
  lavender: {
    label: "Lavender",
    "--purple": "#7E5BEF", "--purple-2": "#A88BFF", "--purple-deep": "#5B3FD6", "--purple-50": "#F1ECFF",
    "--teal": "#2DAFA0", "--teal-2": "#66D1C2", "--teal-50": "#E6F7F3",
    "--coral": "#FF8B7E", "--coral-2": "#FFB5A8", "--coral-50": "#FFEEEA",
    "--yellow": "#FFD25E", "--yellow-50": "#FFF5DA",
    "--cream": "#FBF6EE", "--cream-2": "#FFFBF3",
    "--ink": "#1B1340", "--ink-soft": "#4A4366",
    palette: ["#7E5BEF","#2DAFA0","#FF8B7E","#FFD25E"],
  },
  rose: {
    label: "Rose Garden",
    "--purple": "#D54B7E", "--purple-2": "#F08AB3", "--purple-deep": "#A8336B", "--purple-50": "#FDECF3",
    "--teal": "#3B9F8E", "--teal-2": "#7AD0BF", "--teal-50": "#E4F5F0",
    "--coral": "#FF8B7E", "--coral-2": "#FFC0B5", "--coral-50": "#FFEEEA",
    "--yellow": "#F2B85C", "--yellow-50": "#FCEFCF",
    "--cream": "#FFF7F4", "--cream-2": "#FFFCF9",
    "--ink": "#3A1326", "--ink-soft": "#73465C",
    palette: ["#D54B7E","#3B9F8E","#FF8B7E","#F2B85C"],
  },
  ocean: {
    label: "Calm Ocean",
    "--purple": "#3B7EDB", "--purple-2": "#7BA9EE", "--purple-deep": "#1F58AE", "--purple-50": "#E6EFFB",
    "--teal": "#0FAE9A", "--teal-2": "#5ED2C0", "--teal-50": "#E0F5F1",
    "--coral": "#F08C72", "--coral-2": "#F8B6A4", "--coral-50": "#FCEAE2",
    "--yellow": "#F5C147", "--yellow-50": "#FCF1D2",
    "--cream": "#F4F7FB", "--cream-2": "#FAFCFE",
    "--ink": "#0D2542", "--ink-soft": "#3E5673",
    palette: ["#3B7EDB","#0FAE9A","#F08C72","#F5C147"],
  },
  sage: {
    label: "Sage Bloom",
    "--purple": "#7E5BEF", "--purple-2": "#A88BFF", "--purple-deep": "#5B3FD6", "--purple-50": "#F1ECFF",
    "--teal": "#669966", "--teal-2": "#9CC198", "--teal-50": "#ECF3EA",
    "--coral": "#E58A6E", "--coral-2": "#F1B49E", "--coral-50": "#FBEBE2",
    "--yellow": "#E8C26A", "--yellow-50": "#F8EDD0",
    "--cream": "#F7F4EC", "--cream-2": "#FCFAF3",
    "--ink": "#1C2A1F", "--ink-soft": "#4A5A4C",
    palette: ["#7E5BEF","#669966","#E58A6E","#E8C26A"],
  },
};

function applyTheme(themeKey) {
  const t = THEMES[themeKey] || THEMES.lavender;
  const root = document.documentElement;
  Object.keys(t).forEach(k => { if (k.startsWith("--")) root.style.setProperty(k, t[k]); });
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [active, setActive] = useState_a("home");
  const sectionsRef = useRef_a({});

  useEffect_a(() => { applyTheme(t.theme); }, [t.theme]);
  useEffect_a(() => {
    document.documentElement.classList.toggle("no-doodles", !t.showDoodles);
    document.documentElement.classList.toggle("no-script", !t.scriptAccent);
    document.documentElement.dataset.density = t.density;
    document.documentElement.dataset.cta = t.ctaIntensity;
  }, [t.showDoodles, t.scriptAccent, t.density, t.ctaIntensity]);

  // Track active section
  useEffect_a(() => {
    const ids = ["home","about","services","process","fees","faq","booking","contact"];
    const io = new IntersectionObserver((entries) => {
      const visible = entries
        .filter(e => e.isIntersecting)
        .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
      if (visible[0]) setActive(visible[0].target.id);
    }, { rootMargin: "-30% 0px -55% 0px", threshold: [0, 0.2, 0.5] });
    ids.forEach(id => { const el = document.getElementById(id); if (el) io.observe(el); });
    return () => io.disconnect();
  }, []);

  const onNav = (id) => {
    const target = id === "contact" ? "contact" : id;
    const el = document.getElementById(target);
    if (el) {
      const navH = 70;
      const top = el.getBoundingClientRect().top + window.scrollY - navH;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <>
      <Nav active={active} onNav={onNav}/>
      <Hero onCTA={onNav}/>
      <TrustStrip/>
      <Services onCTA={onNav}/>
      <About/>
      <Process/>
      <FeesAndInsurance/>
      <Testimonials/>
      <FAQ/>
      <Booking/>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor
          label="Palette"
          value={THEMES[t.theme].palette}
          options={Object.keys(THEMES).map(k => THEMES[k].palette)}
          onChange={(p) => {
            const key = Object.keys(THEMES).find(k => THEMES[k].palette[0] === p[0]) || "lavender";
            setTweak("theme", key);
          }}
        />
        <TweakSelect
          label="Color theme"
          value={t.theme}
          options={Object.keys(THEMES).map(k => ({ value: k, label: THEMES[k].label }))}
          onChange={(v) => setTweak("theme", v)}
        />

        <TweakSection label="Visual flourishes" />
        <TweakToggle
          label="Hand-drawn doodles"
          value={t.showDoodles}
          onChange={(v) => setTweak("showDoodles", v)}
        />
        <TweakToggle
          label="Script accents in headlines"
          value={t.scriptAccent}
          onChange={(v) => setTweak("scriptAccent", v)}
        />

        <TweakSection label="Buttons" />
        <TweakRadio
          label="CTA style"
          value={t.ctaIntensity}
          options={["solid","glow"]}
          onChange={(v) => setTweak("ctaIntensity", v)}
        />

        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["cozy","comfy","airy"]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </>
  );
}

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