import React from "react";
import Image from "next/image";

const Portfolio = () => {
  const stats = [
    {
      value: "3.0+M",
      label: "Users at organizations from startups to fortune 500",
      bgColor: "bg-green-500",
      image: {
        src: "/Sweven/green.png",
        position: "-left-8 -top-40",
      },
    },
    {
      value: "27",
      label: "Years in business",
      bgColor: "bg-[#e3b1b2]",
    },
    {
      value: "30+%",
      label: "growth pa",
      bgColor: "bg-[#00A2FF]",
    },
    {
      value: "99.6%",
      label: "Implementation success rate",
      bgColor: "bg-blue-500",
      image: {
        src: "/Sweven/upper.png",
        position: "-right-24 -top-32",
      },
    },
    {
      value: "zero code",
      label: "Deep configuration with zero code",
      bgColor: "bg-[#F6B65F]",
      image: {
        src: "/Sweven/dotted.png",
        position: "-right-20 bottom-16",
      },
    },
  ];

  return (
    <div className="w-full">
      <div className="container py-16 xl:py-32">
        <div className="text-center mb-12 space-y-6">
          <h2 className="responsive-heading font-semibold">
            Agiloft by the Numbers
          </h2>
        </div>

        <div className="xl:hidden grid grid-cols-2 gap-4 px-4 mb-8">
          {stats.map((stat, index) => (
            <div
              key={index}
              className={`relative ${index === 0 ? "col-span-2" : ""}`}
            >
              <div
                className={`${
                  stat.bgColor
                } rounded-3xl p-6 h-full min-h-[200px] 
                transform transition-all duration-300 
                hover:shadow-xl hover:-translate-y-1
                backdrop-blur-sm backdrop-filter 
                flex items-center justify-center relative overflow-hidden
                ${index === 0 ? "md:min-h-[250px]" : ""}
                `}
              >
                <div className="text-white text-center relative z-10">
                  <div className="text-[28px] md:text-[30px] font-semibold mb-2">
                    {stat.value}
                  </div>
                  <div className="text-[16px] md:text-[18px] leading-tight">
                    {stat.label}
                  </div>
                </div>
                {stat.image && (
                  <Image
                    src={stat.image.src}
                    alt="Decorative"
                    width={200}
                    height={150}
                    className={`absolute ${stat.image.position} scale-75 md:scale-100 z-0`}
                  />
                )}
              </div>
            </div>
          ))}
        </div>

        <div className="hidden xl:flex flex-wrap justify-center items-end mt-16">
          <div className="group relative">
            <div className="w-52 h-80 bg-green-500 rounded-t-full p-4 flex items-center justify-center">
              <div className="text-white text-center">
                <div className="text-[30px] font-semibold mb-2">3.0+M</div>
                <div className="text-[18px] leading-tight">
                  Users at organizations from startups to fortune 500
                </div>
              </div>
            </div>
            <Image
              src="/Sweven/green.png"
              alt="Arrow"
              width={200}
              height={150}
              className="absolute -left-8 -top-40"
            />
          </div>

          <div className="relative">
            <div className="w-48 h-96 bg-[#e3b1b2] rounded-t-full p-4 flex items-center justify-center">
              <div className="text-white text-center">
                <div className="text-[30px] font-semibold mb-2">27</div>
                <div className="text-[18px] leading-tight">
                  Years in business
                </div>
              </div>
            </div>
          </div>

          <div className="relative">
            <div className="w-48 h-96 bg-[#00A2FF] rounded-t-full p-4 flex items-center justify-center">
              <div className="text-white text-center">
                <div className="text-[30px] font-semibold mb-2">30+%</div>
                <div className="text-[18px] leading-tight">growth pa</div>
              </div>
            </div>
          </div>

          <div className="relative max-w-[60rem]">
            <div className="w-52 h-[28rem] bg-blue-500 rounded-t-full p-4 flex items-center justify-center">
              <div className="text-white text-center">
                <div className="text-[30px] font-semibold mb-2">99.6%</div>
                <div className="text-[18px] leading-tight">
                  Implementation success rate
                </div>
              </div>
            </div>
            <Image
              src="/Sweven/upper.png"
              alt="Arrow"
              width={600}
              height={300}
              className="absolute -right-24 -top-32 scale-150"
            />
          </div>

          <div className="relative">
            <div className="w-48 h-[25rem] bg-[#F6B65F] rounded-t-full p-4 flex items-center justify-center">
              <div className="text-white text-center">
                <div className="text-[30px] font-semibold mb-2">zero code</div>
                <div className="text-[18px] leading-tight">
                  Deep configuration with zero code
                </div>
              </div>
            </div>
            <Image
              src="/Sweven/dotted.png"
              alt="Dotted Arrow"
              width={200}
              height={150}
              className="absolute -right-20 bottom-16 scale-150"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Portfolio;