function App() {
  const [screen, setScreen] = React.useState("landing");
  const [answers, setAnswers] = React.useState([]);

  function startQuiz() {
    setAnswers([]);
    setScreen("quiz");
  }

  function finishQuiz(finalAnswers) {
    setAnswers(finalAnswers);
    setScreen("results");
  }

  function goLanding() {
    setScreen("landing");
  }

  return (
    <div className="app-shell">
      <TopBar
        onLogoClick={goLanding}
        action={screen !== "landing" ? "Start over" : null}
        onAction={goLanding}
      />
      <main>
        {screen === "landing" && <Landing onStart={startQuiz} />}
        {screen === "quiz" && <Quiz onComplete={finishQuiz} onExit={goLanding} />}
        {screen === "results" && <Results answers={answers} onRetake={startQuiz} />}
      </main>
      <footer>Giftly Engine — a gift-preference prototype. Not a real store.</footer>
    </div>
  );
}

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