)}
);
}
/* ---------- PilotDashboard: Proof flagship-client frame (Realit AG, live — figure-free) ---------- */
function PilotDashboard({ copy }) {
const p = copy.proof;
return (
{p.pilotBoardTitle}
live
{p.pilotBoard.map((b) => (
{b.t}{b.s}
))}
{p.pilotCaption}
);
}
/* ---------- GodOSHero: the cinematic hero product (chat · business · money) ---------- */
function GodOSHero({ copy, alive = true }) {
const g = copy.god;
const aiText = useTyping(g.chatAI, 13, alive, 0);
return (
GODOS · CHAT + STIMME
{g.voiceTag}
{g.chatUser}
{aiText}▍
{g.chatSrc}
{g.voiceHint}
{g.bizTitle}
{g.bizItems.map((it) =>
{it}
)}
● {g.bizMeta}
{g.moneyTitle}
{g.cashback}
{g.moneyBalance}{g.moneyUnit}
{g.coinLabel}
{g.coinSub}
);
}
/* ---------- SystemsHero: the cinematic hero frame — shows what the SYSTEMS do
(live graphs · automations · build/grow), not a single product ---------- */
function SystemsHero({ copy, alive = true }) {
const s = copy.systems;
return (
{s.seeTitle}
live
{s.seeSub}
{s.seeTags.map((t) => {t})}
{s.actTitle}
{s.actItems.map((it, i) => (
{it}
))}
● {s.actMeta}
{s.growTitle}
{s.growSub}
{s.growFoot}
);
}
/* ---------- HERO: scale-then-narrate cinematic ---------- */
function Hero({ copy, motionOn = true }) {
const h = copy.hero;
const trackRef = useRef(null);
const stageRef = useRef(null);
const frameRef = useRef(null);
const [step, setStep] = useState(0);
const [alive, setAlive] = useState(!motionOn);
useEffect(() => {
if (!motionOn) { setAlive(true); setStep(0); return; }
setAlive(false);
const track = trackRef.current, stage = stageRef.current;
if (!track || !stage) return;
let raf = 0;
let frameH = (frameRef.current && frameRef.current.offsetHeight) || 560;
const apply = () => {
raf = 0;
const vh = window.innerHeight;
const rect = track.getBoundingClientRect();
const denom = track.offsetHeight - vh;
const hp = denom > 0 ? clamp01(-rect.top / denom) : 0;
const sp = smooth(hp, 0, 0.18);
const vg = smooth(hp, 0.04, 0.22);
const cp = smooth(hp, 0, 0.15);
const rel = smooth(hp, 0.90, 1);
// cap the full scale so the product fills ~80% but never taller than 72vh —
// this guarantees a clean band at the bottom for the narrate caption.
const fullScale = Math.max(0.7, Math.min(1, (0.76 * vh) / frameH));
const scale = (0.62 + (fullScale - 0.62) * sp) * (1 - 0.04 * rel);
// REST: frame top edge sits at ~80vh (peek = bottom 20vh, consistent at any height).
// FULL: ty -> 0 (flex-centered). frameH is the measured, unscaled layout height.
const tyRest = 0.30 * vh + 0.31 * frameH;
const ty = tyRest * (1 - sp);
const s = stage.style;
s.setProperty('--hp', hp.toFixed(4));
s.setProperty('--frame-scale', scale.toFixed(4));
s.setProperty('--frame-ty', ty.toFixed(1) + 'px');
s.setProperty('--vig', (vg * (1 - rel)).toFixed(4));
s.setProperty('--copy-op', (1 - cp).toFixed(4));
s.setProperty('--copy-y', (-44 * cp).toFixed(1) + 'px');
s.setProperty('--copy-blur', (5 * cp).toFixed(2) + 'px');
const st = hp < 0.22 ? 0 : hp < 0.46 ? 1 : hp < 0.70 ? 2 : 3;
setStep(prev => prev === st ? prev : st);
setAlive(prev => { const a = hp > 0.20; return prev === a ? prev : a; });
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(apply); };
const onResize = () => { frameH = (frameRef.current && frameRef.current.offsetHeight) || 560; onScroll(); };
apply();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onResize); if (raf) cancelAnimationFrame(raf); };
}, [motionOn]);
return (