/* global React */
const { useEffect, useRef, useState, useMemo } = React;
// ---------- Icons (inline, stroke style) ----------
const Icon = ({ name, size = 20, stroke = 1.6 }) => {
const common = {
width: size, height: size, viewBox: '0 0 24 24',
fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
strokeLinecap: 'round', strokeLinejoin: 'round'
};
const paths = {
arrow: <>,
check: ,
plus: <>,
clock: <>,
msg: ,
brain: <>,
receipt: <>,
chart: <>,
sparkles: <>,
file: <>,
chat: ,
book: <>,
inbox: <>,
bot: <>,
shield: ,
users: <>,
map: <>,
coin: <>,
layers: <>,
pin: <>,
list: <>,
eye: <>,
server: <>,
linkedin: <>,
instagram: <>,
youtube: <>,
};
return ;
};
// ---------- Reveal on scroll ----------
function Reveal({ children, className = '', as = 'div', delay = 0 }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) { setShown(true); io.disconnect(); }
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
const Tag = as;
return (
{children}
);
}
// ---------- Split-text headline ----------
// Optional props:
// highlight: substring to color in brand blue (must match exactly, full words)
// underline: single word inside the highlight (or anywhere) to underline
function SplitText({ text, as: Tag = 'h1', className = '', stagger = 40, baseDelay = 0, highlight, underline }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) { setShown(true); io.disconnect(); }
});
}, { threshold: 0.2 });
io.observe(el);
return () => io.disconnect();
}, []);
// Build word list with hl flag
let segments;
if (highlight && text.includes(highlight)) {
const idx = text.indexOf(highlight);
// Swallow any trailing punctuation (.,!?;:) right after the highlight so
// it stays glued to the last highlighted word instead of becoming a
// standalone word with a leading space.
let endIdx = idx + highlight.length;
while (endIdx < text.length && /[.,!?;:]/.test(text[endIdx])) endIdx++;
segments = [
{ text: text.slice(0, idx), hl: false },
{ text: text.slice(idx, endIdx), hl: true },
{ text: text.slice(endIdx), hl: false },
];
} else {
segments = [{ text, hl: false }];
}
const words = [];
segments.forEach(seg => {
if (!seg.text) return;
seg.text.split(' ').forEach(w => {
if (w === '') return;
words.push({ w, hl: seg.hl });
});
});
return (
{words.map((tok, i) => {
const stripped = tok.w.replace(/[.,!?;:]+$/, '');
const isUnderlined = underline && stripped === underline;
return (
{isUnderlined ? {tok.w} : tok.w}
{i < words.length - 1 ? ' ' : ''}
);
})}
);
}
// ---------- Count up ----------
function CountUp({ to, suffix = '', prefix = '', duration = 1700, decimals = 0 }) {
const ref = useRef(null);
const [v, setV] = useState(0);
useEffect(() => {
const el = ref.current;
if (!el) return;
let started = false;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting && !started) {
started = true;
io.disconnect();
const start = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - start) / duration);
const ease = 1 - Math.pow(1 - p, 3);
setV(to * ease);
if (p < 1) requestAnimationFrame(tick);
else setV(to);
};
requestAnimationFrame(tick);
}
});
}, { threshold: 0.4 });
io.observe(el);
return () => io.disconnect();
}, [to, duration]);
const display = decimals > 0 ? v.toFixed(decimals) : Math.round(v).toLocaleString();
return {prefix}{display}{suffix};
}
// Expose globally
Object.assign(window, { Icon, Reveal, SplitText, CountUp });