"use client";
import { useEffect, useState } from "react";
import IconBox from "@/components/IconBox";
import tokenomicsImg from "@/assets/images/tokenomics.png";
import Image from "next/image";
import { motion } from "framer-motion";

export default function TokenomicsSection() {
    const [activeState, setActiveState] = useState<number>(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setActiveState((prev) => (prev === 1 ? 0 : prev + 1));
        }, 5000);

        return () => clearInterval(interval);
    }, []);

    return (
        <section id="tokenomics" className="border-b border-white/10">
            <div className="mx-auto container max-w-[1435px] px-8">
                <div className="p-24 flex flex-col items-center">
                    <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}>
                        <IconBox
                            icon={
                                <svg
                                    width="14"
                                    height="14"
                                    viewBox="0 0 14 14"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg"
                                >
                                    <path
                                        d="M6.43069 12.8335C8.93914 12.8335 11.0377 11.0789 11.5663 8.73015C11.6746 8.24908 11.7287 8.00851 11.5531 7.789C11.3775 7.5695 11.0933 7.5695 10.5249 7.5695H6.43069M6.43069 12.8335C3.52346 12.8335 1.16669 10.4767 1.16669 7.5695C1.16669 5.06107 2.92123 2.96244 5.27003 2.43388C5.75111 2.32562 5.99167 2.27149 6.21118 2.4471C6.43069 2.62271 6.43069 2.9069 6.43069 3.47528V7.5695M6.43069 12.8335V7.5695"
                                        stroke="#0CE77E"
                                        strokeWidth="0.875"
                                        strokeLinejoin="round"
                                    />
                                    <path
                                        d="M12.5732 4.09898C12.0928 2.87947 11.1207 1.90743 9.90123 1.42701C9.26236 1.17532 8.94293 1.04947 8.55478 1.31371C8.16669 1.57796 8.16669 2.01015 8.16669 2.87456V4.05815C8.16669 4.89508 8.16669 5.31354 8.42668 5.57354C8.68667 5.83354 9.10515 5.83354 9.94206 5.83354H11.1256C11.9901 5.83354 12.4223 5.83354 12.6865 5.44543C12.9508 5.05732 12.8249 4.73787 12.5732 4.09898Z"
                                        stroke="#0CE77E"
                                        strokeWidth="0.875"
                                        strokeLinejoin="round"
                                    />
                                </svg>
                            }
                            text="Tokenomics"
                        />
                    </motion.div>

                    <motion.h2
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        transition={{ delay: 0.2 }}
                        viewport={{ once: true }}
                        className="my-4 font-serif text-[42px] font-medium leading-[64px] text-white"
                    >
                        <span className="text-[#0CE77E]">Fair</span> distribution at prority
                    </motion.h2>

                    <motion.p
                        initial={{ opacity: 0 }}
                        whileInView={{ opacity: 1 }}
                        transition={{ delay: 0.4 }}
                        viewport={{ once: true }}
                        className="mb-12 max-w-[900px] text-lg font-light text-center text-white/75"
                    >
                        Our share is designed to ensure equitable access and rewards for all participants. Through a
                        transparent and decentralized approach, we incentivize contributors.
                    </motion.p>

                    <div className="w-full grid grid-cols-[480px_auto] gap-5">
                        <div>
                            <Image src={tokenomicsImg} alt="" className="w-full" />
                        </div>

                        <div>
                            <motion.div
                                initial={{ opacity: 0 }}
                                whileInView={{ opacity: 1 }}
                                transition={{ delay: 0.4 }}
                                viewport={{ once: true }}
                                className="min-h-[384px] p-6 border border-white/5 bg-[#0E1618]"
                            >
                                {activeState === 0 && (
                                    <>
                                        <h3 className="mb-2.5 text-lg font-medium text-white">
                                            Circulating Supply <span className="text-[#0CE77E]">(95%)</span>
                                        </h3>

                                        <p className="mb-1.5 text-white/75">
                                            The majority of tokens are allocated for general circulation, enabling wide
                                            accessibility and active ecosystem participation.
                                        </p>

                                        <ul className="mb-1.5 pl-4 flex flex-col items-center gap-1.5">
                                            <li className="list-disc text-white/75">
                                                Transactions: Facilitating payments between GPU renters and providers.
                                            </li>

                                            <li className="list-disc text-white/75">
                                                Liquidity: Supporting smooth trading on decentralized exchanges and
                                                maintaining token stability.
                                            </li>
                                        </ul>

                                        <p className="text-white/75">
                                            Empowers community & the platform&apos;s core functionality.
                                        </p>
                                    </>
                                )}

                                {activeState === 1 && (
                                    <>
                                        <h3 className="mb-2.5 text-lg font-medium text-white">
                                            Team Allocations <span className="text-[#0CE77E]">(2%)</span>
                                        </h3>

                                        <p className="mb-3.5 text-white/75">
                                            A small portion of tokens is reserved for the project team, vested over a
                                            multi-year period to align incentives with long-term platform success. These
                                            funds support ongoing development, attract top talent, and ensure continuous
                                            innovation.
                                        </p>

                                        <h3 className="mb-2.5 text-lg font-medium text-white">
                                            Marketing Operations <span className="text-[#0CE77E]">(1%)</span>
                                        </h3>

                                        <p className="mb-3.5 text-white/75">
                                            Dedicated to promoting the platform and driving adoption through campaigns,
                                            community programs, and partnerships.
                                        </p>

                                        <h3 className="mb-2.5 text-lg font-medium text-white">
                                            Treasury & Ecosystem Development{" "}
                                            <span className="text-[#0CE77E]">(2%)</span>
                                        </h3>

                                        <p className="text-white/75">
                                            Reserved for research, grants, and maintaining operational resilience to
                                            ensure long-term platform sustainability.
                                        </p>
                                    </>
                                )}
                            </motion.div>

                            <motion.div
                                initial={{ opacity: 0 }}
                                whileInView={{ opacity: 1 }}
                                transition={{ delay: 0.6 }}
                                viewport={{ once: true }}
                                className="mt-4 flex justify-center gap-2.5"
                            >
                                {[1, 2].map((_, index) => (
                                    <button
                                        key={index}
                                        onClick={() => setActiveState(index)}
                                        className={`w-[5px] h-[5px] ${
                                            activeState === index ? "bg-[#0CE77E]" : "bg-[#D9D9D9]/25"
                                        } duration-200`}
                                    ></button>
                                ))}
                            </motion.div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}