import MovingLogos from "./MovingLogos/page";
import { motion } from "framer-motion";
import { fadeIn, textVariant } from "src/utils/motion";
import { useLocale, useTranslations } from "next-intl";
import { Link } from "src/i18n/routing";

const Hero = () => {
  const t = useTranslations("page");

  const locale = useLocale();
  console.log("ssssst", locale);

  return (
    <section className="relative w-full h-screen mx-auto">
      <div className="flex justify-center pt-[200px] lg:pt-[300px]  lg:ml-0">
        <div className="ml-1 text-center">
          <div className="flex items-start justify-center">
            <small className="text-[20px] md:text-[60px] lg:text-[80px] mx-2 text-primary-300 xs:hidden lg:block">
              "
            </small>
            <motion.div variants={fadeIn("", "", 0.1, 1)}>
              <h1
                className="font-black  text-white text-[40px] xs:text-[30px] sm:text-[140px] lg:text-[60px] leading-tight mb-0 space-x-6 text-center"
                style={{ wordSpacing: "10px" }}
              >
                {t("title")}
              </h1>
            </motion.div>
            <small className="text-[20px] md:text-[60px] lg:text-[80px] mx-2 text-primary-300  xs:hidden lg:block">
              "
            </small>
          </div>

          <motion.div variants={fadeIn("", "", 0.1, 1)}>
            <p className="text-gray-300 font-medium text-[14px] xs:text-[16px] sm:text-[22px] lg:text-[24px] leading-[20px] xs:leading-[24px] text-white-100 text-center lg:w-10/12 xs:w-full xs:px-4  mx-auto mt-5">
              {t("desc")}
            </p>
          </motion.div>

          <Link href="/app/login">
            <div className="flex justify-center mt-10">
              <button className="px-8 py-3 text-sm font-bold text-black rounded-full btn btn-primary sm:px-16 lg:px-20 sm:py-5 sm:text-lg">
                {t("button")}{" "}
              </button>
            </div>
          </Link>
        </div>
      </div>

      <div className="mt-[50px] lg:mt-[200px]">
        <p className="opacity-60 text-white font-light text-[14px] xs:text-[16px] sm:text-[20px] lg:text-[22px] leading-[20px] lg:leading-[24px] text-center w-10/12 sm:w-8/12 mx-auto">
          {t("brand")}{" "}
        </p>
        <div className="relative w-10/12 p-5 mx-auto overflow-hidden opacity-40 fade-mask">
          <MovingLogos />
        </div>
      </div>
    </section>
  );
};

export default Hero;