function MainComponent() { const [step, setStep] = React.useState(1); const [formValues, setFormValues] = React.useState({ firstName: '', lastName: '', email: '', schedule: '' }); const handleSubmit = ()=>{ setStep(2); }; const handleConfirmation = ()=>{ // send email and create Teams meeting setStep(3); }; const handleBack = ()=>{ setStep(1); }; const handleChange = (e)=>{ const { name, value } = e.target; setFormValues({ ...formValues, [name]: value }); }; const ScheduleSelection = ()=>{ // This component would require actual integration to fetch Outlook scheduler data const timeSlots = [ "10:00 AM - 10:30 AM", "11:00 AM - 11:30 AM", "2:00 PM - 2:30 PM" ]; return /*#__PURE__*/ React.createElement("select", { name: "schedule", value: formValues.schedule, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Select a time slot"), timeSlots.map((slot)=>/*#__PURE__*/ React.createElement("option", { key: slot, value: slot, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, slot))); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, step === 1 && /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded shadow-md w-full max-w-md", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "コーチングサービス申し込み"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "氏"), /*#__PURE__*/ React.createElement("input", { name: "lastName", type: "text", value: formValues.lastName, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", required: true, __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "名"), /*#__PURE__*/ React.createElement("input", { name: "firstName", type: "text", value: formValues.firstName, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", required: true, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "メールアドレス"), /*#__PURE__*/ React.createElement("input", { name: "email", type: "email", value: formValues.email, onChange: handleChange, className: "w-full p-2 border border-gray-300 rounded", required: true, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "カレンダーから予約枠選択"), /*#__PURE__*/ React.createElement(ScheduleSelection, { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "申し込む")), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "入力内容確認"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "氏: ", formValues.lastName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "名: ", formValues.firstName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "メールアドレス: ", formValues.email), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "予約枠: ", formValues.schedule), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleBack, className: "bg-gray-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "戻る"), /*#__PURE__*/ React.createElement("button", { onClick: handleConfirmation, className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "OK"))), step === 3 && /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "申し込み完了"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "コーチングサービスの申し込みが完了しました。"))); }