// site-core.jsx — shared primitives for the landing page.
// Context, scroll reveal, viewport helper and brand marks. Everything the
// dark scroll-tour page (site-dark / site-scrollstage / site-scrollhint /
// site-video-app) needs from the old section library lives here.
/* ── Animation context ──────────────────────────────────────────────────── */
const AnimContext = React.createContext({
animChartDraw: true,
animCountUp: true,
animProgressRail: true,
animHeroParallax: true,
});
window.AnimContext = AnimContext;
/* ── Tweaks context ─────────────────────────────────────────────────────── */
const TweaksContext = React.createContext({
accentColor: '#2AB5A2',
headline: 'Track every dose.\nSee every result.',
subline: 'The companion app for your GLP-1 medication journey — dose logging, weight tracking, and side effect monitoring in one place.',
appStoreUrl: '#',
trialDays: 7,
});
window.TweaksContext = TweaksContext;
/* ── Scroll reveal ──────────────────────────────────────────────────────── */
function RevealOnScroll({ children, delay = 0, from = 'bottom' }) {
const ref = React.useRef(null);
const [vis, setVis] = React.useState(false);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight + 40) { setVis(true); return; }
const obs = new IntersectionObserver(
([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } },
{ threshold: 0.08, rootMargin: '0px 0px -32px 0px' }
);
obs.observe(el);
const t = setTimeout(() => { setVis(true); obs.disconnect(); }, 800);
return () => { obs.disconnect(); clearTimeout(t); };
}, []);
const hidden = from === 'bottom' ? 'translateY(28px)' : from === 'left' ? 'translateX(-28px)' : 'translateX(28px)';
return (
{children}
);
}
/* ── useIsMobile ────────────────────────────────────────────────────────── */
function useIsMobile(bp = 768) {
const [m, setM] = React.useState(window.innerWidth < bp);
React.useEffect(() => {
const fn = () => setM(window.innerWidth < bp);
window.addEventListener('resize', fn, { passive: true });
return () => window.removeEventListener('resize', fn);
}, [bp]);
return m;
}
/* ── Brand ──────────────────────────────────────────────────────────────── */
function AltheaLogo({ size = 32 }) {
return 
;
}
function AppStoreBadge({ dark = true, size = 'md', compact = false }) {
const { appStoreUrl, accentColor } = React.useContext(TweaksContext);
const bg = dark ? '#000' : '#fff';
const fg = dark ? '#fff' : '#000';
const border = dark ? 'none' : '1.5px solid rgba(0,0,0,0.12)';
if (compact) {
return (
Get
);
}
const pad = size === 'lg' ? '12px 24px 12px 20px' : '10px 20px 10px 16px';
const iconSz = size === 'lg' ? 26 : 22;
const titleSz = size === 'lg' ? 19 : 17;
return (
{ e.currentTarget.style.transform='scale(1.03)'; e.currentTarget.style.boxShadow='0 6px 20px rgba(0,0,0,0.14)'; }}
onMouseLeave={e => { e.currentTarget.style.transform='scale(1)'; e.currentTarget.style.boxShadow='none'; }}>
Download on the
App Store
);
}
Object.assign(window, { AnimContext, TweaksContext, RevealOnScroll, useIsMobile, AltheaLogo, AppStoreBadge });