/* global React, COPY, AppCtx, useApp, useReveal */ const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React; /* Helper — split title by \n into spans */ function Title({ tag = "h2", className = "x-display-lg", children }) { const Tag = tag; const parts = String(children).split("\n"); return {parts.map((l, i) => {l}{i < parts.length - 1 &&
})}; } /* ------------------------------------------------------------------ 1. BodyBatterySection — DARK tile · 3 step explanation "Your body is a battery." ------------------------------------------------------------------ */ function BodyBatterySection() { const { t } = useApp(); const ref = useReveal(); return (
{t.body.title}

{t.body.subtitle}

{t.body.steps.map((s, i) => (
{s.n}

{s.t}

{s.d}

))}
{t.body.quote.p}
— {t.body.quote.c}
); } /* ------------------------------------------------------------------ 2. PeptideSection — LIGHT (parchment) · 4200 genes counter ------------------------------------------------------------------ */ function PeptideSection() { const { t, locale } = useApp(); const ref = useReveal(); const [count, setCount] = useStateS(0); const target = parseInt(t.peptide.reset.replace(/[^0-9]/g, ""), 10) || 4200; const counterRef = useRefS(null); useEffectS(() => { if (!counterRef.current) return; let frameId = null; let isRunning = false; const runCount = () => { if (isRunning) return; isRunning = true; setCount(0); const dur = 1800; const start = performance.now(); const tick = (now) => { const p = Math.min(1, (now - start) / dur); const eased = 1 - Math.pow(1 - p, 3); setCount(Math.floor(eased * target)); if (p < 1) frameId = requestAnimationFrame(tick); else isRunning = false; }; frameId = requestAnimationFrame(tick); }; const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { runCount(); } else if (e.boundingClientRect.bottom < 0 || e.boundingClientRect.top > window.innerHeight) { // fully out of view — reset for next entry if (frameId) cancelAnimationFrame(frameId); isRunning = false; setCount(0); } }); }, { threshold: [0, 0.4] }); io.observe(counterRef.current); return () => { io.disconnect(); if (frameId) cancelAnimationFrame(frameId); }; }, [target]); const fmt = (n) => new Intl.NumberFormat(locale === "en" ? "en-US" : locale === "de" ? "de-DE" : "pl-PL").format(n); return (
{t.peptide.title}

{t.peptide.subtitle}

{fmt(count)}

{t.peptide.resetLabel}

{t.peptide.source}

    {t.peptide.benefits.map((b, i) => (
  • {b.t}
    {b.d}
    • ))}
); } /* ------------------------------------------------------------------ 3. AgeSection — LIGHT tile · animated decay curve ------------------------------------------------------------------ */ function AgeSection() { const { t } = useApp(); const ref = useReveal(); const svgRef = useRefS(null); const [drawn, setDrawn] = useStateS(false); useEffectS(() => { if (!svgRef.current) return; const io = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { setDrawn(true); } else if (e.boundingClientRect.bottom < 0 || e.boundingClientRect.top > window.innerHeight) { // reset for next entry — re-draw curve every time setDrawn(false); } }); }, { threshold: [0, 0.3] }); io.observe(svgRef.current); return () => io.disconnect(); }, []); return (
{t.age.title}

{t.age.subtitle}

{[0, 25, 50, 75, 100].map((v, i) => ( {v}% ))} {[0, 20, 30, 40, 50, 60, 80].map((a, i) => ( {a} ))} {t.age.points[0].age}: {t.age.points[0].drop} {t.age.points[1].age}: {t.age.points[1].drop}
{t.age.points.map((p, i) => (
{p.age}
{p.drop}

{p.label}

))}

{t.age.x39Line}

); } /* ------------------------------------------------------------------ 4. CompareSection — DARK tile · two columns ------------------------------------------------------------------ */ function CompareSection() { const { t } = useApp(); const ref = useReveal(); return (
{t.compare.title}

{t.compare.subtitle}

{t.compare.cols.map((c, i) => (
{c.tag}

{c.title}

    {c.items.map((it, j) =>
  • {it}
    • )}
))}
); } /* ------------------------------------------------------------------ 5. AuthoritySection — LIGHT tile · Dr VerHulst YT ------------------------------------------------------------------ */ function AuthoritySection() { const { t } = useApp(); const ref = useReveal(); const [loaded, setLoaded] = useStateS(false); const ytId = t.authority.ytId; return (
{t.authority.title}

{t.authority.subtitle}

setLoaded(true)} role="button" tabIndex={0} aria-label={t.authority.ytTitle} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") setLoaded(true); }} > {!loaded ? ( <> {t.authority.ytTitle} ) : (