import React from 'react';

const EmailTrust: React.FC = () => {
  const trustItems = [
    {
      title: "Inbox Deliverability",
      desc: "Inbox deliverability is crucial to ensure that your emails reach the intended recipients. With our advanced technology and robust infrastructure, we guarantee 100% inbox deliverability for all our email services.",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      highlight: false
    },
    {
      title: "30-Day Guarantee",
      desc: "we offer a 30-day moneyback guarantee for all our email services. We're confident that our feature-packed and reliable email solutions will meet your business needs and exceed your expectations.",
      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"/>
          <path d="M12 8L12 12L14 14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      ),
      highlight: true
    },
    {
      title: "Advanced Security",
      desc: "Business emails come with advanced security features such as encryption, spam filters, and virus protection to safeguard sensitive information and prevent cyber threats.",
      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"/>
        </svg>
      ),
      highlight: false
    },
    {
      title: "Scalability",
      desc: "Business email services offer scalability to meet the changing needs of your organization. As your business grows, you can easily add or remove email accounts, storage space, and other features.",
      icon: (
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      ),
      highlight: false
    }
  ];

  return (
    <section className="py-10 md:py-24 bg-white font-sans overflow-hidden px-4 sm:px-6 lg:px-[100px]">
      <div className="container mx-auto max-w-[1440px]">
        <h2 className="text-2xl md:text-[80px] font-medium text-[#1E1B4B] text-center mb-8 md:mb-20 tracking-tight">
          Why Trust Us?
        </h2>
        
        <div className="flex lg:grid lg:grid-cols-4 gap-3 md:gap-8 items-stretch overflow-x-auto pb-4 lg:pb-0 lg:overflow-x-visible snap-x snap-mandatory scrollbar-hide">
          {trustItems.map((item, idx) => (
            <div 
              key={idx}
              className="group rounded-[16px] md:rounded-[32px] p-4 md:p-10 flex flex-col gap-3 md:gap-8 transition-all duration-500 bg-[#7F00FF05] border border-purple-50 hover:bg-[#7F00FF] hover:border-[#7F00FF] hover:shadow-[0_40px_80px_rgba(127,0,255,0.3)] hover:-translate-y-2 cursor-pointer w-[160px] md:w-auto min-w-[160px] md:min-w-0 snap-start flex-shrink-0 md:flex-shrink"
            >
              {/* Icon Circle */}
              <div className="w-10 h-10 md:w-16 md:h-16 rounded-full flex items-center justify-center bg-[#7F00FF10] group-hover:bg-white/10 ring-4 md:ring-8 ring-[#7F00FF05] group-hover:ring-white/5 transition-all duration-500">
                <div className="text-[#7F00FF] group-hover:text-white transition-colors duration-500">
                  {item.icon}
                </div>
              </div>

              <div className="flex flex-col gap-2 md:gap-6">
                <h3 className="text-xs md:text-2xl font-bold tracking-tight text-[#1E1B4B] group-hover:text-white transition-colors duration-500 leading-tight">{item.title}</h3>
                <p className="text-[10px] md:text-base font-medium leading-snug md:leading-relaxed text-gray-500 group-hover:text-white/80 transition-colors duration-500">
                  {item.desc}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default EmailTrust;
