import React from "react";

import Button from "../button/button";
import { Step } from "@/hooks/palmistry/use-steps";
import useSteps, { DecisionsChoice } from "@/hooks/palmistry/use-steps";
import useZodiacSign from "@/hooks/palmistry/use-zodiac-sign";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

export default function StepGuidancePlan() {
  const { translate } = useTranslations(ELocalesPlacement.PalmistryV0);
  const steps = useSteps();
  const { getSignByDate, getDecisionMakingStatistics } = useZodiacSign();
  const storedBirthdate = steps.getStoredValue(Step.Birthdate);
  const storedDecisionChoice = steps.getStoredValue(Step.Decisions);

  const [zodiacSign, setZodiacSign] = React.useState<string>("");
  const [decisionMakingStatistics, setDecisionMakingStatistics] =
    React.useState<number>(0);

  React.useEffect(() => {
    if (storedBirthdate) {
      const [storedMonth, storedDay] = storedBirthdate
        .split("-")
        .slice(1)
        .map(Number);
      const sign = getSignByDate(storedMonth, storedDay);
      setZodiacSign(sign.toLowerCase());
      setDecisionMakingStatistics(
        getDecisionMakingStatistics(sign)[
          storedDecisionChoice as DecisionsChoice
        ]
      );
    }
  }, [storedBirthdate]);

  // const onBack = () => {
  //   steps.goBack();
  // };

  const onNext = () => {
    steps.goNext();
  };

  return (
    <>
      {steps.getStoredValue(Step.Decisions) === DecisionsChoice.Heart && (
        <>
          <svg
            width="251"
            height="250"
            viewBox="0 0 251 250"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                id="gradient_svg"
                x1="48"
                y1="-4.15258e-06"
                x2="48"
                y2="86"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#FDDAA6" />
                <stop offset="1" stopColor="#DEB475" />
              </linearGradient>
            </defs>
            <rect width="250" height="250" transform="translate(0.5)" fill="" />
            <path
              d="M70.3196 21H69.6094C69.1832 21 68.8281 21.3073 68.8281 21.7169C68.473 26.5306 63.2173 31.4467 58.2102 31.8905C57.8196 31.9246 57.5 32.266 57.5 32.6415V33.3585C57.5 33.7681 57.8196 34.0754 58.2457 34.1095C63.2173 34.4509 68.2954 39.4011 68.8281 44.2148C68.8636 44.6586 69.2543 45 69.7514 45H70.2486C70.7457 45 71.1364 44.6586 71.1719 44.1807C71.598 38.7866 76.108 34.3485 81.7188 34.0754C82.1804 34.0413 82.5 33.6999 82.5 33.256V32.6415C82.5 32.1977 82.1449 31.8563 81.7188 31.8222C76.0725 31.5491 71.527 27.0768 71.1719 21.6145C71.1009 21.3073 70.7457 21 70.3196 21Z"
              fill="rgba(222, 229, 249, 0.7)"
            />
            <path
              d="M133.499 52.6187C129.705 52.6187 126.642 49.556 126.642 45.7619C126.642 45.3352 126.307 45 125.881 45C125.454 45 125.119 45.3352 125.119 45.7619C125.119 49.556 122.056 52.6187 118.262 52.6187C117.835 52.6187 117.5 52.9539 117.5 53.3805C117.5 53.8072 117.835 54.1424 118.262 54.1424C122.056 54.1424 125.119 57.2051 125.119 60.9992C125.119 61.4258 125.454 61.761 125.881 61.761C126.307 61.761 126.642 61.4258 126.642 60.9992C126.642 57.2051 129.705 54.1424 133.499 54.1424C133.926 54.1424 134.261 53.8072 134.261 53.3805C134.261 52.9539 133.926 52.6187 133.499 52.6187Z"
              fill="rgba(222, 229, 249, 0.3)"
            />
            <path
              d="M209.748 43.8802C202.338 43.8802 196.356 37.8983 196.356 30.488C196.356 29.6547 195.701 29 194.868 29C194.035 29 193.38 29.6547 193.38 30.488C193.38 37.8983 187.398 43.8802 179.988 43.8802C179.155 43.8802 178.5 44.5349 178.5 45.3682C178.5 46.2015 179.155 46.8562 179.988 46.8562C187.398 46.8562 193.38 52.838 193.38 60.2484C193.38 61.0817 194.035 61.7364 194.868 61.7364C195.701 61.7364 196.356 61.0817 196.356 60.2484C196.356 52.838 202.338 46.8562 209.748 46.8562C210.582 46.8562 211.236 46.2015 211.236 45.3682C211.236 44.5349 210.582 43.8802 209.748 43.8802Z"
              fill="rgba(222, 229, 249, 0.45)"
            />
            <rect
              x="18.0527"
              y="151"
              width="230"
              height="6"
              rx="3"
              transform="rotate(15 18.0527 151)"
              fill="#DEE5F9"
            />
            <g transform="translate(5, 35)">
              <path
                d="M167.888 72C177.055 72.0008 185.509 76.9012 190 84.8187C194.491 76.9012 202.945 72.0008 212.112 72C226.133 72 237.5 84.8837 237.5 98.7736C237.5 133.66 190 158 190 158C190 158 142.5 133.66 142.5 98.7736C142.5 84.8837 153.867 72 167.888 72Z"
                fill="#BCC9ED"
              />
            </g>
            <circle cx="126.5" cy="201" r="16" fill="#DEE5F9" />
            <path
              d="M55.4669 64C50.7008 64 46.837 67.8679 46.837 72.6391C46.837 72.8876 46.8499 73.1329 46.8704 73.3759C46.0168 73.1897 45.1313 73.0887 44.2219 73.0887C37.3845 73.0887 31.8418 78.6375 31.8418 85.4822C31.8418 87.0153 32.1217 88.4824 32.63 89.8377C26.3122 90.3992 21.3579 95.7087 21.3579 102.179C21.3579 106.286 23.3545 109.924 26.4277 112.18C23.3527 113.197 20.9798 115.912 20.5637 119.344C20.0106 123.905 23.1168 128.066 27.5736 128.881C26.1889 130.94 25.3805 133.42 25.3805 136.089C25.3805 143.227 31.1609 149.014 38.2914 149.014C40.6108 149.014 42.7854 148.398 44.6666 147.326C45.5642 151.824 49.5294 155.214 54.2861 155.214C59.7042 155.214 64.0966 150.817 64.0966 145.393V72.6391C64.0966 67.8679 60.233 64 55.4669 64V64Z"
              fill="#dee5f9"
            />
            <path
              d="M53.6714 124.307C53.3905 123.65 52.6295 123.345 51.9723 123.626C49.9927 124.471 48.3593 125.976 47.3529 127.872C45.4083 127.413 43.3752 127.584 41.5032 128.384C40.8456 128.665 40.5404 129.426 40.8212 130.083C41.1021 130.74 41.8633 131.046 42.5203 130.765C44.1984 130.048 46.0545 130.026 47.7469 130.705C49.439 131.383 50.7646 132.679 51.4802 134.355C51.6585 134.773 51.7953 135.207 51.887 135.647C52.03 136.334 52.6926 136.779 53.3784 136.658C53.3917 136.655 53.4051 136.653 53.4185 136.65C54.1184 136.504 54.5677 135.819 54.4216 135.119C54.2953 134.512 54.1066 133.913 53.8612 133.338C53.0322 131.396 51.6073 129.826 49.7896 128.818C50.5264 127.57 51.6484 126.58 52.9895 126.006C53.647 125.726 53.9523 124.965 53.6714 124.307Z"
              fill="#DEE5F9"
            />
            <path
              d="M47.0581 99.4033C47.0463 99.4275 47.0346 99.4517 47.0211 99.4753C46.3604 100.789 45.9734 102.257 45.9228 103.803C45.8548 105.876 46.4006 107.895 47.5008 109.643C47.8818 110.248 47.7 111.047 47.095 111.428C46.8808 111.563 46.6423 111.627 46.4065 111.627C45.9765 111.627 45.5558 111.413 45.3099 111.022C43.9329 108.835 43.2501 106.31 43.3352 103.718C43.3892 102.068 43.7513 100.489 44.3695 99.0412C42.3818 96.5661 41.3479 93.4023 41.5191 90.225C41.5576 89.511 42.1719 88.9644 42.8815 89.0018C43.5956 89.0403 44.1432 89.6503 44.1047 90.3641C43.9868 92.5527 44.5847 94.7333 45.7678 96.5619C47.4346 94.252 49.8632 92.5029 52.7624 91.6868C53.4505 91.4931 54.1656 91.894 54.3595 92.5822C54.5531 93.2704 54.1523 93.9853 53.4639 94.179C50.6181 94.9801 48.3399 96.9049 47.0581 99.4033V99.4033Z"
              fill="#DEE5F9"
            />
            <path
              d="M74.1308 64C78.8968 64 82.7607 67.8679 82.7607 72.6391C82.7607 72.8876 82.7478 73.1329 82.7272 73.3759C83.5808 73.1897 84.4664 73.0887 85.3758 73.0887C92.2131 73.0887 97.7559 78.6375 97.7559 85.4822C97.7559 87.0153 97.476 88.4824 96.9676 89.8377C103.285 90.3992 108.24 95.7087 108.24 102.179C108.24 106.286 106.243 109.924 103.17 112.18C106.245 113.197 108.618 115.912 109.034 119.344C109.587 123.905 106.481 128.066 102.024 128.881C103.409 130.94 104.217 133.42 104.217 136.089C104.217 143.227 98.4368 149.014 91.3063 149.014C88.9869 149.014 86.8122 148.398 84.9311 147.326C84.0334 151.824 80.0683 155.214 75.3116 155.214C69.8934 155.214 65.501 150.817 65.501 145.393V72.6391C65.501 67.8679 69.3647 64 74.1308 64V64Z"
              fill="#dee5f9"
            />
            <path
              d="M75.9262 124.307C76.2071 123.65 76.9681 123.345 77.6253 123.626C79.6049 124.471 81.2383 125.976 82.2448 127.872C84.1893 127.413 86.2225 127.584 88.0945 128.384C88.752 128.665 89.0573 129.426 88.7764 130.083C88.4956 130.74 87.7343 131.046 87.0773 130.765C85.3993 130.048 83.5432 130.026 81.8508 130.705C80.1586 131.383 78.833 132.679 78.1174 134.355C77.9391 134.773 77.8023 135.207 77.7106 135.647C77.5676 136.334 76.9051 136.779 76.2192 136.658C76.206 136.655 76.1926 136.653 76.1792 136.65C75.4793 136.504 75.03 135.819 75.176 135.119C75.3023 134.512 75.491 133.913 75.7364 133.338C76.5654 131.396 77.9904 129.826 79.808 128.818C79.0712 127.57 77.9493 126.58 76.6082 126.006C75.9506 125.726 75.6454 124.965 75.9262 124.307Z"
              fill="#DEE5F9"
            />
            <path
              d="M82.5396 99.4033C82.5513 99.4275 82.5631 99.4517 82.5765 99.4753C83.2373 100.789 83.6243 102.257 83.6749 103.803C83.7429 105.876 83.1971 107.895 82.0968 109.643C81.7159 110.248 81.8976 111.047 82.5026 111.428C82.7168 111.563 82.9554 111.627 83.1912 111.627C83.6212 111.627 84.0418 111.413 84.2878 111.022C85.6647 108.835 86.3476 106.31 86.2625 103.718C86.2085 102.068 85.8463 100.489 85.2282 99.0412C87.2158 96.5661 88.2498 93.4023 88.0786 90.225C88.0401 89.511 87.4257 88.9644 86.7161 89.0018C86.002 89.0403 85.4545 89.6503 85.493 90.3641C85.6109 92.5527 85.013 94.7333 83.8299 96.5619C82.1631 94.252 79.7344 92.5029 76.8352 91.6868C76.1472 91.4931 75.432 91.894 75.2382 92.5822C75.0445 93.2704 75.4453 93.9853 76.1337 94.179C78.9796 94.9801 81.2577 96.9049 82.5396 99.4033V99.4033Z"
              fill="#DEE5F9"
            />
          </svg>

          <div className="palmistry-container__bold-description">
            {translate("/guidance-plan.heart", {
              percent: decisionMakingStatistics,
              zodiacSign: (
                <span style={{ color: "var(--strong-blue-text)" }}>
                  {translate(zodiacSign)}
                </span>
              ),
            })}
          </div>
        </>
      )}

      {steps.getStoredValue(Step.Decisions) === DecisionsChoice.Head && (
        <>
          <svg
            width="251"
            height="250"
            viewBox="0 0 251 250"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                id="gradient_svg"
                x1="48"
                y1="-4.15258e-06"
                x2="48"
                y2="86"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#FDDAA6" />
                <stop offset="1" stopColor="#DEB475" />
              </linearGradient>
            </defs>
            <rect width="250" height="250" transform="translate(0.5)" fill="" />
            <path
              d="M70.3196 21H69.6094C69.1832 21 68.8281 21.3073 68.8281 21.7169C68.473 26.5306 63.2173 31.4467 58.2102 31.8905C57.8196 31.9246 57.5 32.266 57.5 32.6415V33.3585C57.5 33.7681 57.8196 34.0754 58.2457 34.1095C63.2173 34.4509 68.2954 39.4011 68.8281 44.2148C68.8636 44.6586 69.2543 45 69.7514 45H70.2486C70.7457 45 71.1364 44.6586 71.1719 44.1807C71.598 38.7866 76.108 34.3485 81.7188 34.0754C82.1804 34.0413 82.5 33.6999 82.5 33.256V32.6415C82.5 32.1977 82.1449 31.8563 81.7188 31.8222C76.0725 31.5491 71.527 27.0768 71.1719 21.6145C71.1009 21.3073 70.7457 21 70.3196 21Z"
              fill="rgba(222, 229, 249, 0.7)"
            />
            <path
              d="M133.499 52.6187C129.705 52.6187 126.642 49.556 126.642 45.7619C126.642 45.3352 126.307 45 125.881 45C125.454 45 125.119 45.3352 125.119 45.7619C125.119 49.556 122.056 52.6187 118.262 52.6187C117.835 52.6187 117.5 52.9539 117.5 53.3805C117.5 53.8072 117.835 54.1424 118.262 54.1424C122.056 54.1424 125.119 57.2051 125.119 60.9992C125.119 61.4258 125.454 61.761 125.881 61.761C126.307 61.761 126.642 61.4258 126.642 60.9992C126.642 57.2051 129.705 54.1424 133.499 54.1424C133.926 54.1424 134.261 53.8072 134.261 53.3805C134.261 52.9539 133.926 52.6187 133.499 52.6187Z"
              fill="rgba(222, 229, 249, 0.3)"
            />
            <path
              d="M209.748 43.8802C202.338 43.8802 196.356 37.8983 196.356 30.488C196.356 29.6547 195.701 29 194.868 29C194.035 29 193.38 29.6547 193.38 30.488C193.38 37.8983 187.398 43.8802 179.988 43.8802C179.155 43.8802 178.5 44.5349 178.5 45.3682C178.5 46.2015 179.155 46.8562 179.988 46.8562C187.398 46.8562 193.38 52.838 193.38 60.2484C193.38 61.0817 194.035 61.7364 194.868 61.7364C195.701 61.7364 196.356 61.0817 196.356 60.2484C196.356 52.838 202.338 46.8562 209.748 46.8562C210.582 46.8562 211.236 46.2015 211.236 45.3682C211.236 44.5349 210.582 43.8802 209.748 43.8802Z"
              fill="rgba(222, 229, 249, 0.45)"
            />
            <rect
              width="230"
              height="6"
              rx="3"
              transform="matrix(-0.965926 0.258819 0.258819 0.965926 238.662 151)"
              fill="#DEE5F9"
            />
            <path
              d="M167.888 72C177.055 72.0008 185.509 76.9012 190 84.8187C194.491 76.9012 202.945 72.0008 212.112 72C226.133 72 237.5 84.8837 237.5 98.7736C237.5 133.66 190 158 190 158C190 158 142.5 133.66 142.5 98.7736C142.5 84.8837 153.867 72 167.888 72Z"
              fill="#dee5f9"
            />
            <circle cx="126.5" cy="201" r="16" fill="#DEE5F9" />
            <path
              d="M51.4669 99C46.7008 99 42.837 102.868 42.837 107.639C42.837 107.888 42.8499 108.133 42.8704 108.376C42.0168 108.19 41.1313 108.089 40.2219 108.089C33.3845 108.089 27.8418 113.638 27.8418 120.482C27.8418 122.015 28.1217 123.482 28.63 124.838C22.3122 125.399 17.3579 130.709 17.3579 137.179C17.3579 141.286 19.3545 144.924 22.4277 147.18C19.3527 148.197 16.9798 150.912 16.5637 154.344C16.0106 158.905 19.1168 163.066 23.5736 163.881C22.1889 165.94 21.3805 168.42 21.3805 171.089C21.3805 178.227 27.1609 184.014 34.2914 184.014C36.6108 184.014 38.7854 183.398 40.6666 182.326C41.5642 186.824 45.5294 190.214 50.2861 190.214C55.7042 190.214 60.0966 185.817 60.0966 180.393V107.639C60.0966 102.868 56.233 99 51.4669 99V99Z"
              fill="#BCC9ED"
            />
            <path
              d="M49.6714 159.307C49.3905 158.65 48.6295 158.345 47.9723 158.626C45.9927 159.471 44.3593 160.976 43.3529 162.872C41.4083 162.413 39.3752 162.584 37.5032 163.384C36.8456 163.665 36.5404 164.426 36.8212 165.083C37.1021 165.74 37.8633 166.046 38.5203 165.765C40.1984 165.048 42.0545 165.026 43.7469 165.705C45.439 166.383 46.7646 167.679 47.4802 169.355C47.6585 169.773 47.7953 170.207 47.887 170.647C48.03 171.334 48.6926 171.779 49.3784 171.658C49.3917 171.655 49.4051 171.653 49.4185 171.65C50.1184 171.504 50.5677 170.819 50.4216 170.119C50.2953 169.512 50.1066 168.913 49.8612 168.338C49.0322 166.396 47.6073 164.826 45.7896 163.818C46.5264 162.57 47.6484 161.58 48.9895 161.006C49.647 160.726 49.9523 159.965 49.6714 159.307Z"
              fill="#dee5f9"
            />
            <path
              d="M43.0581 134.403C43.0463 134.428 43.0346 134.452 43.0211 134.475C42.3604 135.789 41.9734 137.257 41.9228 138.803C41.8548 140.876 42.4006 142.895 43.5008 144.643C43.8818 145.248 43.7 146.047 43.095 146.428C42.8808 146.563 42.6423 146.627 42.4065 146.627C41.9765 146.627 41.5558 146.413 41.3099 146.022C39.9329 143.835 39.2501 141.31 39.3352 138.718C39.3892 137.068 39.7513 135.489 40.3695 134.041C38.3818 131.566 37.3479 128.402 37.5191 125.225C37.5576 124.511 38.1719 123.964 38.8815 124.002C39.5956 124.04 40.1432 124.65 40.1047 125.364C39.9868 127.553 40.5847 129.733 41.7678 131.562C43.4346 129.252 45.8632 127.503 48.7624 126.687C49.4505 126.493 50.1656 126.894 50.3595 127.582C50.5531 128.27 50.1523 128.985 49.4639 129.179C46.6181 129.98 44.3399 131.905 43.0581 134.403V134.403Z"
              fill="#dee5f9"
            />
            <path
              d="M70.1308 99C74.8968 99 78.7607 102.868 78.7607 107.639C78.7607 107.888 78.7478 108.133 78.7272 108.376C79.5808 108.19 80.4664 108.089 81.3758 108.089C88.2131 108.089 93.7559 113.638 93.7559 120.482C93.7559 122.015 93.476 123.482 92.9676 124.838C99.2854 125.399 104.24 130.709 104.24 137.179C104.24 141.286 102.243 144.924 99.17 147.18C102.245 148.197 104.618 150.912 105.034 154.344C105.587 158.905 102.481 163.066 98.024 163.881C99.4088 165.94 100.217 168.42 100.217 171.089C100.217 178.227 94.4368 184.014 87.3063 184.014C84.9869 184.014 82.8122 183.398 80.9311 182.326C80.0334 186.824 76.0683 190.214 71.3116 190.214C65.8934 190.214 61.501 185.817 61.501 180.393V107.639C61.501 102.868 65.3647 99 70.1308 99V99Z"
              fill="#BCC9ED"
            />
            <path
              d="M71.9262 159.307C72.2071 158.65 72.9681 158.345 73.6253 158.626C75.6049 159.471 77.2383 160.976 78.2448 162.872C80.1893 162.413 82.2225 162.584 84.0945 163.384C84.752 163.665 85.0573 164.426 84.7764 165.083C84.4956 165.74 83.7343 166.046 83.0773 165.765C81.3993 165.048 79.5432 165.026 77.8508 165.705C76.1586 166.383 74.833 167.679 74.1174 169.355C73.9391 169.773 73.8023 170.207 73.7106 170.647C73.5676 171.334 72.9051 171.779 72.2192 171.658C72.206 171.655 72.1926 171.653 72.1792 171.65C71.4793 171.504 71.03 170.819 71.176 170.119C71.3023 169.512 71.491 168.913 71.7364 168.338C72.5654 166.396 73.9904 164.826 75.808 163.818C75.0712 162.57 73.9493 161.58 72.6082 161.006C71.9506 160.726 71.6454 159.965 71.9262 159.307Z"
              fill="#dee5f9"
            />
            <path
              d="M78.5396 134.403C78.5513 134.428 78.5631 134.452 78.5765 134.475C79.2373 135.789 79.6243 137.257 79.6749 138.803C79.7429 140.876 79.1971 142.895 78.0968 144.643C77.7159 145.248 77.8976 146.047 78.5026 146.428C78.7168 146.563 78.9554 146.627 79.1912 146.627C79.6212 146.627 80.0418 146.413 80.2878 146.022C81.6647 143.835 82.3476 141.31 82.2625 138.718C82.2085 137.068 81.8463 135.489 81.2282 134.041C83.2158 131.566 84.2498 128.402 84.0786 125.225C84.0401 124.511 83.4257 123.964 82.7161 124.002C82.002 124.04 81.4545 124.65 81.493 125.364C81.6109 127.553 81.013 129.733 79.8299 131.562C78.1631 129.252 75.7344 127.503 72.8352 126.687C72.1472 126.493 71.432 126.894 71.2382 127.582C71.0445 128.27 71.4453 128.985 72.1337 129.179C74.9796 129.98 77.2577 131.905 78.5396 134.403V134.403Z"
              fill="#dee5f9"
            />
          </svg>

          <div className="palmistry-container__bold-description">
            {translate("/guidance-plan.head", {
              percent: decisionMakingStatistics,
              zodiacSign: (
                <span style={{ color: "var(--strong-blue-text)" }}>
                  {translate(zodiacSign)}
                </span>
              ),
            })}
          </div>
        </>
      )}

      {steps.getStoredValue(Step.Decisions) === DecisionsChoice.Both && (
        <>
          <svg
            width="251"
            height="250"
            viewBox="0 0 251 250"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <defs>
              <linearGradient
                id="gradient_svg"
                x1="48"
                y1="-4.15258e-06"
                x2="48"
                y2="86"
                gradientUnits="userSpaceOnUse"
              >
                <stop stopColor="#FDDAA6" />
                <stop offset="1" stopColor="#DEB475" />
              </linearGradient>
            </defs>
            <rect width="250" height="250" transform="translate(0.5)" fill="" />
            <path
              d="M70.3196 21H69.6094C69.1832 21 68.8281 21.3073 68.8281 21.7169C68.473 26.5306 63.2173 31.4467 58.2102 31.8905C57.8196 31.9246 57.5 32.266 57.5 32.6415V33.3585C57.5 33.7681 57.8196 34.0754 58.2457 34.1095C63.2173 34.4509 68.2954 39.4011 68.8281 44.2148C68.8636 44.6586 69.2543 45 69.7514 45H70.2486C70.7457 45 71.1364 44.6586 71.1719 44.1807C71.598 38.7866 76.108 34.3485 81.7188 34.0754C82.1804 34.0413 82.5 33.6999 82.5 33.256V32.6415C82.5 32.1977 82.1449 31.8563 81.7188 31.8222C76.0725 31.5491 71.527 27.0768 71.1719 21.6145C71.1009 21.3073 70.7457 21 70.3196 21Z"
              fill="rgba(222, 229, 249, 0.7)"
            />
            <path
              d="M133.499 52.6187C129.705 52.6187 126.642 49.556 126.642 45.7619C126.642 45.3352 126.307 45 125.881 45C125.454 45 125.119 45.3352 125.119 45.7619C125.119 49.556 122.056 52.6187 118.262 52.6187C117.835 52.6187 117.5 52.9539 117.5 53.3805C117.5 53.8072 117.835 54.1424 118.262 54.1424C122.056 54.1424 125.119 57.2051 125.119 60.9992C125.119 61.4258 125.454 61.761 125.881 61.761C126.307 61.761 126.642 61.4258 126.642 60.9992C126.642 57.2051 129.705 54.1424 133.499 54.1424C133.926 54.1424 134.261 53.8072 134.261 53.3805C134.261 52.9539 133.926 52.6187 133.499 52.6187Z"
              fill="rgba(222, 229, 249, 0.3)"
            />
            <path
              d="M209.748 43.8802C202.338 43.8802 196.356 37.8983 196.356 30.488C196.356 29.6547 195.701 29 194.868 29C194.035 29 193.38 29.6547 193.38 30.488C193.38 37.8983 187.398 43.8802 179.988 43.8802C179.155 43.8802 178.5 44.5349 178.5 45.3682C178.5 46.2015 179.155 46.8562 179.988 46.8562C187.398 46.8562 193.38 52.838 193.38 60.2484C193.38 61.0817 194.035 61.7364 194.868 61.7364C195.701 61.7364 196.356 61.0817 196.356 60.2484C196.356 52.838 202.338 46.8562 209.748 46.8562C210.582 46.8562 211.236 46.2015 211.236 45.3682C211.236 44.5349 210.582 43.8802 209.748 43.8802Z"
              fill="rgba(222, 229, 249, 0.45)"
            />
            <rect
              width="230"
              height="6"
              rx="3"
              transform="matrix(-1 -8.74228e-08 -8.74228e-08 1 243.357 180.662)"
              fill="#DEE5F9"
            />
            <circle cx="126.5" cy="201" r="16" fill="#DEE5F9" />
            <path
              d="M167.888 90C177.055 90.0008 185.509 94.9012 190 102.819C194.491 94.9012 202.945 90.0008 212.112 90C226.133 90 237.5 102.884 237.5 116.774C237.5 151.66 190 176 190 176C190 176 142.5 151.66 142.5 116.774C142.5 102.884 153.867 90 167.888 90Z"
              fill="#BCC9ED"
            />
            <path
              d="M50.4669 85C45.7008 85 41.837 88.8679 41.837 93.6391C41.837 93.8876 41.8499 94.1329 41.8704 94.3759C41.0168 94.1897 40.1313 94.0887 39.2219 94.0887C32.3845 94.0887 26.8418 99.6375 26.8418 106.482C26.8418 108.015 27.1217 109.482 27.63 110.838C21.3122 111.399 16.3579 116.709 16.3579 123.179C16.3579 127.286 18.3545 130.924 21.4277 133.18C18.3527 134.197 15.9798 136.912 15.5637 140.344C15.0106 144.905 18.1168 149.066 22.5736 149.881C21.1889 151.94 20.3805 154.42 20.3805 157.089C20.3805 164.227 26.1609 170.014 33.2914 170.014C35.6108 170.014 37.7854 169.398 39.6666 168.326C40.5642 172.824 44.5294 176.214 49.2861 176.214C54.7042 176.214 59.0966 171.817 59.0966 166.393V93.6391C59.0966 88.8679 55.233 85 50.4669 85Z"
              fill="#BCC9ED"
            />
            <path
              d="M48.6714 145.307C48.3905 144.65 47.6295 144.345 46.9723 144.626C44.9927 145.471 43.3593 146.976 42.3529 148.872C40.4083 148.413 38.3752 148.584 36.5032 149.384C35.8456 149.665 35.5404 150.426 35.8212 151.083C36.1021 151.74 36.8633 152.046 37.5203 151.765C39.1984 151.048 41.0545 151.026 42.7469 151.705C44.439 152.383 45.7646 153.679 46.4802 155.355C46.6585 155.773 46.7953 156.207 46.887 156.647C47.03 157.334 47.6926 157.779 48.3784 157.658C48.3917 157.655 48.4051 157.653 48.4185 157.65C49.1184 157.504 49.5677 156.819 49.4216 156.119C49.2953 155.512 49.1066 154.913 48.8612 154.338C48.0322 152.396 46.6073 150.826 44.7896 149.818C45.5264 148.57 46.6484 147.58 47.9895 147.006C48.647 146.726 48.9523 145.965 48.6714 145.307Z"
              fill="#DEE5F9"
            />
            <path
              d="M42.0581 120.403C42.0463 120.428 42.0346 120.452 42.0211 120.475C41.3604 121.789 40.9734 123.257 40.9228 124.803C40.8548 126.876 41.4006 128.895 42.5008 130.643C42.8818 131.248 42.7 132.047 42.095 132.428C41.8808 132.563 41.6423 132.627 41.4065 132.627C40.9765 132.627 40.5558 132.413 40.3099 132.022C38.9329 129.835 38.2501 127.31 38.3352 124.718C38.3892 123.068 38.7513 121.489 39.3695 120.041C37.3818 117.566 36.3479 114.402 36.5191 111.225C36.5576 110.511 37.1719 109.964 37.8815 110.002C38.5956 110.04 39.1432 110.65 39.1047 111.364C38.9868 113.553 39.5847 115.733 40.7678 117.562C42.4346 115.252 44.8632 113.503 47.7624 112.687C48.4505 112.493 49.1656 112.894 49.3595 113.582C49.5531 114.27 49.1523 114.985 48.4639 115.179C45.6181 115.98 43.3399 117.905 42.0581 120.403Z"
              fill="#DEE5F9"
            />
            <path
              d="M69.1308 85C73.8968 85 77.7607 88.8679 77.7607 93.6391C77.7607 93.8876 77.7478 94.1329 77.7272 94.3759C78.5808 94.1897 79.4664 94.0887 80.3758 94.0887C87.2131 94.0887 92.7559 99.6375 92.7559 106.482C92.7559 108.015 92.476 109.482 91.9676 110.838C98.2854 111.399 103.24 116.709 103.24 123.179C103.24 127.286 101.243 130.924 98.17 133.18C101.245 134.197 103.618 136.912 104.034 140.344C104.587 144.905 101.481 149.066 97.024 149.881C98.4088 151.94 99.2172 154.42 99.2172 157.089C99.2172 164.227 93.4368 170.014 86.3063 170.014C83.9869 170.014 81.8122 169.398 79.9311 168.326C79.0334 172.824 75.0683 176.214 70.3116 176.214C64.8934 176.214 60.501 171.817 60.501 166.393V93.6391C60.501 88.8679 64.3647 85 69.1308 85Z"
              fill="#BCC9ED"
            />
            <path
              d="M70.9262 145.307C71.2071 144.65 71.9681 144.345 72.6253 144.626C74.6049 145.471 76.2383 146.976 77.2448 148.872C79.1893 148.413 81.2225 148.584 83.0945 149.384C83.752 149.665 84.0573 150.426 83.7764 151.083C83.4956 151.74 82.7343 152.046 82.0773 151.765C80.3993 151.048 78.5432 151.026 76.8508 151.705C75.1586 152.383 73.833 153.679 73.1174 155.355C72.9391 155.773 72.8023 156.207 72.7106 156.647C72.5676 157.334 71.9051 157.779 71.2192 157.658C71.206 157.655 71.1926 157.653 71.1792 157.65C70.4793 157.504 70.03 156.819 70.176 156.119C70.3023 155.512 70.491 154.913 70.7364 154.338C71.5654 152.396 72.9904 150.826 74.808 149.818C74.0712 148.57 72.9493 147.58 71.6082 147.006C70.9506 146.726 70.6454 145.965 70.9262 145.307Z"
              fill="#DEE5F9"
            />
            <path
              d="M77.5396 120.403C77.5513 120.428 77.5631 120.452 77.5765 120.475C78.2373 121.789 78.6243 123.257 78.6749 124.803C78.7429 126.876 78.1971 128.895 77.0968 130.643C76.7159 131.248 76.8976 132.047 77.5026 132.428C77.7168 132.563 77.9554 132.627 78.1912 132.627C78.6212 132.627 79.0418 132.413 79.2878 132.022C80.6647 129.835 81.3476 127.31 81.2625 124.718C81.2085 123.068 80.8463 121.489 80.2282 120.041C82.2158 117.566 83.2498 114.402 83.0786 111.225C83.0401 110.511 82.4257 109.964 81.7161 110.002C81.002 110.04 80.4545 110.65 80.493 111.364C80.6109 113.553 80.013 115.733 78.8299 117.562C77.1631 115.252 74.7344 113.503 71.8352 112.687C71.1472 112.493 70.432 112.894 70.2382 113.582C70.0445 114.27 70.4453 114.985 71.1337 115.179C73.9796 115.98 76.2577 117.905 77.5396 120.403Z"
              fill="#DEE5F9"
            />
          </svg>

          <div className="palmistry-container__bold-description">
            {/* {translate("/guidance-plan.wonderful")} <br /> */}
            {translate("/guidance-plan.both", {
              percent: decisionMakingStatistics,
              zodiacSign: (
                <span style={{ color: "var(--strong-blue-text)" }}>
                  {translate(zodiacSign)}
                </span>
              ),
            })}
          </div>
        </>
      )}

      <div className="palmistry-container__button-wrapper_horizontal">
        {/* <Button type="button" onClick={onBack}>
          {translate("back")}
        </Button> */}

        <Button type="button" active onClick={onNext}>
          {translate("next")}
        </Button>
      </div>
    </>
  );
}