// Maple Pavers Explorer — GALLERY (before/after), 5 variants.
(function () {
const { Badge } = window.MaplePaversDesignSystem_8de4d8;
const { Icon, Overline, PHOTO } = window.MP;
const G = window.MP.data.gallery;
const BEFORE = 'grayscale(0.9) brightness(0.62) contrast(0.92)';
const Heading = ({ onDark, sub }) => (
Recent Work
See what we've built.
{sub &&
{sub}
}
);
// Reusable interactive before/after slider. Accepts an `item` from MP.data.gallery.
// If the item has real `before` + `after` images, both are used. Otherwise we fall
// back to the legacy grayscale-on-after fake (single `img`).
function BASlider({ item, height = 230, label }) {
const [pos, setPos] = React.useState(52);
const ref = React.useRef(null);
const beforeImg = item.before || item.img;
const afterImg = item.after || item.img;
const beforeFilter = item.before ? 'none' : BEFORE;
const set = (clientX) => {
const r = ref.current.getBoundingClientRect();
setPos(Math.max(2, Math.min(98, ((clientX - r.left) / r.width) * 100)));
};
const down = (e) => {
e.preventDefault();
const move = (ev) => set(ev.touches ? ev.touches[0].clientX : ev.clientX);
move(e.nativeEvent);
const up = () => {
window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up);
};
window.addEventListener('pointermove', move); window.addEventListener('pointerup', up);
};
return (
Before
After
{label && {label}}
);
}
// V1 — Interactive slider + horizontally-scrollable thumbnail rail
function GalSlider() {
const items = G;
const [active, setActive] = React.useState(0);
const railRef = React.useRef(null);
const didMount = React.useRef(false);
// Auto-scroll the active thumb into view so it's never hidden offscreen.
// Skip on initial render — the gallery sits mid-page, and scrolling thumb 0
// into view at mount would yank the whole page down past the hero.
React.useEffect(() => {
if (!didMount.current) {
didMount.current = true;
return;
}
const rail = railRef.current;
if (!rail) return;
const btn = rail.children[active];
if (!btn) return;
// Use the rail's own scrollLeft (not Element.scrollIntoView, which can
// scroll the whole document on engines that don't honor block:'nearest').
const target = btn.offsetLeft - (rail.clientWidth - btn.clientWidth) / 2;
rail.scrollTo({ left: target, behavior: 'smooth' });
}, [active]);
return (
{items.map((it, i) => (
);
}
// V2 — Masonry grid with tags
function GalGrid() {
return (
{G.map((it, i) => (
{it.cat}
))}
);
}
// V3 — Swipe carousel with dots
function GalCarousel() {
const [i, setI] = React.useState(0);
const ref = React.useRef(null);
const onScroll = () => {
const el = ref.current; if (!el) return;
setI(Math.round(el.scrollLeft / el.clientWidth));
};
return (
