"use client";

import { motion } from "framer-motion";
import { content } from "@/lib/content";
import { fadeUp, staggerContainer, staggerItem } from "@/lib/animations";
import CountUpNumber from "@/components/shared/CountUpNumber";

const stats = content.ar.stats.items;

export default function StatsSection() {
  return (
    <section className="py-20 md:py-28 bg-sky-50 relative overflow-hidden">
      <div className="container mx-auto px-4 md:px-6">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-80px" }}
          variants={staggerContainer}
          className="grid grid-cols-1 md:grid-cols-3 gap-10 md:gap-8"
        >
          {stats.map((stat, index) => (
            <motion.div
              key={index}
              variants={staggerItem}
              className="flex flex-col items-center text-center relative"
            >
              {/* Subtle glow behind number */}
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-sky-200/40 rounded-full blur-3xl pointer-events-none" />

              <CountUpNumber
                value={parseFloat(stat.value)}
                suffix={stat.suffix}
                className="relative text-4xl md:text-5xl font-bold text-slate-900"
              />
              <p className="mt-3 text-lg text-slate-600 font-medium relative">
                {stat.label}
              </p>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
