function MainComponent() { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [course, setCourse] = React.useState(''); const [cardNumber, setCardNumber] = React.useState(''); const [expiryDate, setExpiryDate] = React.useState(''); const [cvc, setCvc] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); const handleNameChange = (event)=>{ setName(event.target.value); }; const handleEmailChange = (event)=>{ setEmail(event.target.value); }; const handleCourseChange = (event)=>{ setCourse(event.target.value); }; const handleCardNumberChange = (event)=>{ setCardNumber(event.target.value); }; const handleExpiryDateChange = (event)=>{ setExpiryDate(event.target.value); }; const handleCvcChange = (event)=>{ setCvc(event.target.value); }; const handleSubmit = (event)=>{ event.preventDefault(); setSubmitted(true); }; const registrationForm = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 space-y-3 rounded-xl bg-white shadow-lg", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Register for a Course"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full p-2 border rounded mt-1 font-roboto", value: name, onChange: handleNameChange, required: true, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full p-2 border rounded mt-1 font-roboto", value: email, onChange: handleEmailChange, required: true, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "course", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Select Course"), /*#__PURE__*/ React.createElement("select", { name: "course", className: "w-full p-2 border rounded mt-1 font-roboto", value: course, onChange: handleCourseChange, required: true, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Please select a course"), /*#__PURE__*/ React.createElement("option", { value: "web-development", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, "Web Development"), /*#__PURE__*/ React.createElement("option", { value: "data-science", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, "Data Science"), /*#__PURE__*/ React.createElement("option", { value: "graphic-design", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "Graphic Design"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 text-sm font-bold text-white bg-blue-500 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Register")))); const paymentForm = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-8 space-y-3 rounded-xl bg-white shadow-lg", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, "Payment Details"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cardNumber", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "Card Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardNumber", inputMode: "numeric", className: "w-full p-2 border rounded mt-1 font-roboto", placeholder: "1234 5678 9012 3456", pattern: "\\d{4} \\d{4} \\d{4} \\d{4}", value: cardNumber, onChange: handleCardNumberChange, required: true, __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "expiryDate", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Expiry Date"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "expiryDate", className: "w-full p-2 border rounded mt-1 font-roboto", placeholder: "MM/YY", pattern: "\\d{2}/\\d{2}", value: expiryDate, onChange: handleExpiryDateChange, required: true, __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-1/2", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "cvc", className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "CVC"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cvc", className: "w-full p-2 border rounded mt-1 font-roboto", placeholder: "CVC", pattern: "\\d{3}", value: cvc, onChange: handleCvcChange, required: true, __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 text-sm font-bold text-white bg-green-500 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, "Pay Now")))); return /*#__PURE__*/ React.createElement(React.Fragment, null, submitted ? paymentForm : registrationForm); }