import React from 'react'
import Link from 'gatsby-link'

import SectionIntro from '../components/SectionIntro'
import Button from '../components/Button'
import Card from '../components/Card'
import Service from '../components/Service'
import PageIntro from '../components/PageIntro'
import InfoBox from '../components/InfoBox'
import Technologies from '../components/Technologies'
import Typed from 'react-typed'
import Fade from 'react-reveal/Fade'

import ImgIntro from '../images/web-development-company.svg'
import ImgDesign from '../images/user-experience-design-agency.svg'
import ImgFullstack from '../images/fullstack-web-development-agency.svg'
import ImgMobile from '../images/mobile-app-development-company.svg'
import ServicesBg from '../images/services-background.svg'

import LogoIBM from '../images/logo-ibm-color.svg'
import LogoRicoh from '../images/logo-ricoh-color.svg'
import LogoKinnarps from '../images/logo-kinnarps-color.svg'
import LogoCoor from '../images/logo-coor-color.svg'
import LogoIMCG from '../images/logo-imcg.png'
import LogoColounge from '../images/logo-colounge.svg'
import LogoHyrma from '../images/logo-hyrma-admin.svg'

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

const IndexPage = ({ ...props }) => (
  <PageTransition>
    <Fade top>
      <PageIntro
        text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
        image={ImgIntro}
        imgClasses="-mb-20 p-2 md:p-8"
      >
        <h2 className="px-4 text-black text-4xl xl:text-5xl pt-1">
          We{' '}
          <Typed
            strings={['imagine', 'design', 'develop', 'maintain']}
            typeSpeed={100}
            backSpeed={50}
            backDelay={3000}
            loop
          />
          great<br />digital experiences
        </h2>
      </PageIntro>
    </Fade>

    <main>
      <section className="container mx-auto max-w-lg text-center mt-16 p-4">
        <Fade top>
          <SectionIntro
            h2Classes="text-3xl"
            headline="Because beautiful code makes our heart pound"
            text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
          />
        </Fade>
      </section>

      <section className="relative">
        <Fade>
          <Service
            classes="py-8"
            h2Classes="text-4xl font-light text-black"
            img={ImgDesign}
            title="User Experience Design"
            text="Our approach is simple: focus on how users might use the product in the best ways possible. We offer UX and interface design services for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
          />
        </Fade>

        <Fade>
          <Service
            reversed
            classes="py-8"
            h2Classes="text-4xl font-light text-black"
            img={ImgFullstack}
            title="Full-Stack Development"
            text="We are experts in modern web development using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
            imgClasses=""
          />
        </Fade>

        <Fade>
          <Service
            img={ImgMobile}
            classes="py-8"
            h2Classes="text-4xl font-light text-black"
            imgClasses="max-h-sm"
            title="Mobile Apps"
            text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."
          />
        </Fade>
      </section>

      <section className="bg-saburly-lighter text-center p-4 my-12">
        <div className="my-8 py-8 container mx-auto max-w-lg">
          <Fade>
            <SectionIntro
              h2Classes="text-4xl"
              headline="Ambitious projects bring great responsibility"
              text="By thinking big, designing smart and developing fast, we're helping organizations of various sizes bring life to ideas. We're now eager to hear what challenges you have for us."
            />
            <div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
              <div className="sm:w-1/2 md:w-1/6 p-2">
                <img
                  src={LogoColounge}
                  className="opacity-50 hover:opacity-100 client-logo p-2"
                  alt="Colounge Logo"
                />
              </div>
              <div className="sm:w-1/2 md:w-1/6 p-2">
                <img
                  src={LogoRicoh}
                  className="opacity-50 hover:opacity-100 client-logo p-2"
                  alt="Ricoh Logo"
                />
              </div>
              <div className="sm:w-1/3 md:w-1/6 p-2">
                <img
                  src={LogoCoor}
                  className="opacity-50 hover:opacity-100 client-logo p-2"
                  alt="Coor Logo"
                />
              </div>
              <div className="sm:w-1/3 md:w-1/6 p-2">
                <img
                  src={LogoKinnarps}
                  className="opacity-50 hover:opacity-100 client-logo p-2"
                  alt="Kinnarps Logo"
                />
              </div>
              <div className="sm:w-1/3 md:w-1/6 p-2">
                <img
                  src={LogoIMCG}
                  className="opacity-50 hover:opacity-100 client-logo p-2"
                  alt="IMCG Logo"
                />
              </div>
              <div className="sm:w-1/3 md:w-1/6 p-2">
                <img
                  src={LogoHyrma}
                  className="opacity-50 hover:opacity-100 client-logo p-2"
                  alt="Hyrma Logo"
                />
              </div>
            </div>
          </Fade>

          <Fade>
            <div className="text-center lg:flex justify-center">
              <Button
                standard
                text="More About What We Do"
                url="/services"
                classes="font-medium rounded-full m-2 hover:shadow-md text-grey-darker hover:shadow"
              />
              <Button
                filled
                text="Let's Get In Touch"
                url="/contact"
                classes="text-white font-medium shadow hover:shadow-md rounded-full m-2 font-light bg-teal hover:bg-teal-dark"
              />
            </div>
          </Fade>
        </div>
      </section>

      <section className="text-center p-4 relative">
        <Fade>
          <SectionIntro
            h2Classes="text-4xl"
            headline="Yet sometimes we have fun & publish"
          />
        </Fade>
        <Fade>
          <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
            {props.data.allWordpressPost.edges.map(({ node }) => (
              <div key={node.id} className="md:w-1/2 p-2">
                <Link
                  to={`blog/${node.slug}`}
                  className="pointer no-underline saburly-transition hover:opacity-50"
                >
                  <Card
                    url={`blog/${node.slug}`}
                    title={node.title}
                    date={node.date}
                    excerpt={node.excerpt}
                    image={
                      node.featured_media
                        ? node.featured_media.localFile.childImageSharp
                            .resolutions
                        : undefined
                    }
                  />
                </Link>
              </div>
            ))}
          </div>
        </Fade>
        <Fade>
          <Button
            standard
            text="More Posts"
            url="/blog"
            classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
          />
        </Fade>
      </section>
    </main>
  </PageTransition>
)

export const query = graphql`
  query indexPostsQuery {
    allWordpressPost(limit: 2) {
      edges {
        node {
          id
          title
          excerpt
          status
          slug
          date(formatString: "MMMM DD, YYYY")
          featured_media {
            localFile {
              childImageSharp {
                resolutions(width: 600, height: 300) {
                  src
                  width
                  height
                }
              }
            }
          }
        }
      }
    }
  }
`

export default IndexPage
