import React from 'react';

const TrustSection: React.FC = () => {
  const cards = [
    {
      title: "30 Day Money Back Guarantee",
      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="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12 16V12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12 8H12.01" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      isFeatured: false
    },
    {
      title: "99.99% Uptime Guarantee",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 22V2M2 12H22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2"/>
        </svg>
      ),
      isFeatured: true
    },
    {
      title: "24/7 Support Guarantee",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      isFeatured: false
    },
    {
      title: "Daily/Weekly Backup Guarantee",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 2H3v20h18V2z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
          <path d="M12 18V6M8 10l4-4 4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      isFeatured: false
    }
  ];

  return (
    <section className="py-10 md:py-32 font-sans tracking-tight transition-colors duration-300 px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1280px]">
        <h2 className="text-2xl md:text-5xl lg:text-[56px] font-semibold text-[#1E1B4B] text-center mb-6 md:mb-24 tracking-tight">
          Why Trust Us?
        </h2>

        <div className="flex lg:grid lg:grid-cols-4 gap-3 md:gap-8 max-w-[1200px] mx-auto overflow-x-auto pb-4 md:pb-0 md:overflow-x-visible snap-x snap-mandatory scrollbar-hide">
          {cards.map((card, idx) => (
            <div 
              key={idx}
              className={`relative flex flex-col items-center justify-center text-center p-4 md:p-10 rounded-[16px] md:rounded-[32px] h-[160px] md:h-[320px] border border-[#7F00FF]/10 transition-colors duration-300 w-[140px] md:w-full min-w-[140px] md:min-w-0 z-0 group bg-white hover:bg-[#7F00FF] snap-start flex-shrink-0 md:flex-shrink`}
            >
              {/* Icon Container with Concentric Circles */}
              <div className="relative flex items-center justify-center w-12 h-12 md:w-24 md:h-24 mb-3 md:mb-10">
                <div className="absolute inset-0 rounded-full opacity-[0.15] bg-[#7F00FF] group-hover:bg-white transition-colors duration-300"></div>
                <div className="absolute inset-2.5 rounded-full opacity-30 bg-[#7F00FF] group-hover:bg-white transition-colors duration-300"></div>
                <div className="absolute inset-5 rounded-full flex items-center justify-center bg-[#7F00FF] text-white group-hover:bg-white group-hover:text-[#7F00FF] transition-colors duration-300">
                  <div className="w-5 h-5 flex items-center justify-center -mt-0.5 ml-0.5">
                    {card.icon}
                  </div>
                </div>
              </div>

              <h3 className="text-xs md:text-[22px] font-bold tracking-tight leading-tight md:leading-[1.3] text-[#1E1B4B] group-hover:text-white transition-colors duration-300">
                {card.title}
              </h3>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default TrustSection;