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

import './Header.css'

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

const Header = () => (
  <header className="bg-saburly-indigo">
    <nav className="container mx-auto flex justify-between lg:p-6 p-4">
      <Link to="/">
        <img src={LogoSaburly} alt="Saburly Logo" className="max-w-xs" />
      </Link>

      <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-right lg:w-auto justify-end lg:flex-grow">
        <ul className="list-reset 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>

          <Button
            text="Contact"
            standard
            classes="rounded-full text-white hover:shadow"
            url="/contact"
          />
        </ul>
      </div>
    </nav>
  </header>
)

export default Header