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
      intro="Contact"
      headline="Where to find us"
      text="We are always on a lookout for exciting challenges and new contacts. If you want to start something great or just find out more about what we do, send us a message. Reinventing your presence in the connected world is just a few characters away"
      sectionClasses="lg:mb-8"
      image={ContactImage}
      imgClasses="-mb-20 lg:-mt-12"
    />

    <section className="container mx-auto my-12 p-4">
      <div className="md:flex">
        <div className="p-2 text-center">
          <div className="rounded overflow-hidden shadow">
            <img className="w-full" src={Sarajevo} alt="Sarajevo City" />
            <div className="px-6 py-4">
              <div className="font-normal text-xl mb-2">
                Saburly Office in Sarajevo
              </div>
              <div className="md:flex text-left justify-around text-grey-darker text-base">
                <div>
                  <h4>Adress</h4>
                  Saburly d.o.o <br />
                  Hakije Turajlica 2 <br />
                  71 000 Sarajevo <br />
                  Bosnia & Herzegovina <br />
                </div>
                <div>
                  <h4>Contact</h4>
                  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>{' '}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="p-2 text-center">
          <div className="rounded overflow-hidden shadow">
            <img className="w-full" src={Stockholm} alt="Stockholm City" />
            <div className="px-6 py-4">
              <div className="font-normal text-xl mb-2">
                Saburly Office in Stockholm
              </div>
              <div className="md:flex text-left justify-around text-grey-darker text-base">
                <div>
                  <h4>Adress</h4>
                  Saburly AB <br />
                  Vretenvägen 13 <br />
                  171 54 Solna <br />
                  Sweden <br />
                </div>
                <div>
                  <h4>Contact</h4>
                  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>{' '}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="bg-contact-form">
      <form className="mx-auto pt-16 p-6 max-w-md">
        <SectionIntro headline="Let's Connect" 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"
            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"
            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"
            placeholder="Message..."
            required
          />
        </div>

        <button
          className="mt-4 shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
          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