import Image from "next/image";
import { getTranslations } from "next-intl/server";
import clsx from "clsx";

import {
  AdviceFromAstrologer,
  CustomerCounter,
  FindingPartner,
  GivePersonalizedPlan,
  GuaranteedSecurityPayments,
  InsightsRelationship,
  LandingButtonWrapper,
  MoneyBackGuarantee,
  Payments,
  PlanIncludes,
  PriceComparison,
  Reviews,
  StatisticsBanner,
  UnderstandingYourself,
} from "@/components/domains/email-marketing/compatibility/v1";
import { Typography } from "@/components/ui";
import { loadFunnelPaymentById } from "@/entities/session/funnel/loaders";
import { IFunnelPaymentPlacement } from "@/entities/session/funnel/types";
import { emailMarketingCompV1Images } from "@/shared/constants/images";
import { translatePathEmailMarketingCompatibilityV1 } from "@/shared/constants/translate";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency, ELocalesPlacement } from "@/types";

import styles from "./page.module.scss";

const payload = {
  funnel: ELocalesPlacement.EmailMarketingCompatibilityV2,
};

export default async function EmailMarketingCompatibilityV1Landing() {
  const t = await getTranslations(
    translatePathEmailMarketingCompatibilityV1("Landing")
  );

  const payment = (await loadFunnelPaymentById(
    payload,
    "main"
  )) as IFunnelPaymentPlacement | null;

  const variant = payment?.variants?.[0];
  const currency = payment?.currency || Currency.USD;

  const features = [
    {
      text: t("plan-includes-unlimited-horoscopes"),
    },
    {
      text: t("plan-includes-astrology-lessons"),
    },
    {
      text: t("plan-includes-lifestyle-calendars"),
    },
    {
      text: t("plan-includes-compatibility-check"),
    },
  ];

  return (
    <div className={styles.container}>
      <svg
        className={clsx(styles.backgroundElement, styles.backgroundElement1)}
        width="169"
        height="169"
        viewBox="0 0 169 169"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="84.5" cy="84.5" r="84.5" fill="#5956E9" />
      </svg>
      <Image
        className={clsx(styles.backgroundElement, styles.backgroundElement2)}
        src={emailMarketingCompV1Images("gift-big.png")}
        alt="Gift"
        width={37}
        height={43}
      />

      <Typography
        as="h1"
        align="left"
        className={clsx(styles.title, styles.titleSpecialOffer)}
      >
        <>
          <Image
            className={clsx(
              styles.backgroundElement,
              styles.backgroundElement3
            )}
            src={emailMarketingCompV1Images("gift-small.png")}
            alt="Gift"
            width={13}
            height={14}
          />
          {t("title")}
        </>
      </Typography>

      <Typography
        as="p"
        align="left"
        className={clsx(styles.description, styles.descriptionSpecialOffer)}
      >
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement4)}
          width="18"
          height="18"
          viewBox="0 0 18 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="9" cy="9" r="9" fill="#FFDC60" />
        </svg>
        {t("description")}
      </Typography>

      <Typography
        className={clsx(styles.title, styles.titleHey)}
        as="h1"
        align="left"
      >
        {t("title-hey")}
      </Typography>
      <Typography
        as="p"
        align="left"
        className={clsx(styles.description, styles.descriptionHey)}
      >
        {t("description-hey")}
      </Typography>

      <GivePersonalizedPlan />

      <Typography
        className={clsx(styles.title, styles.titleHighlights)}
        align="left"
        as="h1"
      >
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement5)}
          width="31"
          height="31"
          viewBox="0 0 31 31"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="15.5" cy="15.5" r="15.5" fill="#DEBA00" />
        </svg>
        {t("title-highlights")}
      </Typography>

      <div className={styles["relative-container"]}>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement6)}
          width="169"
          height="169"
          viewBox="0 0 169 169"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="84.5" cy="84.5" r="84.5" fill="#5956e961" />
        </svg>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement7)}
          width="183"
          height="352"
          viewBox="0 0 183 352"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_b_20_191)">
            <path
              d="M183 272.471C183 316.393 145.105 352 98.3585 352C51.6123 352 13.717 316.393 13.717 272.471C13.717 228.548 -23.0125 0 23.7337 0C70.4799 0 183 228.548 183 272.471Z"
              fill="#2656B0"
              fillOpacity="0.4"
            />
          </g>
          <defs>
            <filter
              id="filter0_b_20_191"
              x="-22.1"
              y="-22.1"
              width="227.2"
              height="396.2"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feGaussianBlur in="BackgroundImageFix" stdDeviation="11.05" />
              <feComposite
                in2="SourceAlpha"
                operator="in"
                result="effect1_backgroundBlur_20_191"
              />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="effect1_backgroundBlur_20_191"
                result="shape"
              />
            </filter>
          </defs>
        </svg>
        <AdviceFromAstrologer />
      </div>

      <FindingPartner />

      <InsightsRelationship />

      <div className={styles["relative-container"]}>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement8)}
          width="132"
          height="261"
          viewBox="0 0 132 261"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_f_13_1433)">
            <circle cx="1.5" cy="130.5" r="84.5" fill="#FFDC60" />
          </g>
          <defs>
            <filter
              id="filter0_f_13_1433"
              x="-128.7"
              y="0.299999"
              width="260.4"
              height="260.4"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="22.85"
                result="effect1_foregroundBlur_13_1433"
              />
            </filter>
          </defs>
        </svg>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement9)}
          width="21"
          height="21"
          viewBox="0 0 21 21"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="10.5" cy="10.5" r="10.5" fill="#993CFE" />
        </svg>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement10)}
          width="20"
          height="20"
          viewBox="0 0 20 20"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="10" cy="10" r="10" fill="#FFDC60" />
        </svg>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement11)}
          width="35"
          height="35"
          viewBox="0 0 35 35"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <circle cx="17.5" cy="17.5" r="17.5" fill="#5956E9" />
        </svg>

        <UnderstandingYourself />
      </div>

      <PriceComparison
        oldPrice={t("old-price", {
          oldPrice: getFormattedPrice(1367, currency),
        })}
        newPrice={getFormattedPrice(variant?.trialPrice || 0, currency)}
      />

      <PlanIncludes title={t("plan-includes-title")} features={features} />

      <Reviews />

      <CustomerCounter count={267583} />

      <StatisticsBanner count={2000} />

      <div className={styles["relative-container"]}>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement12)}
          width="261"
          height="261"
          viewBox="0 0 261 261"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_f_20_555)">
            <circle cx="130.5" cy="130.5" r="84.5" fill="#FFDC60" />
          </g>
          <defs>
            <filter
              id="filter0_f_20_555"
              x="0.299999"
              y="0.299999"
              width="260.4"
              height="260.4"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="22.85"
                result="effect1_foregroundBlur_20_555"
              />
            </filter>
          </defs>
        </svg>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement13)}
          width="216"
          height="216"
          viewBox="0 0 216 216"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_f_20_557)">
            <circle cx="108" cy="108" r="62" fill="#ADDBFC" />
          </g>
          <defs>
            <filter
              id="filter0_f_20_557"
              x="0.299999"
              y="0.299999"
              width="215.4"
              height="215.4"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="22.85"
                result="effect1_foregroundBlur_20_557"
              />
            </filter>
          </defs>
        </svg>
        <svg
          className={clsx(styles.backgroundElement, styles.backgroundElement14)}
          width="160"
          height="160"
          viewBox="0 0 160 160"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g filter="url(#filter0_f_20_559)">
            <circle cx="80" cy="80" r="34" fill="#FCADCE" />
          </g>
          <defs>
            <filter
              id="filter0_f_20_559"
              x="0.299999"
              y="0.299999"
              width="159.4"
              height="159.4"
              filterUnits="userSpaceOnUse"
              colorInterpolationFilters="sRGB"
            >
              <feFlood floodOpacity="0" result="BackgroundImageFix" />
              <feBlend
                mode="normal"
                in="SourceGraphic"
                in2="BackgroundImageFix"
                result="shape"
              />
              <feGaussianBlur
                stdDeviation="22.85"
                result="effect1_foregroundBlur_20_559"
              />
            </filter>
          </defs>
        </svg>

        <MoneyBackGuarantee />
      </div>

      <GuaranteedSecurityPayments />

      <Payments />

      <LandingButtonWrapper />
    </div>
  );
}
