"use client";

import { motion } from "framer-motion";

const stats = [
  { value: "3", label: "Categories" },
  { value: "∞", label: "Possibilities" },
  { value: "1", label: "Winner Per Category" },
  { value: "100%", label: "Free Entry" },
];

export default function Stats() {
  return (
    <section className="py-16 bg-lime-400">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
          {stats.map((stat, index) => (
            <motion.div
              key={stat.label}
              initial={{ opacity: 0, scale: 0.8 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              className="text-center"
            >
              <div className="text-5xl sm:text-6xl font-black text-black mb-2">
                {stat.value}
              </div>
              <div className="text-black/70 font-medium tracking-wide uppercase text-sm">
                {stat.label}
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}