// Shared data + utilities used by both variants function useIsMobile(){ const [isMobile, setIsMobile] = React.useState( typeof window !== "undefined" ? window.innerWidth < 768 : false ); React.useEffect(()=>{ const mq = window.matchMedia("(max-width: 767px)"); const onChange = (e) => setIsMobile(e.matches); if (mq.addEventListener) mq.addEventListener("change", onChange); else mq.addListener(onChange); return () => { if (mq.removeEventListener) mq.removeEventListener("change", onChange); else mq.removeListener(onChange); }; }, []); return isMobile; } window.useIsMobile = useIsMobile; const FAQ_ITEMS = [ {q:"Why is a supplement company telling me to do bloodwork?", a:"Because the people who take Genesis seriously tend to care about their numbers too. Bloodwork and supplementation are two separate commitments made by the same kind of person. We recommend the bloodwork partner we evaluated and would use ourselves."}, {q:"How do I prepare, and how long until I get results?", a:"Most panels require an 8 to 12 hour fast. Water is fine. Book the earliest available appointment at your nearest Quest Diagnostics location. Vanguard's doctor review typically returns results within 3 to 7 business days, delivered via magic link to your Vanguard dashboard."}, {q:"Will this show whether Genesis is working?", a:"Not directly. Genesis was built to help you feel better, and the markers that move most subjectively (energy, focus, sleep quality) do not all have one to one bloodwork correlates. Bloodwork tells you what is happening in your body across a broader set of markers than any supplement stack can meaningfully move. Treat the two as companions. Same audience, different jobs."}, {q:"Do I have to go in person?", a:"Yes. Vanguard uses the Quest Diagnostics network with 4,000+ locations across the US. Same day appointments, walk ins welcome, 15 minute visit. The upside is a real phlebotomist draw rather than a finger prick approximation, which matters for accuracy on most panels."}, {q:"Do you get paid if I use GENESIS10?", a:"Yes. Vanguard pays Genesis a commission when you use the link. We flagged this in the transparency section above. Genesis would recommend Vanguard either way."}, ]; const PROOF_ITEMS = [ {k:"4,000+", v:"Quest Diagnostics Locations"}, {k:"Doctor", v:"Reviewed Results"}, {k:"Transparent", v:"Per-Test Pricing"}, {k:"HSA / FSA", v:"Reimbursement Eligible"}, {k:"15-Min", v:"Walk-In Visit"}, {k:"GENESIS10", v:"10% Off Every Panel"}, ]; const VANGUARD_FACTS = [ {k:"Lab Network", v:"4,000+ Quest Diagnostics locations nationwide"}, {k:"Results", v:"Doctor-reviewed, delivered via magic link"}, {k:"Pricing", v:"Transparent per-test pricing. No insurance billing."}, {k:"Visit", v:"Same-day appointments, walk-ins welcome, 15-minute draw"}, {k:"Payment", v:"HSA and FSA reimbursement eligible"}, {k:"Home Base", v:"Santa Rosa, CA ยท @labs_vanguard"}, ]; const COMPETITORS = ["Marek Health","Function Health","Inside Tracker","Hone"]; // A tiny component for the hero reference-range data visualization. // Shows a set of marker rows, each with an "optimal" band and a dot that settles inside it. function ReferenceRangeChart({ variant }){ const isMobile = window.useIsMobile ? window.useIsMobile() : false; const mono = variant === "B" ? "'JetBrains Mono', monospace" : "Inter"; const gold = variant === "B" ? "#C4A265" : "#D4AF37"; const dusk = "#338FB1"; const fg = variant === "B" ? "rgba(245,245,235,0.9)" : "rgba(245,245,245,0.9)"; const dim = variant === "B" ? "rgba(245,245,235,0.35)" : "rgba(245,245,245,0.35)"; const markers = [ {label:"TESTOSTERONE", unit:"ng/dL", low:0.32, hi:0.78, target:0.18, range:"[264-916]", state:"low"}, {label:"FREE T", unit:"pg/mL", low:0.40, hi:0.82, target:0.70, range:"[8.7-25.1]", state:"in"}, {label:"SHBG", unit:"nmol/L",low:0.20, hi:0.60, target:0.34, range:"[19-76]", state:"in"}, {label:"ESTRADIOL", unit:"pg/mL", low:0.25, hi:0.65, target:0.48, range:"[7-42]", state:"in"}, {label:"VITAMIN D", unit:"ng/mL", low:0.45, hi:0.85, target:0.28, range:"[30-100]", state:"low"}, {label:"HBA1C", unit:"%", low:0.10, hi:0.40, target:0.56, range:"[< 5.7]", state:"high"}, {label:"APOB", unit:"mg/dL", low:0.15, hi:0.55, target:0.72, range:"[< 90]", state:"high"}, {label:"HS-CRP", unit:"mg/L", low:0.05, hi:0.35, target:0.22, range:"[< 1.0]", state:"in"}, ]; const [t, setT] = React.useState(0); React.useEffect(()=>{ let f; let start; const tick = (ts) => { if (!start) start = ts; const p = Math.min(1, (ts - start)/1400); setT(p); if (p < 1) f = requestAnimationFrame(tick); }; f = requestAnimationFrame(tick); return ()=>cancelAnimationFrame(f); }, []); const ease = (x) => 1 - Math.pow(1-x, 3); return (
{markers.map((m,i)=>{ const delay = i*0.06; const p = Math.max(0, Math.min(1, ease((t-delay)/(1-delay)))); const x = m.target * p + 0.05*(1-p); const rowBg = variant === "B" ? "rgba(255,255,255,0.015)" : "rgba(255,255,255,0.02)"; return (
{m.label}
{/* optimal band */}
{/* ticks */}
{/* dot */} {(() => { const dotColor = m.state === "high" ? "#c4604a" : m.state === "low" ? "#4a8ec4" : gold; return (
); })()}
{m.range}
); })}
); } window.FAQ_ITEMS = FAQ_ITEMS; window.PROOF_ITEMS = PROOF_ITEMS; window.VANGUARD_FACTS = VANGUARD_FACTS; window.COMPETITORS = COMPETITORS; window.ReferenceRangeChart = ReferenceRangeChart;