function App() {
  const [active, setActive] = React.useState(1);
  React.useEffect(() => {
    const sections = [{id:'top',n:1},{id:'philosophy',n:2},{id:'ecosystem',n:3},{id:'how',n:4},{id:'contact',n:5}];
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.35;
      let cur = 1;
      for (const s of sections) { const el = document.getElementById(s.id); if (el && el.offsetTop <= y) cur = s.n; }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (<><TopTicker active={active} /><main><Page1 /><Page2 /><Page3 /><Page4 /><Page5 /></main></>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);