import React from 'react'

import SectionIntro from '../components/SectionIntro'
import PageIntro from '../components/PageIntro'
import Card from '../components/Card'
import SEO from '../components/SEO'

import ContactImage from '../images/saburly-web-agency.jpg'
import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Denver from '../images/denver-web-agency.jpg'

import FormImage from '../images/best-web-development-sweden.svg'

import PageTransition from 'gatsby-plugin-page-transitions'

const ContactPage = () => (
  <PageTransition>
    <SEO
      siteTitle="Saburly - Contact Us"
      siteDescription="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions"
      siteUrl="https://saburly.com/contact"
    />
    <PageIntro
      tiltImage
      headline="Let's connect"
      text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions."
      sectionClasses="lg:mb-8"
      image={ContactImage}
      imgClasses="-mb-12 border-white rounded-lg"
    />

    <div className="bg-saburly-lighter p-8">
      <section className="container lg:flex justify-between mx-auto">
        <form
          action="https://formspree.io/info@saburly.com"
          className="w-full max-w-sm mx-auto p-6"
          method="POST"
        >
          <SectionIntro
            headline="We'd love to hear from you"
            h2Classes="text-3xl xsm:text-4xl sm:text-5xl xl:text-6xl font-black"
          />
          <div className="md:flex flex-wrap">
            <input
              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
              id="grid-first-name"
              type="text"
              placeholder="Name"
              name="name"
              required
            />

            <input
              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
              id="grid-first-name"
              type="text"
              placeholder="Email"
              name="_replyto"
              required
            />

            <textarea
              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
              id="grid-last-name"
              type="text"
              name="message"
              placeholder="Message"
              required
            />
          </div>

          <button
            className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
            value="Send"
            type="submit"
          >
            SEND
          </button>
        </form>
        <div>
          <img
            src={FormImage}
            alt="Contact Form Image"
            className="p-10 w-full text-center block md:max-w-lg mx-auto"
          />
        </div>
      </section>
    </div>
  </PageTransition>
)

export default ContactPage
