import React from 'react'

import SectionIntro from '../components/SectionIntro'
import PageIntro from '../components/PageIntro'
import Fade from 'react-reveal/Fade'

import ContactImage from '../images/saburly-web-agency.jpg'
import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Stockholm from '../images/stockholm-web-agency.jpg'
import FormImage from '../images/best-web-development-sweden.svg'

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

const ContactPage = () => (
  <PageTransition>
    <Fade top>
      <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 find out more about what we do."
        sectionClasses="lg:mb-8"
        image={ContactImage}
        imgClasses="-mb-12 border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition"
      />
    </Fade>

    <section className="container mx-auto my-12 p-4">
      <div className="md:flex">
        <Fade left>
          <div className="p-2 text-center">
            <div className="rounded overflow-hidden border-bottom-saburly">
              <img className="w-full" src={Stockholm} alt="Stockholm City" />
              <div className="px-6 py-4">
                <div className="uppercase font-medium text-xl mb-6">
                  office in Stockholm
                </div>
                <div className="md:flex text-left justify-around text-black text-base">
                  <div>
                    <h4 className="text-black">Adress</h4>
                    <p className="text-black-light">
                      Saburly AB <br />
                      Vretenvägen 13 <br />
                      171 54 Solna <br />
                      Sweden <br />
                    </p>
                  </div>
                  <div>
                    <h4 className="text-black">Contact</h4>
                    <p className="text-black-light">
                      Phone:{' '}
                      <a
                        className="saburly-color hover:text-purple-light no-underline"
                        href="tel:+46760477717"
                      >
                        +46760477717
                      </a>
                      <br />
                      E-mail:{' '}
                      <a
                        className="saburly-color hover:text-purple-light no-underline"
                        href="mailto:sweden@saburly.com"
                      >
                        sweden@saburly.com
                      </a>{' '}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Fade>
        <Fade right>
          <div className="p-2 text-center">
            <div className="rounded overflow-hidden border-bottom-saburly">
              <img className="w-full" src={Sarajevo} alt="Sarajevo City" />
              <div className="px-6 py-4">
                <div className="uppercase font-medium text-xl mb-6">
                  office in Sarajevo
                </div>
                <div className="md:flex text-left justify-around text-base">
                  <div>
                    <h4 className="text-black">Adress</h4>
                    <p className="text-black-light">
                      Saburly d.o.o <br />
                      Hakije Turajlica 2 <br />
                      71 000 Sarajevo <br />
                      Bosnia & Herzegovina <br />
                    </p>
                  </div>
                  <div>
                    <h4 className="text-black">Contact</h4>
                    <p className="text-black-light">
                      Phone:{' '}
                      <a
                        className="saburly-color hover:text-purple-light no-underline"
                        href="tel:+38761909238"
                      >
                        +38761909238
                      </a>{' '}
                      <br />
                      E-mail:{' '}
                      <a
                        className="saburly-color hover:text-purple-light no-underline"
                        href="mailto:bosnia@saburly.com"
                      >
                        bosnia@saburly.com
                      </a>{' '}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Fade>
      </div>
    </section>

    <div className="bg-saburly-lighter p-8">
      <Fade>
        <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 pt-16 p-6"
            method="POST"
          >
            <SectionIntro headline="Send us a message" />
            <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>
      </Fade>
    </div>
  </PageTransition>
)

export default ContactPage