// ── App root: composition, scroll reveals, neural init, tweaks ─────────

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#5B86FF", "#A476FF"],
  "motion": true,
  "grid": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const neuralRef = useRef(null);

  // Apply accent tweak to CSS vars
  useEffect(() => {
    const [from, to] = t.accent;
    document.documentElement.style.setProperty('--accent-from', from);
    document.documentElement.style.setProperty('--accent-to', to);
    document.documentElement.style.setProperty('--ebl', from);
    document.documentElement.style.setProperty('--evi', to);
  }, [t.accent]);

  // Neural background lifecycle + motion toggle
  useEffect(() => {
    neuralRef.current = initNeural();
    return () => neuralRef.current && neuralRef.current.destroy();
  }, []);
  useEffect(() => {
    if (neuralRef.current) neuralRef.current.setRunning(t.motion);
    const c = document.getElementById('neural-canvas');
    if (c) c.style.opacity = t.motion ? '1' : '0.35';
  }, [t.motion]);

  // Grid toggle
  useEffect(() => {
    document.querySelectorAll('.grid-bg').forEach((el) => { el.style.display = t.grid ? '' : 'none'; });
  }, [t.grid]);

  // Scroll reveals
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });

  return (
    <>
      <CustomCursor />
      <ScrollProgress />
      <div className="relative z-10">
      <Nav />
      <main>
        <Hero />
        <ResearchAreas />
        <Credibility />
        <Mission />
        <Featured />
        <Principles />
        <Team />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent gradient" value={t.accent}
          options={[
            ['#5B86FF', '#A476FF'],
            ['#A476FF', '#F25CC1'],
            ['#22D3EE', '#3B82F6'],
            ['#5B86FF', '#5B86FF'],
          ]}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Motion & texture" />
        <TweakToggle label="Animated background" value={t.motion} onChange={(v) => setTweak('motion', v)} />
        <TweakToggle label="Grid overlay" value={t.grid} onChange={(v) => setTweak('grid', v)} />
      </TweaksPanel>
      </div>
    </>
  );
}

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