// Agentrix-IA — Shared UI
const { useRef, useEffect } = React;
/* --- Photos (web placeholders — Unsplash CDN; replace with your own later) --- */
const _U = (id, w, h) => `https://images.unsplash.com/${id}?w=${w}&h=${h}&fit=crop&crop=faces&auto=format&q=80`;
window.PERSON_PHOTOS = [
_U("photo-1494790108377-be9c29b29330", 760, 560),
_U("photo-1507003211169-0a1dd7228f2d", 760, 560),
_U("photo-1573497019940-1c28c88b4f3e", 760, 560),
_U("photo-1500648767791-00dcc994a43e", 760, 560),
_U("photo-1544005313-94ddf0286df2", 760, 560),
_U("photo-1472099645785-5658abf4ff4e", 760, 560),
];
window.TEAM_PHOTOS = [
window.TEAM_ANISS_PHOTO,
_U("photo-1517841905240-472988babdf9", 600, 680),
_U("photo-1519085360753-af0119f7cbe7", 600, 680),
_U("photo-1534528741775-53994a69daeb", 600, 680),
];
/* --- Scroll reveal --- */
function Reveal({ children, delay, as, className = "", style }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) { el.classList.add("in"); return; }
let done = false;
let io = null;
const cleanup = () => {
if (io) io.disconnect();
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
const reveal = () => { if (!done) { done = true; el.classList.add("in"); cleanup(); } };
const inView = () => {
const r = el.getBoundingClientRect();
return r.top < window.innerHeight * 0.94 && r.bottom > 0;
};
const onScroll = () => { if (inView()) reveal(); };
if (inView()) { void el.offsetHeight; el.classList.add("in"); done = true; return cleanup; }
io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) reveal(); });
}, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
io.observe(el);
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
const safety = setTimeout(() => { if (!done && inView()) reveal(); }, 1400);
return () => { clearTimeout(safety); cleanup(); };
}, []);
const Tag = as || "div";
return React.createElement(Tag, { ref, className: `reveal ${className}`, "data-d": delay, style }, children);
}
/* --- Icons (minimal geometric) --- */
function Icon({ name, size = 22 }) {
const s = { width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round", viewBox: "0 0 24 24" };
const paths = {
arrow: ,
check: ,
bolt: ,
grid: ,
target: ,
layout: ,
brain: ,
plug: ,
memory: ,
shield: ,
layers: ,
eye: ,
mail: ,
clock: ,
spark: ,
plus: ,
chat: ,
close: ,
user: ,
send: ,
phone: ,
pin:
};
return ;
}
/* --- Animated logo mark --- */
function Logo({ size = 26 }) {
return (
);
}
function Wordmark() {
return (
Agentrix·IA
);
}
/* --- Button --- */
function Btn({ children, variant = "primary", lg, onClick, href, arrow }) {
const cls = `btn btn--${variant}${lg ? " btn--lg" : ""}`;
const inner = <>{children}{arrow && };
if (href) return {inner};
return ;
}
/* --- Eyebrow --- */
function Eyebrow({ children }) { return {children}; }
/* --- Count-up on reveal --- */
function CountUp({ value }) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const m = String(value).match(/([\d.,]+)/);
if (!m) { el.textContent = value; return; }
const numStr = m[1];
const isComma = numStr.includes(",") && !numStr.includes(".");
const target = parseFloat(numStr.replace(/\s/g, "").replace(",", "."));
const prefix = value.slice(0, m.index);
const suffix = value.slice(m.index + m[1].length);
const decimals = (numStr.split(/[.,]/)[1] || "").length;
const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (reduce) { el.textContent = value; return; }
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (!e.isIntersecting) return;
io.unobserve(el);
const dur = 1300, t0 = performance.now();
const tick = (now) => {
const p = Math.min(1, (now - t0) / dur);
const eased = 1 - Math.pow(1 - p, 3);
let cur = (target * eased).toFixed(decimals);
if (isComma) cur = cur.replace(".", ",");
el.textContent = prefix + cur + suffix;
if (p < 1) requestAnimationFrame(tick);
else el.textContent = value;
};
requestAnimationFrame(tick);
});
}, { threshold: 0.5 });
io.observe(el);
return () => io.disconnect();
}, [value]);
return {value};
}
/* --- Placeholder (striped) --- */
function Ph({ label, h = 220, style }) {
return {label}
;
}
/* --- Marquee --- */
function Marquee({ items }) {
const row = items.concat(items);
return (
{row.map((it, i) => {it})}
);
}
/* --- Animated agent network (hero visual) — geometric only --- */
function AgentNetwork() {
return (
);
}
Object.assign(window, { Reveal, Icon, Logo, Wordmark, Btn, Eyebrow, CountUp, Ph, Marquee, AgentNetwork });