/* UPOLT site — shared marketing primitives (icon, container, overline, buttons, sectioning). */
/* Inline Lucide-style icon paths, rendered directly as React SVG (no external script mutating
the DOM outside React's control — that used to race React's own reconciliation and could crash
the page). Stroke-based, 24x24 viewBox, matches Lucide's outlined style. */
const ICON_PATHS = {
"arrow-right": '',
check: '',
hexagon: '',
workflow: '',
"shield-check": '',
quote: '',
mail: '',
"message-square": '',
"life-buoy": '',
"chevron-down": '',
activity: '',
"trending-up": '',
boxes: '',
"line-chart": '',
sparkles: '',
"file-plus-2": '',
"user-check": '',
"badge-check": '',
send: '',
"mouse-pointer-click": '',
"git-branch": '',
history: '',
search: '',
"list-checks": '',
lock: '',
compass: '',
telescope: '',
eye: '',
feather: '',
layers: '',
briefcase: '',
headphones: '',
};
function Ico({ n, s = 20, c = "currentColor", style = {} }) {
return (
);
}
function Container({ children, style = {}, className = "" }) {
return {children}
;
}
function Overline({ children, onDark = false, style = {} }) {
return (
{children}
);
}
/* Marketing button — anchor based, supports cross-page hrefs. Mirrors the DS button palette. */
function Btn({ children, variant = "primary", size = "lg", iconLeft, iconRight, href = "#", onClick, style = {} }) {
const [h, setH] = React.useState(false);
const [a, setA] = React.useState(false);
const sizes = { sm: { height: 40, pad: "0 16px", fs: 14 }, md: { height: 46, pad: "0 20px", fs: 15 }, lg: { height: 52, pad: "0 24px", fs: 16 } };
const s = sizes[size] || sizes.lg;
const pal = {
primary: { background: a ? "var(--accent-press)" : h ? "var(--accent-hover)" : "var(--accent)", color: "#fff", border: "1px solid transparent" },
secondary: { background: a ? "var(--surface-active)" : h ? "var(--surface-hover)" : "transparent", color: "var(--text-primary)", border: "1px solid var(--graphite-900)" },
ghost: { background: h ? "var(--surface-hover)" : "transparent", color: "var(--text-primary)", border: "1px solid transparent" },
inverse: { background: a ? "var(--graphite-200)" : h ? "var(--graphite-100)" : "#fff", color: "var(--graphite-900)", border: "1px solid transparent" },
ghostInverse: { background: h ? "rgba(255,255,255,0.10)" : "transparent", color: "#fff", border: "1px solid rgba(255,255,255,0.28)" },
}[variant];
const handle = (e) => { if (href === "#" || !href) e.preventDefault(); if (onClick) onClick(e); };
return (
setH(true)} onMouseLeave={() => { setH(false); setA(false); }}
onMouseDown={() => setA(true)} onMouseUp={() => setA(false)}
style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, height: s.height, padding: s.pad, fontFamily: "var(--font-sans)", fontSize: s.fs, fontWeight: 600, letterSpacing: "-0.01em", borderRadius: "var(--radius-button)", textDecoration: "none", cursor: "pointer", whiteSpace: "nowrap", transition: "background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard)", ...pal, ...style }}>
{iconLeft}{children}{iconRight}
);
}
/* Inline text link with the teal "Learn more →" treatment. */
function TextLink({ children, href = "#", onDark = false, style = {} }) {
const [h, setH] = React.useState(false);
return (
{ if (href === "#") e.preventDefault(); }}
onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: 600, color: onDark ? "var(--teal-400)" : "var(--text-accent)", textDecoration: "none", whiteSpace: "nowrap", ...style }}>
{children}
);
}
/* Scroll/entrance reveal — content is visible by default; the fade-up is a pure CSS
animation layered on top, so content never stays hidden if animations are throttled. */
function Reveal({ children, delay = 0, y = 16, style = {} }) {
return (
{children}
);
}
/* Fires true once the element scrolls into view. */
function useInView(ref, { threshold = 0.3 } = {}) {
const [inView, setInView] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
if (typeof IntersectionObserver === "undefined") { setInView(true); return; }
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); io.disconnect(); }
}, { threshold });
io.observe(ref.current);
return () => io.disconnect();
}, [ref, threshold]);
return inView;
}
/* Counts up from 0 to target when `active` becomes true. */
function useCountUp(target, active, { duration = 1200 } = {}) {
const [val, setVal] = React.useState(0);
React.useEffect(() => {
if (!active) return;
let raf, start;
const tick = (ts) => {
if (start == null) start = ts;
const p = Math.min(1, (ts - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(target * eased);
if (p < 1) raf = requestAnimationFrame(tick);
else setVal(target);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [target, active, duration]);
return val;
}
/* Safety net around the page root: the Lucide icon script mutates nodes into