// ===== Main App =====
const { useState: uS, useEffect: uE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "cursor": true,
  "hero": 0,
  "accent": "coral"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweaks] = uS(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = uS(false);
  const [isMobile, setIsMobile] = uS(false);

  uE(() => {
    const check = () => setIsMobile(window.innerWidth < 820);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  uE(() => {
    document.body.classList.toggle('theme-dark', tweaks.theme === 'dark');
    const accent = tweaks.accent === 'teal' ? '#5AC4B9' : tweaks.accent === 'yellow' ? '#F5C23C' : '#E85A3C';
    document.documentElement.style.setProperty('--coral', accent);
  }, [tweaks.theme, tweaks.accent]);

  uE(() => {
    const onMsg = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode') setTweaksOpen(true);
      if (e.data.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch (e) {}
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const cursorEnabled = tweaks.cursor && !isMobile;

  return (
    <>
      <Nav/>
      <Hero tweaks={tweaks}/>
      <Ticker/>
      <Services/>
      <Clients/>
      <About/>
      <Contact/>
      <Footer/>
      <FlyingCursor enabled={cursorEnabled}/>
      <button
        className="tweaks-fab"
        onClick={() => setTweaksOpen(o => !o)}
        aria-label="Toggle tweaks"
        data-interactive
        title={tweaksOpen ? 'Close tweaks' : 'Open tweaks'}
      >
        <span className="tweaks-fab-icon">{tweaksOpen ? '×' : '↺'}</span>
        <span className="tweaks-fab-label">{tweaksOpen ? 'Close' : 'Tweaks'}</span>
      </button>
      {tweaksOpen && (
        <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} onClose={() => setTweaksOpen(false)}/>
      )}
    </>
  );
}

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