'use client';

import Image from 'next/image';

export default function StatisticSection() {
    const stats = [
        {
            value: "300+",
            label: "Khách hàng",
            icon: "/images/icon/octicon_people-24.png"
        },
        {
            value: "100%",
            label: "Khách hàng hài lòng",
            icon: "/images/icon/icon-park_message-success.png"
        },
        {
            value: "500+",
            label: "Dự án thành công",
            icon: "/images/icon/carbon_task-star.png"
        },
        {
            value: "5+",
            label: "Năm kinh nghiệm",
            icon: "/images/icon/carbon_increase-level.png"
        }
    ];

    return (
        <div className="relative bg-gradient-to-r from-red-600 via-red-500 to-orange-500 text-white py-8 overflow-hidden">
            {/* Background decoration */}
            <div className="absolute inset-0 opacity-10">
                <div className="absolute top-0 left-0 w-64 h-64 bg-yellow-400 rounded-full blur-3xl" />
                <div className="absolute bottom-0 right-0 w-80 h-80 bg-red-300 rounded-full blur-3xl" />
            </div>

            <div className="container mx-auto relative z-10">
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    {stats.map((stat, index) => (
                        <div
                            key={index}
                            data-stat-card={index}
                            className="group relative"
                        >
                            <div className="relative bg-white/10 backdrop-blur-sm border-2 border-white/20 rounded-2xl p-6 hover:bg-white/20 hover:border-white/40 transition-all duration-300 shadow-lg hover:shadow-2xl">
                                {/* Decorative gradient */}
                                <div className="absolute inset-0 bg-gradient-to-br from-yellow-400/20 to-transparent rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

                                <div className="relative z-10 flex flex-col items-center text-center">
                                    <div className="relative w-12 h-12 md:w-14 md:h-14 mb-4">
                                        <Image
                                            src={stat.icon}
                                            alt={stat.label}
                                            fill
                                            className="object-contain drop-shadow-2xl"
                                        />
                                    </div>

                                    <p className="text-4xl md:text-5xl font-extrabold mb-2 group-hover:scale-110 transition-transform duration-300">
                                        {stat.value}
                                    </p>

                                    <p className="text-sm md:text-base font-semibold text-white/90">
                                        {stat.label}
                                    </p>
                                </div>

                                {/* Number badge */}
                                <div className="absolute top-3 right-3 w-8 h-8 rounded-full bg-white/20 backdrop-blur-sm text-white font-bold text-sm flex items-center justify-center">
                                    {index + 1}
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}
