import React from "react";
import { FaEnvelope, FaPhone, FaPlay } from "react-icons/fa";
import { Link, ScrollRestoration } from "react-router-dom";
import ChurchBG from "../assets/NSBC2.png";

const Home = () => {
  return (
    <div className=" -mt-28">
    <div className=" -mx-2 -mt-3 relative">
      <ScrollRestoration />
      <div className="w-full">
        <img
          src={ChurchBG}
          className="w-full h-full object-cover object-center"
        />
      </div>
      <div className=" md:absolute lg:absolute xl:absolute top-0 w-full h-fit">
        <div className="w-full h-full flex text-gray-50 justify-center items-center">
          <div className="p-3 md:my-32 md:rounded-xl lg:rounded-xl lg:my-48 w-full lg:w-fit md:w-fit md:p-5 inset-0 bg-black/70 dark:bg-slate-900/80">
            <h1 className="w-full flex justify-center text-xl sm:text-2xl md:text-2xl lg:text-4xl">
              "Welcome to the House of Praise!"
            </h1>
            <p className="w-full text-sm sm:text-lg md:text-2xl lg:text-3xl flex justify-center my-3">
              North Shreve Baptist Church
            </p>
            <p className="w-full text-xs sm:text-sm md:text-2xl lg:text-2xl flex justify-center my-3">
              4930 Old Mooringsport Road Shreveport, LA 71107
            </p>

            <div className="w-full px-14 md:px-1 text-xs sm:text-sm md:text-xl lg:text-2xl flex justify-between my-3">
              <a href="tel:318-425-2350" className="flex items-center">
                <FaPhone /> &nbsp; (318) 425-2350
              </a>
              <a
                href="mailto:office@northshrevebaptist.org"
                className="flex items-center"
              >
                <FaEnvelope /> &nbsp; Email
              </a>
            </div>
            <p className="w-full text-xs sm:text-sm md:text-xl lg:text-2xl flex justify-center my-3">
              Rev. Cecil Marr, Pastor
            </p>
            <p className=" w-full text-xs sm:text-sm md:text-xl lg:text-2xl flex justify-center ">
              Steve Miller, Worship Leader
            </p>
            <div className="w-full flex justify-center my-3 pt-2">
              <button className="flex text-xs items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-2 md:text-lg md:px-10">
                Watch Past Services &nbsp; <FaPlay />
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div className="p-2 max-w-lg mx-auto">
          <p className="pt-4 flex justify-between">
            <span>Sunday School / Bible study</span>
            <span>9:45 a.m.</span>
          </p>
          <p className="flex justify-between">
            <span>Sunday Morning Worship</span>
            <span>11:00 am.</span>
          </p>
          <p className="pb-4 flex justify-between">
            <span>Wednesday Evening Worship</span>
            <span>6:30 p.m.</span>
          </p>
          <p className="pb-4 flex justify-center">
            <Link
              className="px-4 py-2 border border-transparent text-center text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-2 md:text-lg cursor-pointer md:px-10"
              to="/services"
            >
              Click here to view the 2023 Worship Schedule for more details
            </Link>
          </p>
        </div>
      </div>
    </div>
    </div>
  );
};

export default Home;
