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

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

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

const Footer = () => (
  <footer className="bg-indigo-darker">
    <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
    <p className="text-white font-light">
      Nam imperdiet et massa ut lacinia. Praesent nec sem ut sem efficitur
      imperdiet.
    </p>
    <h4>Home</h4>
    <ul className="text-sm">
      <Link to="/services">
        <li className={menuClasses}>What We Do</li>
      </Link>
      <Link to="/about">
        <li className={menuClasses}>TEAM</li>
      </Link>
      <Link to="/blog">
        <li className={menuClasses}>BLOG</li>
      </Link>
    </ul>

    <Button
      text="Contact Us"
      standard
      classes="rounded-full text-white hover:shadow"
      url="/contact"
    />
  </footer>
)

export default Footer