// ── Scrolling slot: cycles through its own image sequence with a crossfade.
// Even-indexed images belong to the left slot, odd to the right; slots are
// staggered so only one crossfades at a time → continuous "scroll" feel
// while keeping exactly 2 pictures visible per area.
function AtmSlot({ images, intervalMs, offsetMs, onOpen, firstFlatIdx }) {
const [idx, setIdx] = React.useState(0);
React.useEffect(() => {
if (images.length <= 1) return;
let interval;
const start = setTimeout(() => {
interval = setInterval(() => {
setIdx(i => (i + 1) % images.length);
}, intervalMs);
}, offsetMs);
return () => { clearTimeout(start); if (interval) clearInterval(interval); };
}, [images.length, intervalMs, offsetMs]);
const currentImg = images[idx];
// map local slot index → flat index in allImages (slot strides by 2)
const flatIdx = firstFlatIdx + idx * 2;
return (
{areas.map((area, areaIdx) => {
// Split area's images into two slot-sequences (even indices → left, odd → right).
// Each slot auto-cycles through its sequence on a stagger so the two slots never
// crossfade simultaneously.
const leftImgs = area.images.filter((_, i) => i % 2 === 0);
const rightImgs = area.images.filter((_, i) => i % 2 === 1);
const baseFlat = areaOffsets[areaIdx] ?? 0;
// Time the two slots so they alternate: each slot holds for ~5.2s, total cycle ~5.2s,
// right slot offset by half-cycle so the visible change is always one-at-a-time.
const INTERVAL = 5200;
return (