const { useState, useEffect } = React;

function App() {
  const [theme, setTheme] = useState('dark');

  useEffect(() => {
    // Initial theme setup based on OS pref, defaulting to dark
    const savedTheme = localStorage.getItem('theme') || 'dark';
    setTheme(savedTheme);
    document.documentElement.setAttribute('data-theme', savedTheme);
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  return (
    <div className="app">
      <window.Navbar theme={theme} toggleTheme={toggleTheme} />
      <main>
        <window.Hero />
        <window.Features />
        <window.HowItWorks />
        <window.AnalyzerForm />
      </main>
      <window.Footer />
    </div>
  );
}

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