components/Stats.js

import { useEffect, useRef } from 'react'

export default function Stats() {
  const ref = useRef(null)

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible')
        }
      })
    }, { threshold: 0.1 })

    const elements = ref.current.querySelectorAll('.reveal')
    elements.forEach(el => observer.observe(el))

    return () => elements.forEach(el => observer.unobserve(el))
  }, [])

  return (
    <section className="pb-20 md:pb-28 px-5 sm:px-8">
      <div className="max-w-5xl mx-auto">
        <div ref={ref} className="reveal grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-0 md:divide-x md:divide-black/[0.05] dark:md:divide-white/[0.06]">
          <div className="text-center py-2">
            <div className="font-serif text-[32px] md:text-[40px] text-ink-900 dark:text-white leading-none mb-1">5+</div>
            <div className="text-[12px] font-medium text-ink-400 dark:text-ink-500 tracking-wide uppercase">Years</div>
          </div>
          <div className="text-center py-2">
            <div className="font-serif text-[32px] md:text-[40px] text-ink-900 dark:text-white leading-none mb-1">1k+</div>
            <div className="text-[12px] font-medium text-ink-400 dark:text-ink-500 tracking-wide uppercase">Fixed</div>
          </div>
          <div className="text-center py-2">
            <div className="font-serif text-[32px] md:text-[40px] text-ink-900 dark:text-white leading-none mb-1">6mo</div>
            <div className="text-[12px] font-medium text-ink-400 dark:text-ink-500 tracking-wide uppercase">Warranty</div>
          </div>
          <div className="text-center py-2">
            <div className="font-serif text-[32px] md:text-[40px] text-ink-900 dark:text-white leading-none mb-1">4.9</div>
            <div className="text-[12px] font-medium text-ink-400 dark:text-ink-500 tracking-wide uppercase">Rating</div>
          </div>
        </div>
      </div>
    </section>
  )
}