// js/app.jsx — Root app with state management

const App = () => {
  // Lazy lookup — guaranteed available at render time
  const LandingPage = window.LandingPage;
  const QuizPage    = window.QuizPage;
  const ResultsPage = window.ResultsPage;
  // Always start at landing — avoids stale localStorage causing blank screen
  const [view, setView] = React.useState('landing');
  const [answers, setAnswers] = React.useState(() => {
    try { return JSON.parse(localStorage.getItem('gr_answers') || '{}'); } catch { return {}; }
  });
  const [transitioning, setTransitioning] = React.useState(false);

  const persist = (v, a) => {
    try {
      localStorage.setItem('gr_view', v);
      localStorage.setItem('gr_answers', JSON.stringify(a || {}));
    } catch {}
  };

  const goToQuiz = () => {
    setTransitioning(true);
    setTimeout(() => {
      setView('quiz');
      setAnswers({});
      persist('quiz', {});
      setTransitioning(false);
      window.scrollTo(0, 0);
    }, 350);
  };

  const goToResults = (ans) => {
    setTransitioning(true);
    setTimeout(() => {
      setAnswers(ans);
      setView('results');
      persist('results', ans);
      setTransitioning(false);
      window.scrollTo(0, 0);
    }, 300);
  };

  const goToLanding = () => {
    setTransitioning(true);
    setTimeout(() => {
      setView('landing');
      setAnswers({});
      persist('landing', {});
      setTransitioning(false);
      window.scrollTo(0, 0);
    }, 300);
  };

  const fadeStyle = {
    opacity: transitioning ? 0 : 1,
    transition: 'opacity .35s ease',
  };

  return (
    <div style={fadeStyle}>
      {view === 'landing' && <LandingPage onCTA={goToQuiz} />}
      {view === 'quiz'    && <QuizPage onComplete={goToResults} />}
      {view === 'results' && <ResultsPage answers={answers} onRestart={goToLanding} />}
    </div>
  );
};

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