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 EmailConfirmPage() {
  const navigate = useNavigate();

  const handleNext = () => {
    navigate(routes.client.onboarding());
  };

  return (
    <section className={`${styles.page} page`}>
      <div className={styles["top-section"]}>
        <img
          className={styles["eye-image"]}
          src="/night_eye.webp"
          alt="Night eye"
        />
        <Title className={styles.title}>
          Get access to your{" "}
          <span className={styles.purple}>exclusive reading</span>, special
          offers, updates, astrology & relationship tips, recipes, and free
          gifts.
        </Title>
        <p className={styles.description}>
          Get it all! Confirm receiving emails so you don't miss anything
        </p>
      </div>
      <div className={styles["bottom-section"]}>
        <MainButton className={styles.button} onClick={handleNext}>
          Confirm
        </MainButton>
        <p className={styles["text-link"]} onClick={handleNext}>
          I know everything about astrology & relationship
        </p>
      </div>
    </section>
  );
}

export default EmailConfirmPage;
