import React from 'react'

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

import ContactImage from '../images/contact-web-agency.svg'
import Sarajevo from '../images/sarajevo-web-agency.jpg'
import Stockholm from '../images/stockholm-web-agency.jpg'
import FormImage from '../images/contact-web-consultancy.svg'

const ContactPage = () => (
  <div>
    <PageIntro
      headline="Let's make things happen"
      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-20 lg:-mt-12 tilted md:p-10"
    />

    <section className="container mx-auto my-12 p-4">
      <div className="md:flex">
        <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="text-purple-dark hover:text-purple-light no-underline"
                      href="tel:+46760477717"
                    >
                      +46760477717
                    </a>
                    <br />
                    E-mail:{' '}
                    <a
                      className="text-purple-dark hover:text-purple-light no-underline"
                      href="mailto:sweden@saburly.com"
                    >
                      sweden@saburly.com
                    </a>{' '}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <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="text-purple-dark hover:text-purple-light no-underline"
                      href="tel:+38761909238"
                    >
                      +38761909238
                    </a>{' '}
                    <br />
                    E-mail:{' '}
                    <a
                      className="text-purple-dark hover:text-purple-light no-underline"
                      href="mailto:bosnia@saburly.com"
                    >
                      bosnia@saburly.com
                    </a>{' '}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="bg-contact-form">
      <form
        action="https://formspree.io/info@saburly.com"
        className="mx-auto pt-16 p-6 max-w-md"
        method="POST"
      >
        <SectionIntro headline="Send us a message" light />
        <div className="flex flex-wrap">
          <input
            className="appearance-none bg-transparent border-contact block w-full text-white py-2 border-grey-light"
            id="grid-first-name"
            type="text"
            placeholder="Name"
            name="name"
            required
          />

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

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

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

export default ContactPage