import { NavLink } from "react-router-dom";

const Footer = () => {
  const currentYear = new Date().getFullYear();

  return (
    <>
      <div>
        <div className="footer_section layout_padding">
          <div className="container">
            <div className="row">
              <div className="col-md-12"></div>
            </div>
            <div className="footer_section_2">
              <div className="row">
                <div className="col-md-4">
                  <h2 className="useful_text">QUICK LINKS</h2>
                  <div className="footer_menu">
                    <ul>
                      <li>
                        <NavLink
                          to="/"
                          className="link-primary text-decoration-none"
                        >
                          Home
                        </NavLink>
                      </li>
                      <li>
                        <NavLink
                          to="/about"
                          className="link-primary text-decoration-none"
                        >
                          About
                        </NavLink>
                      </li>
                      <li>
                        <NavLink
                          to="/services"
                          className="link-primary text-decoration-none"
                        >
                          Services
                        </NavLink>
                      </li>
                      <li>
                        <NavLink
                          to="/contact"
                          className="link-primary text-decoration-none"
                        >
                          Contact Us
                        </NavLink>
                      </li>
                    </ul>
                  </div>
                </div>
                <div className="col-md-4">
                  <h2 className="useful_text">Work Portfolio</h2>
                  <p className="lorem_text">
                    It is a long established fact that a reader will be
                    distracted by the readable content of a page when looking at
                    its layout. The point of using Lorem
                  </p>
                </div>
                <div className="col-md-4">
                  <h2 className="useful_text">SIGN UP TO OUR NEWSLETTER</h2>
                  <div className="form-group">
                    <textarea
                      className="update_mail"
                      placeholder="Enter Your Email"
                      rows={5}
                      id="comment"
                      name="Enter Your Email"
                      defaultValue={""}
                    />
                    <div className="subscribe_bt">
                      <a href="#">Subscribe</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="social_icon">
              <ul>
                <li>
                  <a href="#">
                    <i className="fa fa-facebook" aria-hidden="true" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i className="fa fa-twitter" aria-hidden="true" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i className="fa fa-linkedin" aria-hidden="true" />
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i className="fa fa-instagram" aria-hidden="true" />
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        {/* footer section end */}
        {/* copyright section start */}
        <div className="copyright_section">
          <div className="container">
            <div className="row">
              <div className="col-sm-12">
                <p className="copyright_text">
                  {currentYear} All Rights Reserved.
                </p>
              </div>
            </div>
          </div>
        </div>
        {/* copyright section end */}
      </div>
    </>
  );
};

export default Footer;