const OfficerCard = ({ title, name }) => (
  <div className="bg-white p-6 rounded-lg shadow-lg text-center transform hover:-translate-y-2 transition-transform duration-300">
    <p className="text-md font-semibold text-gray-600 uppercase tracking-wider">{title}</p>
    <p className="text-xl font-bold text-gray-900 mt-1">{name}</p>
  </div>
);

const Team = () => {
  const fireOfficers = [
    { title: "Fire Chief", name: "John Signorello" },
    { title: "Deputy Chief #1", name: "Will Zagorski" },
    { title: "Deputy Chief #2", name: "Drew Vignali" },
    { title: "Fire Official", name: "Edward Nasto" },
    { title: "Captain #1", name: "Vincent J. Wycko" },
    { title: "Captain #2", name: "Deborah Golden" },
    { title: "Captain #3", name: "Jake Vignali" },
    { title: "Captain #4", name: "Ben Hasenkoff" },
  ];

  const hoseCompanyOfficers = [
    { title: "President", name: "Mary Rose Piana" },
    { title: "Vice President", name: "Glenn Sonnet" },
    { title: "Treasurer", name: "William Schmeelck" },
    { title: "Secretary", name: "Alexander Savin" },
  ];

  const members = [
    { title: "Firefighter", name: "Aleksandr Alekseev" },
    { title: "Warden", name: "Lawrence J. Armstrong" },
    { title: "Firefighter", name: "David A. Buell" },
    { title: "Firefighter", name: "Sara D. Costa" },
    { title: "Firefighter", name: "John A. Grouss" },
    { title: "Firefighter", name: "Christopher T. Hasenkopf" },
    { title: "Warden", name: "Darrell Jones" },
    { title: "Firefighter", name: "Raghava Kandibedala" },
    { title: "Firefighter", name: "Bruce Lessing" },
    { title: "Firefighter", name: "Scott Lessing" },
    { title: "Firefighter", name: "Alexander P. Melhuish" },
    { title: "Firefighter", name: "Robert P. Mercado" },
    { title: "Firefighter", name: "Brian A. Morgan" },
    { title: "Firefighter", name: "Robert Munoz" },
    { title: "Firefighter", name: "Cooper Nelson" },
    { title: "Firefighter", name: "Daniel G. Nelson" },
    { title: "Firefighter", name: "Christopher B. Oh" },
    { title: "Firefighter", name: "David R. Palatini" },
    { title: "Firefighter", name: "Ralph J. Parlapiano" },
    { title: "Firefighter", name: "Scott J. Paxton" },
    { title: "Firefighter", name: "Clint A. Pazdera" },
    { title: "Firefighter", name: "Alexander Pereira" },
    { title: "Firefighter", name: "Sean M. Pile" },
    { title: "Firefighter", name: "Marcus G. Reichart" },
    { title: "Firefighter", name: "Peter Popescu" },
    { title: "Firefighter", name: "Nisim Sahar" },
    { title: "Firefighter", name: "Jessica Seib" },
    { title: "Firefighter", name: "Kevin Shan" },
    { title: "Firefighter", name: "Chandrasekhar Sidda Reddy" },
    { title: "Warden", name: "James Swanton" },
    { title: "Firefighter", name: "Joseph D. Vignali" },
    { title: "Firefighter", name: "William S. Vignali" },
    { title: "Firefighter", name: "John M. Yohn" },
  ];

  const juniors = [
    { title: "Junior Firefighter", name: "Maxim A. Savin" },
  ];

  const images = [
    "https://newprovidencefire.org/wp-content/uploads/2020/09/IMG_0930-scaled.jpg",
    "https://newprovidencefire.org/wp-content/uploads/2020/09/IMG_0914-scaled.jpg",
    "https://newprovidencefire.org/wp-content/uploads/2020/09/firetruck.jpg",
    "https://newprovidencefire.org/wp-content/uploads/2020/09/IMG_0801.png",
    "https://newprovidencefire.org/wp-content/uploads/2020/09/hose.jpg",
    "https://newprovidencefire.org/wp-content/uploads/2020/09/IMG_0923.png",
  ];

  return (
    <div className="bg-gray-100">

      <section className="bg-gray-800 text-white">
        {/* <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 text-center"> That way the background picture is stretching out to the whole block of the sections */}
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 text-center">
          <div className="absolute inset-0 w-full h-full">
            <img
              className="w-full h-full rounded-xl object-cover opacity-20"
              src="/assets/npfd-image-03.jpg"
              alt="Firefighters in action"
            />
          </div>

          <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight leading-tight mb-4 animate-fade-in-up">
            Our Team
          </h1>
          <p className="max-w-3xl mx-auto text-lg md:text-xl text-gray-300 mb-8 animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
            The New Providence Fire Department is a non-profit organization comprised of volunteers who are dedicated to providing fire protection and rescue services to those in need in New Providence, New Jersey.
          </p>
        </div>
      </section>

      {/* Officers Section */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900">New Providence Fire Department Officers</h2>
          </div>

          {/* Fire Officers List */}
          <div className="mt-20">
            <h3 className="text-2xl md:text-3xl font-bold text-red-600 text-center mb-10">Fire Officers</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {fireOfficers.map(officer => <OfficerCard key={officer.name} {...officer} />)}
            </div>
          </div>

          {/* Hose Co Officers List */}
          <div className="mt-16">
            <h3 className="text-2xl md:text-3xl font-bold text-red-600 text-center mb-10">Hose Company Officers</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {hoseCompanyOfficers.map(officer => <OfficerCard key={officer.name} {...officer} />)}
            </div>
          </div>

          {/* Members List */}
          <div className="mt-16">
            <h3 className="text-2xl md:text-3xl font-bold text-red-600 text-center mb-10">Members</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {members.map(member => <OfficerCard key={member.name} {...member} />)}
            </div>
          </div>

          {/* Juniors List */}
          <div className="mt-16">
            <h3 className="text-2xl md:text-3xl font-bold text-red-600 text-center mb-10">Juniors</h3>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {juniors.map(junior => <OfficerCard key={junior.name} {...junior} />)}
            </div>
          </div>

        </div>
      </section>

      {/* Image Gallery */}
      <section className="bg-white py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {images.map((src, index) => (
                <div key={index} className="overflow-hidden rounded-lg shadow-lg aspect-w-1 aspect-h-1">
                    <img src={src} alt={`Fire department gallery image \${index + 1}`} className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-300" />
                </div>
                ))}
            </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-gray-800">
        <div className="max-w-4xl mx-auto py-16 px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
            Your 24/7 fire protection help in New Providence.
          </h2>
          <p className="mt-4 text-lg text-gray-300">
            Your support is appreciated.
          </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="mt-8 w-full inline-flex items-center justify-center px-6 py-3 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-red-600 hover:bg-red-700 sm:w-auto transform hover:scale-105 transition-all duration-300"
          >
            Donate Now
          </a>
        </div>
      </section>
    </div>
  );
};

export default Team;
