// Composes the full landing page in scroll order.

const { Nav, Hero, WhyUs, Services, Process, FinalCTA, Footer } = window;

function App() {
  // When landed with a hash (e.g. xybos-landing.html#why from another page),
  // the browser tries to scroll before React has rendered the target section,
  // so it lands at the top. Wait for the target element to appear, then scroll.
  React.useEffect(() => {
    const hash = window.location.hash;
    if (!hash || hash.length < 2) return;
    const id = hash.slice(1);
    let attempts = 0;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: 'auto', block: 'start' });
      } else if (attempts++ < 60) {
        requestAnimationFrame(tryScroll);
      }
    };
    requestAnimationFrame(tryScroll);
  }, []);

  return (
    <main>
      <Nav />
      <Hero />
      <WhyUs />
      <Services />
      <Process />
      <FinalCTA />
      <Footer />
    </main>
  );
}

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