import React from 'react'
import Link from 'gatsby-link'
import Button from './Button'

import LogoSaburly from '../images/saburly-logo-white.svg'

import Facebook from '../images/facebook.svg'
import Instagram from '../images/instagram.svg'
import Twitter from '../images/twitter.svg'
import LinkedIn from '../images/linkedin.svg'

let menuClasses =
  'no-underline mt-4 lg:inline-block lg:mt-0 text-white  hover:opacity-100 uppercase mr-4'

const Footer = () => (
  <footer className="saburly-main-bg">
    <div className="text-center py-4 lg:px-4 saburly-overlay-shadow">
      <Link className="no-underline text-white" to="/contact">
        <div
          className="p-2 items-center text-white leading-none lg:rounded-full flex lg:inline-flex"
          role="alert"
        >
          <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
            Let's Connect
          </span>
          <span className="font-normal mr-2 text-left flex-auto">
            Tell us about your project and get a free proposal
          </span>
          <svg
            className="fill-current opacity-75 h-4 w-4"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
          >
            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
          </svg>
        </div>
      </Link>
    </div>
    <div className="container mx-auto my-4 lg:flex">
      <div className="lg:w-1/4 p-4">
        <img
          src={LogoSaburly}
          alt="Saburly Logo"
          className="w-full opacity-80"
        />
        <div className="flex justify-between social-icons py-2">
          <div>
            <a href="https://facebook.com/saburly" target="_blank">
              <img
                src={Facebook}
                alt="Facebook Social Media"
                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
              />
            </a>
          </div>
          <div>
            <a href="https://instagram.com/saburly" target="_blank">
              <img
                src={Instagram}
                alt="Instagram Social Media"
                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
              />
            </a>
          </div>
          <div>
            <a href="https://twitter.com/saburly" target="_blank">
              <img
                src={Twitter}
                alt="Twitter Social Media"
                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
              />
            </a>
          </div>
          <div>
            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
              <img
                src={LinkedIn}
                alt="LinkedIn Social Media"
                className="max-w-2.5 opacity-80 hover:opacity-100 w-full"
              />
            </a>
          </div>
        </div>
      </div>

      <div className="lg:w-3/4">
        <div className="p-4 text-center lg:text-left sm:flex justify-around">
          <nav>
            <p className="font-thin text-white opacity-80">Sitemap</p>
            <ul className="list-reset text-sm inline-block">
              <Link className="block my-2 hover:opacity-70" to="/">
                <li className={menuClasses}>Home</li>
              </Link>
              <Link className="block my-2 hover:opacity-70" to="/services">
                <li className={menuClasses}>What We Do</li>
              </Link>
              <Link className="block my-2 hover:opacity-70" to="/about">
                <li className={menuClasses}>TEAM</li>
              </Link>
              <Link className="block my-2 hover:opacity-70" to="/blog">
                <li className={menuClasses}>BLOG</li>
              </Link>
            </ul>
          </nav>
          <div>
            <p className="font-thin text-white opacity-80">Office - Sweden</p>
            <p className="text-white my-2 leading-normal">
              Saburly AB<br />Vretenvägen 13<br />171 54 Solna<br />Sweden
            </p>
          </div>
          <div>
            <p className="font-thin text-white opacity-80">Office - Bosnia</p>
            <p className="text-white my-2 leading-normal">
              Saburly d.o.o<br />Hakije Turajlica 2<br />71 000 Sarajevo<br />Bosnia
              & Herzegovina
            </p>
          </div>
        </div>
      </div>
    </div>
  </footer>
)

export default Footer