'use client'

import { motion } from 'framer-motion'

const stats = [
  { value: "120,000+", label: "服务实体商户", highlight: "12万+" },
  { value: "500,000+", label: "日均交易笔数", highlight: "50万+" },
  { value: "300万+", label: "累计引流人次", highlight: "300万+" },
  { value: "20亿+", label: "平台年GMV流水", highlight: "20亿+" }
]

export function Stats() {
  return (
    <section className="py-0">
      <div className="bg-gradient-to-r from-[#0A1931] via-[#185ADB] to-[#0A1931] text-white py-16 md:py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 items-center">
            {stats.map((stat, index) => (
              <motion.div
                key={index}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="text-center"
              >
                {/* 大号数字，突出显示 */}
                <h3 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-[#FF6600] mb-2 md:mb-3 leading-none">
                  {stat.highlight}
                </h3>
                {/* 下方详细说明 */}
                <p className="text-sm sm:text-base md:text-lg text-gray-300 font-medium uppercase tracking-wider">
                  {stat.label}
                </p>
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  )
}