import Link from "next/link";
import Image from "next/image";
import logoImg from "@/assets/images/brand/logo.svg";

export default function Navbar() {
  return (
    <nav className="fixed z-[1000] top-10 left-0 w-full">
      <div className="mx-auto container max-w-[1110px] px-8">
        <div className="p-5 border border-white/10 bg-white/10 backdrop-blur-2xl rounded-xl flex justify-between items-center">
          <Link href={"/"} className="flex">
            <Image src={logoImg} alt="" width={135} />
          </Link>

          <ul className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 flex gap-9">
            <li>
              <Link href={"#features"} className="text-base text-white">
                Features
              </Link>
            </li>

            <li>
              <Link href={"#roadmap"} className="text-base text-white">
                Roadmap
              </Link>
            </li>

            <li>
              <Link href={"#tokenomics"} className="text-base text-white">
                Tokenomics
              </Link>
            </li>

            <li>
              <Link href={"#faqs"} className="text-base text-white">
                FAQs
              </Link>
            </li>
          </ul>

          <Link
            href={"/login"}
            className="btn-bg w-fit py-1.5 px-6 rounded-lg flex items-center gap-4 font-dm text-lg font-semibold text-white duration-200"
          >
            Get Started
          </Link>
        </div>
      </div>
    </nav>
  );
}
