function MainComponent() { const [phoneNumber, setPhoneNumber] = React.useState(''); const [message, setMessage] = React.useState(''); const [output, setOutput] = React.useState(''); const [savedNumbers, setSavedNumbers] = React.useState([ '+1234567890', '+9876543210', '+1122334455' ]); const [newNumber, setNewNumber] = React.useState(''); const [legalNumbers, setLegalNumbers] = React.useState([ '+1111111111', '+2222222222', '+3333333333' ]); const handlePhoneNumberChange = (e)=>{ setPhoneNumber(e.target.value); }; const handleMessageChange = (e)=>{ setMessage(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); const aiResponse = `AI SMS transfer initiated from ${phoneNumber}: "${message}"`; setOutput(aiResponse); }; const handleSavedNumberClick = (number)=>{ setPhoneNumber(number); }; const handleNewNumberChange = (e)=>{ setNewNumber(e.target.value); }; const addNewNumber = ()=>{ if (newNumber && !savedNumbers.includes(newNumber)) { setSavedNumbers([ ...savedNumbers, newNumber ]); setNewNumber(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "AI SMS Transfer App"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phoneNumber", value: phoneNumber, onChange: handlePhoneNumberChange, placeholder: "Enter worldwide phone number...", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Saved Numbers:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, savedNumbers.map((number, index)=>/*#__PURE__*/ React.createElement("button", { key: index, type: "button", onClick: ()=>handleSavedNumberClick(number), className: "bg-gray-200 text-gray-700 px-2 py-1 rounded-md text-sm hover:bg-gray-300 transition duration-300", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, number)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-semibold mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Legal Numbers:"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, legalNumbers.map((number, index)=>/*#__PURE__*/ React.createElement("button", { key: index, type: "button", onClick: ()=>handleSavedNumberClick(number), className: "bg-green-200 text-green-700 px-2 py-1 rounded-md text-sm hover:bg-green-300 transition duration-300", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, number)))), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", value: newNumber, onChange: handleNewNumberChange, placeholder: "Add new number...", className: "flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: addNewNumber, className: "bg-green-500 text-white font-semibold py-2 px-4 rounded-r-md hover:bg-green-600 transition duration-300", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("textarea", { name: "message", value: message, onChange: handleMessageChange, placeholder: "Enter SMS message...", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mb-4 h-24 resize-none", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full mt-4 bg-blue-500 text-white font-semibold py-2 px-4 rounded-md hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Transfer SMS via AI")), output && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4 rounded-md", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "Transfer Status:"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, output)))); }