import React from "react";
import styled from "styled-components";
import Img from "gatsby-image";
import { graphql } from "gatsby";
import Center from "../components/center";
import ResponsiveContainer from "../components/responsive-container";
import Inset from "../components/inset";
import Text from "../components/text";
import colors from "../constants/colors";
import Layout from "../layouts";
import VersandhausWalzLogo from "../assets/compressed/versandhaus-walz.png";
import OttoLogo from "../assets/compressed/otto.png";
import LudwigMediaLogo from "../assets/compressed/ludwigmedia.png";
import BadischerWeinLogo from "../assets/compressed/badischer-wein.png";
import DrawkitContentManColour from "../assets/drawkit-content-man-colour.svg";
import Stack from "../components/stack";

const customers = [
  {
    src: OttoLogo,
    alt: "Otto (GmbH & CoKG)"
  },
  {
    src: VersandhausWalzLogo,
    alt: "Versandhaus Walz"
  },
  {
    src: LudwigMediaLogo,
    alt: "LUDWIG:media gmbh"
  },
  {
    src: BadischerWeinLogo,
    alt: "Badischer Wein eKfr"
  }
];

const HeroImage = styled.img`
  width: 80%;
  height: auto;
  @media (min-width: 48em) {
    width: auto;
    height: 80vh;
    max-height: 460px;
    margin-left: -32px;
  }
`;

const HeroLayout = styled(Stack)`
  margin: 64px 0 32px;
  @media (min-width: 48em) {
    margin-top: 0;
    flex-direction: row;
  }
`;

const HeroArea = styled.div`
  position: relative;
  background-color: ${colors.black};
  display: flex;
  align-items: center;
  @media (min-width: 48em) {
    height: 80vh;
  }
`;

const HeroTextArea = styled.div`
  position: relative;
`;

const HeroText = styled.h1`
  line-height: 1.1;
  font-size: 2.5rem;
  max-width: 22ch;
  margin-top: 0;
  color: ${colors.white};
  text-align: center;
  @media (min-width: 48em) {
    font-size: 3rem;
    text-align: left;
  }
`;

const HeroTextHighlicht = styled.span`
  color: ${colors.orange};
`;

const HeroTextSubheadline = styled.p`
  line-height: 1.1;
  font-size: 1.6rem;
  max-width: 22ch;
  color: #ddb992;
  margin: 0;
  text-align: center;
  @media (min-width: 48em) {
    text-align: left;
    font-size: 2rem;
  }
`;

const CustomerContainer = ResponsiveContainer.extend`
  display: flex;
  align-items: center;
  flex-direction: column;
  @media (min-width: 700px) {
    flex-direction: row;
  }
`;

const CustomerList = Center.extend`
  padding: 32px 0;
  background-color: hsla(31, 17%, 93%, 1);
`;

const CustomerLogo = styled.div`
  flex: 1 1 auto;
  max-height: 60px;

  > img {
    max-width: 100%;
    max-height: 100%;
  }
`;

const H2 = styled.h2`
  color: ${colors.textPrimary};
  margin: 0 0 24px;
`;
const H3 = styled.h3`
  color: ${colors.textPrimary};
  margin: 0 0 16px;
`;

const SkillGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 16px;
  @media (min-width: 700px) {
    grid-template-columns: 1fr 1fr;
  }
`;

const ServiceSection = styled.div`
  background-color: hsla(13, 10%, 97%, 1);
  padding: 32px 0;
`;

const Skill = styled.div`
  background-color: white;
  border-radius: 4px;

  display: flex;
  flex-direction: column;

  text-align: left;
  color: ${colors.text};
  animation: fadein 2s;
`;

const SkillImage = styled.div`
  max-height: 175px;
  background-color: #ffe6df;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
`;

const IndexPage = ({ data }) => (
  <Layout>
    <HeroArea>
      <ResponsiveContainer>
        <HeroLayout alignItems="center" scale="xl">
          <HeroTextArea>
            <HeroText>
              Wir liefern digitale Lösungen,<br />
              <HeroTextHighlicht>die unsere Kunden lieben.</HeroTextHighlicht>
            </HeroText>
            <HeroTextSubheadline>Und das seit 15 Jahren!</HeroTextSubheadline>
          </HeroTextArea>
          <HeroImage src={DrawkitContentManColour} alt="" />
        </HeroLayout>
      </ResponsiveContainer>
    </HeroArea>
    <CustomerList>
      <CustomerContainer>
        {customers.map(logo => (
          <CustomerLogo key={logo.alt}>
            <img src={logo.src} alt={logo.alt} />
          </CustomerLogo>
        ))}
      </CustomerContainer>
    </CustomerList>
    <ServiceSection>
      <ResponsiveContainer>
        <Center>
          <H2>Unsere Leistungen</H2>
        </Center>
        <SkillGrid>
          {data.allContentfulServices.edges.map(({ node }) => (
            <Skill key={node.id}>
              <SkillImage>
                {node.image && <Img fluid={node.image.fluid} />}
              </SkillImage>
              <Inset scale="xl">
                <H3>{node.title}</H3>
                <Text.Detail>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: node.description.childMarkdownRemark.html
                    }}
                  />
                </Text.Detail>
              </Inset>
            </Skill>
          ))}
        </SkillGrid>
      </ResponsiveContainer>
    </ServiceSection>
  </Layout>
);

export default IndexPage;

export const query = graphql`
  query AllServices {
    allContentfulServices(sort: { fields: [order], order: ASC }) {
      edges {
        node {
          id
          title
          description {
            childMarkdownRemark {
              html
            }
          }
          image {
            fluid(maxWidth: 426) {
              ...GatsbyContentfulFluid
            }
          }
        }
      }
    }
    contentfulAsset(title: { eq: "Hero" }) {
      fluid(maxHeight: 1000) {
        ...GatsbyContentfulFluid
      }
    }
  }
`;
  margin: 10px;
  transition: all 0.5s ease-in-out;