"use client";
import { useEffect, useState } from "react";
import { ColourfulText } from "@/components/ui/colourful-text";
import Link from "next/link";
import Image from "next/image";
import img1 from "@/assets/images/hero-section-1.png";
import img2 from "@/assets/images/hero-section-2.png";
import img3 from "@/assets/images/hero-section-3.png";
import img4 from "@/assets/images/hero-section-4.png";
import { motion } from "motion/react";

export default function HeroSection() {
  const [isCopied, setIsCopied] = useState<boolean>(false);

  useEffect(() => {
    if (isCopied) {
      setTimeout(() => {
        setIsCopied(false);
      }, 3000);
    }
  });

  return (
    <section className="pt-[125px]">
      <div className="relative mx-auto container max-w-[1110px] pt-24 px-8">
        <div className="flex flex-col items-center gap-5">
          <motion.div
            initial={{ y: -25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.25, delay: 0.2 }}
            onClick={() => {
              navigator.clipboard.writeText(
                "4H5RiKf7N5Ji7jbozjccG8SqTq3zQbnGXAtdyNL5MugC"
              );
              setIsCopied(true);
            }}
            className="ca-bg w-fit py-1.5 px-6 rounded-lg flex items-center gap-4 font-dm text-lg font-medium text-white duration-200 cursor-pointer"
          >
            CA :{" "}
            {isCopied
              ? "Copied!"
              : "4H5RiKf7N5Ji7jbozjccG8SqTq3zQbnGXAtdyNL5MugC"}{" "}
          </motion.div>

          <motion.h1
            initial={{ y: -25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.25, delay: 0.4 }}
            className="font-serif text-7xl font-bold text-center text-white"
          >
            Your Intelligent Copilot <br /> for{" "}
            <ColourfulText text="BNB Smart Chain" />
          </motion.h1>

          <motion.p
            initial={{ y: -25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.25, delay: 0.6 }}
            className="text-xl text-center text-white/75"
          >
            Collano is your intelligent companion for the BNB Smart Chain
            ecosystem, <br /> revolutionizing how users interact with blockchain
            technology through natural <br /> language understanding and
            automated assistance.
          </motion.p>

          <motion.div
            initial={{ y: -25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.25, delay: 0.8 }}
            className="w-fit"
          >
            <Link
              href={"/login"}
              className="btn-bg w-fit py-2.5 px-8 rounded-lg flex items-center gap-4 font-dm text-xl font-semibold text-white duration-200"
            >
              Get Started
            </Link>
          </motion.div>
        </div>

        <motion.div
          initial={{ y: -25, scale: 0, opacity: 0 }}
          whileInView={{ y: 0, scale: 1, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 0.6 }}
          className="absolute top-5 -left-20 w-fit h-fit"
        >
          <Image src={img1} alt="" className="w-[185px]" />
        </motion.div>

        <motion.div
          initial={{ y: -25, scale: 0, opacity: 0 }}
          whileInView={{ y: 0, scale: 1, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 1 }}
          className="absolute -bottom-14 left-0 w-fit h-fit"
        >
          <Image src={img2} alt="" className="w-[185px]" />
        </motion.div>

        <motion.div
          initial={{ y: -25, scale: 0, opacity: 0 }}
          whileInView={{ y: 0, scale: 1, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 0.8 }}
          className="absolute top-20 -right-20 w-fit h-fit"
        >
          <Image src={img3} alt="" className=" w-[185px]" />
        </motion.div>

        <motion.div
          initial={{ y: -25, scale: 0, opacity: 0 }}
          whileInView={{ y: 0, scale: 1, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 1.2 }}
          className="absolute -bottom-14 right-0 w-fit h-fit"
        >
          <Image src={img4} alt="" className="w-[155px]" />
        </motion.div>
      </div>
    </section>
  );
}
