Stats Section

'use client'

import { motion } from 'framer-motion'
import { useRef } from 'react'
import { useInView } from 'framer-motion'
import { Users, TrendingUp, Award, Zap } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'

const stats = [
  { icon: Users, value: 50000, label: 'Active Users', suffix: '+' },
  { icon: TrendingUp, value: 99.9, label: 'Uptime', suffix: '%' },
  { icon: Award, value: 150, label: 'Awards Won', suffix: '+' },
  { icon: Zap, value: 1000, label: 'Features', suffix: '+' },
]

export function StatsSection() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })

  return (
    <div ref={ref} className="w-full px-4 py-16">
      <div className="mx-auto max-w-6xl">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ duration: 0.6 }}
          className="mb-12 text-center"
        >
          <h2 className="mb-4 text-3xl font-bold sm:text-4xl md:text-5xl">Trusted by Thousands</h2>
          <p className="text-sm text-[var(--foreground)]/70 sm:text-base md:text-lg">
            Join millions of users who trust our platform
          </p>
        </motion.div>

        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat, index) => {
            const Icon = stat.icon
            return (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 50, scale: 0.9 }}
                animate={isInView ? { opacity: 1, y: 0, scale: 1 } : { opacity: 0, y: 50, scale: 0.9 }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
              >
                <Card className="relative overflow-hidden  bg-[var(--card-bg)] transition-all hover:shadow-lg">
                  <CardContent className="p-6">
                    <motion.div
                      initial={{ scale: 0, rotate: -180 }}
                      animate={isInView ? { scale: 1, rotate: 0 } : { scale: 0, rotate: -180 }}
                      transition={{ delay: index * 0.1 + 0.2, type: 'spring', stiffness: 200 }}
                      className="mb-4 inline-flex rounded-lg bg-accent/10 p-3"
                    >
                      <Icon className="h-6 w-6 text-white" />
                    </motion.div>
                    <motion.h3
                      initial={{ opacity: 0 }}
                      animate={isInView ? { opacity: 1 } : { opacity: 0 }}
                      transition={{ delay: index * 0.1 + 0.3 }}
                      className="mb-2 text-3xl font-bold"
                    >
                      {stat.value.toLocaleString()}
                      {stat.suffix}
                    </motion.h3>
                    <motion.p
                      initial={{ opacity: 0 }}
                      animate={isInView ? { opacity: 1 } : { opacity: 0 }}
                      transition={{ delay: index * 0.1 + 0.4 }}
                      className="text-sm text-[var(--foreground)]/70"
                    >
                      {stat.label}
                    </motion.p>
                  </CardContent>
                </Card>
              </motion.div>
            )
          })}
        </div>
      </div>
    </div>
  )
}