function MainComponent() { const [step, setStep] = useState(0); const [formData, setFormData] = useState({ credit_score: "", monthly_income: "", monthly_debt_payments: "", down_payment_amount: "", savings_amount: "", desired_home_price: "", desired_purchase_timeline: "", employment_length: "", employment_type: "", preferred_locations: "" }); const [results, setResults] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const [aiRecommendations, setAiRecommendations] = useState(null); const [aiLoading, setAiLoading] = useState(false); const [aiError, setAiError] = useState(null); const [question, setQuestion] = useState(""); const [questionLoading, setQuestionLoading] = useState(false); const [chatHistory, setChatHistory] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: (message)=>{ setAiRecommendations(message); setStreamingMessage(""); } }); const suggestedQuestions = [ "How can I improve my credit score?", "What are the next steps I should take?", "Explain my debt-to-income ratio", "What should I do to save more for a down payment?", "How does my employment affect my application?", "What mortgage options might be available to me?" ]; const getTooltipContent = (fieldName)=>{ switch(fieldName){ case "credit_score": return "Your credit score indicates creditworthiness. Higher scores may qualify you for better rates."; case "monthly_income": return "Your monthly income affects your ability to make monthly mortgage payments."; case "monthly_debt_payments": return "Your total monthly debt payments impact your debt-to-income ratio."; case "down_payment_amount": return "The amount you plan to put down on the home purchase."; case "savings_amount": return "Your total available savings for the home purchase."; case "desired_home_price": return "The target price range you are looking to purchase in."; case "desired_purchase_timeline": return "When you plan to purchase a home."; case "employment_length": return "How long you have been at your current job."; case "employment_type": return "Your employment status (full-time, part-time, etc)."; case "preferred_locations": return "Enter up to 3 areas or cities where you would like to buy a home, separated by commas"; default: return "Additional information about this field."; } }; const formatCurrency = (value)=>{ if (!value) return ""; const number = parseFloat(value.replace(/[^0-9.-]+/g, "")); if (isNaN(number)) return ""; return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(number); }; const validateField = (field, value)=>{ if (field.required && !value) return false; if (field.type === "number") { const num = Number(value); if (field.min !== undefined && num < field.min) return false; if (field.max !== undefined && num > field.max) return false; } if (field.name === "preferred_locations") { const locations = value.split(",").filter((loc)=>loc.trim()); return locations.length > 0 && locations.length <= 3; } return true; }; const canProceedToNextStep = ()=>{ const currentStepFields = steps[step].fields; return currentStepFields.every((field)=>validateField(field, formData[field.name])); }; const handleInputChange = (e)=>{ const { name, value } = e.target; let processedValue = value; if (name === "preferred_locations") { const locations = value.split(",").slice(0, 3); processedValue = locations.join(","); } else if ([ "monthly_income", "monthly_debt_payments", "down_payment_amount", "savings_amount", "desired_home_price" ].includes(name)) { processedValue = value.replace(/[^0-9]/g, ""); } setFormData((prev)=>({ ...prev, [name]: processedValue })); }; const calculateReadinessScore = (data)=>{ let score = 0; if (data.credit_score >= 740) score += 30; else if (data.credit_score >= 680) score += 20; else if (data.credit_score >= 620) score += 10; const dti = data.monthly_debt_payments / data.monthly_income * 100; if (dti <= 36) score += 30; else if (dti <= 43) score += 20; else if (dti <= 50) score += 10; const downPaymentPercent = data.down_payment_amount / data.desired_home_price * 100; if (downPaymentPercent >= 20) score += 25; else if (downPaymentPercent >= 10) score += 15; else if (downPaymentPercent >= 3.5) score += 5; if (data.employment_length >= 24) score += 15; else if (data.employment_length >= 12) score += 10; else score += 5; return score; }; const handleSubmit = async ()=>{ setLoading(true); setError(null); try { const allFields = steps.flatMap((step)=>step.fields); const invalidFields = allFields.filter((field)=>!validateField(field, formData[field.name])); if (invalidFields.length > 0) { throw new Error(`Please fill in all required fields correctly: ${invalidFields.map((f)=>f.label).join(", ")}`); } const profileData = { credit_score: parseInt(formData.credit_score), monthly_income: parseInt(formData.monthly_income), monthly_debt_payments: parseInt(formData.monthly_debt_payments), down_payment_amount: parseInt(formData.down_payment_amount), savings_amount: parseInt(formData.savings_amount), desired_home_price: parseInt(formData.desired_home_price), desired_purchase_timeline: parseInt(formData.desired_purchase_timeline), employment_length: parseInt(formData.employment_length), employment_type: formData.employment_type, preferred_locations: formData.preferred_locations.split(",").map((loc)=>loc.trim()).filter(Boolean) }; const readinessScore = calculateReadinessScore(profileData); const aiResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are a financial advisor specializing in home buying readiness. Analyze the provided financial data and provide specific, actionable recommendations." }, { role: "user", content: `Please analyze this financial profile: Credit Score: ${profileData.credit_score} Monthly Income: ${formatCurrency(profileData.monthly_income.toString())} Monthly Debt: ${formatCurrency(profileData.monthly_debt_payments.toString())} Down Payment: ${formatCurrency(profileData.down_payment_amount.toString())} Savings: ${formatCurrency(profileData.savings_amount.toString())} Desired Home Price: ${formatCurrency(profileData.desired_home_price.toString())} Employment Length: ${profileData.employment_length} months Employment Type: ${profileData.employment_type} Preferred Locations: ${profileData.preferred_locations.join(", ")} Calculate and include: 1. Debt-to-Income Ratio: ${(profileData.monthly_debt_payments / profileData.monthly_income * 100).toFixed(1)}% 2. Down Payment Percentage: ${(profileData.down_payment_amount / profileData.desired_home_price * 100).toFixed(1)}% 3. Overall Readiness Score: ${readinessScore}/100 4. Specific recommendations for improvement` } ], stream: true }) }); if (!aiResponse.ok) { throw new Error("Failed to get AI analysis"); } handleStreamResponse(aiResponse); setResults({ ...profileData, readiness_score: readinessScore, assessment_summary: `Your home buying readiness score is ${readinessScore}/100. ${readinessScore >= 80 ? "You appear to be well-positioned for home buying." : readinessScore >= 60 ? "You're on the right track, but there's room for improvement." : "You may need to improve several areas before being ready to buy."}` }); setStep(5); } catch (err) { setError(err.message); console.error("Assessment submission error:", err); } finally{ setLoading(false); } }; const handleAskQuestion = async (predefinedQuestion)=>{ const questionToAsk = predefinedQuestion || question; if (!questionToAsk) return; setQuestionLoading(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...chatHistory, { role: "user", content: questionToAsk } ], stream: true }) }); if (!response.ok) { throw new Error("Failed to get AI response"); } setChatHistory((prev)=>[ ...prev, { role: "user", content: questionToAsk } ]); setQuestion(""); handleStreamResponse(response); } catch (err) { setAiError(err.message); } finally{ setQuestionLoading(false); } }; const steps = [ { title: "Credit Information", fields: [ { name: "credit_score", label: "Credit Score", type: "number", min: 300, max: 850, required: true, placeholder: "Enter your credit score (300-850)" } ] }, { title: "Income & Debt", fields: [ { name: "monthly_income", label: "Monthly Income", type: "text", required: true, placeholder: "Enter your monthly income" }, { name: "monthly_debt_payments", label: "Monthly Debt Payments", type: "text", required: true, placeholder: "Enter your total monthly debt payments" } ] }, { title: "Assets", fields: [ { name: "down_payment_amount", label: "Down Payment Amount", type: "text", required: true, placeholder: "Enter your available down payment" }, { name: "savings_amount", label: "Total Savings", type: "text", required: true, placeholder: "Enter your total savings" } ] }, { title: "Purchase Goals", fields: [ { name: "desired_home_price", label: "Desired Home Price", type: "text", required: true, placeholder: "Enter your target home price" }, { name: "preferred_locations", label: "Preferred Areas/Cities", type: "text", required: true, placeholder: "Enter up to 3 preferred areas/cities (comma-separated)", description: "Enter up to 3 locations where you'd like to buy, separated by commas" }, { name: "desired_purchase_timeline", label: "Purchase Timeline (months)", type: "number", required: true, min: 1, max: 120, placeholder: "When do you plan to buy?" } ] }, { title: "Employment", fields: [ { name: "employment_length", label: "Years at Current Job", type: "number", required: true, min: 0, max: 50, placeholder: "Enter years of employment" }, { name: "employment_type", label: "Employment Type", type: "select", required: true, options: [ { value: "full-time", label: "Full-Time" }, { value: "part-time", label: "Part-Time" }, { value: "self-employed", label: "Self-Employed" }, { value: "contractor", label: "Contractor" } ] } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 flex flex-col", __source: { fileName: "", lineNumber: 386, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full border-b border-gray-200 bg-white", __source: { fileName: "", lineNumber: 387, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto py-4 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 388, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 389, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-blue-900 tracking-tight", __source: { fileName: "", lineNumber: 390, columnNumber: 13 }, __self: this }, "Loan Pre-Check")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 397, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 398, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 399, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 400, columnNumber: 13 }, __self: this }, "Home Buying Readiness Assessment"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-600", __source: { fileName: "", lineNumber: 403, columnNumber: 13 }, __self: this }, "Evaluate your financial readiness for home ownership with our comprehensive assessment tool")), step < 5 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8", __source: { fileName: "", lineNumber: 410, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 411, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative pt-1", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex mb-2 items-center justify-between", __source: { fileName: "", lineNumber: 413, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 414, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200", __source: { fileName: "", lineNumber: 415, columnNumber: 23 }, __self: this }, "Step ", step + 1, " of ", steps.length)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 419, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs font-semibold inline-block text-blue-600", __source: { fileName: "", lineNumber: 420, columnNumber: 23 }, __self: this }, Math.round(step / steps.length * 100), "%"))), /*#__PURE__*/ React.createElement("div", { className: "overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200", __source: { fileName: "", lineNumber: 425, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600", style: { width: `${step / steps.length * 100}%` }, __source: { fileName: "", lineNumber: 426, columnNumber: 21 }, __self: this })))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6", __source: { fileName: "", lineNumber: 433, columnNumber: 15 }, __self: this }, steps[step].title), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 434, columnNumber: 15 }, __self: this }, steps[step].fields.map((field)=>/*#__PURE__*/ React.createElement("div", { key: field.name, __source: { fileName: "", lineNumber: 436, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 437, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 438, columnNumber: 23 }, __self: this }, field.label, field.required && /*#__PURE__*/ React.createElement("span", { className: "text-red-500 ml-1", __source: { fileName: "", lineNumber: 441, columnNumber: 27 }, __self: this }, "*")), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 444, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "text-gray-400 hover:text-gray-600", __source: { fileName: "", lineNumber: 445, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle", __source: { fileName: "", lineNumber: 449, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 w-64 p-2 mt-2 text-sm text-gray-600 bg-white border rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all", __source: { fileName: "", lineNumber: 451, columnNumber: 25 }, __self: this }, getTooltipContent(field.name)))), field.type === "select" ? /*#__PURE__*/ React.createElement("select", { name: field.name, value: formData[field.name], onChange: handleInputChange, className: `mt-1 block w-full rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 ${!validateField(field, formData[field.name]) ? "border-red-300" : "border-gray-300"}`, __source: { fileName: "", lineNumber: 457, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 467, columnNumber: 25 }, __self: this }, "Select an option"), field.options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 469, columnNumber: 27 }, __self: this }, option.label))) : /*#__PURE__*/ React.createElement("input", { type: field.type, name: field.name, value: formData[field.name], onChange: handleInputChange, placeholder: field.placeholder, className: `mt-1 block w-full rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 ${!validateField(field, formData[field.name]) ? "border-red-300" : "border-gray-300"}`, min: field.min, max: field.max, __source: { fileName: "", lineNumber: 475, columnNumber: 23 }, __self: this }), !validateField(field, formData[field.name]) && /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm text-red-600", __source: { fileName: "", lineNumber: 491, columnNumber: 23 }, __self: this }, field.type === "number" ? `Please enter a value between ${field.min} and ${field.max}` : "This field is required")))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 flex justify-between", __source: { fileName: "", lineNumber: 501, columnNumber: 15 }, __self: this }, step > 0 && /*#__PURE__*/ React.createElement("button", { onClick: ()=>setStep(step - 1), className: "bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300", __source: { fileName: "", lineNumber: 503, columnNumber: 19 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { onClick: step === steps.length - 1 ? handleSubmit : ()=>setStep(step + 1), disabled: loading || !canProceedToNextStep(), className: `px-4 py-2 rounded-md ml-auto ${canProceedToNextStep() ? "bg-blue-600 text-white hover:bg-blue-700" : "bg-gray-300 text-gray-500 cursor-not-allowed"}`, __source: { fileName: "", lineNumber: 510, columnNumber: 17 }, __self: this }, loading ? "Processing..." : step === steps.length - 1 ? "Submit" : "Next"))), results && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-8 mt-8", __source: { fileName: "", lineNumber: 534, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 535, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 536, columnNumber: 17 }, __self: this }, "Your Assessment Results"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStep(0); setFormData({ credit_score: "", monthly_income: "", monthly_debt_payments: "", down_payment_amount: "", savings_amount: "", desired_home_price: "", desired_purchase_timeline: "", employment_length: "", employment_type: "" }); setResults(null); }, className: "bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300", __source: { fileName: "", lineNumber: 537, columnNumber: 17 }, __self: this }, "Start Over")), /*#__PURE__*/ React.createElement("div", { className: "border-b border-gray-200 mb-6", __source: { fileName: "", lineNumber: 558, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "-mb-px flex space-x-8", "aria-label": "Tabs", __source: { fileName: "", lineNumber: 559, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", "aria-current": "page", __source: { fileName: "", lineNumber: 560, columnNumber: 19 }, __self: this }, "Assessment Results"), /*#__PURE__*/ React.createElement("a", { href: "/education", className: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm", __source: { fileName: "", lineNumber: 567, columnNumber: 19 }, __self: this }, "Educational Resources"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 575, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 576, columnNumber: 17 }, __self: this }, "Your Assessment Results"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setStep(0); setFormData({ credit_score: "", monthly_income: "", monthly_debt_payments: "", down_payment_amount: "", savings_amount: "", desired_home_price: "", desired_purchase_timeline: "", employment_length: "", employment_type: "" }); setResults(null); }, className: "bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300", __source: { fileName: "", lineNumber: 577, columnNumber: 17 }, __self: this }, "Start Over")), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 598, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 599, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-5xl font-bold text-blue-600 mb-2", __source: { fileName: "", lineNumber: 600, columnNumber: 19 }, __self: this }, results.readiness_score, "/100"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-600 mb-4", __source: { fileName: "", lineNumber: 603, columnNumber: 19 }, __self: this }, results.assessment_summary), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 606, columnNumber: 19 }, __self: this }, "Assessment Date: ", new Date().toLocaleDateString()))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-8", __source: { fileName: "", lineNumber: 611, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "col-span-2", __source: { fileName: "", lineNumber: 612, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 613, columnNumber: 19 }, __self: this }, "The Four C's Assessment"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 616, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg relative group", __source: { fileName: "", lineNumber: 617, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 618, columnNumber: 23 }, __self: this }, "Credit (Character)"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600 mb-1 flex items-center", __source: { fileName: "", lineNumber: 621, columnNumber: 23 }, __self: this }, formData.credit_score, formData.credit_score >= 740 ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up text-green-500 ml-2", __source: { fileName: "", lineNumber: 624, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down text-red-500 ml-2", __source: { fileName: "", lineNumber: 626, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 629, columnNumber: 23 }, __self: this }, "Target: 740+"), /*#__PURE__*/ React.createElement("div", { className: "absolute invisible group-hover:visible bg-white p-2 rounded shadow-lg z-10 w-64", __source: { fileName: "", lineNumber: 630, columnNumber: 23 }, __self: this }, "Your credit score indicates creditworthiness. Higher scores may qualify you for better rates.")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg relative group", __source: { fileName: "", lineNumber: 636, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 637, columnNumber: 23 }, __self: this }, "Capacity"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600 mb-1 flex items-center", __source: { fileName: "", lineNumber: 640, columnNumber: 23 }, __self: this }, (formData.monthly_debt_payments / formData.monthly_income * 100).toFixed(1), "%", formData.monthly_debt_payments / formData.monthly_income <= 0.43 ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up text-green-500 ml-2", __source: { fileName: "", lineNumber: 650, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down text-red-500 ml-2", __source: { fileName: "", lineNumber: 652, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 655, columnNumber: 23 }, __self: this }, "Target: Below 43%"), /*#__PURE__*/ React.createElement("div", { className: "absolute invisible group-hover:visible bg-white p-2 rounded shadow-lg z-10 w-64", __source: { fileName: "", lineNumber: 656, columnNumber: 23 }, __self: this }, "Your debt-to-income ratio shows your ability to manage monthly payments.")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg relative group", __source: { fileName: "", lineNumber: 662, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 663, columnNumber: 23 }, __self: this }, "Capital"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600 mb-1 flex items-center", __source: { fileName: "", lineNumber: 666, columnNumber: 23 }, __self: this }, (formData.down_payment_amount / formData.desired_home_price * 100).toFixed(1), "%", formData.down_payment_amount / formData.desired_home_price >= 0.2 ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up text-green-500 ml-2", __source: { fileName: "", lineNumber: 676, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down text-red-500 ml-2", __source: { fileName: "", lineNumber: 678, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 681, columnNumber: 23 }, __self: this }, "Target: 20%+"), /*#__PURE__*/ React.createElement("div", { className: "absolute invisible group-hover:visible bg-white p-2 rounded shadow-lg z-10 w-64", __source: { fileName: "", lineNumber: 682, columnNumber: 23 }, __self: this }, "Your down payment and savings show your ability to manage the investment.")), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-4 rounded-lg relative group", __source: { fileName: "", lineNumber: 688, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-semibold text-gray-700 mb-2", __source: { fileName: "", lineNumber: 689, columnNumber: 23 }, __self: this }, "Conditions"), /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-blue-600 mb-1 flex items-center", __source: { fileName: "", lineNumber: 692, columnNumber: 23 }, __self: this }, formData.employment_length, "yr", formData.employment_length >= 2 ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-up text-green-500 ml-2", __source: { fileName: "", lineNumber: 695, columnNumber: 27 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-down text-red-500 ml-2", __source: { fileName: "", lineNumber: 697, columnNumber: 27 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 700, columnNumber: 23 }, __self: this }, "Target: 2+ years"), /*#__PURE__*/ React.createElement("div", { className: "absolute invisible group-hover:visible bg-white p-2 rounded shadow-lg z-10 w-64", __source: { fileName: "", lineNumber: 701, columnNumber: 23 }, __self: this }, "Employment stability and market conditions affect your buying position."))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 709, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg border border-blue-100 shadow-sm", __source: { fileName: "", lineNumber: 710, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-8", __source: { fileName: "", lineNumber: 711, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 712, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-blue-600 mr-3", __source: { fileName: "", lineNumber: 713, columnNumber: 23 }, __self: this }), "AI Analysis & Recommendations")), aiError && /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 bg-red-100 text-red-700 rounded-md", __source: { fileName: "", lineNumber: 719, columnNumber: 21 }, __self: this }, aiError), aiRecommendations && /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 725, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-50 to-blue-100 p-6 rounded-xl", __source: { fileName: "", lineNumber: 726, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 727, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 728, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chart-line text-white text-xl", __source: { fileName: "", lineNumber: 729, columnNumber: 29 }, __self: this })), /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-semibold ml-4 text-gray-800", __source: { fileName: "", lineNumber: 731, columnNumber: 27 }, __self: this }, "Analysis Summary")), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-sm prose max-w-none", __source: { fileName: "", lineNumber: 735, columnNumber: 25 }, __self: this }, aiRecommendations.split("\n\n").map((paragraph, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "mb-4 leading-relaxed text-gray-700", __source: { fileName: "", lineNumber: 739, columnNumber: 31 }, __self: this }, paragraph)))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl border border-gray-200 overflow-hidden", __source: { fileName: "", lineNumber: 749, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 border-b border-gray-200", __source: { fileName: "", lineNumber: 750, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 751, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-comments text-blue-600 mr-3", __source: { fileName: "", lineNumber: 752, columnNumber: 29 }, __self: this }), "Ask Our AI Advisor"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3 mb-6", __source: { fileName: "", lineNumber: 756, columnNumber: 27 }, __self: this }, suggestedQuestions.map((q, idx)=>/*#__PURE__*/ React.createElement("button", { key: idx, onClick: ()=>handleAskQuestion(q), className: "text-left p-4 bg-gray-50 hover:bg-blue-50 rounded-lg transition-all duration-200 group", __source: { fileName: "", lineNumber: 758, columnNumber: 31 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 763, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle text-blue-600 mr-3 group-hover:scale-110 transition-transform", __source: { fileName: "", lineNumber: 764, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-700 group-hover:text-blue-700", __source: { fileName: "", lineNumber: 765, columnNumber: 35 }, __self: this }, q))))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 773, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 774, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: question, onChange: (e)=>setQuestion(e.target.value), placeholder: "Type your question here...", className: "w-full p-4 pr-12 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-shadow", onKeyPress: (e)=>{ if (e.key === "Enter" && question) { handleAskQuestion(); } }, __source: { fileName: "", lineNumber: 775, columnNumber: 31 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-search absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400", __source: { fileName: "", lineNumber: 787, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAskQuestion(), disabled: !question || questionLoading, className: "px-6 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-blue-300 transition-colors flex items-center gap-2 min-w-[120px] justify-center", __source: { fileName: "", lineNumber: 789, columnNumber: 29 }, __self: this }, questionLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 796, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 797, columnNumber: 35 }, __self: this }, "Thinking...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 801, columnNumber: 35 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 802, columnNumber: 35 }, __self: this }, "Ask"))))), chatHistory.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 p-6", __source: { fileName: "", lineNumber: 810, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-lg font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 811, columnNumber: 29 }, __self: this }, "Conversation History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 814, columnNumber: 29 }, __self: this }, chatHistory.map((msg, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `flex items-start gap-4 ${msg.role === "user" ? "flex-row-reverse" : ""}`, __source: { fileName: "", lineNumber: 816, columnNumber: 33 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${msg.role === "user" ? "bg-blue-600" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 824, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${msg.role === "user" ? "fa-user" : "fa-robot"} ${msg.role === "user" ? "text-white" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 831, columnNumber: 37 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `flex-1 p-4 rounded-lg ${msg.role === "user" ? "bg-blue-600 text-white" : "bg-white"}`, __source: { fileName: "", lineNumber: 839, columnNumber: 35 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-sm font-medium mb-1 ${msg.role === "user" ? "text-blue-100" : "text-gray-600"}`, __source: { fileName: "", lineNumber: 846, columnNumber: 37 }, __self: this }, msg.role === "user" ? "You" : "AI Advisor"), /*#__PURE__*/ React.createElement("p", { className: msg.role === "user" ? "text-white" : "text-gray-800", __source: { fileName: "", lineNumber: 857, columnNumber: 37 }, __self: this }, msg.content))))))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-white p-4 rounded-lg shadow-lg border border-blue-200 max-w-md animate-fade-in", __source: { fileName: "", lineNumber: 875, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 876, columnNumber: 27 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 877, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-white", __source: { fileName: "", lineNumber: 878, columnNumber: 31 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 880, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-medium text-gray-600", __source: { fileName: "", lineNumber: 881, columnNumber: 31 }, __self: this }, "AI is typing..."), /*#__PURE__*/ React.createElement("p", { className: "text-gray-800", __source: { fileName: "", lineNumber: 884, columnNumber: 31 }, __self: this }, streamingMessage)))))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-sm text-gray-500 text-center", __source: { fileName: "", lineNumber: 898, columnNumber: 11 }, __self: this }, "Disclaimer: This assessment is for estimation purposes only and should not be considered as financial advice. Please consult with qualified financial professionals for personalized guidance."), error && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-red-100 text-red-700 rounded-md", __source: { fileName: "", lineNumber: 905, columnNumber: 13 }, __self: this }, error))), /*#__PURE__*/ React.createElement("footer", { className: "mt-16 border-t border-gray-200", __source: { fileName: "", lineNumber: 912, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto py-8 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 913, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-6", __source: { fileName: "", lineNumber: 914, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-gray-500 transition-colors", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 915, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 921, columnNumber: 15 }, __self: this }, "Facebook"), /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook text-2xl", __source: { fileName: "", lineNumber: 922, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-gray-500 transition-colors", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 924, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 930, columnNumber: 15 }, __self: this }, "Twitter"), /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-2xl", __source: { fileName: "", lineNumber: 931, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-gray-500 transition-colors", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 933, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 939, columnNumber: 15 }, __self: this }, "LinkedIn"), /*#__PURE__*/ React.createElement("i", { className: "fab fa-linkedin text-2xl", __source: { fileName: "", lineNumber: 940, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-gray-400 hover:text-gray-500 transition-colors", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 942, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "sr-only", __source: { fileName: "", lineNumber: 948, columnNumber: 15 }, __self: this }, "Instagram"), /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram text-2xl", __source: { fileName: "", lineNumber: 949, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 952, columnNumber: 11 }, __self: this }, "© ", new Date().getFullYear(), " Loan Pre-Check. All rights reserved.")))); }