"use client";

import { ArrowRight } from "lucide-react";
import { useState } from "react";

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

const items = [
  {
    id: "shadcn",
    title: "shadcn/ui",
    image:
      "/block-media/external/unsplash/photo-1536735561749-fc87494598cb.jpg",
    imageAlt: "تحلیل عملکرد کمپین",
    logo: "/block-media/shadcnblocks/block/logos/shadcn-ui-wordmark.svg",
    logoAlt: "کمپین",
  },
  {
    id: "astro",
    title: "Astro",
    image:
      "/block-media/external/unsplash/photo-1548324215-9133768e4094.jpg",
    imageAlt: "نمودار ROI",
    logo: "/block-media/shadcnblocks/block/logos/astro-wordmark.svg",
    logoAlt: "رشد برند",
  },
  {
    id: "city",
    title: "ردیابی UTM",
    image:
      "/block-media/external/unsplash/photo-1550070881-a5d71eda5800.jpg",
    imageAlt: "داشبورد بازاریابی دیجیتال",
  },
] as const;

interface Feature81Props {
  className?: string;
}

const Feature81 = ({ className }: Feature81Props) => {
  const [activeId, setActiveId] = useState<string>(items[0].id);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-8 md:gap-16 lg:px-16">
        <div className="flex flex-col items-center text-center">
          <p className="mb-6 text-xs font-medium tracking-wider">
            بازاریابی دیجیتال
          </p>
          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
            گزارش ROI
          </h3>
          <p className="mb-8 text-muted-foreground lg:text-lg">
            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
          </p>
        </div>
        <div className="flex w-full min-w-0 flex-col gap-4 sm:gap-6 lg:h-80 lg:flex-row lg:gap-8">
          {items.map((item) => {
            const isOpen = activeId === item.id;

            return (
              <button
                key={item.id}
                type="button"
                data-state={isOpen ? "open" : "closed"}
                aria-label={item.title}
                onClick={() => setActiveId(item.id)}
                className={cn(
                  "group relative min-w-0 cursor-pointer overflow-clip rounded-lg text-start transition-all duration-500 ease-out",
                  isOpen
                    ? "h-56 flex-2 lg:h-full lg:min-h-0"
                    : "h-28 flex-1 lg:h-full lg:min-h-0",
                )}
              >
                <img
                  src={item.image}
                  alt={item.imageAlt}
                  className="absolute inset-0 size-full object-cover object-center transition-transform duration-500 group-data-[state=closed]:scale-105"
                />
                <div
                  className={cn(
                    "relative z-10 flex size-full flex-col items-start gap-4 px-4 py-5 transition-colors duration-500 md:p-6 lg:p-8",
                    isOpen
                      ? "justify-between bg-black/60 hover:bg-black/65"
                      : "justify-end bg-black/75 hover:bg-black/80",
                  )}
                >
                  {"logo" in item && item.logo && (
                    <img
                      src={item.logo}
                      alt={item.logoAlt}
                      className={cn(
                        "h-6 max-w-48 invert transition-all duration-500 sm:h-8 md:h-10",
                        isOpen
                          ? "mb-8 opacity-100"
                          : "mb-0 h-0 max-h-0 opacity-0",
                      )}
                    />
                  )}
                  <div
                    className={cn(
                      "flex items-center text-xs font-medium text-white transition-all duration-500 md:text-base lg:text-lg",
                      isOpen
                        ? "translate-y-0 opacity-100"
                        : "pointer-events-none h-0 translate-y-2 overflow-hidden opacity-0",
                    )}
                  >
                    جذب مخاطب
                    <ArrowRight className="ms-2 size-4 shrink-0 transition-transform group-hover:translate-x-1 group-data-[state=open]:group-hover:translate-x-1 rtl:rotate-180 rtl:group-hover:-translate-x-1 rtl:group-data-[state=open]:group-hover:-translate-x-1" />
                  </div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature81 };