/* global React, Icon */ const SERVICES_HOVER = [ { num: "01", title: "Tagarbejde", sub: "Nyt tag & tagrenovering · Monier Tagpartner™", before: "./assets/before-after/roof-after.png", after: "./assets/before-after/roof-before.png", }, { num: "02", title: "Nye vinduer", sub: "Salg & montering · VELFAC VinduesMester", before: "./assets/before-after/window-after.png", after: "./assets/before-after/window-before.png", }, { num: "03", title: "Tilbygning & ombygning", sub: "Fra første streg til afleveret nøgle", before: "./assets/before-after/woodfloor-after.png", after: "./assets/before-after/woodfloor-before.png", }, { num: "04", title: "Tømrer & snedker", sub: "Døre, gulve, terrasser og entrepriser", before: "./assets/before-after/woodfloor-after.png", after: "./assets/before-after/woodfloor-before.png", }, { num: "05", title: "Akut tagskade", sub: "Vi rykker ud samme dag", before: "./assets/before-after/roof-after.png", after: "./assets/before-after/roof-before.png", }, { num: "06", title: "VELUX dagslys", sub: "Ovenlys, kviste & lyskasser", before: "./assets/before-after/window-after.png", after: "./assets/before-after/window-before.png", }, ]; function BeforeAfterSlider({ before, after, beforeAlt, afterAlt }) { const [pos, setPos] = React.useState(50); const [dragging, setDragging] = React.useState(false); const ref = React.useRef(null); const move = React.useCallback((clientX) => { if (!dragging || !ref.current) return; const rect = ref.current.getBoundingClientRect(); const next = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)); setPos(next); }, [dragging]); React.useEffect(() => { const up = () => setDragging(false); window.addEventListener("mouseup", up); return () => window.removeEventListener("mouseup", up); }, []); return (
move(e.clientX)} onMouseLeave={() => setDragging(false)} onTouchMove={e => move(e.touches[0].clientX)} onTouchEnd={() => setDragging(false)} > {/* Before (base layer) */} {beforeAlt} e.preventDefault()} /> {/* After (clipped top layer) */}
{afterAlt} e.preventDefault()} />
{/* Labels */} Før Efter {/* Handle */}
setDragging(true)} onTouchStart={() => setDragging(true)} >
); } function ServicesHover({ onOpenQuote }) { const [active, setActive] = React.useState(0); return (
Hvad vi laver

Vores ydelser

{SERVICES_HOVER.map((s, i) => (
setActive(i)} onClick={() => setActive(i)} > {s.num}
{s.title} {s.sub}
Læs mere
))}
{SERVICES_HOVER.map((s, i) => (
))}
); } Object.assign(window, { ServicesHover });