function MainComponent() { const [visits, setVisits] = React.useState(0); const [contacts, setContacts] = React.useState([]); React.useEffect(()=>{ const updateVisits = ()=>{ const currentVisits = parseInt(localStorage.getItem('profileVisits'), 10) || 0; setVisits(currentVisits); }; window.addEventListener('profileVisited', updateVisits); const storedContacts = JSON.parse(localStorage.getItem('storedContacts')) || []; setContacts(storedContacts); return ()=>{ window.removeEventListener('profileVisited', updateVisits); }; }, []); const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center space-y-4 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-[#121212]", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Profile Creation"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Create your professional or personal profile and share it through a vCard or QR code.")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full max-w-md space-y-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fullName", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Full Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "fullName", id: "fullName", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "position", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Position"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "position", id: "position", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "companyName", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Company Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", id: "companyName", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Email"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", id: "email", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phone", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", id: "phone", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "workAddress", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Work Address"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "workAddress", id: "workAddress", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "socialMedia", className: "block text-sm font-medium text-[#121212]", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Social Media"), /*#__PURE__*/ React.createElement("input", { type: "url", name: "socialMedia", id: "socialMedia", className: "mt-1 block w-full border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between space-x-4", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex items-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Create Profile"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "inline-flex items-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-green-500 hover:bg-green-600", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Generate QR Code"))), /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-md font-bold text-[#121212]", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Scan & Store Business Cards"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "mt-2 inline-flex items-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-blue-500 hover:bg-blue-600", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Scan Now")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-4 mt-4 w-full max-w-md", __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-orange-500 hover:bg-orange-600", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, "Book an Appointment"), /*#__PURE__*/ React.createElement("button", { className: "inline-flex items-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-purple-500 hover:bg-purple-600", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "Visit My Business Page")), /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-200 rounded-lg shadow-md w-full max-w-md", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-bold text-[#121212]", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, "Profile Visits"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, `Total Visits: ${visits}`)), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-bold text-[#121212] mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, "Stored Contacts"), /*#__PURE__*/ React.createElement("ul", { className: "bg-gray-200 rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, contacts.length > 0 ? contacts.map((contact, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-md text-[#121212] border-b last:border-b-0 py-2", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }, `${contact.fullName} - ${contact.position} - ${contact.companyName} - ${contact.email} - ${contact.phone} - ${contact.workAddress} - ${contact.socialMedia}`)) : /*#__PURE__*/ React.createElement("li", { className: "font-roboto text-md text-[#121212]", __source: { fileName: "", lineNumber: 97, columnNumber: 16 }, __self: this }, "No contacts stored.")))); }