import { combineStyles } from "@/services/styles";
import styles from "./styles.module.scss";
import Title from "@/components/Title";
import GivePersonalizedPlan from "../../components/GivePersonalizedPlan";
import AdviceFromAstrologer from "../../components/AdviceFromAstrologer";
import FindingPartner from "../../components/FindingPartner";
import InsightsRelationship from "../../components/InsightsRelationship";
import UnderstandingYourself from "../../components/UnderstandingYourself";
import PriceComparison from "../../components/PriceComparison";
import PlanIncludes from "../../components/PlanIncludes";
import Reviews from "../../components/Reviews";
import CustomerCounter from "../../components/CustomerCounter";
import StatisticsBanner from "../../components/StatisticsBanner";
import MoneyBackGuarantee from "../../components/MoneyBackGuarantee";
import GuaranteedSecurityPayments from "../../components/GuaranteedSecurityPayments";
import Payments from "../../components/Payments";
import Button from "../../components/Button";
import { images } from "../../data";
import { useNavigate } from "react-router-dom";
import routes from "@/routes";
import { usePaywall } from "@/hooks/paywall/usePaywall";
import { EPlacementKeys } from "@/api/resources/Paywall";
import BlurComponent from "@/components/BlurComponent";

const features = [
    {
        text: "Unlimited daily / weekly / monthly / yearly horoscopes"
    },
    {
        text: "Astrology lessons and articles inside the app"
    },
    {
        text: "Beauty / health / travel and more calendars"
    },
    {
        text: "Compatibility check with zodiac signs inside the app"
    }
];

function MarketingLanding() {
    const navigate = useNavigate();
    const { products, getText } = usePaywall({
        placementKey: EPlacementKeys["aura.placement.email.marketing"],
    });

    const handleContinue = () => {
        navigate(routes.client.emailMarketingV1SpecialOffer());
    }

    return (
        <div className={styles.container}>
            {/* Background elements */}
            <svg className={combineStyles(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>
            <img className={combineStyles(styles.backgroundElement, styles.backgroundElement2)} src={images("gift-big.png")} alt="Gift" />

            <Title className={combineStyles(styles.title, styles.titleSpecialOffer)} variant="h1">
                <>
                    <img className={combineStyles(styles.backgroundElement, styles.backgroundElement3)} src={images("gift-small.png")} alt="Gift" />
                    Special Offer!
                </>
            </Title>
            <p className={combineStyles(styles.description, styles.descriptionSpecialOffer)}>
                <svg className={combineStyles(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>
                Everything for free. Trial include!
            </p>
            <Title className={combineStyles(styles.title, styles.titleHey)} variant="h1">
                Hey, Sun <span>👋</span>
            </Title>
            <p className={combineStyles(styles.description, styles.descriptionHey)}>Your wellness and happiness are key for us!</p>
            <GivePersonalizedPlan />
            <Title className={combineStyles(styles.title, styles.titleHighlights)} variant="h1">
                <svg className={combineStyles(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>
                Highlights  of your plan:
            </Title>
            <div className={styles["relative-container"]}>
                <svg className={combineStyles(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={combineStyles(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={combineStyles(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={combineStyles(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={combineStyles(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={combineStyles(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={getText("text.old.price", {}) as string} newPrice={`${((products[0]?.trialPrice || 0) / 100).toFixed(2)}`} />
            <PlanIncludes title="Your plan also includes:" features={features} />
            <Reviews />
            <CustomerCounter count={267583} />
            <StatisticsBanner count={2000} />
            <div className={styles["relative-container"]}>
                <svg className={combineStyles(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={combineStyles(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={combineStyles(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 />
            <div className={styles.buttonContainer}>
                <BlurComponent isActiveBlur={true}>
                    <Button className={styles.buttonContinue} onClick={handleContinue}>
                        Continue
                    </Button>
                </BlurComponent>
            </div>
        </div>
    )
}

export default MarketingLanding