function MainComponent() { const [page, setPage] = useState(0); const [email, setEmail] = useState(''); const handleNextClick = ()=>{ setPage((currentPage)=>currentPage + 1); }; const handleEmailChange = (e)=>{ setEmail(e.target.value); localStorage.setItem('userEmail', e.target.value); }; if (page === 0) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto my-8 p-4 bg-white shadow-md rounded-md text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, "Welcome to the Basketball Off-Season Training App"), /*#__PURE__*/ React.createElement("button", { onClick: handleNextClick, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Next"))); } else if (page === 1) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto my-8 p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Setup Your Profile"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: handleEmailChange, name: "email", id: "email", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "your-email@example.com", required: true, __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Your Name", required: true, __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "age", id: "age", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "8-14", required: true, min: "8", max: "14", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleNextClick, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Next"))); } else if (page === 2) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto my-8 p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, "Skills Survey"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Level of Basketball"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "basketball_level", min: "1", max: "10", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", required: true, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "How well can you dribble?"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "dribbling", min: "1", max: "10", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", required: true, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Can you shoot better closer or farther from the basket?"), /*#__PURE__*/ React.createElement("select", { name: "shooting_range", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "closer", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this }, "Closer"), /*#__PURE__*/ React.createElement("option", { value: "farther", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Farther"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "How fast are you with a ball?"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "speed_with_ball", min: "1", max: "10", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", required: true, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, "How well can you pass the ball to your teammates?"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "passing", min: "1", max: "10", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "How many free throws can you shoot out of 10?"), /*#__PURE__*/ React.createElement("select", { name: "free_throw_performance", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "1-6", __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, "1-6"), /*#__PURE__*/ React.createElement("option", { value: "7-10", __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }, "7-10"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Are you a post or guard?"), /*#__PURE__*/ React.createElement("select", { name: "position", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "post", __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, "Post"), /*#__PURE__*/ React.createElement("option", { value: "guard", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "Guard"))), /*#__PURE__*/ React.createElement("button", { onClick: handleNextClick, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, "Done")))); } else if (page === 3) { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto my-8 p-4 bg-white shadow-md rounded-md text-center", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Congratulations, you have finished the survey. Now generating a personalized practice."), /*#__PURE__*/ React.createElement("button", { onClick: handleNextClick, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline mt-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Next"))); } else { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg mx-auto my-8 p-4 bg-white shadow-md rounded-md", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center text-[#121212]", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, "Your Personalized Training Program"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 mb-8", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Based on your survey, here are some drills and shooting techniques to help improve your skills:"))); } }