import React from "react";
import useDocumentTitle from "../hooks/useDocumentTitle";

const OnlineGiving = () => {
  useDocumentTitle('NSBC | Online Giving');
  return (
    <div className="bg-white max-w-4xl mx-auto">
      <h1 className="text-3xl text-center py-6">
        Online Giving and 'Text-to-Give'
      </h1>
      <p className="text-gray-700">
        You may now give to North Shreve Baptist Church electronically, via
        credit / debit card or through your checking account!
      </p>
      <p className="text-gray-700 text-center font-bold mt-6 mb-2">
        Please click on the link below to make a donation:
      </p>
      <p className="text-center py-4">
        <a
          href="https://northshreve.breezechms.com/give/online"
          target="_blank"
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
        >
          Donate now
        </a>
      </p>
      <p className="text-gray-700 py-4">
        You may also give via text message (text-to-give)! To begin, please text
        the dollar amount of your donation to (318) 702-5650. The first time you
        use this method, you will be prompted to enter your name, e-mail address
        and other relevant information about your donation. Subsequent donations
        will only require you to text 'give' to (318) 702-5650, and follow the
        prompts. You will receive a receipt for your gift by e-mail.
      </p>
      <p className="text-gray-700 py-4">
        Online and text-to-give methods are secure financial transactions
        enabled through our Breeze Church Management software. As with in-person
        donations, each donor will receive a statement of their financial giving
        at the end of the year, for tax reporting purposes. Thank you for
        supporting the ministries of North Shreve Baptist Church!
      </p>
      {/* <section className="py-12">
        <div className="container mx-auto">
          <h2 className="text-3xl font-bold mb-6">Online Giving</h2>
          <p className="text-gray-700">
            Thank you for considering giving to our church online. Your generosity helps support
            our mission and ministry. Please fill out the form below to make your online
            contribution.
          </p>

          <form className="mt-6">
            <div className="grid grid-cols-2 gap-6">
              <div>
                <label htmlFor="firstName" className="block text-sm font-medium text-gray-700">
                  First Name
                </label>
                <input
                  type="text"
                  id="firstName"
                  className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                />
              </div>
              <div>
                <label htmlFor="lastName" className="block text-sm font-medium text-gray-700">
                  Last Name
                </label>
                <input
                  type="text"
                  id="lastName"
                  className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                />
              </div>
            </div>

            <div className="mt-6">
              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
                Email Address
              </label>
              <input
                type="email"
                id="email"
                className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
              />
            </div>

            <div className="mt-6">
              <label htmlFor="amount" className="block text-sm font-medium text-gray-700">
                Amount
              </label>
              <input
                type="number"
                id="amount"
                className="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
              />
            </div>

            <div className="mt-6">
              <button
                type="submit"
                className="w-full py-3 px-4 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
              >
                Submit
              </button>
            </div>
          </form>
        </div>
      </section> */}
    </div>
  );
};

export default OnlineGiving;
