'use client'
import { Text, SectionLabel } from '@/components/ui'
import React, { useLayoutEffect, useRef } from 'react'
import Image from 'next/image'
import { AudienceCard } from '@/components/audiencecard'
import { motion, useMotionValue, useSpring } from 'motion/react'
import type { HomeCard } from '@/types/home'
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useIsRtl } from '@/lib/use-is-rtl'

interface BuiltForEveryoneProps {
  heading: string
  description: string
  questionMarkImage: string
  listTitle: string
  listDescription: string
  cards: HomeCard[]
}

export const BuiltForEveryone = ({ heading, description, questionMarkImage, listTitle, listDescription, cards }: BuiltForEveryoneProps) => {
  const wrapperRef = useRef<HTMLDivElement>(null)
  const isRtl = useIsRtl()

  const x = useMotionValue(0)
  const springX = useSpring(x, { stiffness: 80, damping: 20, mass: 0.5 })
const fadeUp = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.25, 0.1, 0.25, 1] as const } },
}
const viewportConfig = { once: false, amount: 0.2 }

  useLayoutEffect(() => {
    gsap.registerPlugin(ScrollTrigger)
    const wrapper = wrapperRef.current
    const track = wrapper?.firstElementChild as HTMLElement | null
    if (!wrapper || !track) return

    let trigger: ScrollTrigger | undefined
    let frame = 0
    let lastSize = ''
    let lastX = 0
    let disposed = false
    const header = document.querySelector('header')
    const originalOverflow = wrapper.style.overflowX
    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)')

    const measure = () => {
      const height = window.innerHeight
      const headerBottom = header?.getBoundingClientRect().bottom ?? 0
      const top = Math.max(0, headerBottom) + 16
      const bottom = height - 16
      const rowHeight = track.offsetHeight
      return { top, bottom, rowHeight, centerTop: top + (bottom - top - rowHeight) / 2 }
    }

    const rebuild = () => {
      if (disposed) return
      const { top, bottom, rowHeight } = measure()
      const size = [window.innerWidth, window.innerHeight, wrapper.clientWidth, rowHeight, track.scrollWidth, top, reducedMotion.matches].join(':')
      if (size === lastSize) return
      lastSize = size
      trigger?.kill()
      trigger = undefined
      wrapper.style.overflowX = originalOverflow
      const padding = getComputedStyle(wrapper)
      const visibleWidth = wrapper.clientWidth - parseFloat(padding.paddingLeft) - parseFloat(padding.paddingRight)
      const travel = Math.max(0, track.scrollWidth - visibleWidth)
      lastX = 0
      x.jump(0)
      springX.jump(0)

      if (window.innerWidth < 1024 || !travel) return
      // A row taller than the available screen cannot be fully visible without
      // resizing the design. Keep native scrolling accessible in that case.
      if (rowHeight > bottom - top || reducedMotion.matches) {
        wrapper.style.overflowX = 'auto'
        return
      }
      wrapper.scrollLeft = 0
      const finishDistance = 180
      trigger = ScrollTrigger.create({
        trigger: wrapper,
        start: () => 'top ' + measure().centerTop + 'px',
        end: () => '+=' + (travel + finishDistance),
        pin: true,
        pinSpacing: true,
        invalidateOnRefresh: true,
        onUpdate: self => {
          const progress = self.progress * (travel + finishDistance)
          const nextX = isRtl ? Math.min(travel, progress) : -Math.min(travel, progress)
          if (nextX !== lastX) {
            lastX = nextX
            x.set(nextX)
          }
        },
      })
      ScrollTrigger.refresh()
    }
    const schedule = () => {
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(rebuild)
    }
    const observer = new ResizeObserver(schedule)
    observer.observe(wrapper)
    observer.observe(track)
    if (header) observer.observe(header)
    window.addEventListener('resize', schedule)
    if (reducedMotion.addEventListener) {
      reducedMotion.addEventListener('change', schedule)
    } else {
      reducedMotion.addListener(schedule)
    }
    document.fonts?.ready.then(schedule)
    rebuild()
    return () => {
      disposed = true
      cancelAnimationFrame(frame)
      observer.disconnect()
      window.removeEventListener('resize', schedule)
      if (reducedMotion.removeEventListener) {
        reducedMotion.removeEventListener('change', schedule)
      } else {
        reducedMotion.removeListener(schedule)
      }
      trigger?.kill()
      wrapper.style.overflowX = originalOverflow
    }
  }, [x, springX, cards, isRtl])

  return (
    <div className=''>
      <div className='stack  container flex lg:flex-row flex-col items-stretch gap-10 lg:gap-5 2xl:gap-[87px] justify-between'>
        <motion.div variants={fadeUp} initial='hidden' whileInView='visible' viewport={viewportConfig} custom={0} className='space-y-5'>
                
          <Text size='h2' className='uppercase lg:max-w-[35rem] xl:leading-[60px] 2xl:leading-[68px]'
            dangerouslySetInnerHTML={{ __html: heading.replace('<span>', '<span class="gradient-text-green">') }}
          />
          <Text size='normal' className='text-accent lg:max-w-[20rem] xl:max-w-[31rem]' textKey={description} />
          
        </motion.div>
        
         <div className='flex justify-center lg:block lg:mt-[75px]'>
           <Image src={questionMarkImage} alt='' width={377} height={377} className='w-[250px] xl:w-[377px]' />
         </div>
          <div className='space-y-5 md:space-y-[30px] lg:mt-[330px]'>
            <SectionLabel label={listTitle} />
            <Text size='normal' className='text-accent max-w-[31rem]' textKey={listDescription} />
        
        </div>
      </div>

    <div className='stack'>
      {/* Desktop: centered, pinned horizontal scroll */}
      <div ref={wrapperRef} className='overflow-hidden pxcontainer hidden lg:block'>
        <motion.div
          className='flex gap-[50px] w-max'
          style={{ x: springX }}
        >
          {cards.map((item) => (
            <AudienceCard
              key={item.card_title}
              image={item.card_image}
              title={item.card_title}
              description={item.card_description}
              href={item.card_attribute}
            />
          ))}
        </motion.div>
      </div>
      {/* Mobile/Tablet: native horizontal scroll */}
      <div className='overflow-x-auto pxcontainer lg:hidden scrollbar-hide'>
        <div className='flex gap-5 w-max'>
          {cards.map((item) => (
            <AudienceCard
              key={item.card_title}
              image={item.card_image}
              title={item.card_title}
              description={item.card_description}
              href={item.card_attribute}
            />
          ))}
        </div>
      </div>
    </div>
    </div>
  )
}