// Anologe — "How we operate" diagram + AI workflow diagram
const STEPS = [
{
n: '01',
name: 'Intake',
short: 'Audit',
desc: 'A 30‑minute working session with a partner. We leave with a scope memo, a system inventory, and a list of the first three things we\'d rebuild.',
meta: ['1 working session', 'Scope memo', 'System inventory'],
dur: 'Wk 0'
},
{
n: '02',
name: 'Map',
short: 'Model',
desc: 'We document your current operations as code — schemas, flows, ownership, monitoring. The map becomes the source of truth for the engagement.',
meta: ['Schema diff', 'Flow inventory', 'Ownership map'],
dur: 'Wk 1–2'
},
{
n: '03',
name: 'Deploy',
short: 'Install',
desc: 'We build and install. Each system ships with runbooks, eval suites, alerting, and a documented owner. Versioned, deployed, monitored.',
meta: ['Runbooks', 'Evals & alerts', 'Versioned release'],
dur: 'Wk 2–10'
},
{
n: '04',
name: 'Operate',
short: 'Run',
desc: 'We sit on‑call alongside your team. We run the surface until your operators own it confidently — typically 6 weeks beyond install.',
meta: ['Shared on‑call', 'Weekly review', 'Handover at SLO'],
dur: 'Wk 10–18'
}
];
function HowDiagram() {
const [active, setActive] = React.useState(0);
const [hover, setHover] = React.useState(null);
React.useEffect(() => {
const id = setInterval(() => setActive((a) => (a + 1) % STEPS.length), 3200);
return () => clearInterval(id);
}, []);
const cur = hover !== null ? hover : active;
return (