/* ============================================================
 * App, assemble all sections, wire tweaks
 * ============================================================ */

const App = () => {
  const [tweaks, setTweaks] = useState(window.__GM_TWEAKS__);

  // Apply theme/density on first render (before tweaks panel mounts)
  useLayoutEffect(() => {
    document.documentElement.setAttribute("data-theme", tweaks.theme);
    document.documentElement.setAttribute("data-density", tweaks.density);
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.documentElement.style.setProperty(
      "--accent-glow",
      `color-mix(in srgb, ${tweaks.accent} 22%, transparent)`
    );
  }, []);

  return (
    <>
      <SectionNav />
      <SectionHero tweaks={tweaks} />
      <SectionRest />
      <SectionPillars />
      <SectionProblem />
      <SectionBigIdea tweaks={tweaks} />
      <SectionJourney />
      <SectionInbox />
      <SectionBrain />
      <SectionEngine />
      <SectionIntegrations />
      <SectionOutcomes />
      <SectionCTA />
      <SectionFooter />
      <GMTweaks onChange={setTweaks} />
    </>
  );
};

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