import Image from "next/image";
import React from "react";
import { Button } from "react-bootstrap";

const Footer = () => {
  return (
    <>
    <footer>
      <div className="container">
        <div className="row">
          <div className="col-md-9">
            <div className="footer-logo">
              <span className="image-container">
                <Image layout="fill" className="image img-fluid" alt="" src="/images/Zango-logo-footer.svg" />
              </span>
            </div>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor </div>
          </div>
          <div className="col-md-3">
            <div className="footer-link">
              <h3>VENDOR SIGN UP</h3>
              <div className="">
                <Button href="/login/vendor" variant="light me-3">Log In</Button>
                <Button href="/signup/vendor" variant="primary">Sign Up</Button>
              </div>
            </div>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <hr />
          </div>
        </div>
        <div className="row">
          <div className="col-md-3">
            <div className="footer-link mtp-0">
              <h3>QUICK LINKS</h3>
              <ul>
                <li>
                  <a href="">About Us</a>
                </li>
                <li>
                  <a href="">Corporate Programs</a>
                </li>
                <li>
                  <a href="">Private Events</a>
                </li>
                <li>
                  <a href="">Promo T & C’s</a>
                </li>
                <li>
                  <a href="">Gifting</a>
                </li>
              </ul>
            </div>
          </div>
          <div className="col-md-3">
            <div className="footer-link">
              <h3>CONTACT </h3>
              <div className="icon-text">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/location.svg" />
                </span>
                <div className="text">
                  <a href="">Lorem ipsum dolor sit amet</a>
                </div>
              </div>
              <div className="icon-text">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/email.svg" />
                </span>
                <div className="text">
                  <a href="mailTo:zango@gmail.com">zango@gmail.com</a>
                </div>
              </div>
              <div className="icon-text">
                <span className="image-container">
                  <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/phone-call.svg" />
                </span>
                <div className="text">
                  <a href="">+91-8798798798</a>
                </div>
              </div>
            </div>
          </div>
          <div className="col-md-3">
            <div className="footer-link">
              <h3>HELP</h3>
              <ul>
                <li>
                  <a href="">Terms & Policy</a>
                </li>
                <li>
                  <a href="">Careers</a>
                </li>
                <li>
                  <a href="">FAQs</a>
                </li>
              </ul>
            </div>
          </div>
          <div className="col-md-3">
            <div className="footer-link mb-3">
              <h3>FOLLOW US ON</h3>
              <div className="social-icon">
                  <a href="">
                    <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/facebook.svg" />
                    </span>
                  </a>
                  <a href="">
                    <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/twitter.svg" />
                    </span>
                  </a>
                  <a href="">
                    <span className="image-container">
                        <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/instagram.svg" />
                    </span>
                  </a>
              </div>
            </div>
            <div className="footer-link">
              <h3>JOIN OUR COMMUNITY</h3>
              <div>Subscribe to gt information, latest news and other interesting offers</div>
              <div className="subscribe">
                  <form action="">
                      <div className="row">
                        <div className="col-12">
                            <input id="subscribe" type="text" placeholder="Email Address"/>
                            <label htmlFor="subscribe"><Button variable="primary">Subscribe </Button></label>
                        </div>
                      </div>
                  </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <div className="copyright">
        <div className="container">
          <div className="row">
            <div className="col-12">
                <div>Copyright © 2024 ZanGO. All Rights Reserved</div>
            </div>
          </div>
        </div>
    </div>
    </>
  );
};

export default Footer;