import React, {FC} from "react";
import {__} from "@/Ulititlies.ts";
import {GlowEffect} from "../components/motion-primitives/glow-effect.tsx";

export type WelcomeHomeProps = {
}

const steps = [
    {
        imageURL: `${window.CouponsPlusWelcome.urls.storage}/images/filters.png`,
        title: __('Select your product filters'),
        description: {
            main: __('Select from a wide variety of product filters. You can combine several filters in a group to target more specific products.'),
            secondary: __('These filtered items will be passed to your offers so you can apply an offer to them or use them as a condition for applying an offer.')
        }
    },
    {
        imageURL: `${window.CouponsPlusWelcome.urls.storage}/images/offers.png`,
        title: __('Add your offers'),
        description: {
            main: __("Add offers that use the filtered items from the previous step. You can apply a direct offer to these items (for example, a percentage discount) or use them as a condition for another promotion, such as a 'Buy X, Get Y FREE' offer or a shipping discount when buying specific items."),
        }
    },

]


export const WelcomeHome: FC<WelcomeHomeProps> = ({}) => {
    return <>
        <div className="flex flex-col items-center gap-4">
            <GlowEffect colors={['#FF5733', '#33FF57', '#3357FF', '#F1C40F']}
                        mode="flowHorizontal"
                        blur="medium"
                        duration={3}
                        scale={1}>
                <svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg"
                     className="min-w-14 min-h-14 max-w-14 max-h-14 relative z-100">
                    <rect width="46" height="46" rx="16" fill="url(#paint0_linear_303_18)"/>
                    <rect width="46" height="46" rx="16" fill="#1F2327"/>
                    <path opacity="0.8"
                          d="M31.1506 33.6324L36.6759 20.7545L36.6679 20.7424L25.8337 20.7252L24.5827 23.6477L31.1506 33.6324Z"
                          fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8"
                          d="M30.096 10.7516L16.0869 10.7321L22.6548 20.7167L25.8337 20.7252L30.108 10.7698L30.096 10.7516Z"
                          fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8"
                          d="M16.0755 34.0786L30.0885 34.1043L23.5207 24.1196L20.3356 24.1152L16.0675 34.0665L16.0755 34.0786Z"
                          fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8"
                          d="M15.0249 11.2039L9.49974 24.0818L9.50775 24.094L20.3357 24.1152L21.5928 21.1887L15.0249 11.2039Z"
                          fill="white" fill-opacity="0.82"/>
                    <path opacity="0.8" d="M36.6678 20.7423L30.108 10.7698L25.8337 20.7251L36.6678 20.7423Z"
                          fill="white"/>
                    <path opacity="0.8" d="M9.50752 24.094L16.0674 34.0666L20.3357 24.1151L9.50752 24.094Z"
                          fill="white"/>
                    <defs>
                        <linearGradient id="paint0_linear_303_18" x1="23" y1="0" x2="23" y2="46"
                                        gradientUnits="userSpaceOnUse">
                            <stop stop-color="#545454"/>
                            <stop offset="1" stop-color="#2A2A2A"/>
                        </linearGradient>
                    </defs>
                </svg>
            </GlowEffect>
            <h1 className="text-6x text-gray-900 flex flex-col gap-0">
                <span className="leading-5 opacity-80">{__('Welcome to')}</span>
                <span className={"text-12x font-bold"}>{__('The Next-Generation')}</span>
                <span className="text-12x font-bold leading-7">{__('Offers Engine')}</span>
            </h1>
            <div className="relative flex flex-col items-center gap-2">
                <a
                    className="relative px-5 h-9 flex items-center gap-2 text-base bg-blue-normal text-blue-10 rounded-full hover:cursor-pointer hover:scale-[1.01] hover:bg-blue-90 active:scale-[.98] transition-all duration-200 m-0"
                    href={window.CouponsPlusWelcome.urls.coupons}>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                         className="min-w-5 min-h-5 max-w-5 max-h-5">
                        <path fillRule="evenodd"
                              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z"
                              clipRule="evenodd"/>
                    </svg>
                    <span>Create coupon</span>
                </a>
                <p className="text-smaller-1 leading-4 text-gray-600 max-w-80 m-0">{__('Coupons+ coupons are created on the same screen as the default WooCommerce coupons')}</p>
            </div>
        </div>
        <div>
            <h1 className="text-7x">{__('How does it work?')}</h1>
            <div className="space-y-14">{steps.map(({imageURL, title, description: {main, secondary}}, index) => <div
                className="flex flex-col items-center gap-4">
                <div
                    className="h-8 w-8 flex items-center justify-center text-3x bg-gray-850 rounded-full text-gray-100">{index + 1}
                </div>
                <div className="relative">
                    <img src={imageURL}
                         alt={__('filters image')} className="w-60 rounded-1 border-[2px] border-gray-200"/>
                    <div className="absolute top-0 -right-12 translate-x-full text-left">
                        <h1 className="text-4x font-medium m-0">{title}</h1>
                        <p className="text-base leading-[22px] text-gray-850">{main}</p>
                        {secondary && <p className="text-base leading-[22px] text-gray-450">{secondary}</p>}
                    </div>
                </div>
            </div>)}</div>
        </div>
    </>
}