;
}
// Industry demo lines as a sliding card rail: the active card widens and fades in a blue gradient.
function IndustryCarousel() {
const n = INDUSTRIES.length;
const [i, setI] = React.useState(0);
const [size, setSize] = React.useState({ w: 300, wa: 520, gap: 20, view: 1200 });
const trackRef = React.useRef(null), listRef = React.useRef(null);
const vel = React.useRef(0), anchor = React.useRef(null);
const pos = React.useRef(0), mouse = React.useRef(null), raf = React.useRef(0), drag = React.useRef(null), iRef = React.useRef(0);
const { w, wa, gap, view } = size;
const maxPos = Math.max(0, (n - 1) * (w + gap) + wa - view);
const peek = view >= 900 ? 72 : 24; // keep part of the previous card in view
React.useEffect(() => {
const measure = () => { const t = trackRef.current; const v = t ? Math.min(t.clientWidth, document.documentElement.clientWidth - t.getBoundingClientRect().left) : 1200; /* stop at the scrollbar */ setSize({ w: v < 640 ? 232 : 300, wa: Math.min(520, v - 32), gap: v < 640 ? 12 : 20, view: v }); };
measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure);
}, []);
const maxRef = React.useRef(0); maxRef.current = maxPos;
const setPos = (p, glide) => { pos.current = Math.max(0, Math.min(p, maxRef.current)); const t = trackRef.current; if (t) { t.classList.toggle('fade-l', pos.current > 1); t.classList.toggle('fade-r', pos.current < maxRef.current - 1); } const el = listRef.current; if (!el) return; el.classList.toggle('is-panning', !glide); el.style.transform = `translateX(${-pos.current}px)`; };
const activate = k => { if (k !== iRef.current) { iRef.current = k; setI(k); } };
const glideUntil = React.useRef(0);
const focusTo = k => { k = (k + n) % n; activate(k); setPos(k * (w + gap) - (k ? peek : 0), true); glideUntil.current = performance.now() + 550; vel.current = 0; anchor.current = null; };
React.useEffect(() => { setPos(pos.current, true); }, [maxPos]);
// Mouse: the row drifts toward whichever side the pointer is on (only the middle 10% is still), faster nearer the edge.
// Speed eases in and coasts out instead of snapping. Sensing reaches NEAR px above/below the cards and the full window width.
const EDGE = 0.45, SPEED = 24, NEAR = 160, EASE = 0.09;
const tick = () => {
const m = mouse.current, track = trackRef.current, list = listRef.current;
if (!track || !list) { raf.current = 0; return; }
const r = track.getBoundingClientRect();
const near = m && m.y >= r.top - NEAR && m.y <= r.bottom + NEAR;
let target = 0;
if (near) { const t = (m.x - r.left) / r.width; const v = t > 1 - EDGE ? Math.min(1, (t - (1 - EDGE)) / EDGE) : t < EDGE ? -Math.min(1, (EDGE - t) / EDGE) : 0; target = Math.sign(v) * Math.pow(Math.abs(v), 1.6) * SPEED; }
if (performance.now() < glideUntil.current) { raf.current = requestAnimationFrame(tick); return; } // a dot click is gliding
vel.current += (target - vel.current) * EASE;
const before = pos.current;
// Keep the expanded card fixed under the cursor while neighbours change width
const a = anchor.current, card = list.children[iRef.current];
if (card) { if (a && a.k === iRef.current) setPos(pos.current + (card.offsetLeft - a.left), false); anchor.current = { k: iRef.current, left: card.offsetLeft }; }
setPos(pos.current + vel.current, false);
const moved = Math.abs(pos.current - before);
// Only switch cards once the row has nearly settled, so cards don't flicker open as they slide past
if (near && moved < 3) { const hit = document.elementFromPoint(m.x, m.y)?.closest('.icar-card'); if (hit && list.contains(hit)) activate(+hit.dataset.k); }
if (!near && Math.abs(vel.current) < 0.1) { vel.current = 0; anchor.current = null; raf.current = 0; return; }
raf.current = requestAnimationFrame(tick);
};
React.useEffect(() => {
const move = e => { if (e.pointerType !== 'mouse') return; mouse.current = { x: e.clientX, y: e.clientY }; if (!raf.current) raf.current = requestAnimationFrame(tick); };
const out = e => { if (!e.relatedTarget) mouse.current = null; };
window.addEventListener('pointermove', move, { passive: true }); document.addEventListener('pointerout', out);
return () => { window.removeEventListener('pointermove', move); document.removeEventListener('pointerout', out); cancelAnimationFrame(raf.current); };
}, []);
const onKey = e => { if (e.key === 'ArrowRight') { e.preventDefault(); focusTo(i + 1); } if (e.key === 'ArrowLeft') { e.preventDefault(); focusTo(i - 1); } };
// Touch: swipe to step through cards
const down = e => { if (e.pointerType !== 'mouse') drag.current = e.clientX; };
const up = e => { if (drag.current == null) return; const dx = e.clientX - drag.current; drag.current = null; if (Math.abs(dx) > 50) { focusTo(i + (dx < 0 ? 1 : -1)); drag.current = 'moved'; } };
const pick = (k, e) => { if (drag.current === 'moved') { drag.current = null; return; } if (k !== i) { e.preventDefault(); focusTo(k); } };
return
{ drag.current = null; }}>
{INDUSTRIES.map((it, k) => { const [biz, num] = it.demo; const on = k === i; const title = it.alt ? "Don't see your industry?" : it.name; const who = it.alt ? 'a general business' : biz; return