// Small reusable UI bits.
const { useState, useEffect, useRef, useMemo } = React;
function cx(...a) { return a.filter(Boolean).join(' '); }
// Subtle vertical reveal on scroll using IntersectionObserver
function Reveal({ children, delay = 0, className = '' }) {
const ref = useRef(null);
const [on, setOn] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
const io = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) { setOn(true); io.disconnect(); } });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
io.observe(el);
return () => io.disconnect();
}, []);
return (
{children}
);
}
// Eyebrow row: dot + label
function Eyebrow({ children, className = '' }) {
return (
{children}
);
}
// Section wrapper
function Section({ id, children, className = '', inner = '' }) {
return (
);
}
// Glossy button
function Button({ children, as: As = 'button', variant = 'primary', className = '', ...rest }) {
if (variant === 'primary') {
return (
{children}
);
}
if (variant === 'ghost') {
return (
{children}
);
}
return null;
}
// Card surface (dark first, light fallback via CSS var overrides below)
function Card({ children, className = '', pad = 'p-6', halo = false }) {
return (
{halo && }
{children}
);
}
// Chip
function Chip({ children, className = '' }) {
return (
{children}
);
}
// Sparkline (takes array of numbers)
function Sparkline({ data, className = '', color = '#00FF88', fill = true }) {
const w = 120, h = 36, pad = 2;
const max = Math.max(...data, 1);
const min = Math.min(...data, 0);
const step = (w - pad * 2) / (data.length - 1);
const points = data.map((v, i) => {
const x = pad + i * step;
const y = h - pad - ((v - min) / Math.max(max - min, 1)) * (h - pad * 2);
return [x, y];
});
const path = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
const area = `${path} L${w - pad},${h - pad} L${pad},${h - pad} Z`;
return (
);
}
// Animated number
function useAnimatedNumber(target, durMs = 1400) {
const [v, setV] = useState(0);
useEffect(() => {
let raf; const t0 = performance.now();
const tick = (t) => {
const p = Math.min(1, (t - t0) / durMs);
const eased = 1 - Math.pow(1 - p, 3);
setV(target * eased);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, durMs]);
return v;
}
// Icons (hand-rolled, minimal)
const Icon = {
Arrow: (p) => ,
Sparkle: (p) => ,
Bolt: (p) => ,
Check: (p) => ,
Globe: (p) => ,
Stack: (p) => ,
Dot: (p) => ,
Linkedin: (p) => ,
Mail: (p) => ,
Cal: (p) => ,
Copy: (p) => ,
Code: (p) => ,
};
// Stacked node icons for the flow canvas
const NodeIcon = {
trigger: (p) => ,
logic: (p) => ,
integration: (p) => ,
ai: (p) => ,
output: (p) => ,
};
Object.assign(window, { cx, Reveal, Eyebrow, Section, Button, Card, Chip, Sparkline, useAnimatedNumber, Icon, NodeIcon });