function MainComponent() { const [currentCity, setCurrentCity] = useState(""); const [propertyLocation, setPropertyLocation] = useState(""); const [profession, setProfession] = useState(""); const [isLoading, setIsLoading] = useState(false); const [results, setResults] = useState(null); const [error, setError] = useState(""); const [email, setEmail] = useState(""); const [isAuthorized, setIsAuthorized] = useState(false); const [recipientEmail, setRecipientEmail] = useState(""); const [isSending, setIsSending] = useState(false); const [sendSuccess, setSendSuccess] = useState(false); useEffect(()=>{ if (email) { setIsAuthorized(true); } }, [ email ]); const handleCompare = async ()=>{ if (!currentCity || !propertyLocation) { setError("Please enter both city locations"); return; } if (!email) { setError("Please enter your email"); return; } setIsLoading(true); setError(""); setResults(null); const prompt = `Compare ${currentCity} and ${propertyLocation} with detailed analysis of: 1. Cost of Living: - Housing costs (rent and purchase) - Utilities - Transportation - Food and groceries - Healthcare 2. Demographics: - Population size - Age distribution - Income levels - Education levels 3. Climate: - Average temperatures - Precipitation - Seasonal changes - Natural disaster risks 4. Economy: - Major industries - Employment rate - Average salaries - Job market trends 5. Quality of Life: - Crime rates - Healthcare access - Education quality - Cultural amenities - Recreation options Format the response with clear headings and bullet points for easy reading. Include percentage comparisons where relevant.`; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: prompt } ] }) }); if (!response.ok) { throw new Error(`Failed to generate comparison: ${response.status} ${response.statusText}`); } const data = await response.json(); setResults(data.choices[0].message.content); } catch (error) { console.error("Error:", error); setError("Failed to generate comparison. Please try again."); } finally{ setIsLoading(false); } }; const handleSendEmail = async ()=>{ if (!recipientEmail) { setError("Please enter recipient email"); return; } setIsSending(true); try { const response = await fetch("/api/send-comparison", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ to: recipientEmail, comparison: results, cities: { city1: currentCity, city2: propertyLocation } }) }); if (!response.ok) { throw new Error("Failed to send email"); } setSendSuccess(true); setRecipientEmail(""); } catch (error) { setError("Failed to send email. Please try again."); } finally{ setIsSending(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F2F2F2]", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative z-10 w-full max-w-7xl mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between gap-2 mb-4 w-full", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-3 py-1 rounded-lg transition-colors flex items-center gap-1 text-[10px] flex-1 justify-center", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-home text-[8px]", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }), "HOME"), /*#__PURE__*/ React.createElement("a", { href: "/career-questions", className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-3 py-1 rounded-lg transition-colors flex items-center gap-1 text-[10px] flex-1 justify-center", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase text-[8px]", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }), "CAREER"), /*#__PURE__*/ React.createElement("a", { href: "/city-comparison", className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-3 py-1 rounded-lg transition-colors flex items-center gap-1 text-[10px] flex-1 justify-center", __source: { fileName: "", lineNumber: 143, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-city text-[8px]", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }), "CITY COMPS"), /*#__PURE__*/ React.createElement("a", { href: "/loan-options-comparison", className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-3 py-1 rounded-lg transition-colors flex items-center gap-1 text-[10px] flex-1 justify-center", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-percentage text-[8px]", __source: { fileName: "", lineNumber: 153, columnNumber: 13 }, __self: this }), "RATE COMPS"), /*#__PURE__*/ React.createElement("a", { href: "/new-lead", className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-3 py-1 rounded-lg transition-colors flex items-center gap-1 text-[10px] flex-1 justify-center", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-plus text-[8px]", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }), "NEW CONTACT")), /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/570f443a-7761-4500-87eb-5ae3f1aa5f80/-/format/auto/", alt: "Small Talk for Sales - City Comparison", className: "w-full max-w-5xl mx-auto h-auto mb-8 rounded-xl", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, !isAuthorized ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 173, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 174, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#0743df] flex items-center gap-2", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this }, "ENTER YOUR EMAIL TO ACCESS:"), /*#__PURE__*/ React.createElement("input", { type: "email", value: email, onChange: (e)=>setEmail(e.target.value), placeholder: "your@email.com", className: "p-3 border-2 border-[#0743df] rounded-lg bg-white text-gray-800 w-96", name: "email", __source: { fileName: "", lineNumber: 178, columnNumber: 17 }, __self: this }))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-6 max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 191, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#0743df] flex items-center gap-2", __source: { fileName: "", lineNumber: 192, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#0743df] text-white rounded-full w-8 h-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 193, columnNumber: 21 }, __self: this }, "1"), "ENTER THEIR CITY:"), /*#__PURE__*/ React.createElement("input", { type: "text", value: currentCity, onChange: (e)=>setCurrentCity(e.target.value), placeholder: "Current City", className: "p-3 border-2 border-[#0743df] rounded-lg bg-white text-gray-800 w-96", name: "current-city", __source: { fileName: "", lineNumber: 198, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 208, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#0743df] flex items-center gap-2", __source: { fileName: "", lineNumber: 209, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#0743df] text-white rounded-full w-8 h-8 flex items-center justify-center", __source: { fileName: "", lineNumber: 210, columnNumber: 21 }, __self: this }, "2"), "ENTER NEW CITY:"), /*#__PURE__*/ React.createElement("input", { type: "text", value: propertyLocation, onChange: (e)=>setPropertyLocation(e.target.value), placeholder: "New City", className: "p-3 border-2 border-[#0743df] rounded-lg bg-white text-gray-800 w-96", name: "property-location", __source: { fileName: "", lineNumber: 215, columnNumber: 19 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-400 text-center mb-6", __source: { fileName: "", lineNumber: 227, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 228, columnNumber: 19 }, __self: this }), error), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-8", __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCompare, disabled: isLoading, className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-8 py-3 rounded-lg transition-colors font-semibold disabled:opacity-50 flex items-center gap-2", __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 241, columnNumber: 23 }, __self: this }), "Comparing Cities...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-bar", __source: { fileName: "", lineNumber: 246, columnNumber: 23 }, __self: this }), "Compare Cities"))))), results && /*#__PURE__*/ React.createElement("div", { className: "mt-8 space-y-6", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#00205B] mb-6", __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, "City Comparison Results"), /*#__PURE__*/ React.createElement("div", { className: "prose max-w-none", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-line text-gray-800", __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, results))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-8", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-[#00205B] mb-6", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, "Share Comparison"), /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 273, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 274, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", value: recipientEmail, onChange: (e)=>setRecipientEmail(e.target.value), placeholder: "Enter recipient's email", className: "flex-1 p-3 border-2 border-[#0743df] rounded-lg", name: "recipient-email", __source: { fileName: "", lineNumber: 275, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendEmail, disabled: isSending, className: "bg-[#0743df] hover:bg-[#0538c7] text-white px-6 rounded-lg transition-colors font-semibold disabled:opacity-50 flex items-center gap-2", __source: { fileName: "", lineNumber: 283, columnNumber: 19 }, __self: this }, isSending ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin", __source: { fileName: "", lineNumber: 290, columnNumber: 25 }, __self: this }), "Sending...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 295, columnNumber: 25 }, __self: this }), "Send Comparison"))), sendSuccess && /*#__PURE__*/ React.createElement("div", { className: "text-green-500 text-center mt-4", __source: { fileName: "", lineNumber: 302, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle mr-2", __source: { fileName: "", lineNumber: 303, columnNumber: 21 }, __self: this }), "Comparison sent successfully!")))), /*#__PURE__*/ React.createElement("div", { className: "mt-12 text-center", __source: { fileName: "", lineNumber: 312, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "mailto:info@smalltalkforsales.com", className: "text-[#0743df] text-xl hover:underline inline-block", __source: { fileName: "", lineNumber: 313, columnNumber: 11 }, __self: this }, "info@smalltalkforsales.com")))); }