"use client";
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";

export default function HeroSection() {
  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">
          <div 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">
            CA : 0xdadkaddasdhkjzhkjhdkh2k3hksjhadkjhk23jhajd
          </div>

          <h1 className="font-serif text-7xl font-bold text-center text-white">
            Your Intelligent Copilot <br /> for{" "}
            <ColourfulText text="BNB Smart Chain" />
          </h1>

          <p 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.
          </p>

          <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>
        </div>

        <Image
          src={img1}
          alt=""
          className="absolute top-5 -left-20 w-[185px]"
        />

        <Image
          src={img2}
          alt=""
          className="absolute -bottom-14 left-0 w-[185px]"
        />

        <Image
          src={img3}
          alt=""
          className="absolute top-20 -right-20 w-[185px]"
        />

        <Image
          src={img4}
          alt=""
          className="absolute -bottom-14 right-0 w-[155px]"
        />
      </div>
    </section>
  );
}
