const CheckIcon = () => (
  <svg className="h-6 w-6 text-green-500 flex-shrink-0 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
  </svg>
);

const FullMemberDetails = () => {
  const prerequisites = [
    "Candidate must be between 18 and 50 years of age, prior it his or her 51st birthday",
    "Have a valid NJ State Driver License",
    "Commit to Wednesday Night Training from 7pm-9pm",
    "Interviewed by Chief and or President",
    "Good moral character",
    "Apparent adequate physical strength and stamina",
    "Live or work in New Providence or within the area",
    "Physical Well Being Certificate Exam by a physician",
    "Complete background check including a fingerprint process with the New Providence Police Dept.",
  ];

  return (
    <section className="bg-white py-20">
      <div id="full-member" className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div className="order-2 md:order-1">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Full Member</h2>
            <p className="text-gray-600 mb-6">The broad prerequisites for full membership are:</p>
            <ul className="space-y-4">
              {prerequisites.map((item, index) => (
                <li key={index} className="flex items-start">
                  <CheckIcon />
                  <span className="text-gray-700">{item}</span>
                </li>
              ))}
            </ul>
             <div className="mt-8">
              <a href="/contact" className="inline-block bg-red-600 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:bg-red-700 transform hover:scale-105 transition-all duration-300">
                APPLY NOW
              </a>
            </div>
          </div>
          <div className="order-1 md:order-2 text-center flex flex-col items-center justify-center bg-gray-100 p-8 rounded-lg shadow-inner">
             <span className="text-7xl md:text-9xl font-extrabold text-red-600">18</span>
             <span className="text-2xl md:text-3xl font-bold text-gray-800 mt-2">years old to apply</span>
          </div>
        </div>
      </div>
    </section>
  );
};

export default FullMemberDetails;