"use client";

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";

interface Hero225Props {
  className?: string;
}

const Hero225 = ({ className }: Hero225Props) => {
  const circle1Images = [
    "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
    "/block-media/shadcnblocks/block/logos/react-icon.svg",
    "/block-media/shadcnblocks/block/logos/vue-icon.svg",
    "/block-media/shadcnblocks/block/logos/vite-icon.svg",
    "/block-media/shadcnblocks/block/logos/spotify-icon.svg",
  ];

  const circle2Images = [
    "/block-media/shadcnblocks/block/logos/typescript-icon.svg",
    "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
    "/block-media/shadcnblocks/block/logos/astro-icon.svg",
    "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
  ];

  const circle3Images = [
    "/block-media/shadcnblocks/block/logos/notion-icon.svg",
    "/block-media/shadcnblocks/block/logos/github-icon.svg",
    "/block-media/shadcnblocks/block/logos/figma-icon.svg",
    "/block-media/shadcnblocks/block/logos/slack-icon.svg",
    "/block-media/shadcnblocks/block/logos/laravel-icon.svg",
  ];

  const circle4Images = [
    "/block-media/shadcnblocks/block/logos/gatsby-icon.svg",
    "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
    "/block-media/shadcnblocks/block/logos/brave-icon.svg",
    "/block-media/shadcnblocks/block/logos/vscode-icon.svg",
    "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
    "/block-media/shadcnblocks/block/logos/google-icon.svg",
  ];

  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-center gap-4">
          <p className="text-lg text-muted-foreground">
            مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی
                                </p>
          <h1 className="font-calSans max-w-5xl text-center text-2xll lg:text-2xll">
            یک بار تهیه کنید و در تمام پروژه‌های خود استفاده کنید
                                </h1>
        </div>
        <div className="relative h-112 overflow-hidden">
          <div className="relative flex h-[1200px] w-full flex-col items-center justify-center overflow-hidden">
            <OrbitingCircles iconSize={40} radius={310} speed={2}>
              {circle1Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={390} reverse speed={2}>
              {circle2Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={470} speed={2}>
              {circle3Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
            <OrbitingCircles iconSize={40} radius={550} reverse speed={1}>
              {circle4Images.map((src, index) => (
                <div key={index} className="size-12">
                  <img src={src} className="size-full object-contain" alt="تصویر نمونه" />
                </div>
              ))}
            </OrbitingCircles>
          </div>
          <div className="absolute bottom-0 h-24 w-full bg-gradient-to-t from-background to-transparent" />
          <Button
            variant="secondary"
            className="text-md group absolute bottom-0 left-1/2 mx-auto mt-24 flex w-fit -translate-x-1/2 items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
          >
            <span>شروع رایگان</span>
            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Hero225 };