/* global React, useState, cn, Icons, useInView, useInViewOnce, useCountUp, window */ /* ============================================================ LANDING — deep demos #5: Health & sleep, Goals (SMART), Daily planning ritual, Reviews ============================================================ */ /* ---------- Health & sleep & chronotype ---------- */ function HealthSleepDemo({ t }) { const h = t.health; const [tab, setTab] = useState(0); const bars7 = [0.55, 0.7, 0.5, 0.8, 0.62, 0.74, 0.95]; const [srcOn, setSrcOn] = useState(() => h.sources.map((s) => s.on)); const [syncMsg, setSyncMsg] = useState(h.synced); const toggleSrc = (i) => setSrcOn((a) => a.map((v, k) => (k === i ? !v : v))); const syncNow = () => setSyncMsg(h.sync.just); return (
{/* header */}
{h.tag.split(" · ")[0]}
{syncMsg}
{/* tabs */}
{h.tabs.map((tb, i) => ( ))}
{tab === 0 && (
{h.vitals.map((v) => (
{React.createElement(Icons[v.icon] || Icons.Activity, { size: 11 })} {v.label}
{v.v} {v.unit && {v.unit}}
{v.sub}
{bars7.map((b, i) => (
))}
))}
)} {tab === 1 && (
{[["Avg duration", "7h 18", "rec. 7–9h"], ["Bedtime ±", "24 min", "regular"], ["Quality", "Good", "73%"]].map(([l, v, s], i) => (
{l}
{v}
{s}
))}
{[7.5, 6.8, 7.2, 8.1, 6.5, 7.4, 7.4].map((v, i) => (
))}
last 7 nights · duration + quality
)} {tab === 2 && (
{h.chronotypes.map((ct) => { const Ic = Icons[ct.icon] || Icons.Sun; return (
{ct.n}{ct.on && }
{ct.d}
{ct.hrs}
); })}
)} {/* AI recovery suggestion */}
{h.ai}{h.aiTime}.
{/* device & phone sync */}
{h.sync.label}
{h.sources.map((s, i) => ( ))}
{h.sync.auto}
); } /* ---------- Goals: progress + SMART badges + linked habit ---------- */ /* One goal row — current value count-ups in sync with the bar fill, and both reset to 0 when the section leaves view (seen=false) so they replay on re-entry. Extracted so useCountUp obeys the rules of hooks. */ function GoalRow({ goal, gi, seen, g }) { const cur = useCountUp(goal.cur, seen, 1000 + gi * 140); // drives BOTH the number and the bar const pct = Math.min(100, (cur / goal.max) * 100); // JS-animated width — no fragile CSS transition/delay return (
{goal.t}
{goal.cat}
{Math.round(cur)} /{goal.max} {goal.unit}
{g.smart.map((sm, si) => ( {sm} ))}
{goal.linked && ( {goal.linked} )}
); } function GoalsProDemo({ t }) { const g = t.goalsPro; const [ref, seen] = useInViewOnce(0.3); return (
{g.items.map((goal, gi) => )}
); } /* ---------- Daily planning: 6-step ritual on YOUR tasks ---------- */ function DailyPlanningDemo({ t }) { const d = t.daily; const q = t.matrix.quadrants; const [step, setStep] = useState(0); const icons = [Icons.Plus, Icons.Clock, Icons.Layers, Icons.Grid, Icons.Calendar, Icons.Pen]; const ESTS = ["15m", "30m", "1h", "2h"]; const QC = ["0 84% 60%", "263 70% 60%", "217 91% 60%", "215 16% 55%"]; const QK = ["do", "plan", "delegate", "drop"]; const [tasks, setTasks] = useState([ { id: 1, label: "Write the Q2 deck", est: 2, q: 0 }, { id: 2, label: "Reply to Léa", est: 0, q: 1 }, { id: 3, label: "Gym", est: 2, q: 1 }, ]); const [draft, setDraft] = useState(""); const nextId = useRef(4); const add = () => { const v = draft.trim(); if (!v) return; setTasks((ts) => [...ts, { id: nextId.current++, label: v, est: 1, q: 1 }]); setDraft(""); }; const remove = (id) => setTasks((ts) => ts.filter((x) => x.id !== id)); const cycleEst = (id) => setTasks((ts) => ts.map((x) => (x.id === id ? { ...x, est: (x.est + 1) % ESTS.length } : x))); const cycleQ = (id) => setTasks((ts) => ts.map((x) => (x.id === id ? { ...x, q: (x.q + 1) % 4 } : x))); return (
{/* step rail */}
{d.steps.map((s, i) => ( {i < d.steps.length - 1 &&
} ))}
0{step + 1}/06 {d.steps[step].k} {d.steps[step].d}
{/* STEP 0 — add your own tasks */} {step === 0 && (
setDraft(e.target.value)} onKeyDown={(e) => e.key === "Enter" && add()} placeholder={d.placeholder} className="flex-1 h-8 rounded-[7px] border border-[hsl(var(--input))] bg-[hsl(var(--background))] px-2.5 text-[12px] focus:outline-none focus:ring-2 focus:ring-[hsl(var(--ring))]" />
{tasks.map((x) => (
{x.label}
))} {tasks.length === 0 &&
{d.placeholder}
}
)} {/* STEP 1 — estimate each task */} {step === 1 && (
{tasks.map((x) => (
{x.label}
))} {!tasks.length && — add tasks in step 01 —}
)} {/* STEP 2 — fill with habits & events */} {step === 2 && (
{["+ Meditation (habit)", "+ Stand-up 09:00", "+ Lunch 12:30"].map((x, i) => (
{x}
))}
+ {tasks.length} {d.steps[0].k.toLowerCase()} tasks
)} {/* STEP 3 — prioritize each task (tap to cycle quadrant) */} {step === 3 && (
{tasks.map((x) => (
{x.label}
))}
)} {/* STEP 4 — schedule: tasks become blocks */} {step === 4 && (
{tasks.map((x) => (
{x.label} {ESTS[x.est]}
))} {!tasks.length && — nothing to schedule —}
)} {/* STEP 5 — document */} {step === 5 && (
{tasks.length} tasks planned · {tasks.filter((x) => x.q === 0).length} for today.
"{tasks[0]?.label || "Deep work"} first, then the rest."
)}
{d.addedNote}
); } /* ---------- Reviews + tips ---------- */ function ReviewsGrid({ t }) { const r = t.reviews; return (
{r.items.map((rv, i) => (
{React.createElement(Icons[rv.icon] || Icons.Users, { size: 18, className: "text-white" })}
{rv.name}
{rv.role}
{[0,1,2,3,4].map((s) => )}

{rv.text}

{rv.tip}
))}
); } Object.assign(window, { HealthSleepDemo, GoalsProDemo, DailyPlanningDemo, ReviewsGrid });