"use client"
import { useEffect, useRef, useState } from 'react';
import { Briefcase, Trophy, Users, Clock, ArrowUpRight, Sparkles } from 'lucide-react';

interface StatCardProps {
  icon: React.ReactNode;
  value: number;
  label: string;
  suffix?: string;
  isVisible: boolean;
  delay: number;
}

function StatCard({ icon, value, label, suffix = '', isVisible, delay }: StatCardProps) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!isVisible) return;

    const timeout = setTimeout(() => {
      let start = 0;
      const duration = 2500;
      const increment = value / (duration / 16);

      const timer = setInterval(() => {
        start += increment;
        if (start >= value) {
          setCount(value);
          clearInterval(timer);
        } else {
          setCount(Math.floor(start));
        }
      }, 16);

      return () => clearInterval(timer);
    }, delay);

    return () => clearTimeout(timeout);
  }, [isVisible, value, delay]);

  return (
    <div className="group relative">
  <div
    className="relative rounded-2xl p-8 bg-slate-900 transition-all duration-500 hover:scale-105"
  >
    <div className="absolute -top-12 -right-12 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl" />
    <div className="absolute -bottom-12 -left-12 w-32 h-32 bg-cyan-500/10 rounded-full blur-2xl" />

    <div
      className="absolute inset-0 rounded-2xl opacity-5"
      style={{
        backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0)`,
        backgroundSize: '20px 20px'
      }}
    />

    <div className="relative z-10 flex flex-col items-center text-center">
      <div className="mb-5 p-3.5 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-white/5 group-hover:scale-110 transition-transform duration-500 group-hover:from-blue-500/30 group-hover:to-cyan-500/30">
        <div className="text-blue-300/80 group-hover:text-white transition-colors duration-500">
          {icon}
        </div>
      </div>

      <div className="mb-2 text-[3.5rem] leading-[1.2] font-bold tracking-tight text-white">
        {count}{suffix}
      </div>

      <div className="text-blue-200/50 group-hover:text-blue-200/80 transition-colors duration-500 text-sm uppercase tracking-[0.15em] font-medium">
        {label}
      </div>

      <div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
        <Sparkles className="w-3.5 h-3.5 text-blue-300/50" />
      </div>

      <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
        <ArrowUpRight className="w-4 h-4 text-blue-300/30 group-hover:text-blue-300/60 transition-colors" />
      </div>
    </div>
  </div>
</div>
  );
}

export default function TsCounter() {
  const [isVisible, setIsVisible] = useState(false);
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true);
        }
      },
      { threshold: 0.2 }
    );

    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current);
      }
    };
  }, []);

  const stats = [
    {
      icon: <Briefcase size={30} strokeWidth={1.5} />,
      value: 100,
      suffix: '+',
      label: 'Clients',
      delay: 0
    },
    {
      icon: <Trophy size={30} strokeWidth={1.5} />,
      value: 1000,
      suffix: '+',
      label: 'Projects',
      delay: 200
    },
    {
      icon: <Users size={30} strokeWidth={1.5} />,
      value: 500,
      suffix: '+',
      label: 'Employees',
      delay: 400
    },
    {
      icon: <Clock size={30} strokeWidth={1.5} />,
      value: 17,
      suffix: '+',
      label: 'Years',
      delay: 600
    }
  ];

  return (
    <div ref={sectionRef} className=" w-full pt-24 pb-10 px-4 relative overflow-hidden">
      <div className="absolute inset-0" />
      <div className="absolute inset-0 opacity-[0.03]" style={{
        backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0)`,
        backgroundSize: '30px 30px'
      }} />
      <div className="relative z-10">
        <div className="text-center mb-16">
          <div className="inline-block mb-4 px-4 py-1.5 rounded-full border border-blue-950 bg-blue-900">
            <span className="text-white text-xs uppercase tracking-[0.2em] font-medium">
              Our Achievements
            </span>
          </div>
          
          <h2 className="text-5xl md:text-6xl font-bold mb-4">
            <span className="text-slate-950">Numbers That</span>
            <br />
            <span className="">
              Define Our Success
            </span>
          </h2>
          
          <p className="text-gray-600 text-base max-w-2xl mx-auto">
            Every number represents a milestone in our journey of excellence
          </p>
        </div>
        <div className="mx-auto max-w-7xl grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {stats.map((stat, index) => (
            <StatCard
              key={index}
              icon={stat.icon}
              value={stat.value}
              suffix={stat.suffix}
              label={stat.label}
              isVisible={isVisible}
              delay={stat.delay}
            />
          ))}
        </div>
        <div className="absolute bottom-0 left-0 right-0 h-px" style={{
          background: 'linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.15), rgba(34, 211, 238, 0.15), transparent)'
        }} />
      </div>
    </div>
  );
}