
import { Phone, MessageCircle, ThumbsUp, Eye } from 'lucide-react';
import promogirl from "../../assets/images/mobile.png"
const MembershipCard = ()=>{
return (

<>

<div className=" flex items-center justify-center my-2 mt-2">
      <div className="py-6 w-full max-w-6xl bg-gradient-to-br from-red-50 to-grren-50 rounded-3xl  border border-gray-200 overflow-hidden">
        <div className="flex flex-col lg:flex-row items-center lg:items-stretch">
          
          {/* Left Content Section */}
          <div className="flex flex-col p-2 lg:p-4 lg:w-3/5">
            {/* Heading */}
            <h1 className="text-[16px] font-bold text-gray-900 mb-4">
              Become a paid member
            </h1>
            
            {/* Subheading with offer */}
            <p className="text-[16px] lg:text-[16px] text-gray-900 mb-4">
              Get up to <span className="text-red-600 font-bold">58% OFF</span> on paid membership!
            </p>

            {/* Features List */}
            <div className="space-y-2 mb-2">
              <div className="flex items-start gap-4">
                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
                  <Phone className="w-5 h-5 text-gray-700" />
                </div>
                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">  
                  Call/WhatsApp matches
                </p>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
                  <MessageCircle className="w-5 h-5 text-gray-700" />
                </div>
                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
                  Unlimited messages
                </p>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
                  <ThumbsUp className="w-5 h-5 text-gray-700" />
                </div>
                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
                  Higher chances of response
                </p>
              </div>

              <div className="flex items-start gap-4">
                <div className="w-4 h-4 flex-shrink-0 mt-0 py-1">
                  <Eye className="w-5 h-5 text-gray-700" />
                </div>
                <p className="text-[16px] lg:text-[16px] text-gray-900 font-medium">
                  View and match horoscopes
                </p>
              </div>
            </div>

            {/* CTA Button */}
            <button className="mt-2 bg-[#034E08] hover:bg-[#A70710] text-white font-bold text-[14px] lg:text-[14px] py-4 px-6 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
              See membership plans
            </button>
          </div>

          {/* Right Image Section */}
          <div className="overflow-visible w-full relative lg:w-2/5 flex itemes-center justify-center">
            <div className="">
              <img 
                src={promogirl} 
                alt="Happy woman presenting membership benefits"
                className="w-full h-full object-contain "
              />
            </div>
          </div>
        </div>
      </div>
    </div>



</>);
};
export default MembershipCard

