/* global React */ const { useState: useStateJ, useEffect: useEffectJ } = React; const { Ic } = window; /* lucide icon names used across the journey timelines */ const JIC = { lab: 'FlaskConical', nutri: 'Leaf', shield: 'ShieldCheck', chart: 'TrendingUp', home: 'House', pill: 'Pill', heart: 'HeartPulse', chat: 'MessageCircle', refresh: 'RefreshCw', user: 'User' }; const JBLUE = '#0E5AA0'; const JBLUE_SOFT = 'rgba(14,90,160,.12)'; const JBLUE_GRAD = 'linear-gradient(157deg, #2A86CE 0%, #0E5AA0 52%, #0A467F 100%)'; const JTABS = [ { id: 'family', label: 'Young Family', accent: JBLUE, soft: JBLUE_SOFT }, { id: 'parent', label: 'Aging Parent', accent: JBLUE, soft: JBLUE_SOFT }, { id: 'me', label: 'Just Me', accent: JBLUE, soft: JBLUE_SOFT }]; const JDATA = { family: { photoId: 'jr-family', photoPh: 'The Sharma family at home', photoSrc: 'app/images/journey-family.png', pill: 'The Sharma family · 12 months in', desc: "Rohit and Priya, both working, with two school-age kids. When they joined, health was something they reacted to. A year later, it’s something they understand and stay ahead of, together.", quote: "Our doctor didn’t just hand us pills but also showed us how to actually get healthier: what to eat, how to move, which numbers to watch. A year on, our reports are better and we finally understand our own health.", qname: 'Priya Sharma', qplace: 'Sector 54, Gurgaon', steps: [ { m: 'Months 1–3', t: 'Getting the full picture', b: 'Blood work for all four at home. Their doctor maps each person’s risks and sets clear, realistic goals.', ic: JIC.lab }, { m: 'Months 3–6', t: 'Beyond medicines', b: 'A nutritionist rebuilds everyday meals; a simple home routine for Rohit and Priya’s weight and BP.', ic: JIC.nutri }, { m: 'Months 6–9', t: 'Staying ahead', b: 'Flu shots and immunity boosters; the kids’ vaccinations updated; Rohit’s BP medication fine-tuned.', ic: JIC.shield }, { m: 'Months 9–12', t: 'The proof', b: 'Repeat labs come back better across the board, and two prescriptions are safely reduced.', ic: JIC.chart }], numbers: [ { initials: 'R', name: 'Rohit, 42', sub: 'Borderline diabetic, rising BP', rows: [ { l: 'Fasting sugar', o: '138', n: '96', u: 'mg/dL' }, { l: 'Blood pressure', o: '148/96', n: '124/82', u: '' }, { l: 'Weight', o: '86', n: '79', u: 'kg' }] }, { initials: 'P', name: 'Priya, 39', sub: 'Low energy, thyroid & Vit D', rows: [ { l: 'Thyroid (TSH)', o: '6.8', n: '3.1', u: 'mIU/L' }, { l: 'Vitamin D', o: '14', n: '42', u: 'ng/mL' }, { l: 'HbA1c', o: '6.2', n: '5.4', u: '%' }] }, { initials: 'AS', name: 'Aarav & Sia', sub: 'The kids, 11 & 7', rows: [ { l: 'Vaccinations', o: '—', n: '100%', u: 'on time' }, { l: 'Sick-day clinic trips', o: '4', n: '0', u: '/ yr' }, { l: 'Annual check-up', o: '—', n: 'Done', u: 'at home' }] }] }, parent: { photoId: 'jr-parent', photoPh: 'Mr. Khanna with his home-care team', photoSrc: 'app/images/journey-parent.png', pill: 'Mr. Khanna, 74 · cared for from another city', desc: "Sunita lives in Pune; her father lives on his own in Delhi. She used to worry between phone calls. Now one doctor and a coordinator look after him, and she sees everything that happens.", quote: "I’m 1,400 km away, but I know my father’s blood pressure this week and exactly what his doctor said. For a daughter living apart, that is everything.", qname: 'Sunita Khanna', qplace: 'Pune, for her father in Delhi', steps: [ { m: 'Month 1', t: 'A doctor who comes to him', b: 'No more tiring clinic trips. His family doctor visits at home and learns his full history and medicines.', ic: JIC.home }, { m: 'Months 1–4', t: 'Medicines, simplified', b: 'Six prescriptions reconciled to four, and delivered home each month, so he never runs out.', ic: JIC.pill }, { m: 'Months 4–8', t: 'Steady monitoring', b: 'Nurse visits track his BP and sugar; the doctor adjusts early, before anything escalates.', ic: JIC.heart }, { m: 'All year', t: 'Sunita always knows', b: 'A WhatsApp update after every visit. She finally stopped lying awake at night.', ic: JIC.chat }], numbers: [ { initials: 'MK', name: 'Mr. Khanna, 74', sub: 'BP & diabetes, lives alone', rows: [ { l: 'Blood pressure', o: '158/98', n: '128/84', u: '' }, { l: 'Fasting sugar', o: '152', n: '108', u: 'mg/dL' }, { l: 'ER / urgent trips', o: '3', n: '0', u: '/ yr' }] }, { initials: 'FS', name: 'For Sunita', sub: 'His daughter, in Pune', rows: [ { l: 'Update after each visit', o: '—', n: '100%', u: 'sent' }, { l: 'Missed medicines', o: 'often', n: '0', u: '' }, { l: 'Peace of mind', o: '—', n: 'Daily', u: '' }] }] }, me: { photoId: 'jr-me-2', photoPh: 'Aisha’s at-home consult', photoSrc: 'app/images/journey-me.png', pill: 'Aisha, 34 · taking charge of her own health', desc: "Aisha is 34, single, and works long hours. Tired all the time, she kept putting off a check-up. Her family doctor found out why and built a plan around her actual life, not a clinic’s timings.", quote: "I’d been blaming myself for being tired all the time. Turns out it was treatable, and I finally had a doctor who actually explained what was going on and what to do about it.", qname: 'Aisha Verma', qplace: 'Gurgaon', steps: [ { m: 'Month 1', t: 'Finally, some answers', b: 'A full panel at home, after work. It uncovers an underactive thyroid plus low Vitamin D and iron.', ic: JIC.lab }, { m: 'Months 1–3', t: 'Beyond a prescription', b: 'A nutritionist fixes her on-the-go eating; the doctor sets a routine she can realistically keep.', ic: JIC.nutri }, { m: 'Months 3–6', t: 'Dialed in', b: 'Thyroid medication titrated by repeat labs; her energy and sleep steadily return.', ic: JIC.refresh }, { m: 'Month 6', t: 'Back to herself', b: 'Numbers in range, and she understands her own body for the first time.', ic: JIC.chart }], numbers: [ { initials: 'A', name: 'Aisha, 34', sub: 'Fatigue, thyroid, low iron', rows: [ { l: 'Thyroid (TSH)', o: '7.4', n: '2.6', u: 'mIU/L' }, { l: 'Vitamin D', o: '11', n: '38', u: 'ng/mL' }, { l: 'Ferritin (iron)', o: '9', n: '32', u: 'ng/mL' }] }, { initials: 'Hs', name: 'How she feels', sub: 'In her words, month 6', rows: [ { l: 'Energy through the day', o: 'low', n: 'steady', u: '' }, { l: 'Good nights’ sleep', o: '2', n: '6', u: '/ wk' }, { l: 'Understands her health', o: '—', n: 'Fully', u: '' }] }] } }; const JGREEN = '#1F8A4C'; function JStat({ row, accent }) { return (
{row.l} {row.o !== '—' && {row.o} } → {row.n} {row.u && {row.u}}
); } function JNumberCard({ card, accent, soft }) { return (
{card.initials}
{card.name}
{card.sub}
{card.rows.map((r) => )}
); } /* ---- graphical "roadmap" timeline: one milestone at a time ---- */ function JRoadmap({ steps }) { const [i, setI] = useStateJ(0); const n = steps.length; const s = steps[i]; const go = (d) => setI((p) => Math.max(0, Math.min(n - 1, p + d))); // progress fraction along the rail (start node = 0, finish flag = 1) const pct = (i + 1) / (n + 1) * 100; return (

How their doctor guided the year

From the first home visit to a healthier year. Tap through the milestones.

{/* horizontal journey rail */}
{/* base track */} {/* filled track */} {/* start node */} {/* milestone nodes */} {steps.map((st, k) => { const done = k < i,current = k === i; return ( ); })} {/* finish flag */}
{/* active milestone card */}
{i + 1}
{s.m}

{s.t}

{s.b}

{/* nav */}
{i === n - 1 ? 1 year on · healthier & on track : `Milestone ${i + 1} of ${n}`}
); } function Journeys() { const [tab, setTab] = useStateJ('family'); const active = JTABS.find((t) => t.id === tab); const d = JDATA[tab]; /* carousel for "The numbers, one year on" — one card visible, infinite forward auto-scroll */ const [nIdx, setNIdx] = useStateJ(0); const [nAnim, setNAnim] = useStateJ(true); const [nNonce, setNNonce] = useStateJ(0); const nLen = d.numbers.length; const nSlides = [...d.numbers, d.numbers[0]]; const nStartX = React.useRef(null); useEffectJ(() => { setNAnim(false); setNIdx(0); const raf = requestAnimationFrame(() => setNAnim(true)); return () => cancelAnimationFrame(raf); }, [tab]); useEffectJ(() => { const id = setInterval(() => {setNAnim(true);setNIdx((p) => p + 1);}, 4000); return () => clearInterval(id); }, [tab, nNonce]); useEffectJ(() => { if (nIdx === nLen) { const t = setTimeout(() => {setNAnim(false);setNIdx(0);}, 650); return () => clearTimeout(t); } if (!nAnim) { const r = requestAnimationFrame(() => setNAnim(true)); return () => cancelAnimationFrame(r); } }, [nIdx]); const nGoNext = () => {setNNonce((n) => n + 1);setNAnim(true);setNIdx((p) => p + 1);}; const nGoPrev = () => { setNNonce((n) => n + 1); if (nIdx <= 0) { setNAnim(false); setNIdx(nLen); requestAnimationFrame(() => {setNAnim(true);setNIdx(nLen - 1);}); } else { setNAnim(true); setNIdx(nIdx - 1); } }; const nOnDown = (e) => {nStartX.current = e.touches ? e.touches[0].clientX : e.clientX;}; const nOnUp = (e) => { if (nStartX.current == null) return; const endX = e.changedTouches ? e.changedTouches[0].clientX : e.clientX; const dx = endX - nStartX.current; nStartX.current = null; if (dx < -40) nGoNext();else if (dx > 40) nGoPrev(); }; const nDot = nIdx % nLen; return (
What a year with your own doctor looks like.

Every family looks different. Here’s what a year of care did for three of them.

{/* segmented tabs */}
{JTABS.map((t) => )}
{/* photo + label */}
{d.pill}
{/* quote */}

“{d.quote}”

{d.qname} · {d.qplace}

{/* timeline — graphical roadmap */} {/* numbers */}
The numbers, one year on
{nSlides.map((c, i) =>
)}
{d.numbers.map((_, i) => )}

Representative journeys based on typical plan outcomes. Individual results vary. Your doctor sets goals that are right for you.

); } Object.assign(window, { Journeys });