'use client'

import { motion } from 'framer-motion'
import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { fadeUp, staggerContainer, viewportConfig } from '@/lib/animations'

type StatItem = {
  value: string
  label: string
  desc: string
  icon: string
}

const STATS: StatItem[] = [
  {
    value: '10,000+',
    label: 'Active Residents',
    desc: 'Empowering local communities with seamless smart living amenities.',
    icon: '👥',
  },
  {
    value: '5,000+',
    label: 'Completed Deliveries',
    desc: 'Completed in record time across Coimbatore societies.',
    icon: '🛵',
  },
  {
    value: '1,000+',
    label: 'Verified Businesses',
    desc: 'Directly supporting neighborhood shops and service providers.',
    icon: '🏪',
  },
  {
    value: '25+',
    label: 'Connected Communities',
    desc: 'Integrating diverse cooperative societies in Coimbatore.',
    icon: '🏡',
  },
]

export function Stats() {
  return (
    <div className="py-24 sm:py-32 bg-white px-5 sm:px-8 relative overflow-hidden">
      {/* Decorative Blob */}
      <div className="absolute top-1/4 right-0 w-[500px] h-[500px] rounded-full bg-purple-soft/40 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <SectionHeader
          label="Proven Scale"
          heading={
            <>
              Powering Cooperative
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Living at Scale
              </span>
            </>
          }
          sub="Our growing network makes sure that residents get access to everything they need quickly and reliably."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <motion.div
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={viewportConfig}
          className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8"
        >
          {STATS.map((stat) => (
            <motion.div key={stat.label} variants={fadeUp} className="group">
              <GlassCard className="h-full flex flex-col justify-between border-purple-lavender/50 hover:border-purple-primary shadow-nearle-sm group-hover:shadow-nearle-md group-hover:scale-[1.02] p-8">
                <div>
                  <span className="text-3xl block mb-4">{stat.icon}</span>
                  <p className="font-display font-extrabold text-4xl sm:text-5xl text-purple-deep tracking-tight bg-gradient-purple bg-clip-text text-transparent">
                    {stat.value}
                  </p>
                  <h4 className="font-display font-bold text-base text-nearle-dark mt-3">
                    {stat.label}
                  </h4>
                </div>
                <p className="font-body text-nearle-mid text-xs leading-relaxed mt-4 pt-4 border-t border-nearle-border/40">
                  {stat.desc}
                </p>
              </GlassCard>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </div>
  )
}
