// landing-core.jsx — shared helpers for the Ssup landing page.
// Reveal (scroll-in), PhoneMock (scaled real app screen), StoreButtons, parallax + nav hooks.
const { useState, useEffect, useRef } = React;
// ── scroll-in reveal (manual viewport check + guaranteed final
// state). IntersectionObserver and the CSS transition timeline
// can be paused inside preview iframes, so we (a) compute
// in-view ourselves and (b) pin the final visible state via
// setTimeout, which always runs. Capable browsers still animate. ──
function Reveal({ children, delay, as = 'div', className = '', eager, style }) {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const force = () => { el.style.transition = 'none'; el.style.opacity = '1'; el.style.transform = 'none'; };
if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
setSeen(true); force(); return;
}
let raf = 0, done = false, pin = 0;
const cleanup = () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
window.removeEventListener('load', onScroll);
cancelAnimationFrame(raf);
};
const reveal = () => {
if (done) return;
done = true;
setSeen(true);
cleanup();
// guarantee the final visible state even if the CSS transition
// timeline never advances (happens inside some preview iframes)
pin = setTimeout(force, 820);
};
const check = () => {
if (done) return;
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.92 && r.bottom > -40) reveal();
};
const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(check); };
if (eager) {
requestAnimationFrame(reveal);
return () => { clearTimeout(pin); cleanup(); };
}
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
window.addEventListener('load', onScroll);
requestAnimationFrame(check);
const t1 = setTimeout(check, 160);
const t2 = setTimeout(check, 480);
const t3 = setTimeout(check, 900);
// safety net: never leave content stuck hidden if scroll never fires
const fb = setTimeout(reveal, 2000);
return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); clearTimeout(fb); clearTimeout(pin); cleanup(); };
}, []);
const Tag = as;
const cls = `lp-reveal ${delay ? 'lp-d' + delay : ''} ${eager ? 'lp-eager' : ''} ${seen ? 'lp-in' : ''} ${className}`;
return {children};
}
// ── parallax: translateY by scroll, gated to in-view ────────
function useParallax(speed = 0.08) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el || (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches)) return;
// capture the element's resting transform (e.g. CSS rotation) so we
// append parallax to it instead of clobbering it
const computed = getComputedStyle(el).transform;
const base = (el.dataset.baseTransform && el.dataset.baseTransform.trim())
? el.dataset.baseTransform
: (computed && computed !== 'none' ? computed : '');
let raf = 0;
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => {
const rect = el.getBoundingClientRect();
const mid = rect.top + rect.height / 2 - window.innerHeight / 2;
el.style.transform = `${base} translateY(${(-mid * speed).toFixed(1)}px)`;
});
};
// note: do NOT apply on mount — keep the composition at its designed
// position until the user actually scrolls (avoids a load-time jump)
window.addEventListener('scroll', onScroll, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); };
}, [speed]);
return ref;
}
// ── floating phone mock — renders a real app screen scaled ──
function PhoneMock({ children, width = 300, className = '', style = {}, parallax, glow }) {
const pref = useParallax(typeof parallax === 'number' ? parallax : 0.05);
const ref = parallax ? pref : null;
return (
{glow ?
: null}
{children}