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

function App() {
  // Smooth scroll for hash links (Lenis-lite)
  useEffect(() => {
    const onClick = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute("href").slice(1);
      if (!id) return;
      const el = document.getElementById(id);
      if (el) {
        e.preventDefault();
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      }
    };
    document.addEventListener("click", onClick);
    return () => document.removeEventListener("click", onClick);
  }, []);

  return (
    <>
      <ScrollProgress />
      <Header />
      <SectionDots />
      <main>
        <Scene1Hero />
        <Scene2Origin />
        <Scene3Cattle />
        <Scene4Process />
        <Scene5Quality />
        <Scene6Devesa />
        <Scene7World />
        <Scene8Family />
        <Scene9Closing />
      </main>
      <Footer />
    </>
  );
}

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