{heroStyle === 'photo' ? (

Photograph goes here

) : (

)}

); } // ─── Splash ───────────────────────────────────────────────────────────── function Splash({ onContinue, grain, auto, onLongPressMark }) { const [shown, setShown] = React.useState(false); const pressTimer = React.useRef(null); React.useEffect(() => { const r = setTimeout(() => setShown(true), 30); let t; if (auto) t = setTimeout(onContinue, 2100); return () => { clearTimeout(r); if (t) clearTimeout(t); }; }, []); const startPress = (e) => { if (!onLongPressMark) return; e.stopPropagation(); pressTimer.current = setTimeout(() => { pressTimer.current = 'fired'; onLongPressMark(); }, 600); }; const endPress = (e) => { if (pressTimer.current && pressTimer.current !== 'fired') clearTimeout(pressTimer.current); const fired = pressTimer.current === 'fired'; pressTimer.current = null; if (fired) { e.stopPropagation(); e.preventDefault(); } }; return (

Whole-body health, read from your smile.

Tap to begin

); } // ─── DemoSheet — DEV-only result-path selector (long-press the mark) ──── // ⚠ PROTOTYPE ONLY — remove for production. function DemoSheet({ open, onClose, onPick }) { const opts = [ { tier: 'healthy', label: 'Demo healthy result', sub: 'Lands a 70–100 score', dot: 'var(--sage-500)' }, { tier: 'moderate', label: 'Demo moderate result', sub: 'Lands a 41–69 score', dot: 'var(--amber-500)' }, { tier: 'high', label: 'Demo high-risk result', sub: 'Lands a 0–40 score', dot: 'var(--clay-500)' }, ]; return (

DEV

Demo a result path

Fills the questionnaire to land any tier — skips straight to the result.

{opts.map(o => ( ))}

); } // ─── Value prop screen ────────────────────────────────────────────────── function ValueProp({ index, onNext, onBack, onSkip, heroStyle, grain }) { const vp = VALUE_PROPS[index]; const last = index === VALUE_PROPS.length - 1; return (

{/* top bar */}

{index === 0 ? ( Muna

) : ( )}

{/* hero */}

{/* copy */}

{vp.eyebrow}

{vp.title}

{vp.body}

{/* dots + CTA pinned in safe area */}

); } // ─── Auth shell — back nav + scroll body + pinned footer ──────────────── function AuthShell({ onBack, children, footer }) { return (

{children}

{footer}

); } // ─── Sign up ──────────────────────────────────────────────────────────── function SignUp({ onBack, onSwitch, onDone }) { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [err, setErr] = React.useState({}); const submit = () => { const e = {}; if (!name.trim()) e.name = 'Please enter your name.'; if (!validateEmail(email)) e.email = 'That email looks off \u2014 let\u2019s try again.'; if (pw.length < 8) e.pw = 'Passwords need at least 8 characters.'; setErr(e); if (Object.keys(e).length === 0) onDone(); }; return (

Already have an account?{' '}

Create your account

One account keeps your screenings, scores, and care in one place.

{ setName(v); if (err.name) setErr({ ...err, name: undefined }); }} error={err.name}/> { setEmail(v); if (err.email) setErr({ ...err, email: undefined }); }} error={err.email}/> { setPw(v); if (err.pw) setErr({ ...err, pw: undefined }); }} error={err.pw} hint={!err.pw ? 'Use 8 or more characters.' : undefined} onEnter={submit}/>

By continuing you agree to Muna’s{' '} Terms and{' '} Privacy Policy.

); } // ─── Sign in ──────────────────────────────────────────────────────────── function SignIn({ onBack, onSwitch, onDone }) { const [email, setEmail] = React.useState(''); const [pw, setPw] = React.useState(''); const [err, setErr] = React.useState({}); const submit = () => { const e = {}; if (!validateEmail(email)) e.email = 'That email looks off \u2014 let\u2019s try again.'; if (!pw) e.pw = 'Enter your password to continue.'; setErr(e); if (Object.keys(e).length === 0) onDone(); }; return (

New to Muna?{' '}

Welcome back

Pick up where you left off.

{ setEmail(v); if (err.email) setErr({ ...err, email: undefined }); }} error={err.email}/> { setPw(v); if (err.pw) setErr({ ...err, pw: undefined }); }} error={err.pw} onEnter={submit} trailing={ }/>

); } // ─── Confirmation ─────────────────────────────────────────────────────── function Done({ onRestart }) { const [shown, setShown] = React.useState(false); React.useEffect(() => { const r = setTimeout(() => setShown(true), 30); return () => clearTimeout(r); }, []); return (

You’re all set

Your account is ready. Next comes your five-minute screening — four photos and a few short questions.

); } // ─── Transition stage ─────────────────────────────────────────────────── function Stage({ activeKey, direction, render }) { const [items, setItems] = React.useState([{ key: activeKey, phase: 'idle' }]); const prev = React.useRef(activeKey); React.useEffect(() => { if (activeKey === prev.current) return; const from = prev.current; prev.current = activeKey; setItems([{ key: from, phase: 'leaving' }, { key: activeKey, phase: 'entering' }]); const t = setTimeout(() => setItems([{ key: activeKey, phase: 'idle' }]), 240); return () => clearTimeout(t); }, [activeKey]); return (

{items.map((it) => { const fwd = direction >= 0; let animation = 'none'; if (it.phase === 'entering') animation = `${fwd ? 'mh-enter-fwd' : 'mh-enter-back'} var(--dur-base) var(--ease-out) both`; if (it.phase === 'leaving') animation = `${fwd ? 'mh-leave-fwd' : 'mh-leave-back'} var(--dur-base) var(--ease-out) both`; return (

{render(it.key)}

); })}

); } window.MunaFlow = { ORDER, VALUE_PROPS, Splash, ValueProp, SignUp, SignIn, Done, Stage, DemoSheet };