import React from "react";

const Footer = () => {
  return (
    <footer className="footer bg-grey-700 text-white">
      <div className="footer__main py-4 lg:py-16 container container--default">
        <section className="footer__brand">
          <img
            src={`${process.env.REACT_APP_STYLEGUIDE_URL}/images/logo-full-white.svg`}
            alt=""
            className="w-32 md:w-40 pb-6"
          />
          <p className="para hidden md:block md:mb-4 lg:mb-0 text-grey-200">
            Piráti, 2021. Všechna práva vyhlazena. Sdílejte a nechte ostatní
            sdílet za stejných podmínek.
          </p>
        </section>
        <section className="footer__main-links bg-grey-700 text-white lg:grid grid-cols-3 gap-4"></section>
        <section className="footer__social lg:text-right">
          <div className="flex flex-col md:flex-row lg:flex-col lg:items-end space-y-2 md:space-y-0 md:space-x-2 lg:space-x-0 lg:space-y-2">
            <button className="btn btn--icon btn--blue-300 btn--hoveractive text-lg btn--fullwidth sm:btn--autowidth">
              <div className="btn__body-wrap">
                <div className="btn__body ">Pomoz nám</div>{" "}
                <div className="btn__icon ">
                  <i className="ico--anchor"></i>
                </div>
              </div>
            </button>
          </div>
        </section>
      </div>
      <section className="bg-black py-4 lg:py-12">
        <div className="container container--default">
          <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
            <div className="badge w-full">
              <div className="avatar avatar--sm badge__avatar">
                <img src="http://placeimg.com/100/100/people" alt="Avatar" />
              </div>
              <div className="badge__body">
                <span className="head-heavy-2xs badge__title">
                  Andrej Ramašeuski
                </span>
                <p className="badge__occupation">Kontakt pro dobrovolníky</p>
                <a
                  href="mailto:example@example.com"
                  className="contact-line contact-line--responsive icon-link badge__link"
                >
                  <i className="ico--phone"></i>
                  <span>+420 777 123 123</span>
                </a>
                <a
                  href="mailto:example@example.com"
                  className="contact-line contact-line--responsive icon-link badge__link"
                >
                  <i className="ico--envelope"></i>
                  <span>example@example.com</span>
                </a>
              </div>
            </div>
            <div className="badge w-full">
              <div className="avatar avatar--sm badge__avatar">
                <img src="http://placeimg.com/100/100/people" alt="Avatar" />
              </div>
              <div className="badge__body">
                <span className="head-heavy-2xs badge__title">
                  Andrea Linhartová
                </span>
                <p className="badge__occupation">Kontakt pro média</p>
                <a
                  href="mailto:example@example.com"
                  className="contact-line contact-line--responsive icon-link badge__link"
                >
                  <i className="ico--phone"></i>
                  <span>+420 777 123 123</span>
                </a>
                <a
                  href="mailto:example@example.com"
                  className="contact-line contact-line--responsive icon-link badge__link"
                >
                  <i className="ico--envelope"></i>
                  <span>example@example.com</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
    </footer>
  );
};

export default Footer;