/* global React */
const { useState, useEffect, useRef } = React;
// Brand mark SVG (logo shapes)
const BrandMark = ({ size = 28, className = "" }) => (
);
// Simple check icon
const Check = ({ color = "#6FAF2A", size = 16 }) => (
);
// Small shape icons for brand mark decoration
const ShapeCircle = ({ color, size = 22 }) => (
);
const ShapeTri = ({ color, size = 22 }) => (
);
// Scroll reveal wrapper
const Reveal = ({ children, delay = 0, as: Tag = 'div', ...props }) => {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setShown(true); io.disconnect(); }
}, { threshold: 0.12 });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{children}
);
};
// Animated count-up
const Count = ({ to, suffix = '', duration = 1200, decimals = 0 }) => {
const ref = useRef(null);
const [val, setVal] = useState(0);
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;
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(to * eased);
if (p < 1) requestAnimationFrame(tick);
else setVal(to);
};
requestAnimationFrame(tick);
}
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
const displayed = decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString('en-US');
return {displayed}{suffix};
};
// Small line icons for pricing feature lists
const FEAT_ICON_PATHS = {
cal: <>,
card: <>,
globe: <>,
key: <>,
link: <>,
home: <>,
chart: <>,
users: <>,
sparkle: <>,
heart: <>,
};
const FeatIcon = ({ name, size = 16 }) => (
);
Object.assign(window, { BrandMark, Check, ShapeCircle, ShapeTri, Reveal, Count, FeatIcon });