// App root — composes everything

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "cobalt",
  "density": "regular",
  "showField": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  oxblood:   { light: '#8B2A1F', dark: '#D9694F' },
  ink:       { light: '#1B1A17', dark: '#F0ECE2' },
  forest:    { light: '#1F5C3A', dark: '#6FB089' },
  cobalt:    { light: '#1F3A6B', dark: '#7B98D9' },
  amber:     { light: '#A06A2A', dark: '#D9A368' },
};

const App = () => {
  const [tweaks, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);
  const [theme, setTheme] = React.useState(tweaks.theme || 'light');
  const [activeSection, setActiveSection] = React.useState('hero');
  const [scrollProgress, setScrollProgress] = React.useState(0);

  // Sync theme tweak <-> local
  React.useEffect(() => { setTheme(tweaks.theme); }, [tweaks.theme]);

  // Apply theme to root
  React.useEffect(() => {
    document.documentElement.dataset.theme = theme;
    setTweak('theme', theme);
  }, [theme]);

  // Apply accent
  React.useEffect(() => {
    const pal = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.oxblood;
    document.documentElement.style.setProperty('--accent', theme === 'dark' ? pal.dark : pal.light);
  }, [tweaks.accent, theme]);

  // Scroll spy + progress
  React.useEffect(() => {
    const ids = ['hero', 'research', 'publications', 'models', 'insights', 'philosophy', 'team', 'contact'];
    const onScroll = () => {
      const docH = document.documentElement.scrollHeight - window.innerHeight;
      setScrollProgress(Math.min(1, Math.max(0, window.scrollY / docH)));
      let current = 'hero';
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        const top = el.getBoundingClientRect().top;
        if (top < 200) current = id;
      }
      setActiveSection(current);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      {window.DepthField && <DepthField />}
      <Header theme={theme} setTheme={setTheme} activeSection={activeSection} scrollProgress={scrollProgress} />
      <main>
        <Hero />
        <Research />
        <Publications />
        <Models />
        <Insights />
        <Philosophy />
        <Team />
        <Contact />
      </main>
      <Footer />
      {window.ScrollFx && <ScrollFx />}
      {window.CustomCursor && <CustomCursor />}
      {window.MMRLTweaks && <MMRLTweaks tweaks={tweaks} setTweak={setTweak} theme={theme} setTheme={setTheme} />}
    </>
  );
};

// Tweaks panel
const MMRLTweaks = ({ tweaks, setTweak, theme, setTheme }) => {
  const TP = window.TweaksPanel;
  const TS = window.TweakSection;
  const TR = window.TweakRadio;
  const TT = window.TweakToggle;
  if (!TP) return null;
  return (
    <TP title="Tweaks">
      <TS title="Theme">
        <TR value={theme} onChange={setTheme}
          options={[{ value: 'light', label: 'Light' }, { value: 'dark', label: 'Dark' }]} />
      </TS>
      <TS title="Accent">
        <TR value={tweaks.accent} onChange={(v) => setTweak('accent', v)}
          options={[
            { value: 'oxblood', label: 'Oxblood' },
            { value: 'ink', label: 'Mono' },
            { value: 'forest', label: 'Forest' },
            { value: 'cobalt', label: 'Cobalt' },
            { value: 'amber', label: 'Amber' },
          ]} />
      </TS>
    </TP>
  );
};

window.MMRLTweaks = MMRLTweaks;
window.App = App;

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