function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  // reveal on scroll
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <ThemeProvider>
      <LangProvider>
        <Header />
        <main>
          <Hero />
          <Services learnMoreUrl={tweaks.qmsLearnMoreUrl} learnMoreNewTab={tweaks.qmsLearnMoreNewTab} />
          <Taboor />
          <About />
          <Contact />
        </main>
        <Footer />
        <WhatsAppFAB />
        <TweaksPanel title="Tweaks">
          <TweakSection label="QMS Learn More" />
          <TweakText
            label="Forward URL"
            value={tweaks.qmsLearnMoreUrl}
            onChange={(v) => setTweak('qmsLearnMoreUrl', v)}
            placeholder="https://taboor.ofuq.tech"
          />
          <TweakToggle
            label="Open in new tab"
            value={tweaks.qmsLearnMoreNewTab}
            onChange={(v) => setTweak('qmsLearnMoreNewTab', v)}
          />
        </TweaksPanel>
      </LangProvider>
    </ThemeProvider>
  );
}

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