import { useState, useRef, useEffect } from “react”; /* ─── BODY REGIONS ─── */ const BODY_REGIONS = [ { id: “head”, label: “Head & Brain”, icon: “🧠”, color: “#2e7d32” }, { id: “eyes”, label: “Eyes & Vision”, icon: “👁️”, color: “#1b5e20” }, { id: “throat”, label: “Throat & Neck”, icon: “🗣️”, color: “#2e7d32” }, { id: “chest”, label: “Chest & Heart”, icon: “❤️”, color: “#c62828” }, { id: “lungs”, label: “Lungs & Breath”, icon: “🫁”, color: “#1565c0” }, { id: “abdomen”, label: “Abdomen & Gut”, icon: “🫃”, color: “#e65100” }, { id: “kidney”, label: “Kidney & Urine”, icon: “🫘”, color: “#6a1b9a” }, { id: “joints”, label: “Joints & Bones”, icon: “🦴”, color: “#4e342e” }, { id: “skin”, label: “Skin & Hair”, icon: “🧴”, color: “#00695c” }, { id: “mental”, label: “Mind & Mood”, icon: “🧘”, color: “#37474f” }, { id: “women”, label: “Women’s Health”, icon: “🌸”, color: “#ad1457” }, { id: “general”, label: “Whole Body”, icon: “🌡️”, color: “#558b2f” }, ]; const SYMPTOM_MAP = { head: [“Headache”,”Migraine”,”Dizziness”,”Memory loss”,”Confusion”,”Fainting”,”Head pressure”,”Ringing in ears”], eyes: [“Blurred vision”,”Eye pain”,”Red eyes”,”Watery eyes”,”Double vision”,”Light sensitivity”,”Eye swelling”], throat: [“Sore throat”,”Difficulty swallowing”,”Hoarse voice”,”Neck pain”,”Swollen glands”,”Dry throat”], chest: [“Chest pain”,”Palpitations”,”Irregular heartbeat”,”Chest tightness”,”Heart racing”,”Chest pressure”], lungs: [“Shortness of breath”,”Cough”,”Wheezing”,”Breathlessness”,”Coughing blood”,”Night sweats”], abdomen: [“Stomach pain”,”Nausea”,”Vomiting”,”Bloating”,”Diarrhoea”,”Constipation”,”Acidity”,”Loss of appetite”], kidney: [“Frequent urination”,”Burning urination”,”Back pain”,”Blood in urine”,”Puffy ankles”,”Reduced urine”], joints: [“Joint pain”,”Swelling”,”Stiffness”,”Back pain”,”Muscle ache”,”Weakness”,”Cramps”,”Numbness”], skin: [“Rash”,”Itching”,”Dry skin”,”Acne”,”Jaundice”,”Bruising”,”Hair loss”,”Nail changes”], mental: [“Anxiety”,”Depression”,”Insomnia”,”Fatigue”,”Brain fog”,”Mood swings”,”Stress”,”Panic attacks”], women: [“Irregular periods”,”Heavy bleeding”,”Pelvic pain”,”Hot flashes”,”Breast pain”,”Vaginal discharge”], general: [“Fever”,”Chills”,”Weight loss”,”Fatigue”,”Night sweats”,”Loss of smell”,”General weakness”,”Swollen lymph nodes”], }; const URGENCY_CONFIG = { emergency: { color: “#c62828”, bg: “#ffebee”, label: “🚨 Emergency”, border: “#e53935” }, urgent: { color: “#e65100”, bg: “#fff3e0”, label: “⚠️ See Doctor Soon”, border: “#fb8c00” }, routine: { color: “#2e7d32”, bg: “#e8f5e9”, label: “✅ Routine Care”, border: “#43a047” }, monitor: { color: “#1565c0”, bg: “#e3f2fd”, label: “👀 Monitor at Home”, border: “#1e88e5” }, }; /* ─── MAIN COMPONENT ─── */ export default function SymptomChecker() { const [step, setStep] = useState(“intro”); // intro | region | symptoms | profile | result const [selectedRegion, setRegion] = useState(null); const [selectedSymptoms, setSymp] = useState([]); const [profile, setProfile] = useState({ age: “”, sex: “”, duration: “”, severity: “3” }); const [result, setResult] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(“”); const [customSymp, setCustomSymp] = useState(“”); const resultRef = useRef(null); useEffect(() => { if (step === “result” && resultRef.current) { setTimeout(() => resultRef.current?.scrollIntoView({ behavior: “smooth”, block: “start” }), 100); } }, [step]); function toggleSymptom(s) { setSymp(prev => prev.includes(s) ? prev.filter(x => x !== s) : […prev, s]); } function addCustom() { const t = customSymp.trim(); if (t && !selectedSymptoms.includes(t)) { setSymp(p => […p, t]); } setCustomSymp(“”); } async function analyse() { if (selectedSymptoms.length === 0) { setError(“Please select at least one symptom.”); return; } if (!profile.age || !profile.sex) { setError(“Please fill in age and sex.”); return; } setError(“”); setLoading(true); setStep(“result”); setResult(null); const prompt = `You are a clinical medical assistant for Health+C0de, an Indian health platform by KK Seth. A patient has provided the following details: Age: ${profile.age} Sex: ${profile.sex} Body Region: ${selectedRegion ? BODY_REGIONS.find(r=>r.id===selectedRegion)?.label : “General”} Symptoms: ${selectedSymptoms.join(“, “)} Duration: ${profile.duration || “Not specified”} Severity (1-5): ${profile.severity}/5 Provide a structured JSON response (no markdown, no backticks) with this exact shape: { “urgency”: “emergency|urgent|routine|monitor”, “summary”: “2-sentence plain-English summary of the clinical picture”, “likely_conditions”: [ {“name”: “Condition Name”, “probability”: “High|Moderate|Low”, “brief”: “One sentence explanation”}, {“name”: “…”, “probability”: “…”, “brief”: “…”}, {“name”: “…”, “probability”: “…”, “brief”: “…”} ], “red_flags”: [“symptom or sign that needs immediate attention”, “…”], “home_care”: [“Practical tip 1”, “Practical tip 2”, “Practical tip 3”], “ayurveda_tip”: “One Ayurvedic or traditional Indian remedy tip relevant to these symptoms”, “when_to_see_doctor”: “Clear, concise sentence about when to seek medical care”, “specialist”: “Which specialist to see (e.g. Cardiologist, Gastroenterologist, General Physician)” } Rules: – Be medically accurate but use plain language understandable to Indian patients – If emergency symptoms are present (chest pain + breathlessness, stroke signs, severe bleeding), set urgency to “emergency” – Always recommend professional medical consultation – Keep likely_conditions to exactly 3`; try { const res = await fetch(“
;, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify({ model: “claude-sonnet-4-20250514”, max_tokens: 1000, messages: [{ role: “user”, content: prompt }] }) }); const data = await res.json(); const raw = data.content?.find(b => b.type === “text”)?.text || “”; const clean = raw.replace(/“`json|“`/g, “”).trim(); setResult(JSON.parse(clean)); } catch (e) { setError(“Analysis failed. Please try again.”); setStep(“profile”); } finally { setLoading(false); } } function restart() { setStep(“intro”); setRegion(null); setSymp([]); setResult(null); setError(“”); setProfile({ age: “”, sex: “”, duration: “”, severity: “3” }); } const urgCfg = result ? URGENCY_CONFIG[result.urgency] || URGENCY_CONFIG.routine : null; return (
{/* ── NAV ── */}
Symptom Checker
{/* ── PROGRESS BAR ── */}
{[“intro”,”region”,”symptoms”,”profile”,”result”].map((s,i) => (
= i ? S.progressActive : {}) }} /> ))}
{/* ════ STEP: INTRO ════ */} {step === “intro” && (
AI-Powered · Free · Instant
SymptomChecker Describe your symptoms and get instant guidance on possible conditions, home care, and when to see a doctor — informed by clinical knowledge and Indian health context.
{[ { icon:”🩺”, text:”Body-region based” }, { icon:”🤖”, text:”AI clinical analysis” }, { icon:”🌿”, text:”Ayurvedic tips” }, { icon:”🇮🇳”, text:”India-first context” }, ].map(f => (
{f.icon} {f.text}
))}
⚠️ Important: This tool provides general health information only — not a medical diagnosis. Always consult a qualified doctor. In emergencies, call 112 .
setStep(“region”)}> Start Symptom Check → )} {/* ════ STEP: REGION ════ */} {step === “region” && (
Step 1 of 3
Where do you feel it? Select the body area where your main symptom is located.
{BODY_REGIONS.map(r => ( setRegion(r.id)} > {r.icon} {r.label} {selectedRegion === r.id && ✓ } ))}
setStep(“intro”)}>← Back selectedRegion && setStep(“symptoms”)} >Next →
)} {/* ════ STEP: SYMPTOMS ════ */} {step === “symptoms” && (
Step 2 of 3
Select your symptoms
Showing symptoms for {BODY_REGIONS.find(r=>r.id===selectedRegion)?.icon} {BODY_REGIONS.find(r=>r.id===selectedRegion)?.label} . Tap all that apply.
{(SYMPTOM_MAP[selectedRegion] || []).map(s => ( toggleSymptom(s)} > {selectedSymptoms.includes(s) && ✓ } {s} ))}
+ Add
{selectedSymptoms.length > 0 && (
Selected ({selectedSymptoms.length}):
{selectedSymptoms.map(s => ( {s} toggleSymptom(s)}>× ))}
)} {error &&
{error}
}
setStep(“region”)}>← Back { if (selectedSymptoms.length) { setError(“”); setStep(“profile”); } else setError(“Select at least one symptom.”); }} >Next →
)} {/* ════ STEP: PROFILE ════ */} {step === “profile” && (
Step 3 of 3
Tell us about yourself This helps us give you more accurate guidance.
Age *
Sex * {[“Male”,”Female”,”Other”].map(s => ( setProfile(p => ({ …p, sex: s }))} >{s} ))}
How long have you had these symptoms?
{error &&
{error}
}
setStep(“symptoms”)}>← Back 🔍 Analyse Symptoms
)} {/* ════ STEP: RESULT ════ */} {step === “result” && (
{loading && (
🩺
Analysing your symptoms…
Our AI clinical engine is reviewing your profile
)} {error && !loading && (
{error}
setStep(“profile”)}>← Try Again )} {result && !loading && ( {/* URGENCY BANNER */}
{urgCfg.label}
{result.summary}
{/* LIKELY CONDITIONS */}
🔍 Possible Conditions {result.likely_conditions?.map((c, i) => (
))}
{/* RED FLAGS */} {result.red_flags?.length > 0 && (
🚩 Red Flag Symptoms Go to a hospital immediately if you also experience:
{result.red_flags.map((r, i) => (
⚠️ {r}
))}
)} {/* HOME CARE + AYURVEDA */}
🏠 Home Care Tips {result.home_care?.map((t, i) => (
{i+1} {t}
))}
🌿 Ayurvedic Tip {result.ayurveda_tip}
{/* WHEN TO SEE DOCTOR */}
🏥
When to See a Doctor {result.when_to_see_doctor}
{result.specialist && (
👨⚕️ Recommended: {result.specialist}
)}
{/* DISCLAIMER */}
⚠️ Medical Disclaimer: This AI-generated analysis is for informational purposes only and does not constitute medical advice, diagnosis, or treatment. Always consult a qualified healthcare professional. For emergencies call 112 .
{/* ACTIONS */}
🔄 New Check window.print()}>🖨 Print Result
{/* FOOTER BRAND */}
Health+C0de by KK Seth · sethkkc1.com “Happiness always along with life”
> )}
)}
); } /* ─── STYLES ─── */ const S = { root: { fontFamily: “‘DM Sans’, ‘Segoe UI’, sans-serif”, background: “linear-gradient(160deg,#f0f7f0 0%,#fdfaf3 60%,#f5f0e8 100%)”, minHeight: “100vh”, color: “#1a1a1a”, }, nav: { background: “linear-gradient(90deg,#1b5e20,#2d6a30)”, padding: “.7rem 1.2rem”, display: “flex”, alignItems: “center”, justifyContent: “space-between”, boxShadow: “0 2px 12px rgba(0,0,0,.2)”, position: “sticky”, top: 0, zIndex: 50, }, navBrand: { display:”flex”, alignItems:”center”, gap:”.5rem” }, navLeaf: { fontSize:”1.3rem” }, navTitle: { fontFamily:”‘Cormorant Garamond’,Georgia,serif”, fontSize:”1.1rem”, fontWeight:700, color:”#f5d45e”, lineHeight:1.1 }, navSub: { fontSize:”.65rem”, color:”rgba(255,255,255,.6)”, fontWeight:500 }, navTag: { fontSize:”.7rem”, fontWeight:700, letterSpacing:”.1em”, textTransform:”uppercase”, color:”rgba(255,255,255,.7)”, background:”rgba(255,255,255,.1)”, border:”1px solid rgba(255,255,255,.2)”, padding:”4px 10px”, borderRadius:20 }, progressWrap: { background:”#fff”, padding:”.6rem 1.2rem”, display:”flex”, alignItems:”center”, gap:”.4rem”, position:”relative”, borderBottom:”1px solid rgba(27,94,32,.1)” }, progressDot: { width:8, height:8, borderRadius:”50%”, background:”#ddd”, zIndex:1, flexShrink:0 }, progressActive:{ background:”#2e7d32″ }, progressLine: { position:”absolute”, left:”1.2rem”, right:”1.2rem”, top:”50%”, transform:”translateY(-50%)”, height:2, background:”#e0e0e0″, zIndex:0 }, progressFill: { height:”100%”, background:”linear-gradient(90deg,#1b5e20,#c8a415)”, transition:”width .4s ease”, borderRadius:2 }, container: { maxWidth:560, margin:”0 auto”, padding:”1rem 1rem 3rem” }, card: { background:”#fff”, borderRadius:16, boxShadow:”0 4px 24px rgba(27,94,32,.09)”, border:”1px solid rgba(27,94,32,.12)”, padding:”1.5rem 1.3rem”, marginBottom:”1rem” }, heroBadge: { display:”inline-block”, fontSize:”.68rem”, fontWeight:700, letterSpacing:”.14em”, textTransform:”uppercase”, color:”#2e7d32″, background:”rgba(46,125,50,.1)”, border:”1px solid rgba(46,125,50,.25)”, padding:”4px 12px”, borderRadius:20, marginBottom:”1rem” }, heroTitle: { fontFamily:”‘Cormorant Garamond’,Georgia,serif”, fontSize:”clamp(2.2rem,8vw,3rem)”, fontWeight:700, lineHeight:1.1, marginBottom:”.8rem”, color:”#1b5e20″ }, heroSub: { fontSize:”.93rem”, color:”#444″, lineHeight:1.7, marginBottom:”1.2rem” }, featureGrid: { display:”grid”, gridTemplateColumns:”1fr 1fr”, gap:”.5rem”, marginBottom:”1.2rem” }, featureChip: { display:”flex”, alignItems:”center”, gap:”.4rem”, background:”#f0f9f0″, border:”1px solid rgba(46,125,50,.2)”, borderRadius:10, padding:”.5rem .7rem” }, disclaimerBox: { background:”#fff8e1″, border:”1px solid rgba(200,164,21,.35)”, borderRadius:10, padding:”.85rem 1rem”, fontSize:”.8rem”, color:”#4a3b00″, lineHeight:1.55, marginBottom:”1rem” }, stepLabel: { fontSize:”.68rem”, fontWeight:700, letterSpacing:”.14em”, textTransform:”uppercase”, color:”#999″, marginBottom:”.4rem” }, cardTitle: { fontFamily:”‘Cormorant Garamond’,Georgia,serif”, fontSize:”1.6rem”, fontWeight:700, color:”#1b5e20″, marginBottom:”.3rem” }, cardSub: { fontSize:”.88rem”, color:”#666″, marginBottom:”1.2rem”, lineHeight:1.5 }, regionGrid: { display:”grid”, gridTemplateColumns:”1fr 1fr”, gap:”.5rem”, marginBottom:”1.2rem” }, regionBtn: { display:”flex”, flexDirection:”column”, alignItems:”center”, gap:”.25rem”, background:”#fafafa”, border:”1.5px solid #e0e0e0″, borderRadius:12, padding:”.7rem .5rem”, cursor:”pointer”, transition:”all .18s”, position:”relative”, minHeight:72 }, regionBtnActive: { boxShadow:”0 2px 10px rgba(27,94,32,.15)” }, regionIcon: { fontSize:”1.5rem” }, regionLabel:{ fontSize:”.72rem”, fontWeight:600, color:”#333″, textAlign:”center”, lineHeight:1.3 }, regionCheck:{ position:”absolute”, top:4, right:6, fontSize:”.75rem”, fontWeight:700 }, sympGrid: { display:”flex”, flexWrap:”wrap”, gap:”.4rem”, marginBottom:”1rem” }, sympBtn: { background:”#f5f5f5″, border:”1.5px solid #e0e0e0″, borderRadius:20, padding:”.38rem .8rem”, fontSize:”.8rem”, fontWeight:500, cursor:”pointer”, transition:”all .15s”, color:”#333″ }, sympBtnActive:{ background:”#e8f5e9″, borderColor:”#2e7d32″, color:”#1b5e20″, fontWeight:700 }, sympCheck: { color:”#2e7d32″, fontWeight:900 }, customRow: { display:”flex”, gap:”.5rem”, marginBottom:”.9rem” }, customInput:{ flex:1, border:”1.5px solid #ddd”, borderRadius:8, padding:”.5rem .7rem”, fontSize:”.85rem”, outline:”none”, fontFamily:”inherit” }, btnAdd: { background:”#1b5e20″, color:”#f5d45e”, border:”none”, borderRadius:8, padding:”.5rem .9rem”, fontWeight:700, fontSize:”.82rem”, cursor:”pointer” }, selectedBox: { background:”#f0f9f0″, border:”1px solid rgba(46,125,50,.2)”, borderRadius:10, padding:”.7rem .9rem”, marginBottom:”.9rem” }, selectedLabel:{ fontSize:”.72rem”, fontWeight:700, color:”#2e7d32″, marginBottom:”.4rem”, textTransform:”uppercase”, letterSpacing:”.08em” }, tagRow: { display:”flex”, flexWrap:”wrap”, gap:”.3rem” }, tag: { display:”inline-flex”, alignItems:”center”, gap:4, background:”#1b5e20″, color:”white”, borderRadius:20, padding:”3px 10px”, fontSize:”.75rem”, fontWeight:600 }, tagX: { background:”none”, border:”none”, color:”rgba(255,255,255,.7)”, cursor:”pointer”, fontSize:”1rem”, lineHeight:1, padding:0, marginLeft:2 }, formGrid: { display:”flex”, flexDirection:”column”, gap:”1rem”, marginBottom:”1.2rem” }, formGroup: { display:”flex”, flexDirection:”column”, gap:”.3rem” }, label: { fontSize:”.8rem”, fontWeight:600, color:”#444″ }, input: { border:”1.5px solid #ddd”, borderRadius:8, padding:”.55rem .8rem”, fontSize:”.9rem”, fontFamily:”inherit”, outline:”none”, color:”#222″, background:”#fafafa” }, sexRow: { display:”flex”, gap:”.5rem” }, sexBtn: { flex:1, padding:”.5rem”, border:”1.5px solid #ddd”, borderRadius:8, cursor:”pointer”, fontSize:”.85rem”, fontWeight:600, background:”#fafafa”, color:”#555″, transition:”all .15s” }, sexBtnActive:{ background:”#e8f5e9″, borderColor:”#2e7d32″, color:”#1b5e20″ }, slider: { width:”100%”, accentColor:”#2e7d32″ }, sliderLabels:{ display:”flex”, justifyContent:”space-between”, fontSize:”.7rem”, color:”#999″ }, navRow: { display:”flex”, gap:”.7rem”, justifyContent:”space-between”, marginTop:”1.2rem” }, btnPrimary: { background:”linear-gradient(120deg,#1b5e20,#2e7d32)”, color:”white”, border:”none”, borderRadius:10, padding:”.75rem 1.4rem”, fontWeight:700, fontSize:”.92rem”, cursor:”pointer”, fontFamily:”inherit”, boxShadow:”0 3px 12px rgba(27,94,32,.3)”, flex:1 }, btnGhost: { background:”transparent”, color:”#2e7d32″, border:”1.5px solid #2e7d32″, borderRadius:10, padding:”.75rem 1.2rem”, fontWeight:600, fontSize:”.88rem”, cursor:”pointer”, fontFamily:”inherit” }, errorBox: { background:”#ffebee”, border:”1px solid #ef9a9a”, borderRadius:8, padding:”.65rem .9rem”, fontSize:”.83rem”, color:”#c62828″, marginBottom:”.5rem” }, loadingWrap:{ textAlign:”center”, padding:”2.5rem 1rem” }, pulse: { fontSize:”3rem”, animation:”pulse 1.2s ease-in-out infinite”, display:”inline-block” }, urgencyBanner:{ borderRadius:14, border:”2px solid”, padding:”1.2rem 1.3rem”, marginBottom:”1rem” }, urgencyLabel: { fontFamily:”‘Cormorant Garamond’,Georgia,serif”, fontSize:”1.2rem”, fontWeight:700, marginBottom:”.4rem” }, sectionHead:{ fontFamily:”‘Cormorant Garamond’,Georgia,serif”, fontSize:”1.1rem”, fontWeight:700, color:”#1b5e20″, margin:”0 0 .8rem” }, condRow: { display:”flex”, alignItems:”flex-start”, justifyContent:”space-between”, gap:”.7rem”, padding:”.7rem 0″, borderBottom:”1px dashed rgba(27,94,32,.12)” }, condLeft: { flex:1 }, condName: { fontSize:”.95rem”, fontWeight:700, color:”#1b1b1b”, marginBottom:”.15rem” }, condBrief: { fontSize:”.8rem”, color:”#666″, lineHeight:1.45 }, probBadge: { flexShrink:0, fontSize:”.68rem”, fontWeight:800, borderRadius:20, padding:”3px 10px”, textTransform:”uppercase”, letterSpacing:”.06em” }, probHigh: { background:”#ffebee”, color:”#c62828″ }, probMod: { background:”#fff3e0″, color:”#e65100″ }, probLow: { background:”#e8f5e9″, color:”#2e7d32″ }, redFlagRow: { fontSize:”.88rem”, color:”#555″, padding:”.4rem 0″, borderBottom:”1px solid #fde”, lineHeight:1.45 }, twoCol: { display:”grid”, gridTemplateColumns:”1fr”, gap:”1rem” }, tipRow: { display:”flex”, gap:”.6rem”, alignItems:”flex-start”, padding:”.4rem 0″, borderBottom:”1px dashed rgba(27,94,32,.1)”, fontSize:”.88rem” }, tipNum: { flexShrink:0, width:20, height:20, background:”#1b5e20″, color:”#f5d45e”, borderRadius:5, display:”flex”, alignItems:”center”, justifyContent:”center”, fontSize:”.65rem”, fontWeight:800 }, specialistChip:{ display:”inline-block”, background:”#fff”, border:”1px solid #a5d6a7″, borderRadius:20, padding:”4px 12px”, fontSize:”.8rem”, color:”#1b5e20″, marginTop:”.3rem” }, actionRow: { display:”flex”, gap:”.7rem”, margin:”1rem 0″ }, footerBrand:{ display:”flex”, flexDirection:”column”, alignItems:”center”, gap:”.2rem”, padding:”1.2rem 0 .5rem”, textAlign:”center” }, };