/* =========================================================
Shared components & hooks
========================================================= */
const { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } = React;
/* ---------- Logo wordmark ---------- */
function Wordmark({ size = 22, color = 'currentColor' }) {
return (
e
ecomlifters
);
}
/* ---------- Hugeicons-style SVG icon set ---------- */
const Icon = {
Arrow: ({ size = 14, rotate = -45 }) => (
),
ArrowDown: ({ size = 14 }) => (
),
Plus: ({ size = 14 }) => (
),
Check: ({ size = 14 }) => (
),
X: ({ size = 14 }) => (
),
Star: ({ size = 14 }) => (
),
Play: ({ size = 14 }) => (
),
TrendUp: ({ size = 14 }) => (
),
TrendDown: ({ size = 14 }) => (
),
Dot: () => ,
Calendar: ({ size = 14 }) => (
),
Globe: ({ size = 14 }) => (
),
Mail: ({ size = 14 }) => (
),
Phone: ({ size = 14 }) => (
),
Location: ({ size = 14 }) => (
),
};
/* ---------- Reveal on scroll ---------- */
function useReveal(threshold = 0.12) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { el.classList.add('in'); io.disconnect(); }
}, { threshold });
io.observe(el);
return () => io.disconnect();
}, [threshold]);
return ref;
}
function Reveal({ children, delay = 0, as: As = 'div', className = '', style = {}, ...rest }) {
const ref = useReveal();
return (
{children}
);
}
/* ---------- Animated counter (counts when in view) ---------- */
function Counter({ to, prefix = '', suffix = '', duration = 1800, 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 t0 = performance.now();
const tick = (t) => {
const k = Math.min(1, (t - t0) / duration);
const eased = 1 - Math.pow(1 - k, 3);
setVal(to * eased);
if (k < 1) requestAnimationFrame(tick);
};
requestAnimationFrame(tick);
}
}, { threshold: 0.3 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
const formatted = decimals
? val.toFixed(decimals)
: Math.round(val).toLocaleString('en-US');
return {prefix}{formatted}{suffix};
}
/* ---------- Sparkline ---------- */
function Sparkline({ values, width = 120, height = 36, color = 'var(--green)', fill = true, strokeWidth = 1.6 }) {
const min = Math.min(...values), max = Math.max(...values);
const range = max - min || 1;
const stepX = width / (values.length - 1);
const pts = values.map((v, i) => [i * stepX, height - 4 - ((v - min) / range) * (height - 8)]);
const d = pts.map((p, i) => `${i ? 'L' : 'M'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
const area = `${d} L${width},${height} L0,${height} Z`;
const gid = useMemo(() => 'spk' + Math.random().toString(36).slice(2, 8), []);
return (
);
}
/* ---------- Bar mini chart ---------- */
function BarChart({ data, width = 120, height = 36, color = 'var(--green)', bg = 'var(--hairline)' }) {
const max = Math.max(...data) || 1;
const bw = width / data.length;
return (
);
}
/* ---------- Buttons ---------- */
function BtnDark({ children = 'Call Us', icon = true, onClick, style }) {
return (
);
}
function BtnGreen({ children = 'Instant Response', icon = true, onClick, style }) {
return (
);
}
function BtnGhost({ children = 'Learn more', icon = true, onClick, style }) {
return (
);
}
/* ---------- Sticky annotation sticker ---------- */
function Sticker({ children, src, rotate = -3, style }) {
return (
{children}
{src && — {src}}
);
}
/* ---------- Image placeholder (subtle stripes + monospace caption) ---------- */
function Placeholder({ label = 'image', height = 200, ratio, style, color = 'var(--green-deep)' }) {
return (
[ {label} ]
);
}
/* ---------- Avatar circle (initials + tinted bg) ---------- */
function Avatar({ name, size = 32, hue }) {
const initials = name.split(' ').map(w => w[0]).slice(0, 2).join('').toUpperCase();
const h = hue ?? (name.charCodeAt(0) * 17 % 360);
return (
{initials}
);
}
/* ---------- Section header ---------- */
function SectionHeader({ eyebrow, title, lead, align = 'left', children }) {
return (
{eyebrow &&
{eyebrow}}
{title &&
{title}
}
{lead &&
{lead}
}
{children}