import Image from "next/image";
import img1 from "@/assets/images/tokenomics.png";

export default function TokenomicsSection() {
  return (
    <section id="tokenomics">
      <div className="relative mx-auto container max-w-[1110px] pt-48 px-8">
        <p className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]">
          Tokenomics
        </p>

        <h2 className="mb-3 font-serif text-4xl font-bold text-white">
          Tokenomics clear as transparent glass
        </h2>

        <p className="mb-8 text-white/75">
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          dolore eu fugiat nulla <br /> pariatur. Excepteur sint occaecat
          cupidatat non proident.
        </p>

        <div className="grid grid-cols-[auto_420px] items-center gap-8">
          <div className="space-y-3">
            <div className="p-8 border border-[#09C04C] bg-[#09C04C]/10 rounded-xl flex flex-col gap-2 cursor-pointer duration-200">
              <p className="font-mono font-medium uppercase text-[#09C04C]">
                Supply
              </p>

              <h3 className="font-serif text-2xl font-semibold text-white">
                90% Circulating Supply
              </h3>

              <p className="text-white/75">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </p>
            </div>

            <div className="p-8 border border-[#D1CA0D] bg-[#D1CA0D]/10 rounded-xl flex flex-col gap-2 cursor-pointer duration-200">
              <p className="font-mono font-medium uppercase text-[#D1CA0D]">
                Allocations
              </p>

              <h3 className="font-serif text-2xl font-semibold text-white">
                10% Dev Allocations
              </h3>

              <p className="text-white/75">
                Team Allocations : 5% (Vested with a linear cliff) <br />{" "}
                Strategic Partnerships and Marketing : 5%
              </p>
            </div>
          </div>

          <div className="flex">
            <Image src={img1} alt="" className="w-full" />
          </div>
        </div>
      </div>
    </section>
  );
}
