/* global React, ReactDOM */
const { useState, useEffect } = React;

const App = () => {
  const defaults = window.TWEAK_DEFAULTS || { heroVariant: 'classic', governanceWallpaper: false, cursorWallpaper: false, scrollIntensity: 'strong', accent: '#FF4E00' };
  const [state, setState] = useState(defaults);

  useRevealOnScroll('.fade-up');

  // Apply accent color as CSS var
  useEffect(() => {
    document.documentElement.style.setProperty('--orange', state.accent || '#FF4E00');
  }, [state.accent]);

  return (
    <>
      <CursorWallpaper active={state.cursorWallpaper !== false} />
      <GovernanceWallpaper active={!!state.governanceWallpaper} />
      <Navbar />
      <main className="site-main">
        {state.heroVariant === 'pinned' ? <HeroPinned /> : <HeroSection variant={state.heroVariant} />}
        <div className="site-contained">
          <PainPoints />
          <ShowcaseVisual />
          <PillarsSection />
          <SectorsSection />
          <TrustSection />
          <TeamSection />
          <CTAFinal />
        </div>
      </main>
      <Footer />
      <TweaksPanel state={state} setState={setState} />
    </>
  );
};

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