import { useTranslations } from "next-intl";
import Image from "next/image";
import starsImage from "/public/images/stars.avif";

export default function PageIntro() {
    const t = useTranslations("pageIntro");

    return (
        <article className="rounded-lg px-4 sm:px-6 md:px-8 border border-[#252629] w-full gradient-bg lg:bg-none lg:bg-[#171B1C]">
            <div className="w-full relative border-x border-[#353e3b] md:px-8 py-[7.5%] grid lg:grid-cols-2 gap-4 xl:gap-8 items-start">
                <section className="space-y-6 mt-12 lg:mt-0 pl-4 xl:pl-8 flex-2">
                    <h1 className='xl:min-w-[520px] text-4xl sm:text-[47px] xl:text-6xl 2xl:text-7xl lg:text-left leading-[50px] text-center font-["Euclid_Circular_A"] text-white'>
                        {t("heading")}{" "}
                        <span className="font-medium from-[#45EC82] from-[0.16%] via-[#7079F3] via-[47.81%] to-[#75CEFC] to-100% bg-gradient-to-r bg-clip-text text-transparent">
                            {t("highlightedText")}
                        </span>
                    </h1>
                    <p className="text-neutral-dark text-sm 2xl:text-base text-center lg:text-left mx-auto lg:mx-0 leading-normal">
                        {t("description.line1")}
                        <br />
                        {t("description.line2")}
                        <br />
                        {t("description.line3")}
                    </p>
                    <div className="btn-tf-primary-container w-fit mx-auto lg:mx-0">
                        <a
                            className="btn-tf btn-tf-primary"
                            href="https://www.revid.ai?aff=nVYypb"
                        >
                            {t("startForFree")}
                        </a>
                    </div>
                    <div className="space-y-5 flex flex-col items-center lg:items-start">
                        <div className="space-y-2 flex flex-col items-center lg:items-start">
                            <Image
                                alt="ratings"
                                loading="lazy"
                                width={88}
                                height={16}
                                decoding="async"
                                className="object-contain"
                                src={starsImage}
                            />
                            <article className="flex items-center flex-col w-full mt-20 space-y-2">
                                <div className="mt-0 flex flex-col justify-center items-center">
                                    <div className="flex gap-4 flex-col items-center md:flex-row md:items-end">
                                        <div className="text-info text-sm italic">
                                            {t("ratings")}
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </section>
                <section className="invisible lg:visible absolute lg:relative space-y-5 w-full flex flex-col justify-center">
                    <div className="flex justify-center">
                        <div className="flex w-auto h-[600px]">
                            <video
                                className="content-visibility-auto bg-white shadow-2xl rounded-[13px] border border-base-200"
                                playsInline
                                loop
                                muted
                                autoPlay
                                src="https://file.typeframes.com.cn/index/top.webm"
                                preload="auto"
                            ></video>
                        </div>
                    </div>
                    <p className="text-center text-sm text-neutral-dark">
                        {t("madeWithLove")}
                    </p>
                </section>
            </div>
        </article>
    );
}