// Root app composer for Sellatr landing.

const { useEffect: useEffectApp } = React;

const AppShell = () => {
  // Scroll reveal
  useEffectApp(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div style={{ background: 'var(--bg)' }}>
      <Nav />
      <Hero />
      <section className="reveal"><ProblemSection /></section>
      <section className="reveal"><SolutionSection /></section>
      <section className="reveal"><OmnichannelSection /></section>
      <section className="reveal"><AIAgentSection /></section>
      <section className="reveal"><AICustomizationSection /></section>
      <section className="reveal"><IndustriesSection /></section>
      <section className="reveal"><MarketplaceSection /></section>
      <section className="reveal"><FourUsersSection /></section>
      <section className="reveal"><AnalyticsSection /></section>
      <section className="reveal"><ArabicFirstSection /></section>
      <section className="reveal"><ComparisonSection /></section>
      <section className="reveal"><InteractiveDemoSection /></section>
      <section className="reveal"><OnboardingSection /></section>
      <section className="reveal"><FinalCTASection /></section>
      <FooterSection />
    </div>
  );
};

const App = () => (
  <LangProvider>
    <AppShell />
  </LangProvider>
);

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