import { ScrollReveal } from '@/components/ui/scroll-reveal'

interface StatItem {
  value: string
  label: string
  description?: string
}

export function StatsSection({ stats, title, subtitle }: { stats: StatItem[]; title?: string; subtitle?: string }) {
  return (
    <section className="relative py-24 overflow-hidden">
      {/* Gradient background */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#081B33] via-[#0d2444] to-[#0a1f3a]" />
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500 rounded-full blur-[150px]" />
        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500 rounded-full blur-[150px]" />
      </div>
      {/* Grid pattern */}
      <div
        className="absolute inset-0 opacity-[0.03]"
        style={{
          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
          backgroundSize: '60px 60px',
        }}
      />

      <div className="relative z-10 max-w-7xl mx-auto px-6 lg:px-8">
        {(title || subtitle) && (
          <ScrollReveal>
            <div className="text-center mb-16">
              {title && (
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">{title}</h2>
              )}
              {subtitle && (
                <p className="text-lg text-slate-400 max-w-2xl mx-auto">{subtitle}</p>
              )}
            </div>
          </ScrollReveal>
        )}

        <div className={`grid grid-cols-2 ${stats.length <= 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-4'} gap-6`}>
          {stats.map((stat, i) => (
            <ScrollReveal key={i} delay={i * 100}>
              <div className="relative group text-center p-8 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm hover:bg-white/10 hover:border-white/20 transition-all duration-500">
                <div className="absolute inset-0 rounded-2xl bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                <div className="relative z-10">
                  <p className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-2 tracking-tight">{stat.value}</p>
                  <p className="text-sm font-semibold text-blue-400 uppercase tracking-wider mb-1">{stat.label}</p>
                  {stat.description && (
                    <p className="text-xs text-slate-500 mt-1">{stat.description}</p>
                  )}
                </div>
              </div>
            </ScrollReveal>
          ))}
        </div>
      </div>
    </section>
  )
}