// Primitives, icons, hooks for Vivaz landing
const { useState, useEffect, useRef, useCallback } = React;
function Diamond({ size = 12, color = 'var(--orange)' }) {
return (
);
}
function Arrow({ size = 16 }) {
return (
);
}
function Plus({ size = 14 }) {
return (
);
}
function ChevronLeft({ size = 18 }) {
return (
);
}
function ChevronRight({ size = 18 }) {
return (
);
}
function WhatsappIcon() {
return (
);
}
// hook: detect window scroll, return true when scrolled past threshold
function useScrolled(threshold = 12) {
const [s, setS] = useState(false);
useEffect(() => {
const onScroll = () => setS(window.scrollY > threshold);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, [threshold]);
return s;
}
// hook: intersection-observer based reveal
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
el.classList.add('reveal');
let done = false;
const show = () => {
if (done) return;
done = true;
el.classList.add('in');
};
// Fallback: always show after a short delay even if IO never fires
const fallback = setTimeout(show, 600);
let io;
try {
io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
show();
io && io.unobserve(el);
}
});
},
{ threshold: 0.08, rootMargin: '0px 0px -40px 0px' }
);
io.observe(el);
// If element is already in viewport on mount, IO sometimes fires before next paint — also check synchronously
requestAnimationFrame(() => {
const r = el.getBoundingClientRect();
if (r.top < (window.innerHeight || 800) && r.bottom > 0) show();
});
} catch (_) {
show();
}
return () => { clearTimeout(fallback); if (io) io.disconnect(); };
}, []);
return ref;
}
function Reveal({ children, as = 'div', delay = 0, style, className }) {
const ref = useReveal();
const Tag = as;
return (
{children}
);
}
// Reveal variant: clip-path wipe (left→right)
function RevealWipe({ children, delay = 0, className }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
el.style.clipPath = 'inset(0 100% 0 0)';
el.style.transition = `clip-path 0.85s cubic-bezier(0.16,1,0.3,1) ${delay}ms`;
let done = false;
const show = () => {
if (done) return;
done = true;
el.style.clipPath = 'inset(0 0% 0 0)';
};
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { show(); io.unobserve(el); } }, { threshold: 0.1 });
io.observe(el);
requestAnimationFrame(() => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight) show();
});
return () => io.disconnect();
}, [delay]);
return {children}
;
}
// Reveal variant: scale up from 0.92
function RevealScale({ children, delay = 0 }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
el.style.opacity = '0';
el.style.transform = 'scale(0.92) translateY(16px)';
el.style.transition = `opacity 0.7s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.7s cubic-bezier(0.16,1,0.3,1) ${delay}ms`;
let done = false;
const show = () => {
if (done) return; done = true;
el.style.opacity = '1'; el.style.transform = 'none';
};
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { show(); io.unobserve(el); } }, { threshold: 0.1 });
io.observe(el);
requestAnimationFrame(() => { const r = el.getBoundingClientRect(); if (r.top < window.innerHeight) show(); });
return () => io.disconnect();
}, [delay]);
return {children}
;
}
// Animated counter for stat numbers
function CountUp({ value, suffix = '', duration = 1400 }) {
const [displayed, setDisplayed] = useState('0');
const ref = useRef(null);
const started = useRef(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting && !started.current) {
started.current = true;
io.unobserve(el);
const raw = value.replace(/[^0-9]/g, '');
const prefix = value.match(/^[^0-9]*/)?.[0] || '';
const target = parseInt(raw, 10);
if (isNaN(target)) { setDisplayed(value); return; }
const start = performance.now();
const tick = (now) => {
const p = Math.min((now - start) / duration, 1);
const ease = 1 - Math.pow(1 - p, 4);
const cur = Math.round(ease * target);
setDisplayed(prefix + cur + suffix);
if (p < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
}, { threshold: 0.2 });
io.observe(el);
return () => io.disconnect();
}, [value, suffix, duration]);
return {displayed};
}
// Parallax wrapper (subtle vertical shift on scroll)
function Parallax({ children, speed = 0.08, className }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const onScroll = () => {
const rect = el.getBoundingClientRect();
const center = rect.top + rect.height / 2 - window.innerHeight / 2;
el.style.transform = `translateY(${center * speed}px)`;
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, [speed]);
return {children}
;
}
Object.assign(window, {
Diamond, Arrow, Plus, ChevronLeft, ChevronRight, WhatsappIcon,
useScrolled, useReveal, Reveal, RevealWipe, RevealScale, CountUp, Parallax,
});