/* CareNav site — Hero + Problem (chaos) + Connecting Dots */
/* Type-led animated hero. Phrase types in word by word. */
window.SiteHero = function SiteHero({ audience }) {
const isMobile = useIsMobile();
const [step, setStep] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setStep(s => Math.min(s + 1, 6)), 320);
return () => clearInterval(t);
}, []);
const headline = {
patients: ['Cancer', 'is', 'overwhelming.', 'CareNav', 'is', 'not.'],
clinicians: ['Your', 'patients,', 'fully', 'supported', 'between', 'visits.'],
hospitals: ['One', 'partner.', 'Every', 'patient.', 'Every', 'journey.'],
insurers: ['Better', 'outcomes.', 'Lower', 'costs.', 'Happier', 'members.'],
}[audience] || ['Cancer', 'is', 'overwhelming.', 'CareNav', 'is', 'not.'];
const subline = {
patients: 'A real human navigator beside you, every step of the way — connecting the dots so you don\'t have to.',
clinicians: 'CareNav handles the coordination, follow-ups, and patient education that fall through the cracks — so you can focus on care.',
hospitals: 'Reduce missed appointments, improve outcomes, and lift patient satisfaction with a custodian for the entire cancer journey.',
insurers: 'A measurably better experience for your members at a lower total cost of care. Evidence-based, outcome-aligned.',
}[audience] || '';
return (
{/* Ambient mark — hidden on mobile (it overflows and competes with the headline) */}
{!isMobile && (
)}
The trusted custodian of cancer journeys
{headline.map((w, i) => {
const visible = i < step;
const isAccent = (audience === 'patients' && i === 2) || (audience === 'clinicians' && i === 4) || (audience === 'hospitals' && i === 1) || (audience === 'insurers' && i === 3);
return (
{w}
);
})}
Between specialists, portals, paperwork and waiting rooms, families do an unpaid second job: chasing referrals, decoding bills, remembering what one doctor said before the next appointment.