/* Resident guide — "How to" page. Step-by-step walkthrough for new users getting up to speed on OrthoVaultOS. Reuses the marketing site Nav + Footer and the same theme tokens, with a left-side TOC and numbered sections on the right. */ const GUIDE_SECTIONS = [ { id: 'getting-started', title: 'Getting started', body: [ 'Download OrthoVaultOS for macOS or Windows from the home page. The app is signed and notarized — no extra security prompts on either platform.', 'Create a free account and you\'re in — the free tier covers 1 surgeon and 1 procedure with no time limit, so you can try the full app on a real case before upgrading.', 'If you sign in, your library — procedures, steps, surgeon preferences, implants, evidence links, videos, and notes — syncs to the cloud and stays current across every device you use. Upgrade to Professional for cloud photo sync too.' ] }, { id: 'search-pick', title: 'Search and open a procedure', body: [ 'Hit ⌘K (Mac) or Ctrl+K (Windows) from anywhere to open Quick Search. Start typing — TKA, ACL, distal radius, whatever — to search across procedures, surgeons, steps, and files.', 'Click the result to open the procedure view, or browse the sidebar by subspecialty. Click the star on any procedure to pin it to Favorites for next time.', 'Don\'t see what you need? Use "+ New Procedure" in the sidebar to build one from scratch.' ] }, { id: 'surgeon-profile', title: 'Add a surgeon profile', body: [ 'Open Surgeons → "+ New Surgeon" and enter their name.', 'Each surgeon gets their own overrides on top of the standard template: preferred steps, instruments, implants, positioning, and post-op protocol — plus the pearls they always mention.', 'On the procedure view, pick the surgeon from the dropdown in the header and the whole panel reconfigures to their preferences.' ] }, { id: 'mid-case', title: 'Reference mid-case', body: [ 'Pull the iPad or scrubbed-in laptop within glancing distance and switch to OR Mode — a focused, read-only checklist view built for the operating room.', 'Tap a step to check it off as you go; toggle post-op items (weight-bearing, brace, PT, DVT prophylaxis) and TXA dosing in real time. A progress bar tracks how many steps are complete.', 'Positioning photos, implant references, and pearls are all one tab away — no need to switch apps or break sterile field.' ] }, { id: 'annotate', title: 'Annotate X-rays and papers', body: [ 'On the X-Rays tab, upload an image and click its annotate icon to open the pre-op planning editor — freehand draw, outline a fragment, add arrows or labels, and drag-place implant and clamp stamps with adjustable rotation and size. The original image is never modified.', 'Uploaded PDFs and Word docs open in a built-in viewer with highlight and note tools — drag over a passage to highlight it, or pin a note to a specific spot on the page. Both persist for next time.' ] }, { id: 'export-plan', title: 'Export and share your work', body: [ 'Save a procedure-surgeon combination as a reusable template from the Templates page — steps, overrides, instruments, implants, evidence links, positioning, and post-op protocol all bundle into one JSON file you can back up or hand off.', 'Use Borrow Template to pull specific sections from another surgeon\'s template into the one you\'re building, without overwriting the rest.', 'You can also export your entire library as a JSON file from Account → Data & Privacy — useful if you\'re moving institutions or just want a personal backup.' ] }, { id: 'pearls', title: 'Customize and capture pearls', body: [ 'Pearls are short, attributable tips — "tension the graft at 30° of flexion", "always start medial with this approach", etc.', 'After each case, log new pearls in the Pearls & Pitfalls tab and attribute them to the surgeon who taught them. The next resident on rotation walks in already knowing.', 'Pearls show up automatically when you open the same procedure with that surgeon selected.' ] }, { id: 'sync', title: 'Settings', body: [ 'Settings → Appearance lets you switch between light and dark mode — dark suits low-light OR use.', 'Settings → Cloud Sync shows your sync status and keeps your library current across your own devices when you\'re signed in. It doesn\'t share your library with other users — collaborative sharing with a co-resident is on the roadmap.', 'Settings → Backup & Restore (desktop) lets you save and restore a full backup snapshot on demand, as an extra safety net alongside cloud sync.' ] } ]; function ResidentGuideApp() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const accent = t.accent || '#b91c2c'; const theme = t.theme || 'light'; const isMobile = useIsMobile(); const [active, setActive] = React.useState(GUIDE_SECTIONS[0].id); React.useEffect(() => { document.body.setAttribute('data-theme', theme); return () => { document.body.removeAttribute('data-theme'); }; }, [theme]); // Track which section is closest to the top of the viewport. React.useEffect(() => { const obs = new IntersectionObserver((entries) => { const visible = entries.filter((e) => e.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top); if (visible[0]) setActive(visible[0].target.id); }, { rootMargin: '-20% 0px -60% 0px', threshold: 0 }); GUIDE_SECTIONS.forEach((s) => { const el = document.getElementById(s.id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, []); return (
); } ReactDOM.createRoot(document.getElementById('root')).render();