function MainComponent() { const [step, setStep] = useState(1); const [formData, setFormData] = useState({ firstName: "", lastName: "", email: "", subjects: [], school: "", hourlyRate: 15, availability: {}, agreed: false, transcript: null }); const [transcript, setTranscript] = useState(null); const [upload, { loading }] = useUpload(); const days = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday" ]; const timeSlots = [ "9:00 AM", "10:00 AM", "11:00 AM", "12:00 PM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM", "5:00 PM" ]; const subjects = [ "Mathematics", "Physics", "Chemistry", "Biology", "Computer Science" ]; const platformFee = 0.15; const calculateEarnings = (rate)=>{ const hourlyAfterFee = rate * (1 - platformFee); return { hourly: hourlyAfterFee, weekly: hourlyAfterFee * 20, monthly: hourlyAfterFee * 80 }; }; const updateFormData = (key, value)=>{ setFormData((prev)=>({ ...prev, [key]: value })); }; const handleFileUpload = async (file)=>{ const { url, error } = await upload({ file }); if (!error) { setTranscript(url); updateFormData("transcript", url); } }; const toggleTimeSlot = (day, time)=>{ const newAvailability = { ...formData.availability }; if (!newAvailability[day]) { newAvailability[day] = []; } const timeIndex = newAvailability[day].indexOf(time); if (timeIndex === -1) { newAvailability[day].push(time); } else { newAvailability[day].splice(timeIndex, 1); } updateFormData("availability", newAvailability); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg p-4 mb-6 rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#2C3E50] font-roboto", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Become a Tutor")), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-8", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, [ 1, 2, 3, 4 ].map((num)=>/*#__PURE__*/ React.createElement("div", { key: num, className: `w-1/4 text-center ${step >= num ? "text-[#3498DB]" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `h-8 w-8 rounded-full ${step >= num ? "bg-[#3498DB]" : "bg-gray-200"} text-white mx-auto flex items-center justify-center mb-2`, __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, num), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, num === 1 ? "Basic Info" : num === 2 ? "Verification" : num === 3 ? "Subjects" : "Schedule")))), step === 1 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "First Name", className: "p-2 border rounded-lg", value: formData.firstName, onChange: (e)=>updateFormData("firstName", e.target.value), __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Last Name", className: "p-2 border rounded-lg", value: formData.lastName, onChange: (e)=>updateFormData("lastName", e.target.value), __source: { fileName: "", lineNumber: 119, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "email", placeholder: "Email", className: "w-full p-2 border rounded-lg", value: formData.email, onChange: (e)=>updateFormData("email", e.target.value), __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "School", className: "w-full p-2 border rounded-lg", value: formData.school, onChange: (e)=>updateFormData("school", e.target.value), __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this })), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-2 border-dashed rounded-lg p-4 text-center", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: ".pdf,.doc,.docx", onChange: (e)=>handleFileUpload(e.target.files[0]), className: "hidden", id: "transcript", __source: { fileName: "", lineNumber: 147, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "transcript", className: "cursor-pointer", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload text-2xl text-[#3498DB] mb-2", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 156, columnNumber: 17 }, __self: this }, "Upload your transcript (PDF, DOC, DOCX)")), transcript && /*#__PURE__*/ React.createElement("p", { className: "text-green-500 mt-2", __source: { fileName: "", lineNumber: 159, columnNumber: 17 }, __self: this }, "Transcript uploaded!"))), step === 3 && /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 167, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 168, columnNumber: 15 }, __self: this }, "Select subjects you can teach:"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this }, subjects.map((subject)=>/*#__PURE__*/ React.createElement("label", { key: subject, className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 171, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: formData.subjects.includes(subject), onChange: ()=>{ const newSubjects = formData.subjects.includes(subject) ? formData.subjects.filter((s)=>s !== subject) : [ ...formData.subjects, subject ]; updateFormData("subjects", newSubjects); }, __source: { fileName: "", lineNumber: 172, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 182, columnNumber: 21 }, __self: this }, subject))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 187, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, "Set your hourly rate:"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "15", max: "30", value: formData.hourlyRate, onChange: (e)=>updateFormData("hourlyRate", Number(e.target.value)), className: "w-full", __source: { fileName: "", lineNumber: 189, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center text-xl font-semibold", __source: { fileName: "", lineNumber: 199, columnNumber: 15 }, __self: this }, "$", formData.hourlyRate, "/hour"), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-gray-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 203, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, "Earnings Calculator"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mb-3", __source: { fileName: "", lineNumber: 205, columnNumber: 17 }, __self: this }, "Platform fee: ", platformFee * 100, "%"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 text-center", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, "Per Hour"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 211, columnNumber: 21 }, __self: this }, "$", calculateEarnings(formData.hourlyRate).hourly.toFixed(2))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 216, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 217, columnNumber: 21 }, __self: this }, "Weekly (20hrs)"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 218, columnNumber: 21 }, __self: this }, "$", calculateEarnings(formData.hourlyRate).weekly.toFixed(2))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 223, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 224, columnNumber: 21 }, __self: this }, "Monthly (80hrs)"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 225, columnNumber: 21 }, __self: this }, "$", calculateEarnings(formData.hourlyRate).monthly.toFixed(2)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-lg", __source: { fileName: "", lineNumber: 236, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-2", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, "Commission Structure"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-2 text-sm", __source: { fileName: "", lineNumber: 238, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }), "15% platform fee on all earnings"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 244, columnNumber: 19 }, __self: this }), "Weekly payments via direct deposit"), /*#__PURE__*/ React.createElement("li", { className: "flex items-center", __source: { fileName: "", lineNumber: 247, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 mr-2", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }), "Bonus opportunities for high-rated tutors")))), step === 4 && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, "Set your availability:"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 259, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 261, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 262, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { __source: { fileName: "", lineNumber: 263, columnNumber: 21 }, __self: this }), timeSlots.map((time)=>/*#__PURE__*/ React.createElement("th", { key: time, className: "p-2 text-sm", __source: { fileName: "", lineNumber: 265, columnNumber: 23 }, __self: this }, time)))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 271, columnNumber: 17 }, __self: this }, days.map((day)=>/*#__PURE__*/ React.createElement("tr", { key: day, __source: { fileName: "", lineNumber: 273, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2", __source: { fileName: "", lineNumber: 274, columnNumber: 23 }, __self: this }, day), timeSlots.map((time)=>/*#__PURE__*/ React.createElement("td", { key: `${day}-${time}`, className: "text-center", __source: { fileName: "", lineNumber: 276, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: formData.availability[day]?.includes(time), onChange: ()=>toggleTimeSlot(day, time), __source: { fileName: "", lineNumber: 277, columnNumber: 27 }, __self: this })))))))), /*#__PURE__*/ React.createElement("label", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 289, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: formData.agreed, onChange: (e)=>updateFormData("agreed", e.target.checked), __source: { fileName: "", lineNumber: 290, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 295, columnNumber: 15 }, __self: this }, "I agree to the Terms of Service"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 flex justify-between", __source: { fileName: "", lineNumber: 300, columnNumber: 9 }, __self: this }, step > 1 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(step - 1), className: "bg-gray-200 text-gray-700 px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 302, columnNumber: 13 }, __self: this }, "Back"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>step < 4 ? setStep(step + 1) : null, className: "bg-[#3498DB] text-white px-4 py-2 rounded-lg ml-auto", __source: { fileName: "", lineNumber: 309, columnNumber: 11 }, __self: this }, step === 4 ? "Submit" : "Next")))); }