"use client";

import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import BlurFade from "@/components/blur-fade";
import { Card } from "@/components/ui/card";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const STATS = [
  { value: "95%", desc: "Circulating Supply" },
  { value: "2%", desc: "Team Allocations" },
  { value: "1%", desc: "Marketing Operations" },
  { value: "2%", desc: "Treasury" },
];

export function Tokenomics() {
  return (
    <section id="tokenomics">
      <div className="layout h-8 border-x"></div>
      <BlurFade className="flex items-center justify-center" inView>
        <hr className="w-full border-black" />
        <Badge className="hover:bg-primary rounded-md font-light">
          <ChevronLeft className="h-6 w-6" />
          <span className="text-lg mx-2">Tokenomics</span>
          <ChevronRight className="h-6 w-6" />
        </Badge>
        <hr className="w-full border-black" />
      </BlurFade>
      <div className="layout border-x px-3 sm:px-6 py-8">
        <Accordion type="multiple" className="w-full space-y-6">
          {STATS.map((stat, idx) => (
            <AccordionItem key={`item-${idx}`} value={`item-${idx}`} asChild className="border-b-0">
              <BlurFade delay={0.2 + idx * 0.2} inView>
                <Card className="border-primary rounded-lg">
                  <AccordionTrigger className="py-0 [&[data-state=open]>div>svg]:rotate-180 [&[data-state=closed]>div]:bg-primary [&[data-state=closed]>div]:text-white [&[data-state=open]>div]:mb-0 [&[data-state=open]>div]:sm:mb-0 [&[data-state=open]>div]:bg-[url(/background-3.png)] [&[data-state=open]>div]:text-primary hover:no-underline">
                    <div className="transition-all grow m-2 p-3 sm:m-4 sm:p-6 flex justify-between items-center gap-3  rounded-lg">
                      <div className="flex items-center gap-3">
                        <p className="font-bold text-2xl sm:text-5xl">
                          {stat.value}
                        </p>
                        <h2 className="text-xl sm:text-3xl">{stat.desc}</h2>
                      </div>
                      <ChevronDown className="h-6 w-6 sm:h-8 sm:w-8 shrink-0 transition-transform duration-200" />
                    </div>
                  </AccordionTrigger>
                  <AccordionContent className="m-2 mt-0 p-3 sm:m-4 sm:mt-0 sm:p-6 bg-[url(/background-3.png)] text-muted-foreground text-sm sm:text-lg">
                    <p className="mb-4">
                      The circulating supply represents the total amount of
                      tokens that are currently available in the market. This
                      ensures liquidity and accessibility for all participants.
                      Our commitment to transparency and fairness is reflected
                      in the high percentage of tokens allocated for
                      circulation.
                    </p>
                    <ul className="list-disc">
                      <li className="ml-6">
                        Ensures liquidity and accessibility for all
                        participants.
                      </li>
                      <li className="ml-6">
                        Reflects our commitment to transparency and fairness.
                      </li>
                      <li className="ml-6">
                        Supports the growth and sustainability of our community.
                      </li>
                    </ul>
                  </AccordionContent>
                </Card>
              </BlurFade>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </section>
  );
}
