// ============================================================
// APP — shell + transitioning router
// ============================================================

function App() {
  const [route, setRoute] = React.useState('home');
  const [param, setParam] = React.useState(null);
  const [phase, setPhase] = React.useState('in');
  const [key, setKey] = React.useState(0);
  const pending = React.useRef(null);

  const go = (r, p = null) => {
    if (r === route && p === param) return;
    // Same-page anchor (e.g. contact): no full transition, just re-run effect.
    if (r === route) { setParam(p); setKey((k) => k + 1); return; }
    pending.current = { r, p };
    setPhase('out');
  };

  React.useEffect(() => {
    if (phase !== 'out') return;
    const t = window.setTimeout(() => {
      const { r, p } = pending.current || {};
      setRoute(r);
      setParam(p);
      setKey((k) => k + 1);
      if (typeof window !== 'undefined' && p !== 'contact') window.scrollTo({ top: 0, behavior: 'auto' });
      setPhase('in');
    }, 210);
    return () => window.clearTimeout(t);
  }, [phase]);

  let screen;
  if (route === 'home') screen = <HomeScreen go={go} param={param} />;
  else if (route === 'work') screen = <WorkScreen go={go} />;
  else if (route === 'case') screen = <CaseStudy id={param} go={go} />;
  else if (route === 'writing') screen = <WritingScreen go={go} />;
  else if (route === 'about') screen = <AboutScreen go={go} />;

  return (
    <React.Fragment>
      <div className="nav-sweep" key={'sweep' + key}></div>
      <SiteHeader route={route} go={go} />
      <main key={key} className={phase === 'out' ? 'view-out' : ''}>{screen}</main>
      <SiteFooter go={go} />
      <SiteTweaks />
    </React.Fragment>
  );
}

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