/* eslint-disable @next/next/no-img-element */
import Head from "next/head";
import { GetServerSideProps } from "next/types";
// @Antd
import { Col, Row } from "antd";
// @Images
import {
  GHF,
  Vision,
  Goals,
  Mision,
  BackgroundFill,
  PercyPelaez,
  IvanSaracay,
  BelenBailey,
} from "../../public/images";
// @i18n
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
// @Layout
import { LayoutWrapper } from "../../src/components/layouts/wrapper";
// @Styled
import styles from "../../src/components/pages/about/index.module.less";

export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
  return {
    props: {
      ...(await serverSideTranslations(locale as string, ["common", "about"])),
    },
  };
};

export default function About() {
  const { t } = useTranslation();

  return (
    <main className={"container ".concat(styles.wrapper__page)}>
      <Head>
        <title> {t("about:title")} | GHF</title>
        <meta name="description" content={t("about:description")} key="desc" />
      </Head>
      <section className={styles.wrapper__page}>
        <Row className="wrapper__content">
          <Col
            className={"wrapper__content--horizontal ".concat(
              styles.wrapper__fill
            )}
          >
            <div className={styles["wrapper__content--header"]}>
              <h1 className={styles["wrapper__content--title"]}>
                {t("about:title")}
              </h1>
              <p className={styles["wrapper__content--p"]}>
                {t("about:description")}
              </p>
            </div>
          </Col>
        </Row>
      </section>
      <section
        style={{
          background: `url(${BackgroundFill})`,
          backgroundSize: "cover",
          backgroundPosition: "-10px",
        }}
      >
        <Row className="wrapper__content">
          <Row className="wrapper__content--horizontal">
            <Col sm={24} lg={12}>
              <img src={Goals} className={styles.about__image} alt="" />
            </Col>
            <Col sm={24} lg={12}>
              <div>
                <h3 className={styles.about__title}>{t("about:objetivo")}</h3>
                <p className={styles.about__p}>
                  {t("about:objetivoDescription")}
                </p>
              </div>
            </Col>
          </Row>
          <Row className="wrapper__content--horizontal">
            <Col sm={24} lg={12}>
              <div>
                <h3 className={styles.about__title}>{t("about:vision")}</h3>
                <p className={styles.about__p}>
                  {t("about:visionDescription")}
                </p>
              </div>
            </Col>
            <Col sm={24} lg={12}>
              <div className={styles.image__right}>
                <img src={Vision} className={styles.about__image} alt="" />
              </div>
            </Col>
          </Row>
          <Row className="wrapper__content--horizontal">
            <Col sm={24} lg={12}>
              <img src={Mision} className={styles.about__image} alt="" />
            </Col>
            <Col sm={24} lg={12}>
              <div>
                <h3 className={styles.about__title}>{t("about:mision")}</h3>
                <p className={styles.about__p}>
                  {t("about:misionDescription")}
                </p>
              </div>
            </Col>
          </Row>
          <Row className="wrapper__content--horizontal">
            <Col sm={24} lg={12}>
              <div>
                <h3 className={styles.about__title}>{t("about:valores")}</h3>
                <Row gutter={[0, 32]}>
                  <Col>
                    <h4 className={styles.about__subtitle}>
                      {t("about:compromiso")}
                    </h4>
                    <p className={styles.about__subp}>
                      {t("about:compromisoDescription")}
                    </p>
                  </Col>
                  <Col>
                    <h4 className={styles.about__subtitle}>
                      {t("about:participacion")}
                    </h4>
                    <p className={styles.about__subp}>
                      {t("about:participacionDescription")}
                    </p>
                  </Col>
                  <Col>
                    <h4 className={styles.about__subtitle}>
                      {t("about:confianza")}
                    </h4>
                    <p className={styles.about__subp}>
                      {t("about:confianzaDescription")}
                    </p>
                  </Col>
                  <Col>
                    <h4 className={styles.about__subtitle}>
                      {t("about:profesionalidad")}
                    </h4>
                    <p className={styles.about__subp}>
                      {t("about:profesionalidadDescription")}
                    </p>
                  </Col>
                  <Col>
                    <h4 className={styles.about__subtitle}>
                      {t("about:transparencia")}
                    </h4>
                    <p className={styles.about__subp}>
                      {t("about:transparenciaDescription")}
                    </p>
                  </Col>
                </Row>
              </div>
            </Col>
            <Col sm={24} lg={12}>
              <div className={styles.image__center}>
                <img
                  src={GHF}
                  className={styles["about__image--fill"]}
                  alt=""
                />
              </div>
            </Col>
          </Row>
          <Row
            className={"wrapper__content--horizontal ".concat(
              styles.about__wrapper
            )}
          >
            <Col span={24}>
              <div className={styles.about__card}>
                <h3 className={styles.about__card__title}>
                  {" "}
                  {t("about:fundadores")}
                </h3>
                <Row justify="space-around">
                  <Col>
                    <div className={styles.card__container}>
                      <img
                        className={styles.card__image}
                        src={PercyPelaez}
                        alt=""
                      />
                      <h4 className={styles.card__title}>
                        Percy Pelaez Contti
                      </h4>
                      <p className={styles.card__p}>{t("about:percy1")}</p>
                      <p>{t("about:percy2")}</p>
                    </div>
                  </Col>
                  <Col>
                    <div className={styles.card__container}>
                      <img
                        className={styles.card__image}
                        src={IvanSaracay}
                        alt=""
                      />
                      <h4 className={styles.card__title}>Ivan Saracay</h4>
                      <p className={styles.card__p}>{t("about:ivan1")}</p>
                      <p>
                        Presidente CML Exports Inc., US y SV. <br /> CEO de CML
                        GROUP Inc.
                      </p>
                    </div>
                  </Col>
                  <Col>
                    <div className={styles.card__container}>
                      <img
                        className={styles.card__image}
                        src={BelenBailey}
                        alt=""
                      />
                      <h4 className={styles.card__title}>Belen Bailey</h4>
                      <p className={styles.card__p}>{t("about:belen1")}</p>
                    </div>
                  </Col>
                </Row>
              </div>
            </Col>
          </Row>
        </Row>
      </section>
    </main>
  );
}

About.getLayout = function getLayout(page: React.ReactElement) {
  return <LayoutWrapper>{page}</LayoutWrapper>;
};
