// Root app.

function App() {
  const [values, setValues] = React.useState(TWEAKS);
  const { active, persist } = useEditModeBridge();

  React.useEffect(() => { applyTweakVars(values); }, [values]);

  const onChange = (patch) => {
    const next = { ...values, ...patch };
    setValues(next);
    persist(patch);
  };

  return (
    <LangProvider>
      <div className="relative">
        <StickyNav />
        <Hero />
        <Bento />
        <Stack />
        <Timeline />
        <CVSection />
        <FooterSection />

        {active && <TweaksPanel values={values} onChange={onChange} />}
      </div>
    </LangProvider>
  );
}

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