/* global React, ReactDOM, Nav, Hero, LogoCloud, Services, Showcase, Work, Process, Metrics, About, Testimonials, Contact, Footer */
const { useEffect: useEApp, useRef: useRApp } = React;

function useScrollReveal() {
  useEApp(() => {
    const finalize = (el) => {
      // After the entrance window, lock the end-state so a throttled/blurred
      // tab can never leave the element stuck mid-transition (blank).
      setTimeout(() => {
        el.style.transition = 'none';
        el.style.opacity = '1';
        el.style.transform = 'none';
      }, 900);
    };
    const reveal = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      document.querySelectorAll('.reveal:not(.in)').forEach(el => {
        const r = el.getBoundingClientRect();
        if (r.top < vh * 0.92 && r.bottom > 0) { el.classList.add('in'); finalize(el); }
      });
    };
    reveal();
    const onScroll = () => requestAnimationFrame(reveal);
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll, { passive: true });
    const t1 = setTimeout(reveal, 300);
    const t2 = setTimeout(() => document.querySelectorAll('.reveal').forEach(el => {
      el.classList.add('in'); el.style.opacity = '1'; el.style.transform = 'none';
    }), 2500);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      clearTimeout(t1); clearTimeout(t2);
    };
  });
}

function App() {
  const contactRef = useRApp(null);
  useScrollReveal();

  const goContact = () => {
    const el = document.getElementById('contact');
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  return (
    <div className="relative">
      <Nav onCta={goContact} />
      <main>
        <Hero onCta={goContact} />
        <LogoCloud />
        <Services />
        <Showcase />
        <Work onCta={goContact} />
        <Process />
        <Metrics />
        <About />
        <Testimonials />
        <Contact formRef={contactRef} />
      </main>
      <Footer onCta={goContact} />
    </div>
  );
}

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