import { ArrowRight } from "lucide-react";
import React from "react";

import { OrbitingCircles } from "@/components/magicui/orbiting-circles";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const CIRCLE_1_IMAGES = [
  {
    id: "inner-1",
    src: "/block-media/shadcnblocks/block/lummi/random11.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "inner-2",
    src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "inner-3",
    src: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
    imageAlt: "تحلیل با AI",
  },
] as const;

const CIRCLE_2_IMAGES = [
  {
    id: "middle-1",
    src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "middle-2",
    src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "middle-3",
    src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    imageAlt: "تحلیل با AI",
  },
] as const;

const CIRCLE_3_IMAGES = [
  {
    id: "outer-1",
    src: "/block-media/shadcnblocks/block/lummi/person1.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "outer-2",
    src: "/block-media/shadcnblocks/block/lummi/person2.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
  {
    id: "outer-3",
    src: "/block-media/shadcnblocks/block/lummi/person3.jpeg",
    imageAlt: "تحلیل با AI",
  },
  {
    id: "outer-4",
    src: "/block-media/shadcnblocks/block/lummi/person4.jpeg",
    imageAlt: "دستیار هوش مصنوعی",
  },
  {
    id: "outer-5",
    src: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
    imageAlt: "پیشنهادهای هوشمند",
  },
] as const;

interface Feature254Props {
  className?: string;
}

const Feature254 = ({ className }: Feature254Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full min-w-0 overflow-hidden py-32",
        className,
      )}
    >
      <div className="relative mx-auto flex w-full min-w-0 max-w-5xl items-center justify-center px-4">
        <div className="absolute inset-0 z-10 flex flex-col items-center justify-center gap-4 px-4">
          <div className="pointer-events-none absolute top-1/2 left-1/2 h-1/3 w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 bg-background blur-2xl" />
          <h1 className="relative z-10 max-w-xl text-center text-2xl font-medium tracking-tighter text-balance break-words sm:text-3xl md:text-2xll">
            با هوش مصنوعی سریع‌تر تصمیم بگیرید
          </h1>
          <p className="relative z-10 max-w-2xl text-center text-pretty text-muted-foreground/70">
            مدل‌های هوشمند الگوهای پنهان در داده فروش و پشتیبانی را پیدا می‌کنند.
            تیم‌ها با پیشنهادهای عملی، سریع‌تر اقدام می‌کنند.
          </p>

          <Button
            variant="default"
            className="group relative z-10 w-fit gap-2 rounded-full! px-10 tracking-tighter shadow-none!"
          >
            اتوماسیون AI
            <ArrowRight className="-rotate-45 transition-all ease-in-out group-hover:rotate-0 rtl:rotate-[135deg] rtl:group-hover:rotate-180" />
          </Button>
        </div>

        <div className="relative flex h-[32rem] w-full min-w-0 max-w-full flex-col items-center justify-center overflow-hidden sm:h-[36rem] md:h-[40rem]">
          <OrbitingCircles iconSize={40} radius={100} speed={2}>
            {CIRCLE_1_IMAGES.map((item) => (
              <div
                key={item.id}
                className="size-10 overflow-hidden rounded-full border border-border/40 shadow-sm sm:size-11"
              >
                <img
                  src={item.src}
                  className="size-full object-cover"
                  alt={item.imageAlt}
                />
              </div>
            ))}
          </OrbitingCircles>
          <OrbitingCircles iconSize={40} radius={170} reverse speed={2}>
            {CIRCLE_2_IMAGES.map((item) => (
              <div
                key={item.id}
                className="size-10 overflow-hidden rounded-full border border-border/40 opacity-90 shadow-sm sm:size-11"
              >
                <img
                  src={item.src}
                  className="size-full object-cover"
                  alt={item.imageAlt}
                />
              </div>
            ))}
          </OrbitingCircles>
          <OrbitingCircles iconSize={48} radius={250} speed={1}>
            {CIRCLE_3_IMAGES.map((item) => (
              <div
                key={item.id}
                className="size-11 overflow-hidden rounded-full border border-border/40 opacity-80 shadow-sm sm:size-12"
              >
                <img
                  src={item.src}
                  className="size-full object-cover"
                  alt={item.imageAlt}
                />
              </div>
            ))}
          </OrbitingCircles>
        </div>
      </div>
    </section>
  );
};

export { Feature254 };