'use client';

import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import { Brain, Cpu, Database, Zap } from 'lucide-react';

const stats = [
  { value: '50+', label: 'Models Deployed', icon: Brain },
  { value: '98%', label: 'Accuracy Rate', icon: Zap },
  { value: '10M+', label: 'Data Points', icon: Database },
  { value: '12', label: 'Research Papers', icon: Cpu },
];

export default function Stats() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });

  return (
    <section id="research" ref={ref} className="py-32 px-6 relative">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          animate={isInView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="mb-20"
        >
          <h2 className="font-serif text-4xl md:text-6xl mb-4">Performance Metrics</h2>
          <div className="w-24 h-1 bg-white"></div>
        </motion.div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {stats.map((stat, index) => (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 30 }}
              animate={isInView ? { opacity: 1, y: 0 } : {}}
              transition={{ delay: index * 0.1, duration: 0.5 }}
              className="electric-border p-8 group hover:bg-white/5 transition-colors duration-500"
            >
              <div className="flex justify-between items-start mb-6">
                <stat.icon className="w-8 h-8 text-gray-400 group-hover:text-white transition-colors" />
                <div className="w-2 h-2 bg-white rounded-full opacity-50 group-hover:opacity-100 group-hover:animate-pulse"></div>
              </div>
              <div className="font-serif text-5xl md:text-6xl mb-2 group-hover:translate-x-2 transition-transform duration-300">
                {stat.value}
              </div>
              <div className="font-mono text-xs uppercase tracking-widest text-faint group-hover:text-gray-300">
                {stat.label}
              </div>
            </motion.div>
          ))}
        </div>

        {/* Large Text Feature */}
        <motion.div 
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          className="mt-32 p-12 border border-white/10 bg-gradient-to-br from-white/5 to-transparent backdrop-blur-sm"
        >
          <p className="font-serif text-2xl md:text-4xl leading-relaxed text-gray-300">
            "We don't just predict the future; we <span className="text-white italic">synthesize</span> it through layers of computation and intuition."
          </p>
        </motion.div>
      </div>
    </section>
  );
}