// App shell + router + tweaks integration
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

function App() {
  const [route, setRoute] = useStateA(() => (window.location.hash.replace('#/', '') || 'home'));
  const [transitioning, setTransitioning] = useStateA(false);
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const canvasRef = useRefA(null);
  const auroraRef = useRefA(null);

  useEffectA(() => {
    const onHash = () => {
      const r = window.location.hash.replace('#/', '') || 'home';
      if (['home', 'platform', 'team', 'contact'].includes(r)) {
        setRoute(r);
        window.scrollTo({ top: 0, behavior: 'instant' });
      }
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const navigate = (r) => {
    if (r === route) return;
    setTransitioning(true);
    setTimeout(() => {
      window.location.hash = '#/' + r;
      setRoute(r);
      window.scrollTo({ top: 0, behavior: 'instant' });
      setTimeout(() => setTransitioning(false), 50);
    }, 280);
  };

  useEffectA(() => {
    if (canvasRef.current && window.__initAurora) {
      auroraRef.current = window.__initAurora(canvasRef.current, { intensity: 1.0 });
    }
    return () => auroraRef.current && auroraRef.current.destroy();
  }, []);

  // Apply tweak changes live
  useEffectA(() => {
    const a = auroraRef.current;
    if (!a) return;
    a.setIntensity && a.setIntensity(tweaks.auroraIntensity);
    a.setSpeed && a.setSpeed(tweaks.auroraSpeed);
    a.setStars && a.setStars(tweaks.showStars ? 1.0 : 0.0);
    a.setColors && a.setColors(tweaks.accentDeep, tweaks.accentDeep, tweaks.accent);
    a.setSky && a.setSky('#050d12', '#0a1a22');
  }, [tweaks]);

  const theme = { ...THEME_DARK };
  theme['--accent-bright'] = tweaks.accent;
  theme['--accent'] = tweaks.accentDeep;
  theme['--border'] = hexA(tweaks.accentDeep, 0.22);
  theme['--accent-dim'] = hexA(tweaks.accentDeep, 0.18);

  let Page = HomePage;
  if (route === 'platform') Page = PlatformPage;
  else if (route === 'team') Page = TeamPage;
  else if (route === 'contact') Page = ContactPage;

  return (
    <div style={{
      ...theme, background: 'var(--bg)', color: 'var(--text)', minHeight: '100vh', position: 'relative',
      fontSize: `${tweaks.bodyScale}rem`,
    }}
    className={tweaks.italicHeadings ? '' : 'no-italic'}
    data-glow={tweaks.cardGlow ? 'on' : 'off'}>
      <canvas ref={canvasRef} style={{ position: 'fixed', inset: 0, width: '100vw', height: '100vh', zIndex: 0, pointerEvents: 'none' }} />

      <Nav route={route} navigate={navigate} />

      <main style={{
        position: 'relative', zIndex: 2, paddingTop: 72,
        opacity: transitioning ? 0 : 1,
        transform: transitioning ? 'translateY(8px)' : 'translateY(0)',
        transition: 'opacity 0.3s ease, transform 0.3s ease',
      }}>
        <Page navigate={navigate} />
      </main>

      <Footer navigate={navigate} />
      <TweaksPanel tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

function hexA(hex, a) {
  const n = parseInt(hex.slice(1), 16);
  return `rgba(${(n>>16)&255}, ${(n>>8)&255}, ${n&255}, ${a})`;
}

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