import styles from "./styles.module.scss";
import { ELocalesPlacement } from "@/locales";
import { useTranslations } from "@/hooks/translations";
import { images } from "../../data";

function PalmsSayAbout() {
  const { translate } = useTranslations(ELocalesPlacement.EmailMarketingPalmistryV2);

  return (
    <div className={styles.container}>
      <div className={styles.rows}>
        <div className={styles.row}>
          <img
            src={images("life-line.svg")}
            alt="Hand with life line"
          />
          <div className={styles.points}>
            <div className={styles.point}>
              <p className={styles.text}>
                {translate("trial-payment.palms_say_about_point5", {
                  color: (
                    <span style={{ color: "#2A37D3" }}>
                      {translate("trial-payment.palms_say_about_point5_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          <img
            src={images("head-line.svg")}
            alt="Hand with head line"
          />
          <div className={styles.points}>
            <div className={styles.point}>
              <p className={styles.text}>
                {translate("trial-payment.palms_say_about_point3", {
                  color: (
                    <span style={{ color: "#20B61D" }}>
                      {translate("trial-payment.palms_say_about_point3_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          <img
            src={images("fate-line.svg")}
            alt="Hand with fate line"
          />
          <div className={styles.points}>
            <div className={styles.point}>
              <p className={styles.text}>
                {translate("trial-payment.palms_say_about_point7", {
                  color: (
                    <span style={{ color: "#BC23BF" }}>
                      {translate("trial-payment.palms_say_about_point7_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
          </div>
        </div>
        <div className={styles.row}>
          <img
            src={images("love-line.svg")}
            alt="Hand with love line"
          />
          <div className={styles.points}>
            <div className={styles.point}>
              <p className={styles.text}>
                {translate("trial-payment.palms_say_about_point1", {
                  color: (
                    <span>
                      {translate("trial-payment.palms_say_about_point1_color")}
                    </span>
                  ),
                })}
              </p>
            </div>
          </div>
        </div>
        <div className={`${styles.row} ${styles.row_fingers}`}>
          <img
            src={images("hand-fingers.svg")}
            alt="Hand with little finger"
          />
          <div className={styles.points}>
            <div className={styles.point}>
              <p className={styles.text}>
                {translate("trial-payment.palms_say_about_point9")}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default PalmsSayAbout;
