import { useTranslations } from "next-intl";

export default function PageExpect() {
    const t = useTranslations("pageExpect");
    return (
        <div className="content-visibility-auto text-neutral-dark rounded-lg px-4 sm:px-6 md:px-8 border border-[#252629] w-full gradient-bg mt-24">
            <div className="border-x border-[#353e3b]">
                <div className="space-y-12 overflow-hidden border-x border-b rounded-b-xl border-[#353e3b] py-12 lg:py-24">
                    <div className="space-y-4">
                        <div className="mx-auto text-green-200 border border-[#c8eed6]/25 shadow-lg shadow-[#4add80]/10 w-fit font-medium text-sm rounded-full bg-gradient-to-b from-[#737b88]/20 to-[#191b1e]/20 p-[1.5px]">
                            <div className="bg-[#15171a]/50 flex items-center space-x-1 py-1 px-2 rounded-full">
                                {/* <IconWhatToExpect
                                width={17}
                                height={16}
                            /> */}
                                <span>{t("whatToExpect")}</span>
                            </div>
                        </div>
                        <h2 className='text-white font-["Euclid_Circular_A"] text-3xl lg:text-4xl xl:text-5xl text-center w-11/12 max-w-3xl text-pretty mx-auto'>
                            {t("heading")}
                        </h2>
                        <p className="text-center w-[90%] max-w-xl mx-auto text-balance">
                            {t("description")}
                        </p>
                    </div>
                    <div className="flex items-center relative">
                        <div className="bg-white outline w-1/2 md:max-w-[300px] absolute hidden sm:block sm:-left-1/4 md:right-1/4 mx-auto outline-[6px] outline-[#636363]/25 rounded-xl object-cover">
                            <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/create-tiktok-video/en/demo_image.webm"
                                preload="auto"
                            ></video>
                        </div>
                        <div className="bg-white outline w-5/6 md:w-3/4 md:max-w-[450px] relative z-10 mx-auto outline-[6px] outline-[#636363]/25 rounded-xl object-cover">
                            <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/music-to-video/cn/demo_image.webm"
                                preload="auto"
                            ></video>
                        </div>
                        <div className="bg-white outline w-1/2 md:max-w-[300px] absolute hidden sm:block sm:-right-1/4 md:left-1/4 -z-0 mx-auto outline-[6px] outline-[#636363]/25 rounded-xl object-cover">
                            <video
                                className="content-visibility-auto bg-white shadow-2xl rounded-[13px] border border-base-200"
                                playsInline
                                loop
                                muted
                                autoPlay
                                src="https://cdn.tfrv.xyz/renders/gjcIDd3JXNbmRF7DcHp7/HH0T7EVxK75TtVr4cYiM-1721573984672.mp4"
                                preload="auto"
                            ></video>
                        </div>
                    </div>
                </div>
                <div className="diagonal-pattern border-[#353e3b]">
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 border border-[#353e3b] rounded-xl w-[90%] lg:w-[80%] mx-auto divide-y md:divide-x lg:divide-y-0 divide-[#353e3b]">
                        <div className="bg-[#1f2425] px-5 py-7 rounded-t-xl md:rounded-l-xl md:rounded-bl-none lg:rounded-bl-xl md:rounded-tr-none">
                            <div className="relative w-full ">
                                {/* <Image alt="easy to use" loading="lazy" width={500} height={300} decoding="async" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/easy-to-use.png 1x, /images/easy-to-use.png 2x" src="/images/easy-to-use.png" /> */}
                            </div>
                            <div className="space-y-3">
                                <h5 className="text-white font-medium">
                                    {t("easyToUse.title")}
                                </h5>
                                <p className="text-sm">
                                    {t("easyToUse.description")}
                                </p>
                            </div>
                        </div>
                        <div className="bg-[#1f2425] px-5 py-7 rounded-none md:rounded-tr-xl lg:rounded-tr-none">
                            <div className="relative w-full ">
                                {/* <Image alt="customisable templates" loading="lazy" width={500} height={300} decoding="async" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/customisable-templates.png 1x, /images/customisable-templates.png 2x" src="/images/customisable-templates.png" /> */}
                            </div>
                            <div className="space-y-3">
                                <h5 className="text-white font-medium">
                                    {t("customisableTemplates.title")}
                                </h5>
                                <p className="text-sm">
                                    {t("customisableTemplates.description")}
                                </p>
                            </div>
                        </div>
                        <div className="bg-[#1f2425] px-5 py-7 lg:rounded-r-xl md:rounded-tr-none rounded-b-xl lg:rounded-bl-none md:col-span-2 lg:col-span-1 md:grid md:grid-cols-2 md:place-items-center lg:block">
                            <div className="relative w-full ">
                                {/* <Image alt="high quality exports" loading="lazy" width={500} height={300} decoding="async" className="mx-auto aspect-auto rounded-t-xl object-cover object-center" style={{ color: 'transparent', width: '100%', height: 'auto' }} srcSet="/images/high-quality-exports.png 1x, /images/high-quality-exports.png 2x" src="/images/high-quality-exports.png" /> */}
                            </div>
                            <div className="space-y-3 md:pl-6 lg:pl-0">
                                <h5 className="text-white font-medium">
                                    {t("highQualityExports.title")}
                                </h5>
                                <p className="text-sm">
                                    {t("highQualityExports.description")}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="border-x border-t rounded-t-xl border-[#353e3b] mx-auto flex flex-col items-center space-y-5 py-12 lg:py-24">
                    {/* <Image alt="typeframes.ai logo" loading="lazy" width={154} height={30} decoding="async" srcSet="/images/typeframes_logo_rec_light.png 1x, /images/typeframes_logo_rec_light.png 2x" src="/images/typeframes_logo_rec_light.png" /> */}
                    <p className="text-neutral-dark max-w-lg w-[95%] mx-auto text-center text-pretty">
                        {t("aiPowered")}
                    </p>
                    <div className="btn-tf-primary-container mx-auto lg:mx-0">
                        <a className="btn-tf btn-tf-primary" href="/create">
                            {t("createVideosNow")}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    );
}