function MainComponent() { const [step, setStep] = React.useState(0); const [responses, setResponses] = React.useState({}); const [diagnosisResult, setDiagnosisResult] = React.useState(''); const [loading, setLoading] = React.useState(false); const questions = [ { text: "Feeling depressed or hopeless most of the day, nearly every day?", key: "depression" }, { text: "Experiencing excessive worry or anxiety more days than not?", key: "anxiety" }, { text: "Noticeable decrease in interest or pleasure in all or most activities?", key: "anhedonia" }, { text: "Significant mood swings from very high to very low?", key: "bipolar" }, { text: "Changes in sleeping or eating patterns?", key: "sleepEatingChanges" }, { text: "Intense fear or panic attacks that seem overwhelming?", key: "panicAttack" } ]; const diagnose = ()=>{ setLoading(true); const criteria = JSON.stringify({ responses }); fetch('/integrations/web-scraping/post', { method: 'POST', body: { url: `https://dsm-5-criteria.example.com?criteria=${criteria}` } }).then((response)=>response.text()).then((html)=>{ setDiagnosisResult(html); setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-5", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#E2E8F0] p-4 rounded shadow-md", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-lg text-[#2D3748] mb-5", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, "Mental Health Assessment"), step < questions.length ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-base text-[#2D3748] mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, questions[step].text), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white py-2 px-4 rounded mr-2", onClick: ()=>{ setResponses({ ...responses, [questions[step].key]: true }); setStep(step + 1); }, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, "Yes"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-500 text-white py-2 px-4 rounded", onClick: ()=>{ setResponses({ ...responses, [questions[step].key]: false }); setStep(step + 1); }, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, "No")) : /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded my-4", onClick: diagnose, disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, loading ? 'Analyzing...' : 'Get Diagnosis'), diagnosisResult && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#2D3748]", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, diagnosisResult))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this }, ` @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeOut { animation: fadeOut 1s; } .fadeIn { animation: fadeIn 1s; } `)); }