// Main app wiring everything together
const { useState, useEffect, useCallback } = React;

function App() {
  const [active, setActive] = useState('about');
  const [tweaks, setTweaks] = useState(window.__TWEAKS);
  const [tweaksOpen, setTweaksOpen] = useState(false);

  // Save tweaks to localStorage + apply
  const updateTweaks = useCallback((patch) => {
    setTweaks(prev => {
      const next = { ...prev, ...patch };
      localStorage.setItem('fc_tweaks', JSON.stringify(next));
      // Also push to host for on-disk persistence
      try {
        window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*');
      } catch(e) {}
      return next;
    });
  }, []);

  // Apply tweaks to CSS + scene
  useEffect(() => {
    document.documentElement.style.setProperty('--accent', tweaks.accent);
    document.documentElement.style.setProperty('--accent-dim', hexToRgba(tweaks.accent, 0.18));
    document.documentElement.style.setProperty('--serif',
      tweaks.serif === 'Geist' ? "'Geist', sans-serif" : "'Instrument Serif', Georgia, serif");
    window.__scene?.setAccent(tweaks.accent);
    window.__scene?.setMode(tweaks.sceneMode);
  }, [tweaks]);

  // Edit-mode protocol
  useEffect(() => {
    const onMsg = (e) => {
      if (!e.data || typeof e.data !== 'object') 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);
  }, []);

  // Scroll spy
  useEffect(() => {
    const sections = ['about', 'ventures', 'trajectory', 'beyond', 'console'];
    const onScroll = () => {
      let best = 'about';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top < window.innerHeight * 0.4) best = id;
      }
      setActive(best);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <TopBar active={active} />
      {tweaks.showGrid && <div className="grid-overlay" />}
      <div className="fc-corner tl" />
      <div className="fc-corner tr" />
      <div className="fc-corner bl" />
      <div className="fc-corner br" />
      <main className="fc-page">
        <Hero />
        <About />
        <Ventures />
        <Timeline />
        <Beyond />
        <Console />
        <Contact />
      </main>
      {tweaks.showTerminal && <StatusBar />}
      <TweaksPanel open={tweaksOpen} tweaks={tweaks} set={updateTweaks} />
    </>
  );
}

function hexToRgba(hex, a) {
  const h = hex.replace('#', '');
  const r = parseInt(h.slice(0,2), 16);
  const g = parseInt(h.slice(2,4), 16);
  const b = parseInt(h.slice(4,6), 16);
  return `rgba(${r},${g},${b},${a})`;
}

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