const Hero = () => {
  return (
    <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">
          Become a Member
        </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' }}>
          If you have a drive to help others and your community, we always welcome inquiries from potential members to join our team.
        </p>
        <div className="animate-fade-in-up" style={{ animationDelay: '0.4s' }}>
          <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>
    </section>
  );
};

export default Hero;