---
/**
 * StatisticsSection - Data showcase with countup animation
 * Features: 4 statistics, countup animation (3s), responsive grid
 */
import type { HomeData } from '@/lib/api/home'

interface Props {
  homeData?: HomeData | null
}

const { homeData } = Astro.props

// Statistics data - matching reference HTML exactly
const statistics = [
  {
    number: 500,
    suffix: '',
    percentage: '',
    description: '至今協助商家數',
  },
  {
    number: 150,
    suffix: '.0',
    percentage: '%',
    description: '提升成長率',
  },
  {
    number: 98,
    suffix: '.0',
    percentage: '%',
    description: '客戶滿意度',
  },
  {
    number: 95,
    suffix: '.0',
    percentage: '%',
    description: '客戶續約率',
  },
]
---

<!-- Statistics Section - Matching reference HTML structure with H1 heading -->
<section class="section-digi-running" aria-labelledby="statistics-heading">
  <!-- Section Header - H1 "數據會說話" -->
  <div class="section-header-w-line">
    <h1 id="statistics-heading" class="statistics-heading">
      數據會說話
    </h1>
    <p class="statistics-subheading">
      Statistics reveal the truth
    </p>
  </div>

  <!-- Statistics Data Grid -->
  <div class="digi-holder-grid">
    {
      statistics.map((stat) => (
        <div class="digi-item" data-number={stat.number}>
          <!-- Number -->
          <div class="text-no">
            <span class="countup-number" data-target={stat.number}>0</span>
            {stat.suffix}
          </div>

          <!-- Percentage (if separate from suffix) -->
          {
            stat.percentage && (
              <span class="text-percentage">{stat.percentage}</span>
            )
          }

          <!-- Description -->
          <p class="text-description">{stat.description}</p>
        </div>
      ))
    }
  </div>
</section>

<style>
  /* Statistics Section Styles - Pixel-perfect from Webflow */
  .section-digi-running {
    padding: 64px 0;
    text-align: center;
  }

  /* Section Header - Matching reference HTML */
  .section-header-w-line {
    margin-bottom: 3rem;
  }

  .statistics-heading {
    font-family: "Noto Sans TC", sans-serif;
    font-size: 1.8em; /* 34.2px at 19px base */
    font-weight: 700;
    color: var(--color-dark-blue, #062841);
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .statistics-subheading {
    font-family: "Quicksand", "Noto Sans TC", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-gray-600, #666);
    text-align: center;
    margin: 0;
  }

  .digi-holder-grid {
    display: grid;
    grid-column-gap: 85px;
    grid-row-gap: 16px;
    grid-template-columns: repeat(4, max-content);
    justify-content: center;
    max-width: 1150px;
    margin: 0 auto;
  }

  .digi-item {
    text-align: center;
  }

  /* Large Number - 72px with amber color */
  .text-no {
    font-size: 72px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-amber);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
  }

  .countup-number {
    display: inline-block;
  }

  /* Percentage - 36px */
  .text-percentage {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-gray-700);
  }

  /* Description - 30px */
  .text-description {
    font-size: 30px;
    font-weight: 100;
    line-height: 1.2;
    color: var(--color-dark-blue);
    margin-top: 8px;
  }

  /* Responsive Adjustments */
  @media (max-width: 991px) {
    .digi-holder-grid {
      grid-template-columns: repeat(2, max-content);
      grid-column-gap: 40px;
    }

    .text-no {
      font-size: 56px;
    }

    .text-percentage {
      font-size: 28px;
    }

    .text-description {
      font-size: 24px;
    }
  }

  @media (max-width: 767px) {
    .digi-holder-grid {
      grid-template-columns: max-content;
      grid-column-gap: 24px;
      grid-row-gap: 32px;
    }

    .text-no {
      font-size: 48px;
    }

    .text-percentage {
      font-size: 24px;
    }

    .text-description {
      font-size: 20px;
    }
  }
</style>

<script>
  // Countup animation function
  function animateCountup(element: Element, target: number, duration: number = 3000) {
    const start = 0
    const startTime = performance.now()

    function update(currentTime: number) {
      const elapsed = currentTime - startTime
      const progress = Math.min(elapsed / duration, 1)

      // Easing function (ease-out)
      const easeOut = 1 - Math.pow(1 - progress, 3)
      const current = Math.floor(start + (target - start) * easeOut)

      element.textContent = current.toString()

      if (progress < 1) {
        requestAnimationFrame(update)
      } else {
        element.textContent = target.toString()
      }
    }

    requestAnimationFrame(update)
  }

  // Intersection Observer for triggering animation when visible
  function initStatisticsCountup() {
    const observerOptions = {
      root: null,
      rootMargin: '0px',
      threshold: 0.5,
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const numbers = entry.target.querySelectorAll('.countup-number')
          numbers.forEach(num => {
            const target = parseInt(num.getAttribute('data-target') || '0', 10)
            animateCountup(num, target, 3000)
          })
          observer.unobserve(entry.target)
        }
      })
    }, observerOptions)

    const section = document.querySelector('.section-digi-running')
    if (section) {
      observer.observe(section)
    }
  }

  // Initialize when DOM is ready
  document.addEventListener('DOMContentLoaded', initStatisticsCountup)
  if (document.readyState !== 'loading') {
    initStatisticsCountup()
  }
</script>
