function MainComponent() { const handleSubmit = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const data = Object.fromEntries(formData.entries()); await fetch('mailto:inf@younglewin.com', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }); }; const handleLocationClick = async ()=>{ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position)=>{ const { latitude, longitude } = position.coords; // Ideally, here we would use a reverse geocoding service to convert coordinates into a human-readable address. // However, for the purpose of this example, we'll simulate an address suggestion. const suggestedAddress = "1 Infinite Loop, Cupertino, CA 95014"; document.getElementsByName('propertyAddress')[0].value = suggestedAddress; }, ()=>{ alert('Unable to retrieve your location.'); }); } else { alert('Geolocation is not supported by this browser.'); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F7FAFC] p-4 font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full mx-auto bg-white rounded-md shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-[#2D3748]", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Maintenance Request"), /*#__PURE__*/ React.createElement("form", { className: "mt-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#4A5568]", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Property Address"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "propertyAddress", className: "mt-1 block w-full rounded-md border-[#CBD5E0] shadow-sm focus:border-[#63B3ED] focus:ring focus:ring-[#90CDF4] focus:ring-opacity-50", placeholder: "123 Main St", __source: { fileName: "", lineNumber: 41, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleLocationClick, className: "ml-2 mt-1 px-4 py-2 bg-[#E2E8F0] text-[#4A5568] rounded-md hover:bg-[#CBD5E0]", __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-location-arrow", __source: { fileName: "", lineNumber: 43, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#4A5568]", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Tenant's Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "tenantName", className: "mt-1 block w-full rounded-md border-[#CBD5E0] shadow-sm focus:border-[#63B3ED] focus:ring focus:ring-[#90CDF4] focus:ring-opacity-50", placeholder: "Jane Doe", __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#4A5568]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Tenant's Cell Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "tenantPhoneNumber", className: "mt-1 block w-full rounded-md border-[#CBD5E0] shadow-sm focus:border-[#63B3ED] focus:ring focus:ring-[#90CDF4] focus:ring-opacity-50", placeholder: "+1 (555) 123-4567", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#4A5568]", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Tenant's Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "tenantEmail", className: "mt-1 block w-full rounded-md border-[#CBD5E0] shadow-sm focus:border-[#63B3ED] focus:ring focus:ring-[#90CDF4] focus:ring-opacity-50", placeholder: "jane.doe@example.com", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#4A5568]", __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, "Maintenance Issue"), /*#__PURE__*/ React.createElement("textarea", { name: "maintenanceIssue", className: "mt-1 block w-full rounded-md border-[#CBD5E0] shadow-sm focus:border-[#63B3ED] focus:ring focus:ring-[#90CDF4] focus:ring-opacity-50", rows: "3", placeholder: "Describe the issue", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#4A5568]", __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this }, "Additional Information"), /*#__PURE__*/ React.createElement("textarea", { name: "additionalInfo", className: "mt-1 block w-full rounded-md border-[#CBD5E0] shadow-sm focus:border-[#63B3ED] focus:ring focus:ring-[#90CDF4] focus:ring-opacity-50", rows: "3", placeholder: "Any additional information", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-[#4299E1] text-white rounded-md hover:bg-[#3182CE] focus:outline-none focus:bg-[#3182CE]", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "Submit Request")))))); }