// app.jsx — compose page + Tweaks
const { useEffect: useEffectApp } = React;
const { useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#ff4136", "#ff6157"],
  "density": "calm"
}/*EDITMODE-END*/;

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

  useEffectApp(() => {
    const r = document.documentElement.style;
    const [base, bright] = Array.isArray(t.accent) ? t.accent : ["#ff4136", "#ff6157"];
    r.setProperty("--accent", base);
    r.setProperty("--accent-bright", bright);
    r.setProperty("--sp-section", t.density === "compact" ? "88px" : t.density === "standard" ? "108px" : "132px");
  }, [t.accent, t.density]);

  const {
    Nav, Hero, Pain, HowItWorks, Features, Included, TryIt, Footer,
  } = window;

  return (
    <React.Fragment>
      <Nav />
      <main>
        <Hero />
        <Pain />
        <HowItWorks />
        <Features />
        <Included />
        <TryIt />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor label="Signal color" value={t.accent}
          options={[["#ff4136", "#ff6157"], ["#f15a22", "#ff6c33"], ["#f08a1d", "#ff9e35"], ["#d23b2c", "#ff4e3a"]]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={["compact", "standard", "calm"]}
          onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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