"use client";

import { motion } from "framer-motion";
import { Forward } from "lucide-react";
import { useState } from "react";

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

const IMAGES = [
  {
    id: "side-start-main",
    src: "/block-media/shadcnblocks/block/guri3/img11.jpeg",
    imageAlt: "تحلیل عملکرد کمپین",
    className:
      "absolute -start-10 top-1/2 h-52 w-40 -translate-y-1/2 translate-x-full overflow-hidden rounded-2xl",
  },
  {
    id: "corner-start-top",
    src: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    imageAlt: "نمودار ROI",
    className:
      "absolute -top-3 start-10 size-28 -translate-y-full translate-x-full overflow-hidden rounded-2xl",
  },
  {
    id: "corner-start-bottom",
    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    className:
      "absolute -bottom-3 start-10 size-32 translate-x-full translate-y-full overflow-hidden rounded-2xl",
  },
  {
    id: "side-end-main",
    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
    imageAlt: "تحلیل عملکرد کمپین",
    className:
      "absolute -end-10 top-1/2 h-52 w-45 -translate-x-full -translate-y-1/2 overflow-hidden rounded-2xl",
  },
  {
    id: "corner-end-top",
    src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    imageAlt: "نمودار ROI",
    className:
      "absolute -top-3 end-10 size-28 -translate-x-full -translate-y-full overflow-hidden rounded-2xl",
  },
  {
    id: "corner-end-bottom",
    src: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    className:
      "absolute -bottom-3 end-10 size-32 -translate-x-full translate-y-full overflow-hidden rounded-2xl",
  },
] as const;

interface Feature283Props {
  className?: string;
}

const Feature283 = ({ className }: Feature283Props) => {
  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("h-screen overflow-hidden py-32", className)}
    >
      <div className="container flex h-full w-full flex-col items-center justify-center px-4">
        <div className="relative flex flex-col items-center justify-center">
          <h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter text-balance md:text-2xll">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h2>
          <p className="mx-auto mt-2 max-w-xl px-5 text-center text-pretty text-sm text-muted-foreground/50 md:text-base">
            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
          </p>
          <Button className="mt-10 h-10 gap-2 rounded-xl">
            گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.
            <Forward className="size-4 rtl:rotate-180" />
          </Button>
          <div>
            {IMAGES.map((image, index) => (
              <motion.div
                drag
                key={image.id}
                initial={{ y: "50%", opacity: 0, scale: 0.8 }}
                whileInView={{ y: 0, opacity: 1, scale: 1 }}
                transition={{
                  duration: 0.2,
                  ease: "easeOut",
                  delay: index * 0.1 + 0.5,
                }}
                animate={{
                  filter:
                    hoveredIndex !== null && hoveredIndex !== index
                      ? "blur(10px)"
                      : "blur(0px)",
                  scale: hoveredIndex === index ? 1.05 : 1,
                  transition: {
                    duration: 0.3,
                    ease: "easeOut",
                    delay: 0,
                  },
                }}
                onHoverStart={() => setHoveredIndex(index)}
                onHoverEnd={() => setHoveredIndex(null)}
                className={image.className}
              >
                <img
                  src={image.src}
                  alt={image.imageAlt}
                  className="pointer-events-none size-full object-cover"
                />
              </motion.div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature283 };