function MainComponent() { const [step, setStep] = React.useState(1); const [formData, setFormData] = React.useState({ name: '', email: '', age: '', gender: '', fitnessGoals: [], workoutPreferences: [], workoutFrequency: '' }); const handleInputChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleMultiSelect = (field, option)=>{ setFormData((prev)=>({ ...prev, [field]: prev[field].includes(option) ? prev[field].filter((i)=>i !== option) : [ ...prev[field], option ] })); }; const nextStep = ()=>setStep((prev)=>Math.min(prev + 1, 4)); const prevStep = ()=>setStep((prev)=>Math.max(prev - 1, 1)); const genderOptions = [ 'Select Gender', 'Male', 'Female', 'Non-binary', 'Prefer not to say' ]; const fitnessGoals = [ 'Weight loss', 'Muscle gain', 'Endurance improvement', 'Flexibility', 'General health & wellness' ]; const workoutPreferences = [ 'Yoga', 'Weightlifting', 'Running', 'HIIT', 'Cycling', 'Swimming' ]; const frequencyOptions = [ '1-2 times/week', '3-4 times/week', '5+ times/week' ]; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#1a1a1a] text-gray-100", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex flex-col p-8 overflow-y-auto", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/b4613f81-7e28-4e34-bf9c-9c1a846394b0/-/format/auto/", alt: "Strider Logo", className: "w-8 mb-8", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-400 mb-2", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Step ", step, " of 4"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, [ 1, 2, 3, 4 ].map((s)=>/*#__PURE__*/ React.createElement("div", { key: s, className: `w-1/4 h-1 rounded ${s <= step ? 'bg-gray-300' : 'bg-[#2a2a2a]'}`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Join Strider"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("form", { className: "space-y-4 p-1", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", value: formData.name, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", id: "email", name: "email", value: formData.email, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "age", className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "age", name: "age", value: formData.age, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 79, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "gender", className: "block text-sm font-medium mb-1", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("select", { id: "gender", name: "gender", value: formData.gender, onChange: handleInputChange, className: "w-full bg-[#2a2a2a] rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, genderOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option, value: option === 'Select Gender' ? '' : option, __source: { fileName: "", lineNumber: 98, columnNumber: 21 }, __self: this }, option))))), step === 2 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 15 }, __self: this }, "Select your fitness goals"), /*#__PURE__*/ React.createElement("div", { className: "space-y-3", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, fitnessGoals.map((goal)=>/*#__PURE__*/ React.createElement("button", { key: goal, onClick: ()=>handleMultiSelect('fitnessGoals', goal), className: `w-full py-2 px-3 rounded text-left ${formData.fitnessGoals.includes(goal) ? 'bg-[#4a4a4a] border border-gray-300' : 'bg-[#2a2a2a] hover:bg-[#333333]'}`, __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, goal)))), step === 3 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "Workout Preferences"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-3 mb-6", __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, workoutPreferences.map((preference)=>/*#__PURE__*/ React.createElement("button", { key: preference, onClick: ()=>handleMultiSelect('workoutPreferences', preference), className: `py-2 px-3 rounded ${formData.workoutPreferences.includes(preference) ? 'bg-[#4a4a4a] border border-gray-300' : 'bg-[#2a2a2a] hover:bg-[#333333]'}`, __source: { fileName: "", lineNumber: 131, columnNumber: 19 }, __self: this }, preference))), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-3", __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }, "Workout Frequency"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, frequencyOptions.map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>setFormData({ ...formData, workoutFrequency: option }), className: `w-full py-2 px-3 rounded text-left ${formData.workoutFrequency === option ? 'bg-[#4a4a4a] border border-gray-300' : 'bg-[#2a2a2a] hover:bg-[#333333]'}`, __source: { fileName: "", lineNumber: 145, columnNumber: 19 }, __self: this }, option)))), step === 4 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Key Features"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3 list-disc list-inside", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 163, columnNumber: 17 }, __self: this }, "Workout Tracking: Log and monitor your exercises"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "Progress Reports: Visual representation of your fitness journey"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 165, columnNumber: 17 }, __self: this }, "Meal Plans: Customized nutrition guidance"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, "Community: Connect with like-minded fitness enthusiasts")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-between", __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, step > 1 && /*#__PURE__*/ React.createElement("button", { onClick: prevStep, className: "px-5 py-2 bg-[#2a2a2a] rounded hover:bg-[#333333]", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { onClick: nextStep, className: "px-5 py-2 bg-gray-300 text-gray-900 rounded hover:bg-gray-200 ml-auto", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, step === 4 ? 'Get Started' : 'Next'))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 h-screen overflow-hidden", __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://images.pexels.com/photos/4839736/pexels-photo-4839736.jpeg", alt: "Woman in workout clothes using a fitness tracking app on her smartphone", className: "w-full h-full object-cover object-center", __source: { fileName: "", lineNumber: 185, columnNumber: 9 }, __self: this }))); }