import Features from '../elements/Features';

const Home = () => {
  return (
    <div className="relative bg-gray-800 text-white min-h-screen">
      <div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center">
        <div className="absolute inset-0">
          <img
            className="w-full h-full rounded-xl object-cover opacity-20"
            src="/assets/npfd-image-02.jpg"
            alt="Firefighters in action"
          />
        </div>

        <h1 className="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl animate-fade-in-up">
          When fire or accidents strike,<br/>we're here to help.
        </h1>
        <p className="mt-6 max-w-3xl mx-auto text-xl text-gray-300 animate-fade-in-up animation-delay-300">
          New Providence's All-Volunteer Fire and Rescue Services, on call 24/7.
        </p>
        <div className="mt-12 animate-fade-in-up animation-delay-600">
          <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-red-600 border border-transparent rounded-md py-3 px-8 font-medium text-white hover:bg-red-700 transition-transform transform hover:scale-105"
          >
            Donate to Show Your Support
          </a>
        </div>
      </div>
      <Features />
    </div>
  );
};

export default Home;
