function MainComponent() { const [suggestion, setSuggestion] = React.useState(""); const calculateSuggestion = (height, weight, bodyType, difficulty, goal)=>{ // Simple mock calculation for demonstration const baseSuggestion = `For a ${height}cm tall, ${weight}kg ${bodyType}, `; const difficultyImpact = difficulty === "Beginner" ? "start slow with light exercises" : difficulty === "Intermediate" ? "mix cardio with strength training" : "focus on high-intensity interval training"; const goalImpact = goal === "Toned" ? " with more focus on toning your body." : goal === "Muscle Gain" ? " with a focus on muscle gaining workouts." : " focusing on weight loss activities."; return baseSuggestion + difficultyImpact + goalImpact; }; const handleSubmit = (e)=>{ e.preventDefault(); const formData = new FormData(e.target); const height = formData.get("height"); const weight = formData.get("weight"); const bodyType = formData.get("body-type"); const difficulty = formData.get("preferred-difficulty"); const goal = formData.get("desired-body"); const workoutSuggestion = calculateSuggestion(height, weight, bodyType, difficulty, goal); setSuggestion(workoutSuggestion); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F4F7F6]", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#34495E] mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Workout Suggestion App"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "height", className: "block text-md font-semibold text-[#34495E]", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Height (cm)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "height", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", placeholder: "Enter your height", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "weight", className: "block text-md font-semibold text-[#34495E]", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, "Weight (kg)"), /*#__PURE__*/ React.createElement("input", { type: "number", name: "weight", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", placeholder: "Enter your weight", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "body-type", className: "block text-md font-semibold text-[#34495E]", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Body Type"), /*#__PURE__*/ React.createElement("select", { name: "body-type", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, "Ectomorph"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Mesomorph"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Endomorph"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "preferred-difficulty", className: "block text-md font-semibold text-[#34495E]", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Preferred Difficulty"), /*#__PURE__*/ React.createElement("select", { name: "preferred-difficulty", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Beginner"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Intermediate"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Expert"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "desired-body", className: "block text-md font-semibold text-[#34495E]", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Desired Body Goal"), /*#__PURE__*/ React.createElement("select", { name: "desired-body", className: "mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Toned"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, "Muscle Gain"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "Weight Loss"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#2ECC71] text-white font-bold rounded hover:bg-[#27AE60] focus:outline-none focus:ring-2 focus:ring-[#27AE60] focus:ring-opacity-50", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Get Suggestion"))), suggestion && /*#__PURE__*/ React.createElement("p", { className: "mt-8 text-xl text-[#27AE60]", __source: { fileName: "", lineNumber: 94, columnNumber: 22 }, __self: this }, suggestion)); }