Nama klien menyala saat disentuh.

/*
 * Logo Cloud Marquee — diadaptasi untuk Tandarupa
 * Asal: https://asset.inwebsite.online/snippets/cards-sections/logo-cloud-marquee (v1.0.1)
 * Perubahan: TSX → JSX, nama klien dari CLIENTS jadi wordmark dengan font situs, semua warna merek
 * jadi aksen #e8461e, abu-abu netral jadi warna tinta situs, kartu selebar kontainer situs,
 * tanpa mode gelap, tanpa demo autoPlay, tanpa cabang reduced-motion, tanpa tautan "Read customer stories".
 */
import { useRef } from 'react'
import gsap from 'gsap'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP)

const ACCENT = '#e8461e'

export default function LogoCloudMarquee({ logos, title, duration = 34, className = '' }) {
  const root = useRef(null)
  const loops = useRef([])

  const half = Math.ceil(logos.length / 2)
  const rows = [logos.slice(0, half), logos.slice(half)]

  // Kecepatan baris diubah pelan, tidak meloncat (hover memperlambat baris).
  const setSpeed = (row, speed) => {
    const loop = loops.current[row]
    if (loop) gsap.to(loop, { timeScale: speed, duration: 0.7, ease: 'power2.out', overwrite: true })
  }

  useGSAP(
    () => {
      const q = gsap.utils.selector(root)
      // Tiap track berisi logonya dua kali, jadi geser setengah lebar = loop tanpa sambungan.
      loops.current = q('.lcm-track').map((track, i) =>
        i % 2 === 0
          ? gsap.fromTo(track, { xPercent: 0 }, { xPercent: -50, duration, ease: 'none', repeat: -1 })
          : gsap.fromTo(track, { xPercent: -50 }, { xPercent: 0, duration: duration * 1.12, ease: 'none', repeat: -1 }),
      )
      gsap.from('.lcm-row', { autoAlpha: 0, y: 10, duration: 0.9, ease: 'power3.out', stagger: 0.12 })
      return () => {
        loops.current = []
      }
    },
    { scope: root, dependencies: [duration, logos.length], revertOnUpdate: true },
  )

  return (
    <div
      ref={root}
      className={`relative w-full overflow-hidden rounded-[28px] bg-[#faf8f3] py-9 shadow-[0_1px_2px_rgba(20,19,17,0.04),0_12px_40px_-12px_rgba(20,19,17,0.14)] ring-1 ring-[rgba(20,19,17,0.08)] sm:py-11 ${className}`}
    >
      <p className="mx-auto max-w-md px-6 text-center text-balance">{title}</p>

      <div className="mt-7 border-y border-[rgba(20,19,17,0.12)] [mask-image:linear-gradient(to_right,transparent,black_14%,black_86%,transparent)] sm:mt-8">
        {rows.map((row, r) => (
          <div
            key={r}
            onPointerEnter={() => setSpeed(r, 0.18)}
            onPointerLeave={() => setSpeed(r, 1)}
            className={`lcm-row group/row overflow-hidden ${r > 0 ? 'border-t border-[rgba(20,19,17,0.12)]' : ''}`}
          >
            <ul aria-label={r === 0 ? 'Logo klien' : undefined} className="lcm-track m-0 flex w-max list-none p-0">
              {[0, 1].map((copy) =>
                row.map((item) => (
                  <li
                    key={`${copy}-${item.name}`}
                    aria-hidden={copy === 1 || undefined}
                    style={{ '--lcm-brand': item.color ?? ACCENT }}
                    // Menyala saat hover: kontras penuh, naik sedikit, wordmark berwarna aksen.
                    className="lcm-logo relative isolate flex h-[68px] items-center px-7 text-[#5b5750] transition-[color,opacity,translate] duration-300 group-hover/row:opacity-40 hover:-translate-y-0.5 hover:text-[#141311] hover:opacity-100! sm:h-[84px] sm:px-10 [&_.lcm-glyph]:transition-colors [&_.lcm-glyph]:duration-300 [&:hover_.lcm-glyph]:[color:var(--lcm-brand)]"
                  >
                    <span
                      aria-hidden
                      className="pointer-events-none absolute inset-x-4 inset-y-5 -z-10 rounded-full opacity-0 blur-xl transition-opacity duration-500 [background:var(--lcm-brand)] [li:hover>&]:opacity-20"
                    />
                    <span aria-hidden className="flex items-center">
                      {item.logo}
                    </span>
                    <span className="sr-only">{item.name}</span>
                  </li>
                )),
              )}
            </ul>
          </div>
        ))}
      </div>
    </div>
  )
}