"use client";

import {
  DollarSign,
  MessagesSquare,
  PersonStanding,
  Timer,
  Zap,
  ZoomIn,
  type LucideIcon,
} from "lucide-react";
import { useState } from "react";

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

interface Feature {
  title: string;
  description: string;
  icon: LucideIcon;
}

const features: Feature[] = [
  {
    title: "تحلیل کانال",
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    icon: Timer,
  },
  {
    title: "اتوماسیون ایمیل",
    description:
      "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    icon: Zap,
  },
  {
    title: "A/B تست",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    icon: ZoomIn,
  },
  {
    title: "تقویم محتوا",
    description:
      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
    icon: PersonStanding,
  },
  {
    title: "ردیابی UTM",
    description:
      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    icon: DollarSign,
  },
  {
    title: "گزارش ROI",
    description:
      "چند کانال را همزمان اجرا کنید و عملکرد هر کمپین را در یک نما مقایسه کنید.",
    icon: MessagesSquare,
  },
];

interface Feature121Props {
  className?: string;
}

const Feature121 = ({ className }: Feature121Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("relative container py-32", className)}
    >
      <div className="m-auto grid w-full gap-px overflow-hidden rounded-md bg-border sm:max-w-[600px] sm:grid-cols-2">
        {features.map((feature) => (
          <Block key={feature.title} {...feature} />
        ))}
      </div>
    </section>
  );
};

export { Feature121 };

function Block({ title, description, icon: Icon }: Feature) {
  const [isBlockHover, setBlockHover] = useState(false);
  const [isBlockClick, setBlockClick] = useState(false);

  return (
    <section
      className="relative aspect-square h-auto cursor-pointer overflow-hidden bg-accent px-6 py-3.5 text-start transition duration-300 hover:bg-[#e9e9e9] sm:aspect-auto sm:h-[300px]"
      onMouseOver={() => setBlockHover(true)}
      onMouseOut={() => setBlockHover(false)}
      onClick={() => setBlockClick((prev) => !prev)}
      aria-label={title}
    >
      <p className="ms-auto text-lg text-balance">{title}</p>

      <div
        className={cn(
          "absolute inset-0 m-auto flex size-36 min-h-36 min-w-36 shrink-0 items-center justify-center rounded-full bg-primary transition duration-300 sm:h-28 sm:min-h-28 sm:w-28 sm:min-w-28 md:size-12",
          isBlockHover && "scale-110 shadow-xl",
          isBlockClick && "-translate-y-40 opacity-0",
        )}
      >
        <Icon className="size-8 invert md:size-10" />
      </div>

      <p
        className={cn(
          "absolute inset-0 m-auto h-fit translate-y-40 px-6 py-3.5 opacity-0 transition duration-300",
          isBlockClick && "translate-y-0! opacity-100!",
        )}
      >
        {description}
      </p>
    </section>
  );
}