import  membershipgirl from "../../assets/images/customer.png";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";

const CustomerSupportCard = () => {
  return (
    <>
    
      <div className="max-w-[1200px] mx-auto px-4 pt-10">
          <div className="bg-gradient-to-br from-green-50 to-red-50 rounded-3xl shadow-md border p-6 pb-0  flex flex-col md:flex-row items-center gap-10">
    
            {/* Left Content */}
            <div className="flex-1">
              <h2 className="text-2xl md:text-3xl font-bold text-gray-900">
               Customer Support
              </h2>
    
              <p className="text-lg md:text-xl mt-3 text-gray-800">
                Get up to <span className="text-[#A70710] font-bold">24/7 Hours</span> customer support we provide to guide you 
              </p>
    
              {/* Features */}
              <ul className="mt-5 space-y-3 text-gray-700 pb-4">
                <li className="flex items-center gap-3">
                  <CheckCircleIcon className="text-[#a60810]"/>
                 24/7 Support Available
                </li>
    
                <li className="flex items-center gap-3">
                  <CheckCircleIcon className="text-[#a60810]"/>
                  Guild you to build profile
                </li>
    
                <li className="flex items-center gap-3">
                   <CheckCircleIcon className="text-[#a60810]"/>
                 Instant Problem Solve
                </li>
    
                <li className="flex items-center gap-3 ">
                   <CheckCircleIcon className="text-[#a60810]"/>
                 Partner Matching Improvement
                
                </li>

                
                 
              </ul>
   
             
            </div>
    
            {/* Right Side Image */}
            <div className=" flex justify-center">
              <img
                src={membershipgirl}
                alt="Paid Member Offer"
                className="w-full max-w-xs md:max-w-sm object-cover"
              />
            </div>
          </div>
        </div>
    
    </>
  )
}

export default CustomerSupportCard