// sw-app.jsx — App root and routing
// Each page has its own address (/wheel, /about…). Old #/ links are moved to the clean address.

// Pages still to come (everything else is drawn from pages-copy.js)
const NEXT_ROUND = {};

function NextRoundPage({ id, navigate }) {
  const p = NEXT_ROUND[id];
  return (
    <section style={{ position: 'relative', overflow: 'hidden', minHeight: '78vh', display: 'flex', alignItems: 'center', background: C.black, paddingTop: 68 }}>
      <div style={{ position: 'absolute', top: '50%', right: '-12%', transform: 'translateY(-50%)', pointerEvents: 'none' }}>
        <Wheel size={640} opacity={0.12} />
      </div>
      <div style={{ ...maxW, position: 'relative', width: '100%', padding: '96px clamp(24px, 8vw, 120px)' }}>
        <SectionLabel>{p.label}</SectionLabel>
        <SectionHeading style={{ marginBottom: 28 }}>{p.title}</SectionHeading>
        <BodyText style={{ marginBottom: 32 }}>{p.body}</BodyText>
        <DraftNote style={{ marginBottom: 44 }}>Copy for this page comes in the next round</DraftNote>
        <div><OutlineBtn onClick={() => { navigate('home'); window.scrollTo(0, 0); }}>Back to the home page</OutlineBtn></div>
      </div>
    </section>
  );
}

if (/^#\/./.test(window.location.hash)) {
  window.history.replaceState({}, '', '/' + window.location.hash.replace(/^#\//, '') + window.location.search);
}

const pageFromHash = () => {
  let id = window.location.pathname.replace(/^\/+|\/+$/g, '');
  if (id === 'contact') id = 'book'; // Contact and Start a conversation are one page
  return (window.PAGES[id] || NEXT_ROUND[id]) ? id : 'home';
};

function App() {
  const [page, setPage] = React.useState(pageFromHash);

  React.useEffect(() => {
    const h = () => setPage(pageFromHash());
    window.addEventListener('popstate', h);
    return () => window.removeEventListener('popstate', h);
  }, []);

  const navigate = (p) => {
    goPage(p);
    setPage(p === 'contact' ? 'book' : p);
  };

  // A new page always opens at the top. It jumps there instantly once the page has drawn,
  // because the site's smooth scrolling (kept for "Find your way in") used to stop partway down
  // (and once more on the next frame, as the browser can nudge it a few pixels while the page settles)
  React.useLayoutEffect(() => {
    const toTop = () => window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
    toTop();
    requestAnimationFrame(toTop);
  }, [page]);

  // Runs before the browser paints, so nothing flashes in before it fades in
  React.useLayoutEffect(() => { window.initMotion && window.initMotion(); }, [page]);

  React.useEffect(() => {
    const t = window.PAGES[page];
    document.title = 'Krish Surroy';
  }, [page]);

  return (
    <div style={{ minHeight: '100vh', background: C.black }}>
      <Nav page={page} navigate={navigate} />
      {page === 'home' ? <HomePage navigate={navigate} />
        : window.PAGES[page] ? <PageView key={page} id={page} navigate={navigate} />
        : <NextRoundPage id={page} navigate={navigate} />}
      <Footer navigate={navigate} />
    </div>
  );
}

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