"use client";

import Image from "next/image";
import { motion } from "framer-motion";

import cloud1 from "../../public/images/cloud1.png";
import cloud2 from "../../public/images/cloud2.png";
import cloud3 from "../../public/images/cloud3.png";
import core from "../../public/images/core.png";
import { useEffect, useState } from "react";
import PersianNumber from "../../plugins/PersianNumber";
import UnderDevelopeTimer from "../../components/UnderDevelopeTimer";
import { version } from "../../package.json";
import Link from "next/link";

export default function Home() {
  const [state, setstate] = useState(false);

  useEffect(() => {
    setstate(true);
  }, []);

  return (
    <div className="h-[100vh] overflow-hidden relative bg-info-100">
      <div className="flex justify-center">
        <div
          className={`relative z-50 ${
            state ? " top-[-200px]" : "top-[-650px]"
          }  tr2`}
        >
          <div className="w-[200px]">
            <motion.div
              animate={{ y: [30, 0, 30] }}
              transition={{ repeat: Infinity, duration: 15 }}
            >
              <Image src={core} alt="" className="w-full" />
            </motion.div>{" "}
          </div>
        </div>
      </div>
      <div className="flex justify-center">
        <div className="w-[250px] absolute top-[50px] z-0">
          <motion.div
            animate={{ x: [60, 0, 60] }}
            transition={{ repeat: Infinity, duration: 50 }}
          >
            <Image src={cloud1} alt="" className="w-full" />
          </motion.div>
        </div>

        <div className="w-[250px] absolute top-[120px]  mr-[150px] z-0">
          <motion.div
            animate={{ x: [-60, 0, -60] }}
            transition={{ repeat: Infinity, duration: 50 }}
          >
            <Image src={cloud2} alt="" className="w-full" />
          </motion.div>{" "}
        </div>

        <div className="w-[250px] absolute top-[170px] ml-[200px] z-0">
          <motion.div
            animate={{ x: [60, 0, 60] }}
            transition={{ repeat: Infinity, duration: 50 }}
          >
            <Image src={cloud3} alt="" className="w-full" />
          </motion.div>{" "}
        </div>
      </div>
      <motion.div animate={{ y: [0, -130] }} transition={{ duration: 3 }}>
        <div className="text-center">
          <h3 className="font-bold text-2xl text-gray-700 rtl text-white">
            تا اینجا ورژن <br />
            {"  "}
          </h3>

          <Link href={"/login"}>
            <p className="mb-0 mt-5 text-white ">
              <PersianNumber number={version} style="text-[40px] font-bold" />
            </p>
          </Link>
        </div>
      </motion.div>
    </div>
  );
}
