import React from 'react';

const Features = () => {
  return (
    // <section id="features" className="bg-white py-20 sm:py-24">
    <section id="features" className="bg-gray-100 py-20">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-16 items-center">
          <div className="space-y-6 bg-gray-100 p-8 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
            <h2 className="text-3xl font-extrabold text-gray-900">Join Our Team</h2>
            <p className="text-lg text-gray-600">
              Volunteer and be a part of something great. Full-Time or Junior Member opportunities available.
            </p>
            <a
              href="/join"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block bg-gray-800 text-white font-bold py-3 px-6 rounded-lg hover:bg-gray-700 transition-all duration-300 shadow-md"
            >
              JOIN NOW
            </a>
          </div>
          <div className="space-y-6 bg-red-700 text-white p-8 rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
            <h2 className="text-3xl font-extrabold">Donate</h2>
            <p className="text-lg text-red-100">
              We are 100% volunteer operated and are supported solely by your generous donations.
            </p>
            <a
              href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=VCMML5H7AWYB2&source=url"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block bg-white text-red-700 font-bold py-3 px-6 rounded-lg hover:bg-red-100 transition-all duration-300 shadow-md"
            >
              DONATE
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Features;
