import Title from "@/components/Title";
import styles from "./styles.module.css";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import Header from "../../components/Header";
import QuestionnaireGreenButton from "../../ui/GreenButton";
import { ELottieKeys, useLottie } from "@/hooks/lottie/useLottie";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function HyperPersonalizedAstrologyPage() {
  const navigate = useNavigate();
  const { translate } = useTranslations(ELocalesPlacement.V1);
  useLottie({
    preloadKey: ELottieKeys.lightBulb,
  });
  useLottie({
    preloadKey: ELottieKeys.hourglass,
  });

  const handleNext = () => {
    navigate(`${routes.client.questionnaireV1()}/profile/birthdate`);
  };

  return (
    <section className={`${styles.page} page`}>
      <div className={styles["background_wrap"]} />
      <Header
        isBackButtonVisible={false}
        classNameTitle={styles["header-title"]}
      />
      <Title
        variant="h2"
        className={styles.title}
        style={{ marginTop: "82px" }}
      >
        {translate("/hyper-personalized-astrology.title1", {
          gradient: (
            <span className={styles.gradient}>
              {translate("/hyper-personalized-astrology.gradient")}
            </span>
          ),
        })}
      </Title>
      <p className={styles.text} style={{ marginTop: "46px" }}>
        {translate("/hyper-personalized-astrology.description1")}
      </p>
      <Title
        variant="h2"
        className={styles.title}
        style={{ marginTop: "36px" }}
      >
        {translate("/hyper-personalized-astrology.title2")}
      </Title>
      <p className={styles.text} style={{ marginTop: "8px" }}>
        {translate("/hyper-personalized-astrology.description2")}
      </p>
      <QuestionnaireGreenButton className={styles.button} onClick={handleNext}>
        {translate("next")}
      </QuestionnaireGreenButton>
    </section>
  );
}

export default HyperPersonalizedAstrologyPage;
