import React from "react";
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts";
import { motion } from "framer-motion";

const COLORS = ["#F7A600", "#FFD700", "#FFEC80", "#D3D3D3"];

const data = [
  { name: "Developer Wallet Allocation", value: 5, color: "#F7A600" },
  { name: "Team", value: 2, color: "#FFD700" },
  { name: "Marketing & Operations", value: 1, color: "#FFEC80" },
  { name: "Treasury & Ecosystem", value: 2, color: "#D3D3D3" },
];

const vestingData = [
  { name: "2% Locked (2 Years)", color: "#D3D3D3" },
  { name: "0.5% for Marketing", color: "#E0E0E0" },
  { name: "0.5% Treasury Liquidity", color: "#F0F0F0" },
];

const Tokenomics: React.FC = () => {
  return (
    <div id="tokenomics" className="grid md:grid-cols-2 gap-10 items-center justify-center p-10 w-full">
      {/* Animated Pie Chart */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8 }}
        className="flex justify-center"
      >
        <ResponsiveContainer width={600} height={600}>
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              innerRadius={120}
              outerRadius={180}
              fill="#8884d8"
              paddingAngle={5}
              dataKey="value"
              className="w-full h-full"
            >
              {data.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
          </PieChart>
        </ResponsiveContainer>
      </motion.div>

      {/* Tokenomics Info */}
      <motion.div
        initial={{ opacity: 0, x: 50 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.8 }}
        className="text-left"
      >
        <h2 className="text-4xl font-orbitron font-bold mb-4">Tokenomics</h2>
        <p className="text-gray-500 mb-4">
          Transparent Allocation – Designed for Growth and Sustainability
        </p>

        <div className="mb-6 space-y-2">
          {data.map((item, index) => (
            <div key={index} className="flex items-center">
              <div
                className="w-4 h-4 rounded mr-2"
                style={{ backgroundColor: item.color }}
              ></div>
              <p className="text-lg">{item.name} ({item.value}%)</p>
            </div>
          ))}
        </div>

        <h3 className="text-xl font-semibold mb-3">Vesting Plan</h3>
        <div className="space-y-2">
          {vestingData.map((item, index) => (
            <div key={index} className="flex items-center">
              <div
                className="w-4 h-4 rounded mr-2"
                style={{ backgroundColor: item.color }}
              ></div>
              <p className="text-lg">{item.name}</p>
            </div>
          ))}
        </div>
      </motion.div>
    </div>
  );
};

export default Tokenomics;