import { getTranslations } from "next-intl/server";

import { Typography } from "@/components/ui";
import { translatePathEmailMarketingCompatibilityV2 } from "@/shared/constants/translate";

import GuaranteeIcon from "./guarantee.svg";

import styles from "./MoneyBackGuarantee.module.scss";

export default async function MoneyBackGuarantee() {
  const t = await getTranslations(
    translatePathEmailMarketingCompatibilityV2("Landing.money-back-guarantee")
  );
  return (
    <div className={styles.container}>
      <div className={styles.iconContainer}>
        <GuaranteeIcon />
      </div>
      <Typography as="h3" color="white" className={styles.title}>
        {t("title")}
      </Typography>
      <Typography as="p" className={styles.term}>
        {t("term")}
      </Typography>
      <div className={styles.descriptionContainer}>
        <Typography as="p" className={styles.description}>
          {t.rich("description", {
            bold: chunks => <b>{chunks}</b>,
          })}
        </Typography>
      </div>
      <div className={styles.footer}>
        <svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M8 16C10.1217 16 12.1566 15.1571 13.6569 13.6569C15.1571 12.1566 16 10.1217 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0C5.87827 0 3.84344 0.842855 2.34315 2.34315C0.842855 3.84344 0 5.87827 0 8C0 10.1217 0.842855 12.1566 2.34315 13.6569C3.84344 15.1571 5.87827 16 8 16ZM11.5312 6.53125L7.53125 10.5312C7.2375 10.825 6.7625 10.825 6.47188 10.5312L4.47188 8.53125C4.17813 8.2375 4.17813 7.7625 4.47188 7.47188C4.76562 7.18125 5.24062 7.17813 5.53125 7.47188L7 8.94063L10.4688 5.46875C10.7625 5.175 11.2375 5.175 11.5281 5.46875C11.8187 5.7625 11.8219 6.2375 11.5281 6.52812L11.5312 6.53125Z"
            fill="#BBF7D0"
          />
        </svg>
        <Typography as="p" className={styles.text}>
          {t("footer")}
        </Typography>
      </div>
    </div>
  );
}
