"use client";
import { motion } from "motion/react";
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">
        <motion.p
          initial={{ y: -25, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 0.2 }}
          className="mb-2 font-mono text-sm font-medium uppercase text-[#09C04C]"
        >
          Tokenomics
        </motion.p>

        <motion.h2
          initial={{ y: -25, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 0.4 }}
          className="mb-3 font-serif text-4xl font-bold text-white"
        >
          Tokenomics clear as transparent glass
        </motion.h2>

        <motion.p
          initial={{ y: -25, opacity: 0 }}
          whileInView={{ y: 0, opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.25, delay: 0.6 }}
          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.
        </motion.p>

        <div className="grid grid-cols-[auto_420px] items-center gap-8">
          <div className="space-y-3">
            <motion.div
              initial={{ y: -25, opacity: 0 }}
              whileInView={{ y: 0, opacity: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.25, delay: 0.8 }}
              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>
            </motion.div>

            <div className="grid grid-cols-2 gap-3">
              <motion.div
                initial={{ y: -25, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.25, delay: 1 }}
                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">
                  5% Team Allocations
                </h3>

                <p className="text-white/75">Vested with a linear cliff</p>
              </motion.div>

              <motion.div
                initial={{ y: -25, opacity: 0 }}
                whileInView={{ y: 0, opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.25, delay: 1.2 }}
                className="p-8 border border-[#D15F0D] bg-[#D15F0D]/10 rounded-xl flex flex-col gap-2 cursor-pointer duration-200"
              >
                <p className="font-mono font-medium uppercase text-[#D15F0D]">
                  PARTNERSHIPS
                </p>

                <h3 className="font-serif text-2xl font-semibold text-white">
                  5% For Strategic Partnerships and Marketing
                </h3>
              </motion.div>
            </div>
          </div>

          <motion.div
            initial={{ y: -25, opacity: 0 }}
            whileInView={{ y: 0, opacity: 1 }}
            viewport={{ once: true }}
            transition={{ duration: 0.25, delay: 1 }}
            className="flex"
          >
            <Image src={img1} alt="" className="w-full" />
          </motion.div>
        </div>
      </div>
    </section>
  );
}
