import BlurredCircle from '@/components/common/blurred-circle';

export type AboutProps = {
  title: string;
  description: string;
  cardTitle: string;
  cardDescription: string;
  cards: {
    number: string;
    title: string;
    description: string;
  }[];
  colors?: {
    color1?: string;
    color2?: string;
  };
};

export default function AboutSection({
  title,
  description,
  cardTitle,
  cardDescription,
  cards,
  colors,
}: AboutProps) {
  return (
    <section className="bg-[#F8F8F8] px-4 py-10 font-inter md:px-0">
      <div className="relative container overflow-hidden rounded-2xl bg-[#12141D] p-6 text-white md:p-20">
        <div className="relative z-10 flex flex-col items-center justify-center">
          <div className="mb-8 text-center md:mb-20">
            <h4 className="mb-4 font-syne text-xl font-bold md:text-2xl">
              {title}
            </h4>
            <p className="mx-auto max-w-2xl text-center text-sm font-normal opacity-80 md:text-base">
              {description}
            </p>
          </div>

          <div className="mb-8 text-center md:mb-16">
            <h2 className="font-syne text-2xl font-bold md:text-5xl">
              {cardTitle}
            </h2>
            <p className="mx-auto max-w-2xl text-sm font-normal opacity-80 md:text-base">
              {cardDescription}
            </p>
          </div>

          <div className="flex w-full flex-wrap justify-center gap-4">
            {cards?.map((card, i) => (
              <div
                key={i}
                className="group flex min-w-[250px] flex-1 flex-col items-start justify-center gap-4 rounded-2xl bg-black/50 p-4 backdrop-blur-[25px] md:p-6"
              >
                <div className="flex size-12 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/10 font-semibold text-white transition-colors duration-300 group-hover:border-white group-hover:bg-white group-hover:text-black">
                  {card?.number}
                </div>
                <div className="flex flex-col gap-4">
                  <h3 className="font-semibold">{card?.title}</h3>
                  <p className="font-normal opacity-80">{card?.description}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        <BlurredCircle
          color={colors?.color1 ?? '#4DEC96'}
          className="absolute -top-52 -right-10 z-1 h-[670px] w-[670px] translate-x-1/2 -translate-y-1/2 blur-[150px]"
        />
        <BlurredCircle
          color={colors?.color2 ?? '#EE6A2D'}
          className="absolute bottom-36 left-0 z-1 h-[309px] w-[309px] -translate-x-1/2 translate-y-1/2 blur-[143.955px]"
        />
        <BlurredCircle
          color="#F1FE92"
          className="absolute bottom-0 left-0 z-2 h-[187px] w-[187px] -translate-x-1/2 translate-y-1/2 blur-[100.568px]"
        />
      </div>
    </section>
  );
}