import React from "react";
import styled from "styled-components";
import Header from "../Components/Header";
import Footer from "../Components/Footer";
import ChatImage from "../Imgs/test.JPG";

const Main = styled.main`
  display: flex;
  flex-direction: column;
`;

const Section = styled.section`
  padding-top: 8rem;
  padding-bottom: 5rem;
  max-width: none;
`;

const SectionBox = styled.div`
  max-width: 80%;
  margin: 0 auto;
  &.image-section {
    max-width: 60%;
  }
`;

const DescriptionBox = styled.div`
  display: flex;
  flex-direction: column;
`;

const TitleBox = styled.div`
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 20px;
  &.paragraph-title {
    color: #3dc1d3;
    text-align: left;
  }
  &.desc-header-title {
    margin-bottom: 50px;
  }
`;

const ParagraphContainer = styled.div`
  display: grid;
  grid-template-columns: 30% 30% 30%;
  grid-column-gap: 5%;
`;

const ParagraphBox = styled.div`
  display: flex;
  flex-direction: column;
  &:not(:last-child) {
    margin-right: 20px;
  }
  p {
    font-size: 1.2rem;
    line-height: 1.5;
  }
`;

const Image = styled.img`
  height: 500px;
  border-radius: 10px;
`;

export default () => {
  return (
    <>
      <Header />
      <Main>
        <Section>
          <SectionBox>
            <DescriptionBox>
              <TitleBox className="desc-header-title">Why Linker ?</TitleBox>
              <ParagraphContainer>
                <ParagraphBox>
                  <TitleBox className="paragraph-title">Comfortable</TitleBox>
                  <p>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book.
                  </p>
                </ParagraphBox>
                <ParagraphBox>
                  <TitleBox className="paragraph-title">Easy</TitleBox>
                  <p>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book.
                  </p>
                </ParagraphBox>
                <ParagraphBox>
                  <TitleBox className="paragraph-title">Colorful</TitleBox>
                  <p>
                    Lorem Ipsum is simply dummy text of the printing and
                    typesetting industry. Lorem Ipsum has been the industry's
                    standard dummy text ever since the 1500s, when an unknown
                    printer took a galley of type and scrambled it to make a
                    type specimen book.
                  </p>
                </ParagraphBox>
              </ParagraphContainer>
            </DescriptionBox>
          </SectionBox>
        </Section>
        <Section>
          <SectionBox className="image-section">
            <DescriptionBox>
              <TitleBox className="desc-header-title">
                Look Around Linker
              </TitleBox>
              <Image src={ChatImage} alt={"Back Image"} />
            </DescriptionBox>
          </SectionBox>
        </Section>
      </Main>
      <Footer />
    </>
  );
};