/* Hero — split 55/45: left pitch + right live mini-dashboard */ // Scroll-reveal hook — adds .in when element scrolls into view function useReveal() { const ref = React.useRef(null); React.useEffect(() => { if (!ref.current) return; const el = ref.current; if (!('IntersectionObserver' in window)) { el.classList.add('in'); return; } const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } }); }, { threshold: 0.15, rootMargin: '0px 0px -60px 0px' }); io.observe(el); return () => io.disconnect(); }, []); return ref; } window.useReveal = useReveal; // Animated number — counts up to a value when mounted/visible function CountUp({ to, prefix = "", suffix = "", decimals = 0, duration = 1100, style = {}, className = "" }) { const [val, setVal] = React.useState(0); const ref = React.useRef(null); const started = React.useRef(false); React.useEffect(() => { if (!ref.current) return; const start = () => { if (started.current) return; started.current = true; const t0 = performance.now(); const ease = (x) => 1 - Math.pow(1 - x, 3); const tick = (now) => { const p = Math.min(1, (now - t0) / duration); setVal(to * ease(p)); if (p < 1) requestAnimationFrame(tick); }; requestAnimationFrame(tick); }; if (!('IntersectionObserver' in window)) { start(); return; } const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { start(); io.disconnect(); } }), { threshold: 0.4 }); io.observe(ref.current); return () => io.disconnect(); }, [to, duration]); return {prefix}{val.toFixed(decimals)}{suffix}; } window.CountUp = CountUp; function HeroMiniDashboard({ lang }) { const [tick, setTick] = React.useState(0); const [pulseTick, setPulseTick] = React.useState(0); React.useEffect(() => { const id = setInterval(() => setTick(t => t + 1), 4200); return () => clearInterval(id); }, []); React.useEffect(() => { const id = setInterval(() => setPulseTick(t => t + 1), 2800); return () => clearInterval(id); }, []); const months = ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"]; const heights = [52, 61, 58, 74, 92, 81]; const spend = [0.62, 0.73, 0.69, 0.89, 1.10, 0.97]; // €M per month const deltas = ["+12.4%", "+11.9%", "+13.1%"]; const delta = deltas[tick % deltas.length]; const [hoverBar, setHoverBar] = React.useState(null); return (
{/* Scan-line sweep */}
LIVE · CATEGORY_PHARMACY_SK
{lang === "SK" ? "CELKOVÝ SPEND KONKURENCIE · YTD" : "TOTAL COMPETITOR SPEND · YTD"}
{delta}
YoY
{lang === "SK" ? "MESAČNÝ SPEND · SEZONALITA" : "MONTHLY SPEND · SEASONALITY"}
H2 2025
{heights.map((h, i) => { const isPeak = i === heights.length - 1; const isHover = hoverBar === i; const active = isHover || (hoverBar === null && isPeak); return (
setHoverBar(i)} onMouseLeave={() => setHoverBar(null)} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 8, justifyContent: "flex-end", height: "100%", cursor: "pointer", position: "relative", }}>
{isPeak && ( )} {months[i]}
); })} {hoverBar !== null && (
{months[hoverBar]} · €{spend[hoverBar].toFixed(2)}M
)}
); } function MiniStat({ k, v, bar, color }) { return (
{k} {v}
); } function Hero({ lang, heroVariant }) { const t = T[lang]; const v = HERO_VARIANTS[heroVariant] || HERO_VARIANTS.CATEGORY; const copy = v[lang] || v.EN; const { openContact } = useContact(); return (
{copy.eyebrow}

{copy.h1}

{copy.sub}

openContact()}>{t.cta.demo} openContact(null, "quote")}>{t.cta.quote}
{t.proof.map((p) => )}
); } function ProofStat({ v, k }) { return (
{v} {k}
); } Object.assign(window, { Hero, HeroMiniDashboard, ProofStat });