// App entry — wires Tweaks, applies CSS vars for dark/light, renders sections.

const { useState, useEffect } = React;

function applyThemeVars(tweaks) {
  const r = document.documentElement;
  if (tweaks.dark) {
    r.style.setProperty('--paper', 'oklch(0.16 0.01 250)');
    r.style.setProperty('--ink',   'oklch(0.94 0.008 85)');
    r.style.setProperty('--ink-soft', 'oklch(0.72 0.01 250)');
    r.style.setProperty('--rule',  'oklch(0.94 0.008 85 / 0.18)');
  } else {
    r.style.setProperty('--paper', 'oklch(0.97 0.012 85)');
    r.style.setProperty('--ink',   'oklch(0.22 0.02 250)');
    r.style.setProperty('--ink-soft', 'oklch(0.42 0.02 250)');
    r.style.setProperty('--rule',  'oklch(0.22 0.02 250 / 0.18)');
  }
}

function App() {
  const [tweaks, setTweaks] = useState(window.__TWEAKS__);
  const [editing, setEditing] = useState(false);

  useEffect(() => { applyThemeVars(tweaks); }, [tweaks]);

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

  return (
    <>
      <Hero tweaks={tweaks}/>
      <LatestPosts tweaks={tweaks}/>
      <TweaksPanel open={editing} tweaks={tweaks} setTweaks={setTweaks}/>
    </>
  );
}

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