<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script>
window.addEventListener('load', () => {

  gsap.registerPlugin(ScrollTrigger);

  // Apply class `count-up` to the number box.
  // Type the number alone (98) OR with a static character baked in ($1,500 / 98% / 4.9★ / 250+).
  // Only the numeral animates; any prefix/suffix character stays static.
  document.querySelectorAll('.count-up').forEach(el => {

    // Drill to the deepest span so Showit's inline font styling is preserved.
    let textEl = el;
    while (textEl.firstElementChild) textEl = textEl.firstElementChild;

    const raw = textEl.textContent.trim();

    // Split into: [prefix chars] [number] [suffix chars]
    const match = raw.match(/^([^\d.,]*)([\d.,]+)([^\d.,]*)$/);
    if (!match) return; // no number found, skip

    const prefix = match[1]; // e.g. "$" (or "")
    const numStr = match[2]; // e.g. "1,500"
    const suffix = match[3]; // e.g. "%" "+" (or "")

    const target = parseFloat(numStr.replace(/,/g, ''));
    if (isNaN(target)) return;

    const decimals = (numStr.split('.')[1] || '').length; // match typed decimals
    const useCommas = numStr.includes(','); // match typed commas
    const proxy = { val: 0 };

    const render = () => {
      let n = proxy.val.toFixed(decimals);
      if (useCommas) {
        const p = n.split('.');
        p[0] = p[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        n = p.join('.');
      }
      textEl.textContent = prefix + n + suffix; // static chars stay put
    };

    render(); // reset to starting value before it triggers

    gsap.to(proxy, {
      val: target,
      duration: 2, // ← tweak count speed here
      ease: 'power1.out',
      onUpdate: render,
      scrollTrigger: {
        trigger: el,
        start: 'top 80%',
        toggleActions: 'play none none none', // count once
      },
    });
  });

});
</script>