import tokenomicChart from "../../../assets/images/tokenomic-chart.png";

type Props = {};

const tokenomics = [
  {
    title: "Liquidity - 5% 1,000,000 SGPT",
    description: " ",
    color: "bg-[#86eae9]",
  },
  {
    title: "Private Sale - 17% 3,400,000 SGPT",
    description: " ",
    color: "bg-[#5dbdd3]",
  },
  {
    title: "Stacking & Farming - 15% 3,000,000 SGPT",
    description: " ",
    color: "bg-[#4591b8]",
  },
  {
    title: "Marketing & Promotion - 15% 3,000,000 SGPT",
    description: " ",
    color: "bg-[#3b6696]",
  },
  {
    title: "Public Sale - 14% 2,800,000 SGPT",
    description: " ",
    color: "bg-[#353c6e]",
  },
  {
    title: "Reward & Q&A - 10% 2,000,000 SGPT",
    description: " ",
    color: "bg-[#705788]",
  },
  {
    title: "Advisor - 10% 2,000,000 SGPT",
    description: " ",
    color: "bg-[#a5769e]",
  },
  {
    title: "Treasury - 14% 2,800,000 SGPT",
    description: " ",
    color: "bg-[#d59ab3]",
  },
];

const TokenomicsSection = (props: Props) => {
  return (
    <div className="w-full bg-white py-24" id="tokenomics">
      <div className="container mx-auto">
        <h1 className="text-5xl font-bold text-center text-black mb-20">
          Tokenomics
        </h1>

        <div className="w-full flex flex-col lg:flex-row">
          <div className="lg:w-1/2">
            <img src={tokenomicChart} alt="" />
          </div>

          <div className="lg:w-1/2">
            <ul className="flex flex-col items-end justify-center h-full gap-3 px-3">
              {tokenomics.map((item, index) => {
                return (
                  <li
                    key={index}
                    className={`text-center w-full lg:w-2/3 bg-slate-200  py-3 relative`}
                  >
                    <div
                      className={`absolute h-full top-0 w-2 ${item.color}`}
                    ></div>
                    <h4 className="text-xl font-bold text-gray-700">
                      {item.title}
                    </h4>
                    <p className="text-gray-500">{item.description}</p>
                  </li>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TokenomicsSection;