// App — root + reveal observer + tweaks wiring.
const App = () => {
  useReveal();
  React.useEffect(() => {
    // Tweaks wiring
    const panel = document.getElementById('tweaks');
    const updateAll = () => {
      // Sync UI to __tweaks
      const t = window.__tweaks;
      document.getElementById('tw-parallax').value = t.parallax;
      document.getElementById('tw-orbit').value = t.orbit;
      document.getElementById('tw-wordmark').value = t.wordmark;
      panel.querySelectorAll('button[data-key]').forEach(b => {
        const key = b.dataset.key;
        const val = b.dataset.val;
        const cur = String(t[key]);
        b.classList.toggle('active', cur === val);
      });
      window.dispatchEvent(new CustomEvent('tweakschange'));
    };
    const setKey = (k, v) => {
      window.__tweaks = { ...window.__tweaks, [k]: v };
      updateAll();
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    };

    document.getElementById('tw-parallax').oninput = e => setKey('parallax', Number(e.target.value));
    document.getElementById('tw-orbit').oninput    = e => setKey('orbit', Number(e.target.value));
    document.getElementById('tw-wordmark').oninput = e => setKey('wordmark', Number(e.target.value));
    panel.querySelectorAll('button[data-key]').forEach(b => {
      b.onclick = () => {
        const k = b.dataset.key;
        const v = b.dataset.val;
        const typed = v === 'true' ? true : v === 'false' ? false : v;
        setKey(k, typed);
      };
    });

    const activate = () => panel.classList.add('open');
    const deactivate = () => panel.classList.remove('open');
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') activate();
      else if (d.type === '__deactivate_edit_mode') deactivate();
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    updateAll();
    return () => window.removeEventListener('message', onMsg);
  }, []);

  return (
    <>
      <Nav />
      <Hero />
      <Services />
      <Stats />
      <Testimonial />
      <HowItWorks />
      <About />
      <FinalCTA />
      <Footer />
    </>
  );
};

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