function MainComponent() { const [currentQuestion, setCurrentQuestion] = React.useState(0); const [outcomes, setOutcomes] = React.useState(Array.from({ length: 12 }).fill(0)); const handleAnswer = (index)=>{ const updatedOutcomes = [ ...outcomes ]; updatedOutcomes[index]++; setOutcomes(updatedOutcomes); if (currentQuestion < 35) { setCurrentQuestion(currentQuestion + 1); } }; const personalities = [ "The Explorer", "The Innovator", "The Nurturer", "The Maverick", "The Connector", "The Analyst", "The Dreamer", "The Trailblazer", "The Peacemaker", "The Protector", "The Sage", "The Entertainer" ]; const question = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4 mt-8", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Question ", currentQuestion + 1, " of 36"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, personalities.map((personality, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "py-2 px-4 bg-[#F0F0F0] rounded shadow", onClick: ()=>handleAnswer(index % 12), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, personality)))); const result = Math.max(...outcomes); const resultIndex = outcomes.findIndex((o)=>o === result); const personalityResult = personalities[resultIndex % 12]; const showResults = currentQuestion === 35; const resultSection = /*#__PURE__*/ React.createElement("div", { className: "text-center my-8", __source: { fileName: "", lineNumber: 44, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Your personality is:"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-2xl font-bold font-roboto text-[#333]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, personalityResult)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center py-10 px-5 bg-[#FAFAFA] min-h-screen", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-[#333] mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "The Recipe of You"), !showResults ? question : resultSection); }