"use client"

import { motion } from "framer-motion"

const stats = [
  { label: "Active Workers", value: "12,450", suffix: "+" },
  { label: "Tasks Completed", value: "2.3M", suffix: "" },
  { label: "Total Earnings", value: "$450K", suffix: "" },
  { label: "Avg Task Pay", value: "$2.50", suffix: "" },
]

export function StatsSection() {
  return (
    <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white border-y-2 border-gray-200">
      <div className="max-w-6xl mx-auto">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((stat, index) => (
            <motion.div
              key={index}
              className="text-center py-4 border-r-2 border-gray-200 last:border-r-0"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <div className="text-3xl sm:text-4xl font-bold mb-2 text-primary">
                {stat.value}
                <span className="text-primary">{stat.suffix}</span>
              </div>
              <p className="text-sm sm:text-base text-gray-600 font-medium">{stat.label}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  )
}