all-file-converter/src/components/Stats.tsx

import { CheckCircle2, Users, FileCode, Zap } from "lucide-react";
import { motion } from "motion/react";

export default function Stats() {
  const statsList = [
    {
      id: "stat-formats",
      marker: "200+",
      label: "Supported Formats",
      subText: "PDF, Image, Video, Audio, Archiving, Docs",
      icon: <FileCode className="w-5 h-5 text-violet-600" />,
      color: "from-violet-500/10 to-indigo-500/10",
    },
    {
      id: "stat-users",
      marker: "50,000+",
      label: "Active Installs",
      subText: "Leading offline desktop choice worldwide",
      icon: <Users className="w-5 h-5 text-indigo-600" />,
      color: "from-indigo-500/10 to-sky-500/10",
    },
    {
      id: "stat-rate",
      marker: "99.9%",
      label: "Success Processing",
      subText: "Advanced local encoding checks",
      icon: <CheckCircle2 className="w-5 h-5 text-emerald-600" />,
      color: "from-emerald-500/10 to-teal-500/10",
    },
    {
      id: "stat-gpu",
      marker: "0ms Cloud Delay",
      label: "GPU Accelerated",
      subText: "100% on-device AI upscaling and codecs",
      icon: <Zap className="w-5 h-5 text-fuchsia-600" />,
      color: "from-fuchsia-100 to-pink-100",
    },
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 100 } },
  };

  return (
    <section className="py-16 bg-white border-y border-slate-100">
      <div className="max-w-7xl mx-auto px-4 md:px-8">
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"
          id="stats-container"
        >
          {statsList.map((stat) => (
            <motion.div
              key={stat.id}
              variants={itemVariants}
              whileHover={{ y: -5, shadow: "0 10px 30px -15px rgba(0,0,0,0.06)" }}
              className="p-6 rounded-3xl bg-slate-50 border border-slate-100/60 text-left transition-all relative overflow-hidden group"
              id={stat.id}
            >
              {/* Decorative side shape */}
              <div className="absolute top-0 right-0 w-32 h-32 bg-slate-100/40 rounded-full blur-2xl group-hover:scale-125 transition-transform duration-500 pointer-events-none" />

              <div className="flex items-center space-x-3 mb-4">
                <div className={`p-3 rounded-2xl bg-white shadow-sm flex items-center justify-center`}>
                  {stat.icon}
                </div>
                <div className="font-display font-bold text-2xl md:text-3xl text-slate-900 tracking-tight">
                  {stat.marker}
                </div>
              </div>

              <div>
                <h4 className="text-slate-800 text-sm font-semibold tracking-wide mb-1">
                  {stat.label}
                </h4>
                <p className="text-xs text-slate-500 leading-relaxed font-light">
                  {stat.subText}
                </p>
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}