const MembershipCard = ({ title, ageRange }) => (
  <div className="bg-white p-8 rounded-lg shadow-lg text-center transform hover:-translate-y-2 transition-transform duration-300">
    <h3 className="text-2xl font-bold text-gray-900 mb-2">{title}</h3>
    <p className="text-gray-600">{ageRange}</p>
  </div>
);

const MembershipTypes = () => {
  return (
    <section className="bg-gray-100 py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900">Join as a</h2>
          <p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
            If you are at least 18 years old and not enrolled in high school, you can volunteer to be a <span className="font-semibold">Full Member</span>. If you are at least 16 years old and enrolled in high school, you can volunteer for our <span className="font-semibold">Junior Program</span>.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
          <a href="#full-member" className="block">
            <MembershipCard title="Full Member" ageRange="Between 18-50 years old" />
          </a>
          <a href="#junior-member" className="block">
            <MembershipCard title="Junior Member" ageRange="Between 16-18 years old" />
          </a>
        </div>
      </div>
    </section>
  );
};

export default MembershipTypes;