/* AJL40 Microsite — App entrypoint */

function App() {
  const [currentView, setCurrentView] = useState('OVERTURE');

  // Scroll the active view to top whenever it changes
  const viewWrapRef = useRef(null);
  useEffect(() => {
    if (viewWrapRef.current) {
      const v = viewWrapRef.current.querySelector('.view');
      if (v) v.scrollTo({ top: 0, behavior: 'instant' });
    }
  }, [currentView]);

  // Sync hash for shareable URLs
  useEffect(() => {
    const h = (window.location.hash || '').replace('#', '');
    if (h) setCurrentView(h);
    const onHash = () => {
      const next = (window.location.hash || '').replace('#', '');
      if (next) setCurrentView(next);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  useEffect(() => {
    if (window.location.hash.replace('#', '') !== currentView) {
      window.history.replaceState(null, '', '#' + currentView);
    }
  }, [currentView]);

  const renderView = () => {
    switch (currentView) {
      case 'OVERTURE':
        return <OvertureView onViewChange={setCurrentView} />;
      case 'ACT_1':
      case 'ACT_2':
      case 'ACT_3':
      case 'ACT_4':
        return <ActView actId={currentView} key={currentView} />;
      case 'HALL_OF_FAME':
        return <HallOfFameView />;
      case 'INSIGHTS':
        return <InsightsView />;
      case 'ENCORE':
        return <EncoreView />;
      case 'FUTURE':
        return <FutureView />;
      default:
        return <OvertureView onViewChange={setCurrentView} />;
    }
  };

  return (
    <div className="app grain" data-screen-label={`Microsite — ${currentView}`}>
      <div className="app__glow" aria-hidden="true" />
      <TopNav currentView={currentView} onViewChange={setCurrentView} />
      <div className="app__main" ref={viewWrapRef}>
        <Sidebar currentView={currentView} onViewChange={setCurrentView} />
        {renderView()}
      </div>
      <TimelineRail currentView={currentView} onViewChange={setCurrentView} />
    </div>
  );
}

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