function MainComponent() { const [step, setStep] = React.useState(1); const [formData, setFormData] = React.useState({ name: "", email: "", work: "", interests: [] }); const handleInputChange = (e)=>{ setFormData({ ...formData, [e.target.name]: e.target.value }); }; const handleInterestToggle = (interest)=>{ setFormData((prev)=>({ ...prev, interests: prev.interests.includes(interest) ? prev.interests.filter((i)=>i !== interest) : [ ...prev.interests, interest ] })); }; const nextStep = ()=>setStep((prev)=>Math.min(prev + 1, 3)); const prevStep = ()=>setStep((prev)=>Math.max(prev - 1, 1)); return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-gray-900 text-white", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 flex flex-col p-12", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium text-gray-400", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "Step ", step, " of 3")), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold mb-12", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, step === 1 ? "Let's get started" : step === 2 ? "What do you do?" : "What interests you?"), step === 1 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Your name", value: formData.name, onChange: handleInputChange, className: "w-full p-3 bg-gray-800 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Your email", value: formData.email, onChange: handleInputChange, className: "w-full p-3 bg-gray-800 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, [ "Designer", "Developer", "Product Manager", "Other" ].map((option)=>/*#__PURE__*/ React.createElement("button", { key: option, onClick: ()=>setFormData({ ...formData, work: option }), className: `w-full p-3 rounded ${formData.work === option ? "bg-blue-600" : "bg-gray-800"}`, __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, option))), step === 3 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, [ "Technology", "Design", "Business", "Arts", "Science" ].map((interest)=>/*#__PURE__*/ React.createElement("button", { key: interest, onClick: ()=>handleInterestToggle(interest), className: `w-full p-3 rounded ${formData.interests.includes(interest) ? "bg-blue-600" : "bg-gray-800"}`, __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, interest))), /*#__PURE__*/ React.createElement("div", { className: "mt-auto flex justify-between", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, step > 1 && /*#__PURE__*/ React.createElement("button", { onClick: prevStep, className: "px-6 py-2 bg-gray-800 rounded", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { onClick: nextStep, className: "px-6 py-2 bg-gray-800 rounded ml-auto", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, step === 3 ? "Finish" : "Next"))), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 bg-gray-800", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/placeholder-image.jpg", alt: "Onboarding visual", className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }))); }