import Title from "@/components/Title";
import SpecialOfferBanner from "./components/SpecialOfferBanner";
import styles from "./styles.module.css";
import ComparePrices from "./components/ComparePrices";
import PointsList from "../../TrialPayment/components/PointsList";
import { marketingLandingPointsList } from "@/data/pointsLists";
import Reviews from "../../TrialPayment/components/Reviews";
import { marketingLandingReviews } from "@/data/reviews";
import LastWeek from "./components/LastWeek";
import MoneyBack from "./components/MoneyBack";
import GuardPayments from "../../TrialPayment/components/GuardPayments";
import MainButton from "@/components/MainButton";
import { useSelector } from "react-redux";
import { selectors } from "@/store";
import { getZodiacSignByDate } from "@/services/zodiac-sign";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";

function MarketingLanding() {
  const birthdate = useSelector(selectors.selectBirthdate);
  const zodiacSign = getZodiacSignByDate(birthdate);
  const navigate = useNavigate();
  const { paywall, products, getText } = usePaywall({
    placementKey: EPlacementKeys["aura.placement.email.marketing"],
  });

  const handleNext = () => {
    navigate(routes.client.email("marketing-trial-payment"));
  };

  return (
    <section className={`${styles.page} page`}>
      <SpecialOfferBanner title={paywall?.name || ""} />
      <div className={styles.wrapper}>
        <Title variant="h2" className={`${styles.title} ${styles["hi-title"]}`}>
          Hey, {zodiacSign} Sun 👋
        </Title>
        <p className={styles.subtitle}>
          Your wellness and happiness are key for us!
        </p>
        <img
          className={styles.image}
          style={{ marginTop: 0, minHeight: "282px" }}
          src="/aboutPlan.webp"
          alt="About plan"
        />
        <Title className={styles.title}>Highlights of your plan:</Title>
        <img
          className={styles.image}
          src="/messanging.webp"
          alt="Messanging"
          style={{ minHeight: "214px" }}
        />
        <img
          className={styles.image}
          src="/horoscopePhone.webp"
          alt="Horoscope phone"
          style={{ minHeight: "315px" }}
        />
        <img
          className={styles.image}
          src="/guide.webp"
          alt="Guide"
          style={{ minHeight: "323px" }}
        />
        <img
          className={styles.image}
          src="/understanding.webp"
          alt="Understanding"
          style={{ minHeight: "323px" }}
        />
        <ComparePrices
          oldPrice={getText("text.old.price", {}) as string}
          newPrice={`${((products[0]?.trialPrice || 0) / 100).toFixed(2)}`}
        />
        <PointsList
          points={marketingLandingPointsList}
          title="Your plan also includes:"
          titleClassName={`${styles.title} ${styles["points-title"]}`}
          containerClassName={styles["points-container"]}
        />
        <Title className={styles.title}>Customer reviews</Title>
        <Reviews reviews={marketingLandingReviews} />
        <Title
          variant="h2"
          className={`${styles.title} ${styles["customers-counter"]}`}
        >
          Over <span style={{ color: "#6a3aa2" }}>247 254</span> happy customers
        </Title>
        <LastWeek />
        <MoneyBack />
        <GuardPayments />
        <img
          className={styles.payments}
          src="/payments.svg"
          alt="Payments"
          style={{ minHeight: "140px" }}
        />
        <footer className={styles.footer}>
          <MainButton className={styles.button} onClick={handleNext}>
            Continue
          </MainButton>
        </footer>
      </div>
    </section>
  );
}

export default MarketingLanding;