// Shell — orchestrates LangProvider, scroll-reveal observer, section order,
// and Tweaks panel. Renders the full Datakor landing.

const useScrollReveal = () => {
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
      });
    }, { threshold: 0.08, rootMargin: '0px 0px -6% 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

function DatakorPage() {
  useScrollReveal();
  return (
    <div data-screen-label="Datakor Landing">
      <TopNav />
      <main>
        <Hero />
        <Services />
        <Solutions />
        <Brands />
        <Backup />
        <Managed />
        <Team />
        <CatalogForm />
        <ContactSection />
      </main>
      <Footer />
      <DatakorTweaks />
    </div>
  );
}

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