import { useNavigate } from "react-router-dom";
import  membershipgirl from "../../assets/images/membership.avif";

const PaidMemberCard = () => {
  const navigate = useNavigate();
  return (
    <>
    
      <div className="max-w-[1200px] mx-auto px-4 pt-10">
      <div className="bg-gradient-to-br from-red-50 to-green-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">
            Become a paid member
          </h2>

          <p className="text-lg md:text-xl mt-3 text-gray-800">
            Get up to <span className="text-[#A70710] font-bold">58% OFF</span> on paid membership!
          </p>

          {/* Features */}
          <ul className="mt-5 space-y-3 text-gray-700">
            <li className="flex items-center gap-3">
              <span className="text-blue-600 text-xl">📞</span>
              Call/WhatsApp matches
            </li>

            <li className="flex items-center gap-3">
              <span className="text-blue-600 text-xl">💬</span>
              Unlimited messages
            </li>

            <li className="flex items-center gap-3">
              <span className="text-blue-600 text-xl">👍</span>
              Higher chances of response
            </li>

            <li className="flex items-center gap-3">
              <span className="text-blue-600 text-xl">🔍</span>
              View and match horoscopes
            </li>
          </ul>

          {/* Button */}
          <button onClick={()=>{
            navigate("/subscription-plan")
          }} className="mt-6 bg-[#034E08] hover:bg-[#A70710] text-white font-semibold py-3 px-6 rounded-full text-lg transition-all">
            See membership plans
          </button>
        </div>

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

export default PaidMemberCard
