/* global React */
// ============================================================
// APPROACH — how Mir works. A robot walks the pipeline, activating
// each stage in sequence (Discover → Build → Ship → Scale) while
// data flows down the connector and the active stage's icon works.
// Robot + line are aligned to measured circle centers. Loops.
// ============================================================
const STEPS = [
{ n:'01', key:'discover', t:'Discover', Icon: Search, d:'We embed with your team for a focused engagement to map the workflows where AI actually pays off, and rule out the ones where it doesn\u2019t.' },
{ n:'02', key:'build', t:'Build', Icon: Cpu, d:'Senior engineers and ML practitioners build the real thing on your data: model-agnostic, evaluated, and wired into your existing systems.' },
{ n:'03', key:'ship', t:'Ship', Icon: Zap, d:'It goes to production, not a sandbox. We deploy where your work happens and train your people to own it.' },
{ n:'04', key:'scale', t:'Scale', Icon: Trend, d:'We measure the outcome, harden what works, and grow it, sometimes into a full product, the way Cothon grew.' },
];
function PipeBot() {
return (
);
}
function Approach() {
const [ref, seen] = useInView({ threshold: 0.25 });
const [active, setActive] = React.useState(0);
const [moving, setMoving] = React.useState(false);
const stepRefs = React.useRef([]);
const [centers, setCenters] = React.useState([]);
// Measure circle centres for pixel-perfect robot + line alignment.
React.useLayoutEffect(() => {
const measure = () => {
const grid = ref.current;
if (!grid) return;
const gr = grid.getBoundingClientRect();
const cs = stepRefs.current.map(el => {
if (!el) return 0;
const r = el.getBoundingClientRect();
return r.left - gr.left + r.width / 2;
});
setCenters(cs);
};
measure();
window.addEventListener('resize', measure);
const id = setTimeout(measure, 400); // after fonts/layout settle
return () => { window.removeEventListener('resize', measure); clearTimeout(id); };
}, [seen]);
React.useEffect(() => {
if (!seen) return;
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (reduced) { setActive(3); return; }
let alive = true, a = 0, timer;
setActive(0);
const advance = () => {
if (!alive) return;
a += 1;
if (a > 3) { a = 0; setActive(0); timer = setTimeout(advance, 1900); return; }
setActive(a);
timer = setTimeout(advance, a === 3 ? 2500 : 1700);
};
timer = setTimeout(advance, 1700);
return () => { alive = false; clearTimeout(timer); };
}, [seen]);
// Beam fires only once the robot arrives at a stage.
React.useEffect(() => {
setMoving(true);
const id = setTimeout(() => setMoving(false), 820);
return () => clearTimeout(id);
}, [active]);
const measured = centers.length === 4 && centers[3] > 0;
return (
How we work
From workflow to{' '}
production, fast.
A senior team and a tight loop. No army of juniors, no six-month discovery deck:
working software in front of your users in weeks.