import Title from "@/components/Title";
import styles from "./styles.module.css";
import MainButton from "@/components/MainButton";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";

function HyperPersonalizedAstrologyPage() {
  const navigate = useNavigate();

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

  return (
    <section className={`${styles.page} page`}>
      <Title variant="h2" className={styles.title}>
        What is{" "}
        <span className={styles.gradient}>hyper-personalized astrology,</span>{" "}
        anyway?
      </Title>
      <p className={styles.text}>
        Personalized astrology is based on the understanding that everyone has a
        unique astrological blueprint. The position of the stars in the sky on
        your date of birth, place of birth and time of birth are unique and only
        happen in one lifetime. You are more than just your zodiac sign!
      </p>
      <Title variant="h2" className={styles.title}>
        So how does it work?
      </Title>
      <p className={styles.text}>
        We analyze hundreds of data points to create your unique astrological
        blueprint. This is combined with AI to tailor-make your astrological
        insights, based on your answers. We’re going to change your relationship
        with astrology.
      </p>
      <MainButton className={styles.button} onClick={handleNext}>
        Next
      </MainButton>
    </section>
  );
}

export default HyperPersonalizedAstrologyPage;