Judul diam jadi berkilau.

/*
 * Gradient Text Sweep — diadaptasi untuk Tandarupa
 * Asal: https://asset.inwebsite.online/snippets/text-effects/gradient-text-sweep (v1.1.0)
 * Perubahan: TSX → JSX, warna kilau ungu/pink/oranye → aksen #e8461e dan oranye hangat,
 * warna dasar teks = --ink situs, durasi kilatan ×1,25, jeda awal menunggu judul selesai naik,
 * posisi kilatan dipindah ke huruf judul hero, gambar kilatan diberi `block`
 * (tanpa preflight, img inline turun ke baseline), cabang prefers-reduced-motion dibuang.
 */
import { useRef } from 'react'
import gsap from 'gsap'
import { useGSAP } from '@gsap/react'

gsap.registerPlugin(useGSAP)

// Kilatan pipih untuk halaman terang, kilatan bercahaya untuk halaman gelap.
const GLINT_LIGHT = 'https://inassetweb-cdn.inwebsite.online/sprinkles/v1/particles/sparkle-4point.png'
const GLINT_DARK = 'https://inassetweb-cdn.inwebsite.online/sprinkles/v1/effects/twinkle.png'

// Posisi kilatan [kiri %, atas %] di kotak teks. Tiap kilatan menyala saat cahaya lewat.
// Di hero Tandarupa: ujung huruf M, atas kata "yang", dan titik di akhir "orang."
const GLINTS = [
  [13, 4],
  [56, 9],
  [81, 90],
]

// Pita cahaya berjalan dari 40% di kiri teks sampai 40% lewat tepi kanannya.
const FROM = -0.4
const TO = 1.4

export default function GradientTextSweep({
  as: Tag = 'h2',
  children = 'Design at the speed of thought',
  colors = ['#e8461e', '#f2683a', '#ff9a3d'],
  duration = 1.7,
  pause = 0.5,
  sparkles = true,
  glint = 'auto',
  delay = 0.45,
  className = '',
}) {
  const root = useRef(null)

  useGSAP(
    () => {
      const el = root.current
      if (!el) return
      const q = gsap.utils.selector(el)
      // Posisi background (%) yang menaruh pusat pita di `x` (0 = tepi kiri, 1 = tepi kanan teks).
      const place = (x) => (el.style.backgroundPosition = `${((1.5 - x) / 2) * 100}% 0, 0 0`)

      const light = { x: FROM }
      place(FROM)
      const tl = gsap.timeline({ delay, repeat: -1, repeatDelay: pause })
      tl.to(light, { x: TO, duration, ease: 'none', onUpdate: () => place(light.x) }, 0)

      // Tiap kilatan menyala tepat saat pusat pita sampai di posisinya.
      q('.gts-glint').forEach((glint, i) => {
        const at = (((GLINTS[i]?.[0] ?? 50) / 100 - FROM) / (TO - FROM)) * duration
        tl.fromTo(
          glint,
          { scale: 0, rotation: -60, autoAlpha: 1 },
          { scale: 1, rotation: 0, duration: 0.35, ease: 'back.out(3)', immediateRender: false },
          Math.max(0, at - 0.14),
        ).to(glint, { scale: 0, rotation: 45, autoAlpha: 0, duration: 0.5, ease: 'power2.in' }, '>0.05')
      })
    },
    { scope: root, dependencies: [duration, pause, delay], revertOnUpdate: true },
  )

  const style = {
    // Lapisan atas: pita cahaya, simetris di sekitar intinya (transparan di luar pita). Lapisan bawah: warna dasar teks.
    backgroundImage: `linear-gradient(100deg, transparent 37%, ${colors[0]} 43%, ${colors[1]} 47%, ${colors[2]} 50%, ${colors[1]} 53%, ${colors[0]} 57%, transparent 63%), linear-gradient(var(--gts-base), var(--gts-base))`,
    backgroundSize: '300% 100%, 100% 100%',
    backgroundRepeat: 'no-repeat',
    backgroundPosition: `${((1.5 - FROM) / 2) * 100}% 0, 0 0`,
  }

  return (
    <Tag
      ref={root}
      style={style}
      className={`relative bg-clip-text text-transparent [--gts-base:var(--ink)] dark:[--gts-base:#f6f5f8] ${Tag === 'span' ? 'inline' : ''} ${className}`}
    >
      {children}
      {sparkles && (
        <span aria-hidden className="pointer-events-none absolute inset-0">
          {GLINTS.map(([left, top], i) => (
            <span
              key={i}
              className="gts-glint invisible absolute size-[0.42em] max-h-7 max-w-7 min-h-3 min-w-3 -translate-x-1/2 -translate-y-1/2"
              style={{ left: `${left}%`, top: `${top}%` }}
            >
              {glint !== 'glow' && <img src={GLINT_LIGHT} alt="" className={`block size-full ${glint === 'auto' ? 'dark:hidden' : ''}`} />}
              {glint !== 'flat' && <img src={GLINT_DARK} alt="" className={`size-full scale-[1.8] ${glint === 'auto' ? 'hidden dark:block' : ''}`} />}
            </span>
          ))}
        </span>
      )}
    </Tag>
  )
}