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"
    />

    <section className="my-20 container mx-auto w-full md:flex w-full">
   <div className="p-2">
        <Card team teamMember={Denver} title="OFFICE IN DENVER">
          <div className="xsm:flex text-left justify-around text-black text-base p-4">
            <div className="py-2">
              <h4 className="text-black">Address</h4>
              <p className="text-black-light font-serif">
                Saburly <br />
                1819 S Pearl St <br />
                Denver, CO 80210<br />
                USA <br />
              </p>
            </div>
            <div className="py-2">
              <h4 className="text-black">Contact</h4>
              <p className="font-serif text-black-light">
                Phone:{' '}
                <a
                  className="saburly-color hover:text-purple-light no-underline"
                  href="tel:+17206432025"
                >
                  +1 720-643-2025
                </a>
                <br />
                E-mail:{' '}
                <a
                  className="saburly-color hover:text-purple-light no-underline"
                  href="mailto:info@saburly.com"
                >
                  info@saburly.com
                </a>{' '}
              </p>
            </div>
          </div>
        </Card>
      </div>

      <div className="p-2">
        <Card team teamMember={Sarajevo} title="OFFICE IN SARAJEVO">
          <div className="xsm:flex text-left justify-around text-base p-4">
            <div className="py-2">
              <h4 className="text-black">Address</h4>
              <p className="font-serif text-black-light">
                Saburly d.o.o <br />
                Hakije Turajlica 2 <br />
                71 000 Sarajevo <br />
                Bosnia & Herzegovina <br />
              </p>
            </div>
            <div className="py-2">
              <h4 className="text-black">Contact</h4>
              <p className="font-serif 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:info@saburly.com"
                >
                  info@saburly.com
                </a>{' '}
              </p>
            </div>
          </div>
        </Card>
      </div>
    </section>

    <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