Symptoms checker

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(“https://api.anthropic.com/v1/messages”, {
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 ── */}

{/* ── PROGRESS BAR ── */}

{[“intro”,”region”,”symptoms”,”profile”,”result”].map((s,i) => (

= i ? S.progressActive : {}) }} />
))}

{/* ════ STEP: INTRO ════ */}
{step === “intro” && (

AI-Powered · Free · Instant

Symptom
Checker

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.

)}

{/* ════ 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 => (

))}

)}

{/* ════ 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 => (

))}

setCustomSymp(e.target.value)}
onKeyDown={e => e.key === “Enter” && addCustom()}
/>

{selectedSymptoms.length > 0 && (

Selected ({selectedSymptoms.length}):

{selectedSymptoms.map(s => (

{s}

))}

)}

{error &&

{error}

}

)}

{/* ════ STEP: PROFILE ════ */}
{step === “profile” && (

Step 3 of 3

Tell us about yourself

This helps us give you more accurate guidance.

Age *
setProfile(p => ({ …p, age: e.target.value }))}
/>

Sex *

{[“Male”,”Female”,”Other”].map(s => (

))}

How long have you had these symptoms?

Severity: {profile.severity}/5
setProfile(p => ({ …p, severity: e.target.value }))}
/>

MildModerateSevere

{error &&

{error}

}

)}

{/* ════ STEP: RESULT ════ */}
{step === “result” && (

{loading && (

🩺

Analysing your symptoms…

Our AI clinical engine is reviewing your profile

)}

{error && !loading && (

{error}

)}

{result && !loading && (

{/* URGENCY BANNER */}

{urgCfg.label}

{result.summary}

{/* LIKELY CONDITIONS */}

🔍 Possible Conditions

{result.likely_conditions?.map((c, i) => (

{c.name}

{c.brief}

{c.probability}

))}

{/* 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 */}

{/* 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” },
};