/* HNQ Tech v3 — main app */
const { useState: useAppState, useEffect: useAppEffect, useRef: useAppRef } = React;

function App() {
  const tweaks = useTweaks(/*EDITMODE-BEGIN*/{
    "theme": "dark"
  }/*EDITMODE-END*/);

  const rootRef = useAppRef(null);

  useAppEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
  }, [tweaks.theme]);

  useAppEffect(() => {
    if (!rootRef.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
    rootRef.current.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);

  return (
    <div ref={rootRef}>
      <Nav theme={tweaks.theme} setTheme={(v) => tweaks.setTweak('theme', v)} />
      <Hero />
      <Services />
      <Values />
      <Process />
      <CaseStudies />
      <Stack />
      <Counters />
      <Testimonials />
      <Pricing />
      <FAQ />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Giao diện">
          <TweakRadio
            label="Chế độ màu"
            value={tweaks.theme}
            onChange={(v) => tweaks.setTweak('theme', v)}
            options={[{value:'dark', label:'Dark (AI)'}, {value:'light', label:'Light'}]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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