const App = () => {
  const defaults = window.__TWEAK_DEFAULTS__ || {};
  const [accent, setAccent] = React.useState(defaults.accent || "rose");
  const [heroVariant, setHeroVariant] = React.useState(defaults.heroVariant || "portrait");
  const [cardStyle, setCardStyle] = React.useState(defaults.cardStyle || "soft");

  React.useEffect(() => {
    document.documentElement.dataset.accent = accent;
    document.documentElement.dataset.hero = heroVariant;
    document.documentElement.dataset.card = cardStyle;
  }, [accent, heroVariant, cardStyle]);

  return (
    <>
      <Nav />
      <Hero variant={heroVariant} />
      <Courses />
      <WhyUs />
      <ExamInfo />
      <Teachers />
      <Works />
      <Testimonials />
      <Schedule />
      <Signup />
      <Footer />

      <Tweaks
        accent={accent} setAccent={setAccent}
        heroVariant={heroVariant} setHeroVariant={setHeroVariant}
        cardStyle={cardStyle} setCardStyle={setCardStyle}
      />
    </>
  );
};

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