"use client";

import { Users, Megaphone, Building, CircleDollarSign } from "lucide-react";
import { useState } from "react";

const tokenomicsData = [
    {
        title: "Circulating Supply (90%)",
        description:
            "The majority of tokens are allocated for general circulation, ensuring wide accessibility and active participation in the ecosystem. This design reduces centralization risks, enhances market liquidity, and ensures a fair launch.",
        buttons: ["[ DETAILS ]", "[ DETAILS ]", "[ DETAILS ]"],
        className: "md:col-span-2",
        icon: CircleDollarSign,
    },
    {
        title: "Team Allocation (4.5%)",
        description:
            "A portion of tokens is reserved for the project team to support ongoing development, attract top talent, and ensure continuous innovation. These tokens are vested over a multi-year period to align incentives with long-term platform success.",
        buttons: ["[ DETAILS ]"],
        icon: Users,
    },
    {
        title: "Marketing Operations (1%)",
        description:
            "Dedicated to promoting the platform and driving adoption through campaigns, community programs, and partnerships.",
        buttons: ["[ DETAILS ]"],
        icon: Megaphone,
    },
    {
        title: "Treasury & Ecosystem Development (4.5%)",
        description:
            "Reserved for research, grants, and maintaining operational resilience to ensure long-term platform sustainability. This allocation supports community incentives, expansions, and bounties.",
        buttons: ["[ DETAILS ]", "[ DETAILS ]", "[ DETAILS ]"],
        className: "md:col-span-2",
        icon: Building,
    },
];

export function Tokenomics() {
    const [activeCard, setActiveCard] = useState<number | null>(null);

    return (
        <section id="tokenomics" className="relative py-20 bg-[#101014]">
            <div className="container mx-auto px-4">
                <div className="mb-12 space-y-5 text-center">
                    <h2 className="text-sm text-[#5e51ec] font-fk-grotesk-mono" data-aos="fade-up">
                        [ TOKENOMICS ]
                    </h2>
                    <h3
                        className="uppercase text-5xl font-extralight max-w-md mx-auto"
                        data-aos="fade-up"
                        data-aos-delay="100"
                    >
                        Simple <span className="font-pp-mondwest font-normal">Tokenomics</span>
                    </h3>
                    <p className="max-w-lg mx-auto text-lg font-semi-light" data-aos="fade-up" data-aos-delay="200">
                        Our tokenomics model is straightforward and transparent, designed to align with the interests of
                        our community and stakeholders. Detailed information about token distribution and allocation
                        will be provided to ensure clarity and trust.
                    </p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {tokenomicsData.map((item, index) => (
                        <div
                            key={index}
                            className={`relative ${item.className || ""}`}
                            data-aos="fade-up"
                            data-aos-delay={index * 100}
                            onMouseEnter={() => setActiveCard(index)}
                            onMouseLeave={() => setActiveCard(null)}
                        >
                            <div
                                className={`p-6 rounded-md bg-[#1c1b20] flex flex-col h-full relative overflow-hidden group transition-all duration-300 ease-in-out ${
                                    activeCard === index ? "ring-2 ring-[#5e51ec] shadow-lg shadow-[#5e51ec]/20" : ""
                                }`}
                            >
                                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent -translate-x-full group-hover:translate-x-full transition-all duration-700 ease-in-out opacity-10"></div>
                                <div className="space-y-6 flex-grow relative z-10">
                                    <div className="w-12 h-12 rounded-md bg-[#28272c] flex items-center justify-center transform group-hover:scale-110 transition-transform duration-300">
                                        {item.icon && <item.icon className="w-6 h-6 text-white" />}
                                    </div>
                                    <h3 className="text-2xl font-fk-grotesk-mono font-normal uppercase">
                                        {item.title}
                                    </h3>
                                    <p className="text-[#838383] text-xl font-semi-light">{item.description}</p>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <img
                src="/images/3d-tokenomics.webp"
                alt="3D Tokenomics Illustration"
                className="absolute z-50 -top-[70px] right-14 w-[250px]"
                data-aos="fade-up"
                data-aos-delay="400"
            />
        </section>
    );
}