import { cn } from "@/lib/utils";

const topItems = [
  {
    title: "تحلیل کانال",
    description:
      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-1.svg",
        alt: "تحلیل عملکرد کمپین",
        className: "aspect-495/186 max-w-lg rounded-xl",
      },
    ],
    className:
      "flex-1 [&>.title-container]:mb-5 md:[&>.title-container]:mb-8 xl:[&>.image-container]:translate-x-6 rtl:xl:[&>.image-container]:-translate-x-6 [&>.image-container]:translate-x-2 rtl:[&>.image-container]:-translate-x-2",
    fade: [""] as string[],
  },
  {
    title: "اتوماسیون ایمیل",
    description: "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/logos/instagram-icon.svg",
        alt: "نمودار ROI",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/linkedin-icon.svg",
        alt: "داشبورد بازاریابی دیجیتال",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/producthunt-icon.svg",
        alt: "تحلیل عملکرد کمپین",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/twitter-icon.svg",
        alt: "نمودار ROI",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/astro-icon.svg",
        alt: "داشبورد بازاریابی دیجیتال",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
        alt: "تحلیل عملکرد کمپین",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/slack-icon.svg",
        alt: "نمودار ROI",
      },
      {
        src: "/block-media/shadcnblocks/block/logos/google-icon.svg",
        alt: "داشبورد بازاریابی دیجیتال",
      },
    ],
    className:
      "flex-1 [&>.title-container]:mb-5 md:[&>.title-container]:mb-8 md:[&>.title-container]:translate-x-2 rtl:md:[&>.title-container]:-translate-x-2 xl:[&>.title-container]:translate-x-4 rtl:xl:[&>.title-container]:-translate-x-4 [&>.title-container]:translate-x-0",
    fade: [],
  },
];

const bottomItems = [
  {
    title: "A/B تست",
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-4.svg",
        alt: "تحلیل عملکرد کمپین",
        className: "aspect-305/280 rounded-ts-xl max-w-[305px]",
      },
    ],
    className:
      "[&>.title-container]:mb-5 md:[&>.title-container]:mb-8 xl:[&>.image-container]:translate-x-6 rtl:xl:[&>.image-container]:-translate-x-6 [&>.image-container]:translate-x-2 rtl:[&>.image-container]:-translate-x-2",
    fade: ["bottom"] as string[],
  },
  {
    title: "تقویم محتوا",
    description:
      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-5.svg",
        alt: "نمودار ROI",
        className: "aspect-320/103 rounded-xl",
      },
    ],
    className:
      "justify-normal [&>.title-container]:mb-5 md:[&>.title-container]:mb-0 [&>.image-container]:flex-1 md:[&>.image-container]:place-items-center md:[&>.image-container]:-translate-y-3",
    fade: [""],
  },
  {
    title: "ردیابی UTM",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    images: [
      {
        src: "/block-media/shadcnblocks/block/placeholder-6.svg",
        alt: "داشبورد بازاریابی دیجیتال",
        className: "aspect-305/280 rounded-ts-xl max-w-[305px]",
      },
    ],
    className:
      "[&>.title-container]:mb-5 md:[&>.title-container]:mb-8 xl:[&>.image-container]:translate-x-6 rtl:xl:[&>.image-container]:-translate-x-6 [&>.image-container]:translate-x-2 rtl:[&>.image-container]:-translate-x-2",
    fade: ["bottom"],
  },
];

interface Feature172Props {
  className?: string;
}

function Feature172({ className }: Feature172Props) {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h2 className="text-center text-3xl font-semibold tracking-tight text-balance sm:text-xl md:text-2xll lg:text-2xll">
          کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
        </h2>

        <div className="mt-8 md:mt-12 lg:mt-20">
          <DashedLine orientation="horizontal" className="scale-x-105" />

          <div className="relative flex max-md:flex-col">
            {topItems.map((item, i) => (
              <Item key={item.title} item={item} isLast={i === topItems.length - 1} />
            ))}
          </div>
          <DashedLine
            orientation="horizontal"
            className="max-w-7xl scale-x-110"
          />

          <div className="relative grid max-w-7xl md:grid-cols-3">
            {bottomItems.map((item, i) => (
              <Item
                key={item.title}
                item={item}
                isLast={i === bottomItems.length - 1}
                className="md:pb-0"
              />
            ))}
          </div>
        </div>
        <DashedLine
          orientation="horizontal"
          className="max-w-7xl scale-x-110"
        />
      </div>
    </section>
  );
}

interface ItemProps {
  item: {
    title: string;
    description: string;
    images: { src: string; alt: string; className?: string }[];
    className?: string;
    fade: string[];
  };
  isLast?: boolean;
  className?: string;
}

const Item = ({ item, isLast, className }: ItemProps) => {
  return (
    <div
      className={cn(
        "relative flex flex-col px-0 py-6 md:px-6 md:py-8",
        className,
        item.className,
      )}
    >
      <div className="title-container max-w-md text-start text-balance">
        <h3 className="inline font-semibold">{item.title} </h3>
        <span className="font-medium text-pretty text-muted-foreground">
          {" "}
          {item.description}
        </span>
      </div>

      {item.fade.includes("bottom") && (
        <div className="absolute inset-0 z-10 bg-linear-to-t from-background/80 via-transparent to-transparent md:hidden" />
      )}
      {item.images.length > 4 ? (
        <div className="relative overflow-hidden">
          <div className="flex flex-col gap-5">
            <div className="flex translate-x-4 justify-end gap-5 rtl:-translate-x-4 rtl:justify-start">
              {item.images.slice(0, 4).map((image) => (
                <div
                  key={image.alt}
                  className="grid aspect-square size-16 place-items-center rounded-xl bg-muted/40 p-2 lg:size-20"
                >
                  <img
                    src={image.src}
                    alt={image.alt}
                    className="size-8 object-contain object-top-start lg:size-12"
                  />
                  <div className="absolute inset-y-0 end-0 z-10 w-16 bg-linear-to-s from-background/80 to-transparent" />
                </div>
              ))}
            </div>
            <div className="flex -translate-x-4 gap-5 rtl:translate-x-4">
              {item.images.slice(4).map((image) => (
                <div
                  key={image.alt}
                  className="grid aspect-square size-16 place-items-center rounded-xl bg-muted/40 lg:size-20"
                >
                  <img
                    src={image.src}
                    alt={image.alt}
                    className="size-8 object-contain object-top-start lg:size-12"
                  />
                  <div className="absolute inset-y-0 start-0 bottom-0 z-10 w-14 bg-linear-to-e from-background/80 to-transparent" />
                </div>
              ))}
            </div>
          </div>
        </div>
      ) : (
        <div className="image-container grid grid-cols-1 gap-4">
          {item.images.map((image) => (
            <img
              key={image.alt}
              src={image.src}
              alt={image.alt}
              className={cn(
                "w-full overflow-hidden object-cover",
                image.className,
              )}
            />
          ))}
        </div>
      )}

      {!isLast && (
        <>
          <DashedLine
            orientation="vertical"
            className="absolute top-0 end-0 max-md:hidden"
          />
          <DashedLine
            orientation="horizontal"
            className="absolute inset-x-0 bottom-0 md:hidden"
          />
        </>
      )}
    </div>
  );
};

interface DashedLineProps {
  orientation?: "horizontal" | "vertical";
  className?: string;
}

const DashedLine = ({
  orientation = "horizontal",
  className,
}: DashedLineProps) => {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      className={cn(
        "relative text-muted-foreground",
        isHorizontal ? "h-px w-full" : "h-full w-px",
        className,
      )}
    >
      <div
        className={cn(
          isHorizontal
            ? [
                "h-px w-full",
                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
              ]
            : [
                "h-full w-px",
                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
              ],
        )}
      />
    </div>
  );
};

export { Feature172 };