// ---------- Behandlung carousel ---------- // 1:1 Pendant zu course-carousel.jsx, aber für Behandlungen (1:1-Angebote). // - Oben: Kategorie-Karten mit Hintergrundbild + Farbschema (drag-snap) // - Unten: Pills für einzelne Behandlungen — klick öffnet WBBehandlungDetail // Datenquellen: WB_BEHANDLUNG_CATEGORIES + WB_BEHANDLUNGEN (aus behandlung-data.jsx). function bhHexToRgba(hex, a) { const h = String(hex).replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${a})`; } const useBehandlungCarouselData = () => { const [version, setVersion] = React.useState(0); React.useEffect(() => { const onUpdate = () => setVersion((v) => v + 1); window.addEventListener('wb-behandlungen-updated', onUpdate); return () => window.removeEventListener('wb-behandlungen-updated', onUpdate); }, []); return React.useMemo(() => { const cats = window.WB_BEHANDLUNG_CATEGORIES || []; const items = window.WB_BEHANDLUNGEN || []; // Behandlungen können zu mehreren Kategorien gehören (cats: [id, id, ...]). // Für die Pill-Liste verwenden wir die primäre Kategorie (= cats[0]). const matchesCat = (b, catId) => Array.isArray(b.cats) ? b.cats.includes(catId) : b.cat === catId; const buckets = cats.map((cat) => ({ cat, list: items.filter((b) => matchesCat(b, cat.id)) })); const max = buckets.length ? Math.max(...buckets.map((b) => b.list.length)) : 0; const directItems = []; for (let i = 0; i < max; i++) { buckets.forEach(({ cat, list }) => { if (list[i]) directItems.push({ label: list[i].title, cat, item: list[i] }); }); } return { cats, items, directItems }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [version]); }; const BehandlungCarousel = ({ onOpenInquiry }) => { const stageRef = React.useRef(null); const trackRef = React.useRef(null); const pillsRef = React.useRef(null); const [activeBubble, setActiveBubble] = React.useState(null); const [openItem, setOpenItem] = React.useState(null); const headRef = useReveal(); const { cats: behandlungCategories, directItems } = useBehandlungCarouselData(); const [geom, setGeom] = React.useState({ cardW: 240, gap: 18, stageW: 1200 }); const N = behandlungCategories.length; const [index, setIndex] = React.useState(0); const [drag, setDrag] = React.useState(0); const dragRef = React.useRef({ active: false, startX: 0, startIndex: 0, moved: false }); React.useEffect(() => { const measure = () => { const stage = stageRef.current; if (!stage) return; const card = stage.querySelector('.bhcrs-card'); const cardW = card ? card.offsetWidth : 240; setGeom({ cardW, gap: 18, stageW: stage.clientWidth }); }; measure(); window.addEventListener('resize', measure); return () => window.removeEventListener('resize', measure); }, []); // Externe Trigger zum Öffnen einer Behandlung (z.B. Weib-Detail-Modal): // hört auf 'wb-open-behandlung-by-id' und sucht die Behandlung global. React.useEffect(() => { const onOpenById = (e) => { const id = e?.detail?.id; if (!id) return; const b = (window.WB_BEHANDLUNGEN || []).find((x) => x.id === id); if (b) setOpenItem(b); }; window.addEventListener('wb-open-behandlung-by-id', onOpenById); return () => window.removeEventListener('wb-open-behandlung-by-id', onOpenById); }, []); const step = geom.cardW + geom.gap; const SIDE_GUTTER = 56; const visibleW = geom.stageW; const visibleCount = Math.max(1, Math.floor((visibleW + geom.gap) / step)); const maxIndex = Math.max(0, N - visibleCount); const clampIndex = (i) => Math.max(0, Math.min(maxIndex, i)); const baseOffset = -index * step; const RUBBER = 0.35; const rubberize = (dx) => { if (dx > 0 && index <= 0) return dx * RUBBER; if (dx < 0 && index >= maxIndex) return dx * RUBBER; return dx; }; const onPointerDown = (e) => { if (e.button !== undefined && e.button !== 0) return; const t = e.target; if (t && t.closest && t.closest('[data-side-arrow]')) return; dragRef.current = { active: true, startX: e.clientX, startIndex: index, moved: false, pointerId: e.pointerId, captured: false, }; }; const onPointerMove = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; if (!dragRef.current.moved && Math.abs(dx) > 5) { dragRef.current.moved = true; if (!dragRef.current.captured) { try { e.currentTarget.setPointerCapture(e.pointerId); dragRef.current.captured = true; } catch (_) {} } } if (dragRef.current.moved) setDrag(rubberize(dx)); }; const onPointerUp = (e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; dragRef.current.active = false; setDrag(0); const delta = Math.round(-dx / step); if (delta !== 0) setIndex(i => clampIndex(i + delta)); if (dragRef.current.captured) { try { e.currentTarget.releasePointerCapture(e.pointerId); } catch (_) {} } if (dragRef.current.moved) { const swallow = (ev) => { ev.stopPropagation(); ev.preventDefault(); }; e.currentTarget.addEventListener('click', swallow, { capture: true, once: true }); setTimeout(() => { dragRef.current.moved = false; }, 0); } }; React.useEffect(() => { setIndex(i => clampIndex(i)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [maxIndex]); const slots = behandlungCategories.map((cat, i) => ({ slot: i, cat })); const atStart = index <= 0; const atEnd = index >= maxIndex; const scrollPillsBy = (dir) => { const p = pillsRef.current; if (!p) return; p.scrollBy({ left: dir * Math.max(220, p.clientWidth * 0.6), behavior: 'smooth' }); }; const [pillBounds, setPillBounds] = React.useState({ atStart: true, atEnd: false }); React.useEffect(() => { const p = pillsRef.current; if (!p) return; const update = () => { const max = p.scrollWidth - p.clientWidth; setPillBounds({ atStart: p.scrollLeft <= 1, atEnd: p.scrollLeft >= max - 1, }); }; update(); p.addEventListener('scroll', update, { passive: true }); window.addEventListener('resize', update); return () => { p.removeEventListener('scroll', update); window.removeEventListener('resize', update); }; }, []); return (
{window.wbText('behandlungen.eyebrow', 'Behandlungen')}

{window.wbT('behandlungen.headline', 'Individuelle Behandlungen, ganz nach [deinen Bedürfnissen].')}

{window.wbText('behandlungen.lead', 'Persönliche Begleitung in unseren Räumen — von Osteopathie bis Eltern-Coaching. Termine direkt mit der jeweiligen Frau, ganz in deinem Tempo.')}

Alle Behandlungen →
{/* Subheading: Kategorien */}
● Kategorien Bereiche im Überblick — wisch durch oder klick eine Karte
{behandlungCategories.length === 0 ? (
Aktuell sind keine Behandlungs-Kategorien angelegt. Sobald wir hier Behandlungen ausschreiben, tauchen sie als Karten auf.
) : ( <>
setIndex(i => clampIndex(i - 1))} gutter={SIDE_GUTTER} disabled={atStart} /> setIndex(i => clampIndex(i + 1))} gutter={SIDE_GUTTER} disabled={atEnd} />
{/* Subheading: Einzelne Behandlungen */}
● Einzelne Behandlungen Direkt zur Behandlung — tippe einen Eintrag für Details
{directItems.length === 0 ? (
Aktuell sind keine einzelnen Behandlungen ausgeschrieben. Schau bald wieder vorbei — oder schreib uns direkt.
) : ( <>
scrollPillsBy(-1)} gutter={SIDE_GUTTER} small disabled={pillBounds.atStart} /> scrollPillsBy(1)} gutter={SIDE_GUTTER} small disabled={pillBounds.atEnd} />
{directItems.map(({ label, cat, item }, i) => { const active = activeBubble === label; return ( ); })}
)} )} {(() => { const Detail = window.WBBehandlungDetail; return openItem && Detail ? ( { setOpenItem(null); setActiveBubble(null); }} /> ) : null; })()}
); }; const BhArrow = ({ dir, onClick, gutter = 56, small, disabled }) => { const size = small ? 32 : 40; const offset = Math.max(8, (gutter - size) / 2); return ( ); }; window.BehandlungCarousel = BehandlungCarousel;