import { useEffect } from "react"

export default function CarouselFixer() {

useEffect(() => {

// Wait for CMS content to render

const init = () => {

// Find all horizontally scrollable containers inside CMS content

const contents = document.querySelectorAll(".framer-text, [class*='content'], [class*='Content']")

contents.forEach((content) => {

const scrollEls = content.querySelectorAll("ul, ol, div")

scrollEls.forEach((el) => {

const htmlEl = el as HTMLElement

const style = window.getComputedStyle(htmlEl)

// Target only elements that overflow horizontally (the carousel)

if (

style.overflowX === "scroll" ||

style.overflowX === "auto" ||

htmlEl.scrollWidth > htmlEl.clientWidth

) {

attachScrollBehavior(htmlEl)

}

})

})

}

const attachScrollBehavior = (el: HTMLElement) => {

// Prevent double-attaching

if (el.dataset.scrollFixed) return

el.dataset.scrollFixed = "true"

el.style.cursor = "grab"

el.style.userSelect = "none"

el.style.webkitOverflowScrolling = "touch"

el.style.scrollbarWidth = "none"

let startX = 0

let scrollStart = 0

let isDown = false

let dragged = false

const onMouseDown = (e: MouseEvent) => {

isDown = true

dragged = false

startX = e.clientX

scrollStart = el.scrollLeft

el.style.cursor = "grabbing"

}

const onMouseMove = (e: MouseEvent) => {

if (!isDown) return

const dx = e.clientX - startX

if (Math.abs(dx) > 5) dragged = true

el.scrollLeft = scrollStart - dx

}

const onMouseUp = () => {

isDown = false

el.style.cursor = "grab"

}

const onClickCapture = (e: MouseEvent) => {

if (dragged) {

e.preventDefault()

e.stopImmediatePropagation()

dragged = false

}

}

const onWheel = (e: WheelEvent) => {

if (Math.abs(e.deltaX) > 0) {

e.preventDefault()

el.scrollLeft += e.deltaX

}

}

el.addEventListener("mousedown", onMouseDown)

el.addEventListener("mousemove", onMouseMove)

el.addEventListener("mouseup", onMouseUp)

el.addEventListener("mouseleave", onMouseUp)

el.addEventListener("click", onClickCapture, true)

el.addEventListener("wheel", onWheel, { passive: false })

}

// Try immediately, then retry after delays to catch late CMS renders

init()

setTimeout(init, 500)

setTimeout(init, 1500)

}, [])

// Renders nothing — invisible helper

return null

}