"use client";

import { AnimatePresence, motion } from "framer-motion";
import React, { useState } from "react";
import {
  FaCog,
  FaDollarSign,
  FaPalette,
  FaRocket,
  FaShieldAlt,
  FaUsers,
} from "react-icons/fa";

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

const FEATURES = [
  {
    id: "performance",
    title: "مدیریت دارایی",
    description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    icon: FaRocket,
    color: "text-pink-500",
    bgColor: "bg-pink-500/10",
  },
  {
    id: "setup",
    title: "بودجه‌بندی",
    description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    icon: FaCog,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
  },
  {
    id: "design",
    title: "مدیریت مالی",
    description: "درآمد و هزینه را در یک دفتر کل متمرکز دنبال کنید.",
    icon: FaPalette,
    color: "text-sky-500",
    bgColor: "bg-sky-500/10",
  },
  {
    id: "value",
    title: "ERP",
    description: "ورود و خروج کالا را لحظه‌ای ثبت کنید و اختلاف انبار را کم کنید.",
    icon: FaDollarSign,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
  },
  {
    id: "security",
    title: "ERP",
    description: "درخواست خرید تا سفارش تأمین‌کننده را در یک مسیر مدیریت کنید.",
    icon: FaShieldAlt,
    color: "text-purple-500",
    bgColor: "bg-purple-500/10",
  },
  {
    id: "support",
    title: "ERP",
    description: "فاکتور را سریع صادر کنید و وضعیت تسویه را شفاف ببینید.",
    icon: FaUsers,
    color: "text-orange-500",
    bgColor: "bg-orange-500/10",
  },
] as const;

interface Feature278Props {
  className?: string;
}

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

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("min-h-screen overflow-hidden bg-muted py-32", className)}
    >
      <div className="container flex w-full flex-col items-center justify-center px-4">
        <div className="max-w-5xl">
          <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7">
            ویژگی‌هایی که{" "}
            <br className="hidden lg:block" />
            <span className="opacity-50">ERP</span>
          </h2>

          <div className="relative grid w-full max-w-3xl grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
            {FEATURES.map((item, idx) => (
              <div
                key={item.id}
                className="group relative block h-full w-full p-2"
                onMouseEnter={() => setHoveredIndex(idx)}
                onMouseLeave={() => setHoveredIndex(null)}
              >
                <AnimatePresence mode="wait" initial={false}>
                  {hoveredIndex === idx && (
                    <motion.span
                      className={cn(
                        "absolute inset-0 block h-full w-full rounded-2xl",
                        item.bgColor,
                      )}
                      layoutId="hoverBackground"
                      key={item.id}
                      initial={{ opacity: 0 }}
                      animate={{ opacity: 1 }}
                      exit={{ opacity: 0 }}
                      transition={{ duration: 0.3 }}
                    />
                  )}
                </AnimatePresence>

                <Card
                  title={item.title}
                  description={item.description}
                  icon={item.icon}
                  color={item.color}
                  bgColor={item.bgColor}
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature278 };

const Card = ({
  className,
  title,
  description,
  bgColor,
  icon: Icon,
  color,
}: {
  className?: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
  bgColor: string;
  color: string;
}) => {
  return (
    <div
      className={cn(
        "relative z-20 flex h-full flex-col items-start justify-start gap-2 rounded-3xl bg-background p-5 text-start",
        className,
      )}
    >
      <div
        className={cn(
          "mb-12 flex size-15 items-center justify-center rounded-2xl bg-background",
          color,
          bgColor,
        )}
      >
        <Icon className="size-5" />
      </div>
      <h3 className="text-xl font-medium tracking-tight">{title}</h3>
      <p className="text-pretty text-sm text-muted-foreground/50">
        {description}
      </p>
    </div>
  );
};