import React from 'react'
import Link from 'gatsby-link'
import LogoSaburly from "../images/logo-saburly.svg"
import Button from './Button'

import "./Header.css"

const Header = () => (
  <header>
    <nav className="flex items-center justify-between lg:p-6">
      <div className="flex items-center flex-no-shrink text-white mr-6">
        <Link to="/">
          <img src={LogoSaburly} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
        </Link>
      </div>

      <button className="menu_icon lg:invisible">
        <span className="menu_bar-top" />
        <span className="menu_bar-mid" />
        <span className="menu_bar-bot" />
      </button>

      <div className="hidden lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
        <ul className="flex text-sm justify-center lg:flex-grow">
          <Link to="/services">
            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
        </li>
          </Link>
          <Link to="/about">
            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">TEAM
        </li>
          </Link>
          <Link to="/blog">
            <li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">BLOG
        </li>
          </Link>
        </ul>

        <Button text="Contact" standard classes="rounded-full" url="/contact" />

      </div>
    </nav>
  </header>
)

export default Header