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

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

  return (
    <section className={`${styles.page} page`}>
      <Title variant="h2" className={styles.title}>
        Save 65% off!
      </Title>
      <img src="/friends.webp" alt="Friends" style={{ minHeight: "180px" }} />
      <div className={styles["discount-point"]}>
        <img src="/fire.webp" alt="Fire" />
        <p className={styles["discount-point-description"]}>
          65% off on your personalized plan
        </p>
      </div>
      <div className={styles["discount-point"]}>
        <img src="/present.webp" alt="Present" />
        <p className={styles["discount-point-description"]}>7-day trial</p>
      </div>
      <p className={styles["discount-description"]}>
        <span>$9</span> instead of $19
      </p>
      <MainButton className={styles.button} onClick={handleNext}>
        Get secret discount!
      </MainButton>
    </section>
  );
}

export default AdditionalDiscount;
