// challenges.jsx - "The Cost of Standing Still" diagnostic section.
// Monochrome stats with cited sources; one punchy line each; Violet Blue is
// reserved for the single forward action (the CTA bridge to Services).
const MONO = 'ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace';
const CHALLENGES = [
{
label: 'CASE-01 / TRANSFORMATION RISK',
stat: 70, suffix: '%', fill: 70,
caption: 'of digital transformations fail to deliver.',
source: 'McKinsey',
url: 'https://www.mckinsey.com/capabilities/transformation/our-insights/perspectives-on-transformation',
},
{
label: 'CASE-02 / TECHNICAL DEBT',
stat: 42, suffix: '%', fill: 42,
caption: 'of developer time lost to tech debt and bad code.',
source: 'Stripe · Developer Coefficient',
url: 'https://stripe.com/files/reports/the-developer-coefficient.pdf',
},
{
label: 'CASE-03 / VELOCITY GAP',
stat: 5, suffix: '×', fill: 80,
caption: 'faster revenue growth for high-velocity teams.',
source: 'McKinsey · Developer Velocity',
url: 'https://www.mckinsey.com/industries/technology-media-and-telecommunications/our-insights/developer-velocity-how-software-excellence-fuels-business-performance',
},
];
// Robust in-view for Challenges via a CALLBACK ref (same proven path as Reveal):
// IntersectionObserver + timer-coalesced scroll/resize fallback (works when IO
// is throttled). Self-removes on reveal.
function chInView() {
const [seen, setSeen] = React.useState(false);
const cleanupRef = React.useRef(null);
const set = React.useCallback((node) => {
if (cleanupRef.current) { cleanupRef.current(); cleanupRef.current = null; }
if (!node) return;
let done = false, t;
const reveal = () => { if (!done) { done = true; setSeen(true); if (cleanupRef.current) { cleanupRef.current(); cleanupRef.current = null; } } };
const check = () => {
const r = node.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.9 && r.bottom > vh * 0.1) reveal();
};
const onScroll = () => { clearTimeout(t); t = setTimeout(check, 60); };
const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) reveal(); }, { threshold: 0.15 });
io.observe(node);
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll, { passive: true });
setTimeout(check, 0);
cleanupRef.current = () => { io.disconnect(); window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); clearTimeout(t); };
}, []);
return [set, seen];
}
function chCountUp(target, start, duration = 950, delay = 0) {
const [val, setVal] = React.useState(0);
React.useEffect(() => {
if (!start) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { setVal(target); return; }
let raf, t0;
const tick = (now) => {
if (!t0) t0 = now;
const el = now - t0 - delay;
if (el < 0) { raf = requestAnimationFrame(tick); return; }
const p = Math.min(1, el / duration);
const eased = 1 - Math.pow(1 - p, 3);
setVal(eased * target);
if (p < 1) raf = requestAnimationFrame(tick);
else setVal(target);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [start]);
return val;
}
function Readout({ item, index, start }) {
const delay = index * 140;
const count = chCountUp(item.stat, start, 950, delay);
const digits = String(item.stat).length;
return (
);
}
function Challenges({ t }) {
const [probeRef, inView] = chInView();
const goToServices = (e) => {
e.preventDefault();
const el = document.getElementById('services');
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
};
return (
{/* header block - left aligned, editorial */}
The Cost of Standing Still
Is your technology holding you back?
These aren’t hypothetical problems. They’re draining your budget and momentum right now.
{/* diagnostic grid */}
{CHALLENGES.map((item, i) => (
))}
{/* CTA bridge - the single forward action; the only Violet Blue in the section */}