import React from "react";
import { FaFacebook } from "react-icons/fa";
import { Link } from "react-router-dom";

const Footer = () => {
  return (
    <div className="h-fit py-6 px-5 grid grid-cols-2 sm:grid-cols-4 gap-2 w-full items-center text-white border-b-2 border-gray-50 inset-0 bg-blue-900/70 backdrop-blur-sm dark:bg-slate-900/80">
      <div className="text-4xl">NSBC</div>
      <div>
        <ul className="text-sm">
          <li>
            <Link to={"/"}>Home</Link>
          </li>
          <li>
            <Link to={"/about"}>About</Link>
          </li>
          <li>
            <Link to={"/church-staff"}>Church Staff</Link>
          </li>
          <li>
            <Link to={"/become-a-christian"}>How to Become a Christian</Link>
            </li>
            <li>
             <Link to={"/contact"}>Contact</Link>
             
             </li>
        </ul>
      </div>
      <div></div>
      <div className="flex gap-2 justify-end items-center">
        <a
          href="https://www.facebook.com/profile.php?id=100064770274048"
          className="border border-white rounded-md py-1 px-2"
        >
          <FaFacebook />
        </a>
      </div>
    </div>
  );
};

export default Footer;
