/* === Zebra Insurtech components — Vortik redesign === */
const { useState, useEffect, useRef, useMemo } = React;
/* ---- Reveal on scroll ---- */
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
// If already in viewport on mount, show immediately (handles iframes/SSR/short pages).
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
setTimeout(() => setShown(true), delay);
return;
}
// Safety fallback in case IntersectionObserver never fires.
const fallback = setTimeout(() => setShown(true), 1200 + delay);
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setTimeout(() => setShown(true), delay); io.disconnect(); clearTimeout(fallback); }
}, { threshold: 0.1 });
io.observe(el);
return () => { io.disconnect(); clearTimeout(fallback); };
}, [delay]);
return {children};
}
/* ---- Count-up ---- */
function CountUp({ to, prefix = "", suffix = "", decimals = 0, duration = 1500 }) {
const ref = useRef(null);
const [val, setVal] = useState(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) { setVal(to); return; }
const run = () => {
const start = performance.now();
const tick = (now) => {
const t = Math.min(1, (now - start) / duration);
const ease = 1 - Math.pow(1 - t, 3);
setVal(to * ease);
if (t < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
};
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) { run(); return; }
const fallback = setTimeout(run, 1500);
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { run(); io.disconnect(); clearTimeout(fallback); }
}, { threshold: 0.4 });
io.observe(el);
return () => { io.disconnect(); clearTimeout(fallback); };
}, [to, duration]);
const formatted = decimals > 0
? val.toFixed(decimals)
: Math.round(val).toLocaleString('en-US');
return {prefix}{formatted}{suffix};
}
/* ---- Brand mark (stylized zebra stripes) ---- */
function BrandMark({ size = 26, color = "var(--orange)" }) {
return (
);
}
/* ---- Stripe divider ---- */
function StripeDivider({ color = "var(--orange)", opacity = 0.12 }) {
return (
);
}
/* ---- Check icon ---- */
function Check({ size = 16, color = "var(--orange)" }) {
return (
);
}
/* ---- Icons used in solution / dashboard ---- */
function IconAPI({ size = 28 }) {
return (
);
}
function IconDash({ size = 28 }) {
return (
);
}
function IconCash({ size = 28 }) {
return (
);
}
function IconArrow({ size = 14 }) {
return (
);
}
/* ---- Sparkline / area chart svg (dashboard) ---- */
function AreaChart({ data, color = "#FF6B1A", height = 180 }) {
const W = 600, H = height, pad = 24;
const max = Math.max(...data), min = Math.min(...data);
const pts = data.map((v, i) => {
const x = pad + (i / (data.length - 1)) * (W - pad * 2);
const y = pad + (1 - (v - min) / (max - min || 1)) * (H - pad * 2);
return [x, y];
});
const path = pts.map(([x, y], i) => (i === 0 ? `M${x},${y}` : `L${x},${y}`)).join(" ");
const area = `${path} L${pts[pts.length-1][0]},${H-pad} L${pts[0][0]},${H-pad} Z`;
return (
);
}
function BarChart({ data, color = "#FF6B1A", height = 180 }) {
const W = 280, H = height, pad = 18;
const max = Math.max(...data);
const bw = (W - pad * 2) / data.length;
return (
);
}
function DonutChart({ value = 78, color = "#00D27A", size = 130 }) {
const r = 50;
const c = 2 * Math.PI * r;
const off = c - (value/100) * c;
return (
);
}
/* ---- API isometric svg (placeholder) ---- */
function ApiIso() {
return (
);
}
/* expose */
Object.assign(window, {
Reveal, CountUp, BrandMark, StripeDivider, Check,
IconAPI, IconDash, IconCash, IconArrow,
AreaChart, BarChart, DonutChart, ApiIso,
});