/* DiagnosticConsole — pure software diagnostic UI. No hardware illustrations. A sleek dark console that looks like ALEROQ's app scanning a car live: header → 5 live data tiles (counting) → a single red scan-line pass → a fault strip → competing quotes + savings. Auto-plays on scroll, replayable, 3D-tilt on hover, reduced-motion aware. Beauty from type + layout. */ function DiagnosticConsole() { const { Reveal, Ic } = window; const light = window.useTheme() === 'light'; const ROOT = React.useRef(null); const cardRef = React.useRef(null); // phase: 0 streaming · 1 fault · 2 resolved const [phase, setPhase] = React.useState(0); const [gauges, setGauges] = React.useState({ rpm: 0, coolant: 0, load: 0, throttle: 0, fuel: 0 }); const [bids, setBids] = React.useState(0); const [save, setSave] = React.useState(0); const [scanKey, setScanKey] = React.useState(0); const startedRef = React.useRef(false); const timers = React.useRef([]); const rafs = React.useRef([]); const TARGET = { rpm: 820, coolant: 92, load: 34, throttle: 12, fuel: 68 }; const reduce = () => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; const tiles = [ { k: 'rpm', label: 'RPM', unit: '' }, { k: 'coolant', label: 'Coolant', unit: '°C' }, { k: 'load', label: 'Load', unit: '%' }, { k: 'throttle', label: 'Throttle', unit: '%' }, { k: 'fuel', label: 'Fuel', unit: '%' }, ]; const bidData = [ { shop: 'Apache Auto', rating: '4.9', time: '12 min', price: 180, best: false }, { shop: 'Tempe Motorworks', rating: '4.7', time: '8 min', price: 210, best: false }, { shop: 'Valley Mechanics', rating: '4.8', time: '20 min', price: 165, best: true }, ]; const clearAll = () => { timers.current.forEach(clearTimeout); timers.current = []; rafs.current.forEach(cancelAnimationFrame); rafs.current = []; }; const after = (ms, fn) => timers.current.push(setTimeout(fn, ms)); const countTo = (target, dur, setter) => { const start = performance.now(); const tick = (now) => { const t = Math.min((now - start) / dur, 1); const eased = 1 - Math.pow(1 - t, 3); setter(Math.round(target * eased)); if (t < 1) rafs.current.push(requestAnimationFrame(tick)); }; rafs.current.push(requestAnimationFrame(tick)); }; const run = React.useCallback(() => { clearAll(); setPhase(0); setBids(0); setSave(0); setGauges({ rpm: 0, coolant: 0, load: 0, throttle: 0, fuel: 0 }); setScanKey((k) => k + 1); if (reduce()) { setGauges(TARGET); setBids(3); setSave(255); setPhase(2); return; } // streaming: tiles count up + scan pass Object.keys(TARGET).forEach((k) => countTo(TARGET[k], 1300, (v) => setGauges((g) => ({ ...g, [k]: v })))); // fault strip after the scan pass after(1850, () => setPhase(1)); // resolution: bids + savings after(3050, () => { setPhase(2); after(220, () => setBids(1)); after(600, () => setBids(2)); after(980, () => setBids(3)); after(1260, () => countTo(255, 900, setSave)); }); }, []); const replay = () => run(); // auto-play once on scroll into view. Uses a ref guard (NOT state) so firing // never changes a dependency / re-runs this effect / cancels the animation. React.useEffect(() => { const node = ROOT.current; if (!node) return; const check = () => { if (startedRef.current) return; const r = node.getBoundingClientRect(); if (r.top < (window.innerHeight || 800) * 0.72 && r.bottom > 80) { startedRef.current = true; cleanup(); run(); } }; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) check(); }); }, { threshold: 0.18 }); io.observe(node); window.addEventListener('scroll', check, { passive: true }); const poll = setInterval(check, 400); function cleanup() { io.disconnect(); window.removeEventListener('scroll', check); clearInterval(poll); } check(); return () => { cleanup(); clearAll(); }; }, []); // 3D tilt toward cursor (desktop) React.useEffect(() => { const card = cardRef.current; if (!card) return; if (reduce() || (window.matchMedia && window.matchMedia('(hover: none)').matches)) return; let raf = 0; const move = (e) => { const r = card.getBoundingClientRect(); const px = (e.clientX - (r.left + r.width / 2)) / r.width; const py = (e.clientY - (r.top + r.height / 2)) / r.height; cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { card.style.transform = `perspective(1500px) rotateY(${px * 4.5}deg) rotateX(${-py * 4.5}deg)`; }); }; const leave = () => { cancelAnimationFrame(raf); card.style.transform = 'perspective(1500px) rotateY(-3.5deg) rotateX(1.5deg)'; }; const zone = card.parentElement; zone.addEventListener('pointermove', move); zone.addEventListener('pointerleave', leave); return () => { zone.removeEventListener('pointermove', move); zone.removeEventListener('pointerleave', leave); cancelAnimationFrame(raf); }; }, []); const statusCol = phase >= 2 ? 'var(--positive)' : 'var(--accent)'; return (
Live demo

Cryptic code in. Fair price out.

Watch ALEROQ read a car in real time, translate the fault into plain English, and turn it into competing quotes.

); } window.DiagnosticConsole = DiagnosticConsole;