import * as React from "react"
import { graphql, useStaticQuery } from "gatsby"
import { Container } from "@/components"
import WhoAreWe from "@/components/about-us/who-are-we"
import OurMissionAndValues from "@/components/about-us/our-mission-and-values"
import SocialResponsibilities from "@/components/about-us/social-responsibilities"
import OurTeam from "../our-team"
import TheirComment from "@/components/about-us/their-comment"
import ContactUsMore from "@/components/about-us/contact-us-more"
import t from "@/constants/wording"
import * as styles from "./index.module.scss"

const CompanyProfile: React.FC = () => {
  const data = useStaticQuery<AboutUsQuery>(graphql`
    query StrapiAboutUsQuery {
      strapiAboutUsOverview {
        whoAreWeDescription
        keyNumbers {
          id
          value
          description
        }
        socialResponsibilities {
          id
          title
          description
        }
        teamDescription
        teamStory {
          Description
          Image {
            alt
            media {
              url
              width
              height
            }
          }
        }
        staffStory {
          Description
          Image {
            alt
            media {
              url
              width
              height
            }
          }
        }
        theirComment {
          Comment
          personName
          professionalTitle
          id
          Logo {
            alt
            media {
              url
            }
          }
        }
        ourUser {
          alt
          media {
            url
          }
        }
      }
    }
  `)

  const {
    whoAreWeDescription,
    keyNumbers,
    socialResponsibilities,
    teamDescription,
    teamStory,
    staffStory,
    theirComment,
    ourUser,
  } = data.strapiAboutUsOverview

  const ourTeam = {
    description: teamDescription,
    data: [
      {
        title: t("team story"),
        description: teamStory.Description,
        image: teamStory.Image,
      },
      {
        title: t("staff story"),
        description: staffStory.Description,
        image: staffStory.Image,
      },
    ],
  }

  return (
    <div>
      <WhoAreWe
        whoAreWeDescription={whoAreWeDescription}
        keyNumbers={keyNumbers}
      />
      <OurMissionAndValues />
      <SocialResponsibilities socialResponsibilities={socialResponsibilities} />
      <OurTeam data={ourTeam} />
      <TheirComment data={theirComment} />
      {ourUser && (
        <div className={styles.ourUser}>
          <Container isSmall={true}>
            <h2>{t("our user")}</h2>
            <img alt={ourUser?.alt} src={ourUser?.media.url} />
          </Container>
        </div>
      )}
      <ContactUsMore />
    </div>
  )
}

export default CompanyProfile