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;
  });

  // PRODUCT MODE — the Studio | Business switch (nav). Studio (MIT engine :18802,
  // prompt→app) leads on the main; Business (SaaS :18804, prompt→business) is the
  // other view. Persisted so a switch survives reload.
  const [mode, setMode] = React.useState(() => {
    try { const m = localStorage.getItem('aa-mode'); if (m === 'studio' || m === 'business') return m; } catch (_) {}
    return 'studio';
  });
  React.useEffect(() => { try { localStorage.setItem('aa-mode', mode); } catch (_) {} }, [mode]);

  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 mode={mode} setMode={setMode} />
      <main>
        <Hero mode={mode} variant={tweaks.heroVariant} />
        {mode === 'studio' ? (
          <>
            <BentoSection mode="studio" />
            <Showcase mode="studio" />
            <Compare mode="studio" />
          </>
        ) : (
          <>
            <BentoSection mode="business" />
            <Showcase mode="business" />
            <Compare mode="business" />
          </>
        )}
        <OSSSection />
      </main>
      <Footer />
      <Tweaks tweaks={tweaks} onChange={setTweaks} />
      <Lightbox />
    </>
  );
};

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