/* Main app shell + mount */

function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAK_DEFAULTS);
  const setTweak = (k, v) => setTweaks(t => ({ ...t, [k]: v }));

  // Reveal animations
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    if (!els.length) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });

  // Apply accent to root
  useEffect(() => {
    document.documentElement.setAttribute('data-accent', tweaks.accent);
  }, [tweaks.accent]);

  return (
    <TweakCtx.Provider value={{ tweaks, setTweak }}>
      <Header />
      <main>
        <Hero />
        <Trust />
        <Services />
        <About />
        <Contact />
      </main>
      <Footer />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
      <style>{`
        .hide-mobile { display: flex; }
        .show-mobile { display: none; }
        @media (max-width: 860px) {
          .hide-mobile { display: none !important; }
          .show-mobile { display: flex !important; }
        }
      `}</style>
    </TweakCtx.Provider>
  );
}

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