/* global React, ReactDOM, Nav, Hero, Intro, BrandPreview, PersonalPreview, Testimonials, FinalCTA, Footer, HomeTweaks, setupReveals */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const [heroVariant, setHeroVariant] = useStateA(window.__heroVariant || 'editorial');

  useEffectA(() => {
    const onVar = e => setHeroVariant(e.detail);
    window.addEventListener('herovariant', onVar);
    return () => window.removeEventListener('herovariant', onVar);
  }, []);

  useEffectA(() => {
    // Set up scroll reveals after mount
    requestAnimationFrame(() => setupReveals());
  }, [heroVariant]);

  return (
    <React.Fragment>
      <Nav />
      <Hero variant={heroVariant} key={heroVariant} />
      <Intro />
      <BrandPreview />
      <PersonalPreview />
      <Testimonials />
      <FinalCTA />
      <Footer />
      <HomeTweaks />
    </React.Fragment>
  );
}

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