// ======== TWEAKS (light/dark) ========
function Tweaks() {
  const [theme, setTheme] = React.useState(() => {
    const t = window.__TWEAK_DEFAULTS?.theme || 'light';
    return t;
  });
  const [visible, setVisible] = React.useState(false);

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

  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const setAndPersist = (t) => {
    setTheme(t);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { theme: t } }, '*');
  };

  return (
    <div className={`tweaks-panel ${visible ? 'visible' : ''}`}>
      <div className="tweaks-title">Tweaks</div>
      <div style={{fontSize: 12, color: 'var(--fg-2)'}}>Theme</div>
      <div className="tweaks-row">
        <button className={`tweak-btn ${theme === 'light' ? 'active' : ''}`} data-cursor="hover" onClick={() => setAndPersist('light')}>Light</button>
        <button className={`tweak-btn ${theme === 'dark' ? 'active' : ''}`} data-cursor="hover" onClick={() => setAndPersist('dark')}>Dark</button>
      </div>
    </div>
  );
}

// ======== APP ========
function App() {
  return (
    <>
      <div className="grain" />
      <ParticleField />
      <Cursor />
      <Nav />
      <Hero />
      <Services />
      <Process />
      <Work />
      <Pricing />
      <FAQ />
      <Contact />
      <Footer />
      <Tweaks />
    </>
  );
}

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