import React from "react";
import { FaFacebook, FaInstagram, FaLinkedin, FaTwitter, FaVimeo, FaYoutube } from "react-icons/fa";
import LABaptistLogo from "../assets/LABaptistLogo.png";
import GideonsLogo from "../assets/gideonslogo.png";
import GBLogo from "../assets/GBLogo.png";
import AALogo from "../assets/AALogo.png";
import useDocumentTitle from "../hooks/useDocumentTitle";
const HelpfulLinks = () => {
  useDocumentTitle('NSBC | Helpful Links');

  const links = [
    {
      title: "Northwest Louisiana Baptist Association",
      description:
        "Northwest Louisiana Baptist Association was formed in October 1969 to serve the Southern Baptist Churches of Caddo and Bossier Parishes in Louisiana. In 1969, three existing Associations merged. The Caddo Baptist Association that formed in 1892, the North Caddo Association that formed in 1948 and the Bossier Parish Association that formed 1922, all came together under one banner.",
      image:
        "https://www.nwlba.org/uploads/1/0/6/9/106951593/nlba-footer_orig.png",
      imageAlt: "Northwest Louisiana Baptist Association",
      facebook: "https://www.facebook.com/NWLBA/",
      url: "http://www.nwlba.org/",
    },
    {
      title: "Louisiana Baptist Convention",
      description:
        "The Louisiana Baptist Convention is a statewide association of over 1,600 Baptist churches united through a shared mission to provide help, hope, and encouragement to individuals in the midst of a busy world. These churches work together, while maintaining their autonomy, to achieve this common goal through various ministerial efforts, both separately and cooperatively.",
      image: LABaptistLogo,
      imageAlt: "Louisiana Baptist Convention",
      facebook: "https://www.facebook.com/louisianabaptists",
      instagram: "https://www.instagram.com/labaptists/",
      x: "https://twitter.com/LaBaptists",
      url: "https://louisianabaptists.org/",
    },
    {
      title: "Southern Baptist Convention",
      description:
        "The Southern Baptist Convention (SBC) is a coalition of over 50,000 local churches and missions that work together to spread the message of Jesus Christ. Despite the diversity of its member churches, the SBC is united by shared beliefs and values. While some churches are large, with over 200 members, most have fewer than 200 weekly worshipers. The SBC is inclusive and welcomes churches of all races, ethnicities, socio-economic backgrounds, languages, sizes, and locations.",
      image:
        "https://sbcnet.wpenginepowered.com/wp-content/uploads/2020/04/sbc__logo-blue.svg",
      imageAlt: "Southern Baptist Convention",
      facebook: "https://www.facebook.com/SBCExecComm/",
      x: "https://twitter.com/SBCExecComm/",
      instagram: "https://www.instagram.com/SBCExecComm/",
      url: "http://www.sbc.net/",
    },
    {
      title: "LifeWay Christian Resources",
      description:
        "Lifeway Christian Resources has been helping local churches spread the message of Jesus Christ for over 130 years. Founded by Dr. James M. Frost, the organization provides ministry resources such as Bibles, Bible studies, church supplies, camps, and events to churches all over the world. As a nonprofit, Lifeway's resources are used in 160 countries and six continents, and every purchase made supports their mission to spread the gospel globally. Lifeway is an entity of the Southern Baptist Convention, a coalition of churches that share common beliefs and a commitment to sharing the gospel.",
      image:
        "https://s7d9.scene7.com/is/content/LifeWayChristianResources/lifeway-dot-com-logo",
      imageAlt: "LifeWay Christian Resources",
      facebook: "https://www.facebook.com/lifeway/",
      instagram: "https://www.instagram.com/lifeway",
      x: "https://twitter.com/lifeway",
      linkedin: "https://www.linkedin.com/company/lifeway-christian-resources/",
      url: "http://www.lifeway.com",
    },
    {
      title: "Compel Outreach International",
      description:
        "Compel Outreach International is an indigenous missions outreach established by Bill and Wendy Britt. Compel seeks to reach as many people as possible in as many places as possible with the Gospel of Jesus Christ. Compel is on the ground, meeting the physical and spiritual needs of people all over the world. Compel Outreach rescues orphans, plants churches, educates children, trains local pastors and church leaders and conducts mass crusades.",
      image: "https://www.compeloi.org/assets/img/png/coi-logo.png",
      imageAlt: "Compel Outreach International",
      facebook: "https://www.facebook.com/compeloutreachinternational",
      url: "http://www.compeloi.org",
    },
    {
      title: "Malcom Ellis Ministries",
      description: "",
      image: "",
      imageAlt: "Malcom Ellis Ministries",
      facebook: "https://www.facebook.com/malcomellisministries",
      youtube: "https://www.youtube.com/channel/UCol8VrQdCXn_nBNVVAgbyCA",
      url: "http://www.malcomellis.com",
    },
    {
      title: "The Gideons International",
      description:
        "The Gideons International is a group of Christian professionals who aim to spread the message of Jesus by working together, sharing personal testamonies, and distributing Bibles and New Testaments. They are known for their work in hotels but also place Scriptures in strategic locations for anyone who may be interested or unaware of their need for them.",
      image: GideonsLogo,
      imageAlt: "The Gideons International",
      facebook: "https://www.facebook.com/thegideonsintl/",
      instagram: "https://www.instagram.com/thegideonsinternational/",
      vimeo: "https://vimeo.com/thegideons",
      x: "https://twitter.com/thegideons",
      url: "http://www.gideons.org",
    },
    {
      title: "Georgia Barnette Offering",
      description: "The Georgia Barnette Offering for Louisiana Missions is an annual offering taken up by Louisiana Baptists to support missions and ministries throughout the state. The funds collected are used to transform lives and churches in Louisiana. The offering is typically promoted and collected by churches, but individuals can also give online. The offering is named after Georgia Barnette, a missionary to New Orleans in the early 1900s.",
      image: GBLogo,
      imageAlt: "Georgia Barnette Offering",
      url: "http://www.georgiabarnette.org",
    },
    {
      title: "Annie Armstrong Offering",
      description: "The Annie Armstrong Offering is an annual offering taken up by Southern Baptist churches to support missions and ministries in North America. It was started in 1895 by the Woman's Missionary Union (WMU) to benefit the Home Mission Board (now North American Mission Board). In 1934, it was named in honor of Annie Armstrong, the first national executive leader of WMU. Over ﹩2 billion has been donated to support thousands of missionaries in church planting and compassion ministries, resulting in millions of lives transformed by the power of the gospel.",
      image: AALogo,
      imageAlt: "Annie Armstrong Offering",
      facebook: "https://www.facebook.com/aaeo.sbc",
      x: "https://twitter.com/NAMB_SBC",
      instagram: "https://www.instagram.com/namb_sbc/",
      url: "http://www.anniearmstrong.com",
    },

    // Add more links as needed
  ];

  return (
    <div className="">
      <section className="py-12">
        <div className="container mx-auto">
          <h2 className="text-4xl flex justify-center w-full font-bold mb-6">
            Helpful Links
          </h2>
          <ul className="grid mx-5 sm:mx-0 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {links.map((link, index) => (
              <li
                key={index}
                className="bg-white shadow overflow-hidden sm:rounded-lg"
              >
                <div className="px-4 py-5 sm:px-6">
                  <details
                    title="Click for details"
                    className="text-lg leading-6 font-medium text-gray-900"
                  >
                    <summary>{link.title}</summary>
                    <p className="mt-1 max-w-2xl text-sm text-gray-500">
                      {link.description}
                    </p>
                  </details>
                </div>
                <div className="px-4 py-4 sm:px-6">
                  <a
                    href={link.url}
                    className="text-blue-600 hover:text-blue-700 flex justify-between items-center font-medium"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    Go to Link
                    <img
                      className="w-1/2"
                      src={link.image}
                      alt={link.imageAlt}
                    />
                  </a>
                  <div className="flex items-center justify-evenly mt-4">
                    {link.facebook && (
                      <a
                        href={link.facebook}
                        target="_blank"
                        title={link.title + " Facebook"}
                        rel="noopener noreferrer"
                      >
                        <FaFacebook />
                      </a>
                    )}
                    {link.youtube && (
                      <a
                        href={link.youtube}
                        target="_blank"
                        title={link.title + "Youtube"}
                        rel="noopener noreferrer"
                      >
                        <FaYoutube />
                      </a>
                    )}
                    {
                      link.instagram && (
                        <a href={link.instagram} target="_blank" title={link.title + "Instagram"} rel="noopener noreferrer">
                          <FaInstagram />
                        </a>
                      )
                    }
                    {
                      link.vimeo && (
                        <a href={link.vimeo} target="_blank" title={link.title + "Vimeo"} rel="noopener noreferrer">
                          <FaVimeo />
                        </a>
                      )
                    }
                    {
                      link.x && (
                        <a href={link.x} target="_blank" title={link.title + "Twitter"} rel="noopener noreferrer">
                          <FaTwitter />
                        </a>
                      )
                    }
                    {
                      link.linkedin && (
                        <a href={link.linkedin} target="_blank" title={link.title + "LinkedIn"} rel="noopener noreferrer">
                          <FaLinkedin />
                        </a>
                      )

                    }
                  </div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>
    </div>
  );
};

export default HelpfulLinks;
