const App = () => {
  const [tweaks, setTweaks] = React.useState(() => {
    const base = window.__TWEAKS || {
      theme: 'dark', accent: 'violet', heroVariant: 'orchestration', density: 'comfortable', font: 'simple',
    };
    // User's previous theme choice wins over the baked-in default.
    try {
      const saved = localStorage.getItem('aa-theme');
      if (saved === 'dark' || saved === 'light') return { ...base, theme: saved };
    } catch (_) {}
    return base;
  });

  React.useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
    document.documentElement.setAttribute('data-theme', tweaks.theme || 'dark');
    document.documentElement.setAttribute('data-font', tweaks.font || 'simple');
  }, [tweaks.accent, tweaks.theme, tweaks.font]);

  return (
    <>
      <Nav />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <MoatSection />
        <DemoSection />
        <FeaturesSection />
        <EcosystemSection />
        <GallerySection />
        <OSSSection />
      </main>
      <Footer />
      <Tweaks tweaks={tweaks} onChange={setTweaks} />
    </>
  );
};

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