import React from 'react';

const DedicatedFeatures: React.FC = () => {
  const features = [
    {
      title: "100% Uptime",
      desc: "We guarantee 100% uptime SLA on power, cooling, and network operation to ensure 100% enterprise-grade accessibility.",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2"/>
          <path d="M12 7V12L15 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      ),
      highlight: false
    },
    {
      title: "24/7 In-House Team",
      desc: "The digital world is awake 24/7. So do we. Thus, we have a dedicated team for technical support available round-the-clock to resolve your problems on immediate basis.",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" strokeWidth="2"/>
          <path d="M12 6V12L16 14" stroke="white" strokeWidth="2" strokeLinecap="round"/>
          <path d="M7 12H17" stroke="white" strokeWidth="2" strokeLinecap="round" opacity="0.5"/>
        </svg>
      ),
      highlight: true
    },
    {
      title: "Optimal Routing Across",
      desc: "Our locations offer optimal routing across the United States, Canada, Europe, Mexico, South American, and Asia Pacific countries such as Brazil, Argentina, China, and Australia.",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="currentColor" strokeWidth="2"/>
          <path d="M12 8V12L14 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" opacity="0.3"/>
        </svg>
      ),
      highlight: false
    },
    {
      title: "On-the-Alert Security",
      desc: "As technology is advancing, the security threats are rising too. We always stay alert and updated with the best security measures to ensure 100% security to our client's data, from the perimeter to the server cage.",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 2L3 7V12C3 17.41 6.84 22.41 12 24C17.16 22.41 21 17.41 21 12V7L12 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12 8L12 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <path d="M12 16L15 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      ),
      highlight: false
    }
  ];

  return (
    <section className="py-12 md:py-24 bg-[#F8F9FF] font-sans overflow-hidden px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1440px]">
        <div className="flex lg:grid lg:grid-cols-4 gap-4 md:gap-6 items-stretch overflow-x-auto no-scrollbar scroll-smooth snap-x">
          {features.map((feature, idx) => (
            <div 
              key={idx}
              className="group rounded-[24px] md:rounded-[32px] p-6 md:p-10 flex flex-col gap-5 md:gap-8 transition-all duration-500 bg-white border border-gray-100 text-[#1E1B4B] hover:bg-[#7F00FF] hover:border-[#7F00FF] hover:shadow-[0_30px_60px_rgba(127,0,255,0.3)] cursor-pointer w-[280px] md:w-auto flex-shrink-0 snap-start"
            >
              {/* Icon Circle */}
              <div className="w-12 h-12 md:w-16 md:h-16 rounded-full flex items-center justify-center bg-[#7F00FF10] ring-4 md:ring-8 ring-[#7F00FF05] group-hover:bg-white/10 group-hover:ring-white/5 transition-all duration-500">
                <div className="text-[#7F00FF] group-hover:text-white transition-colors duration-500">
                  {idx === 1 ? (
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" strokeWidth="2"/>
                      <path d="M12 6V12L16 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
                      <path d="M7 12H17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.5"/>
                    </svg>
                  ) : feature.icon}
                </div>
              </div>

              <div className="flex flex-col gap-2 md:gap-4">
                <h3 className="text-lg md:text-2xl font-bold tracking-tight group-hover:text-white transition-colors duration-500">{feature.title}</h3>
                <p className="text-[11px] md:text-sm font-medium leading-relaxed text-gray-500 group-hover:text-white/80 transition-colors duration-500">
                  {feature.desc}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default DedicatedFeatures;
