function Quiz({ onComplete, onExit }) {
  const questions = window.APP_DATA.questions;
  const [step, setStep] = React.useState(0);
  const [answers, setAnswers] = React.useState([]);

  const question = questions[step];

  function selectOption(archetype) {
    const nextAnswers = answers.slice(0, step);
    nextAnswers.push(archetype);
    setAnswers(nextAnswers);

    if (step + 1 < questions.length) {
      setStep(step + 1);
    } else {
      onComplete(nextAnswers);
    }
  }

  function goBack() {
    if (step > 0) setStep(step - 1);
  }

  return (
    <div className="quiz">
      <ProgressBar current={step + 1} total={questions.length} />

      <div className="quiz-card" key={question.id}>
        <h2 className="quiz-question">{question.prompt}</h2>
        <div className="quiz-options">
          {question.options.map((opt, i) => (
            <button
              key={i}
              className="quiz-option"
              onClick={() => selectOption(opt.archetype)}
            >
              <span className="quiz-option-dot" />
              <span>{opt.text}</span>
            </button>
          ))}
        </div>
      </div>

      <div className="quiz-footer-row">
        <button className="quiz-back" onClick={goBack} disabled={step === 0}>
          ← Back
        </button>
        <button className="quiz-back" onClick={onExit}>
          Exit quiz
        </button>
      </div>
    </div>
  );
}