/* eslint-disable */
const { useEffect: useEffectApp } = React;

function useReveal() {
  useEffectApp(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.05 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

function App() {
  useReveal();
  return (
    <div id="top">
      <Header/>
      <main>
        <Hero/>
        <FeelingSection/>
        <ServicesSection/>
        <QuizSection/>
        <GallerySection/>
        <TeamSection preview={true}/>
        <ProcessSection/>
        <TestimonialSection/>
        <HistorySection/>
        <BlogSection/>
        <FinalCTA/>
      </main>
      <Footer/>
      <WhatsAppFloat/>
    </div>
  );
}

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