"use client";

import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const icons = [
  {
    image: "/block-media/shadcnblocks/block/block-1.svg",
    title: "فروش آنلاین را مقیاس‌پذیر کنید",
  },
  {
    image: "/block-media/shadcnblocks/block/block-2.svg",
    title: "تجربه خرید را روان‌تر بسازید",
  },
  {
    image: "/block-media/shadcnblocks/block/block-3.svg",
    title: "هر سفارش را از انبار تا تحویل ببینید",
  },
  {
    image: "/block-media/shadcnblocks/block/block-4.svg",
    title: "نرخ تبدیل فروشگاه را بالا ببرید",
  },
  {
    image: "/block-media/shadcnblocks/block/block-5.svg",
    title: "موجودی و سفارش را یکجا مدیریت کنید",
  },
  {
    image: "/block-media/shadcnblocks/block/block-6.svg",
    title: "مشتری را به خرید دوباره برگردانید",
  },
  {
    image: "/block-media/shadcnblocks/block/block-1.svg",
    title: "فروش آنلاین را مقیاس‌پذیر کنید",
  },
] as const;

const IconElem = ({ image, title }: { image: string; title: string }) => (
  <div className="flex min-w-0 max-w-full flex-col items-center">
    <img
      src={image}
      alt={`لوگوی ${title}`}
      className="mb-3 hidden size-14 rounded-lg object-cover p-2 shadow-[rgba(50,50,105,0.15)_0px_2px_5px_0px,rgba(0,0,0,0.05)_0px_1px_1px_0px] md:block dark:invert"
    />
    <Badge
      variant="secondary"
      className="h-auto max-w-[9.5rem] px-2 py-1 text-center font-mono text-[10px] leading-snug font-semibold whitespace-normal sm:max-w-[11rem] sm:text-xs md:max-w-none"
    >
      {title}
    </Badge>
  </div>
);

interface Feature152Props {
  className?: string;
}

const Feature152 = ({ className }: Feature152Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative w-full max-w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="container min-w-0 max-w-full">
        <div className="mb-12 flex w-full min-w-0 flex-col items-center md:mb-16">
          <Badge variant="secondary" className="mb-6 bg-muted">
            فروش آنلاین
          </Badge>
          <h1 className="mb-3 max-w-md text-center text-xl font-medium text-balance break-words md:text-xl">
            تجربه خرید را روان‌تر بسازید
          </h1>
          <p className="mb-3 max-w-80 text-center text-pretty break-words">
            هر سفارش را از انبار تا تحویل ببینید
          </p>
          <Button
            variant="link"
            asChild
            className="h-auto max-w-full px-2 text-blue-700 whitespace-normal"
          >
            <a
              href="#"
              className="inline-flex max-w-full flex-wrap items-center justify-center gap-1 text-center"
            >
              <span className="text-pretty break-words">
                نرخ تبدیل فروشگاه را بالا ببرید
              </span>
              <ArrowRight className="size-4 shrink-0 rtl:rotate-180" />
            </a>
          </Button>
        </div>

        <div className="relative mx-auto flex w-full min-w-0 max-w-3xl flex-col gap-5 overflow-hidden pb-8 md:gap-0">
          <div className="grid grid-cols-2 justify-items-center gap-3 md:mb-[-30px] md:flex md:justify-around md:gap-0">
            <IconElem {...icons[0]} />
            <IconElem {...icons[1]} />
          </div>
          <div className="flex justify-center md:mb-[-30px]">
            <IconElem {...icons[2]} />
          </div>
          <div className="grid grid-cols-2 justify-items-center gap-3 md:mb-[-30px] md:flex md:justify-evenly md:gap-0">
            <IconElem {...icons[3]} />
            <IconElem {...icons[4]} />
          </div>
          <div className="grid grid-cols-2 justify-items-center gap-3 md:flex md:justify-between md:gap-0">
            <IconElem {...icons[5]} />
            <IconElem {...icons[6]} />
          </div>

          {[...Array(11)].map((_, index) => (
            <div
              key={index}
              className="absolute -bottom-2 start-1/2 z-[-2] aspect-square max-w-none rounded-full border border-indigo-200"
              style={{
                width: `${60 + 80 * index}px`,
                opacity: 0.5,
                filter: "saturate(10%)",
                transform: "translateX(-50%) translateY(50%)",
              }}
            />
          ))}
          <div className="absolute inset-0 z-[-1] bg-linear-to-b from-background via-transparent to-transparent" />
          <div className="absolute inset-0 z-[-1] bg-linear-to-s from-background via-transparent to-transparent" />
          <div className="absolute inset-0 z-[-1] bg-linear-to-e from-background via-transparent to-transparent" />
          <div className="absolute bottom-0 start-0 z-[-2] h-px w-full bg-indigo-200 opacity-50" />
        </div>
      </div>
    </section>
  );
};

export { Feature152 };