'use client';

import { motion } from 'framer-motion';
import { CounterAnimation } from '@/components/counter-animation';
import { Users, Award, Clock, Building2 } from 'lucide-react';

const stats = [
  { icon: Users, value: 500, suffix: '+', label: 'Clients Served' },
  { icon: Award, value: 15, suffix: '+', label: 'Years Experience' },
  { icon: Clock, value: 98, suffix: '%', label: 'On-time Filing' },
  { icon: Building2, value: 200, suffix: '+', label: 'Businesses Managed' },
];

export function StatsSection() {
  return (
    <section className="py-20 relative overflow-hidden">
      <div className="absolute inset-0 bg-gradient-to-br from-[#081526] via-[#0d2137] to-[#1e4a6e]" />
      <div className="absolute inset-0 bg-mesh" />
      <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'radial-gradient(circle at 1px 1px, white 1px, transparent 0)', backgroundSize: '28px 28px' }} />

      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats?.map((stat: any, i: number) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: i * 0.1 }}
              className="text-center group"
            >
              <div className="w-14 h-14 rounded-2xl bg-white/[0.06] backdrop-blur-sm border border-white/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-[var(--gold)]/10 group-hover:border-[var(--gold)]/20 transition-all duration-300">
                <stat.icon className="w-7 h-7 text-[var(--gold)]" />
              </div>
              <div className="text-3xl sm:text-4xl font-bold text-white mb-1">
                <CounterAnimation end={stat?.value ?? 0} suffix={stat?.suffix ?? ''} />
              </div>
              <p className="text-white/50 text-sm">{stat?.label ?? ''}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}