import { ComponentSloganOne, Maybe } from "@/types/gpl/graphql";
import s from "./index.module.scss";
import Image from "@/modules/common/components/image";
import Button from "@/modules/common/components/button/border";
import { getTranslations } from "next-intl/server";
interface Props {
  param: Maybe<ComponentSloganOne> | undefined;
}

export default async function SloganOne({ param }: Props) {
  const t = await getTranslations();
  return (
    <div className={s.container} style={{ backgroundImage: `linear-gradient(180deg, #3f3f3f99 0%, #3f3f3f99 100%), url(${param?.back?.url})` }}>
      <div className={s.content}>
        <div className={s.img}>
          <Image image={param?.img} />
        </div>
        <div className={s.title}>{param?.title}</div>
        <div className={s.list}>
          {
            param?.list?.map((item, index) => {
              return (
                <div className={s.item} key={index}>
                  <span className={s.itemTitle}>{item?.title}</span>
                  <span className={s.itemDesc}>{item?.desc}</span>
                </div>
              );
            })
          }
        </div>
        <div className={s.btn}>
          <Button text={t("common:learnMore")} link="/about" />
        </div>
      </div>
    </div>
  );
}

.container {
  width: 100%;
  min-height: 500px;
  position: relative;
  z-index: 1;
  padding: 70px 20px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  // &::after {
  //   content: "";
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: #3f3f3f99;
  // }

  .content {
    
    width: 100%;
    max-width: var(--max-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    .img{
      height: 150px;
      // border: 1px solid red;
    }

    .title {
      color: #fff;
      font-size: var(--font-2xl);
      padding-top: 30px;
    }

    .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding-top: 100px;

      @include md {
        grid-template-columns: repeat(4, 1fr);
      }

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 40px;
        border-right: 1px solid #fff;
        text-align: center;
        margin-top: 20px;

        &:nth-child(2n) {
          border-right: none;
        }

        @include md {
          &:nth-child(2n) {
            border-right: 1px solid #fff;
          }

          &:last-child {
            border-right: none;
          }
        }

        .itemTitle {
          font-size: var(--font-2xl);
          color: #fff;
          margin-bottom: 10px;
        }

        .itemDesc {
          font-size: var(--font-base);
          color: #fff;
        }

      }
    }

    .btn {
      padding-top: 90px;
    }
  }
}