"use client";

import { AnimatePresence, motion } from "framer-motion";
import {
  BrushCleaning,
  Clock,
  CodeXml,
  Plug2,
  Snowflake,
  Zap,
} from "lucide-react";
import React, { useState } from "react";

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

const FEATURES = [
  {
    id: "plug-play",
    title: "مدیریت محصول",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    icon: Plug2,
  },
  {
    id: "customizable",
    title: "پرداخت امن",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    icon: CodeXml,
  },
  {
    id: "design-control",
    title: "ردیابی سفارش",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    icon: Snowflake,
  },
  {
    id: "updates",
    title: "تخفیف هوشمند",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    icon: Clock,
  },
  {
    id: "clean-code",
    title: "موجودی انبار",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    icon: BrushCleaning,
  },
  {
    id: "performance",
    title: "بازگشت مشتری",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    icon: Zap,
  },
] as const;

interface Feature276Props {
  className?: string;
}

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

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden py-32", className)}
    >
      <div className="container flex w-full flex-col items-center justify-center px-4">
        <p className="rounded-full bg-muted px-4 py-1 text-xs">
          فروش آنلاین
        </p>
        <h2 className="relative z-20 py-2 text-center font-sans text-2xll font-semibold tracking-tighter text-balance md:py-7 lg:text-2xll">
          فروشگاه
        </h2>
        <p className="text-md mx-auto max-w-xl text-center text-pretty text-muted-foreground lg:text-lg">
          مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
        </p>

        <div className="relative mt-10 grid w-full max-w-4xl 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="absolute inset-0 block h-full w-full rounded-2xl bg-muted-foreground/20"
                    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}
                className="flex flex-col items-center justify-center"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature276 };

const Card = ({
  className,
  title,
  description,
  icon: Icon,
}: {
  className?: string;
  title: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
}) => {
  return (
    <div
      className={cn(
        "relative z-20 flex h-full flex-col items-center justify-center gap-4 rounded-2xl bg-muted p-5 text-center",
        className,
      )}
    >
      <Icon className="mt-3 size-8 stroke-1 text-muted-foreground" />
      <h3 className="text-xl font-semibold tracking-tight">{title}</h3>
      <p className="text-pretty text-sm text-muted-foreground">{description}</p>
    </div>
  );
};