"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-6 top-1/2 hidden h-40 w-32 -translate-y-1/2 translate-x-3/4 overflow-hidden rounded-2xl sm:block md:-start-10 md:h-52 md:w-40 md:translate-x-full",
  },
  {
    id: "corner-start-top",
    src: "/block-media/shadcnblocks/block/guri3/img1.jpeg",
    imageAlt: "نمودار ROI",
    className:
      "absolute -top-3 start-6 hidden size-20 -translate-y-3/4 translate-x-1/2 overflow-hidden rounded-2xl sm:block md:start-10 md:size-28 md:-translate-y-full md:translate-x-full",
  },
  {
    id: "corner-start-bottom",
    src: "/block-media/shadcnblocks/block/guri3/img7.jpeg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    className:
      "absolute -bottom-3 start-6 hidden size-24 translate-x-1/2 translate-y-3/4 overflow-hidden rounded-2xl sm:block md:start-10 md:size-32 md:translate-x-full md:translate-y-full",
  },
  {
    id: "side-end-main",
    src: "/block-media/shadcnblocks/block/guri3/img12.jpeg",
    imageAlt: "تحلیل عملکرد کمپین",
    className:
      "absolute -end-6 top-1/2 hidden h-40 w-36 -translate-x-3/4 -translate-y-1/2 overflow-hidden rounded-2xl sm:block md:-end-10 md:h-52 md:w-45 md:-translate-x-full",
  },
  {
    id: "corner-end-top",
    src: "/block-media/shadcnblocks/block/guri3/img13.jpeg",
    imageAlt: "نمودار ROI",
    className:
      "absolute -top-3 end-6 hidden size-20 -translate-x-1/2 -translate-y-3/4 overflow-hidden rounded-2xl sm:block md:end-10 md:size-28 md:-translate-x-full md:-translate-y-full",
  },
  {
    id: "corner-end-bottom",
    src: "/block-media/shadcnblocks/block/guri3/img3.jpeg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
    className:
      "absolute -bottom-3 end-6 hidden size-24 -translate-x-1/2 translate-y-3/4 overflow-hidden rounded-2xl sm:block md:end-10 md:size-32 md:-translate-x-full md:translate-y-full",
  },
] 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(
        "relative h-svh max-h-[1400px] min-h-[600px] w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="container flex h-full w-full min-w-0 flex-col items-center justify-center px-4">
        <div className="relative flex w-full min-w-0 max-w-4xl flex-col items-center justify-center overflow-x-clip px-8 py-16 sm:px-16 sm:py-24">
          <h2 className="relative z-10 py-2 text-center font-sans text-xl font-semibold tracking-tighter text-balance md:text-2xll">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h2>
          <p className="relative z-10 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="relative z-10 mt-10 h-auto max-w-full gap-2 rounded-xl whitespace-normal text-balance">
            گزارش لحظه‌ای هزینه، کلیک و تبدیل به شما کمک می‌کند بودجه را از کانال‌های ضعیف به کانال‌های پربازده منتقل کنید.
            <Forward className="size-4 shrink-0 rtl:rotate-180" />
          </Button>
          <div className="pointer-events-none absolute inset-0 sm:pointer-events-auto">
            {IMAGES.map((image, index) => (
              <motion.div
                drag
                dragConstraints={{ left: -40, right: 40, top: -40, bottom: 40 }}
                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={cn("pointer-events-auto", 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 };