import { useEffect, useRef, useState } from 'react';
import { Award, Users, Briefcase, Smile } from 'lucide-react';

interface Stat {
    icon: React.ElementType;
    value: number;
    suffix: string;
    label: string;
    color: string;
}

const stats: Stat[] = [
    { icon: Briefcase, value: 200, suffix: '+', label: 'Projects Completed', color: 'from-primary to-blue-600' },
    { icon: Users, value: 150, suffix: '+', label: 'Happy Clients', color: 'from-purple-500 to-pink-500' },
    { icon: Award, value: 10, suffix: '+', label: 'Years Experience', color: 'from-amber-500 to-orange-500' },
    { icon: Smile, value: 98, suffix: '%', label: 'Satisfaction Rate', color: 'from-emerald-500 to-teal-500' },
];

function Counter({ end, suffix }: { end: number; suffix: string }) {
    const [count, setCount] = useState(0);
    const ref = useRef<HTMLSpanElement>(null);
    const [hasAnimated, setHasAnimated] = useState(false);

    useEffect(() => {
        const observer = new IntersectionObserver(
            (entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting && !hasAnimated) {
                        setHasAnimated(true);
                        const duration = 2000;
                        const steps = 60;
                        const increment = end / steps;
                        let current = 0;
                        const timer = setInterval(() => {
                            current += increment;
                            if (current >= end) {
                                setCount(end);
                                clearInterval(timer);
                            } else {
                                setCount(Math.floor(current));
                            }
                        }, duration / steps);
                    }
                });
            },
            { threshold: 0.3 }
        );

        if (ref.current) observer.observe(ref.current);
        return () => observer.disconnect();
    }, [end, hasAnimated]);

    return <span ref={ref}>{count}{suffix}</span>;
}

export default function StatsSection() {
    return (
        <section className="py-16 bg-white relative overflow-hidden">
            <div className="container mx-auto px-4">
                <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                    {stats.map((stat, index) => (
                        <div
                            key={index}
                            className="group relative bg-gradient-to-br from-slate-50 to-white rounded-2xl p-6 md:p-8 border border-slate-100 hover:border-transparent hover:shadow-2xl transition-all duration-300"
                        >
                            {/* Hover gradient bg */}
                            <div className={`absolute inset-0 rounded-2xl bg-gradient-to-br ${stat.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300`} />
                            
                            <div className={`relative inline-flex w-14 h-14 rounded-xl bg-gradient-to-br ${stat.color} items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
                                <stat.icon className="w-7 h-7 text-white" />
                            </div>
                            
                            <div className="text-4xl md:text-5xl font-bold text-slate-900 mb-2 tracking-tight">
                                <Counter end={stat.value} suffix={stat.suffix} />
                            </div>
                            <div className="text-slate-600 font-medium">
                                {stat.label}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </section>
    );
}