/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "cream",
  "accent": "#E2502B"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply theme + accent to :root
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme === "cream" ? "" : t.theme);
    document.documentElement.style.setProperty("--accent", t.accent);
    // Pick a sensible accent-ink (light for dark accents, dark for light)
    const lightAccents = ["#F2C94C"];
    document.documentElement.style.setProperty(
      "--accent-ink",
      lightAccents.includes(t.accent) ? "#16140F" : (t.theme === "ink" ? "#0E0D0B" : "#16140F")
    );
  }, [t.theme, t.accent]);

  // Scroll reveal
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => e.isIntersecting && e.target.classList.add("in"));
    }, { threshold: 0.08 });
    document.querySelectorAll(".reveal").forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <>
      <Header />
      <main>
        <Hero />
        <Services />
        <Results />
        <Workflow />
        <Testimonials />
        <Founder />
        <Contact />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Direction" />
        <TweakRadio
          label="Theme"
          value={t.theme}
          options={["cream", "ink", "bone"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakSection label="Accent" />
        <TweakColor
          label="Accent color"
          value={t.accent}
          options={["#E2502B", "#FF6A37", "#1F4A35", "#2A6FDB", "#7A5AE0", "#F2C94C"]}
          onChange={(v) => setTweak("accent", v)}
        />
      </TweaksPanel>
    </>
  );
}

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