"use client";

import { AnimatePresence, motion } from "framer-motion";
import {
  ArrowRight,
  BadgeDollarSign,
  CodeXml,
  Plug2,
  Snowflake,
} from "lucide-react";
import React, { useState } from "react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const FEATURES = [
  {
    id: "realtime-tracking",
    title: "پیشنهاد عنوان",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: Plug2,
    color: "text-pink-500",
    bgColor: "bg-pink-500/10",
  },
  {
    id: "customizable",
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: CodeXml,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
  },
  {
    id: "design-control",
    title: "ممیزی فنی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: Snowflake,
    color: "text-sky-500",
    bgColor: "bg-sky-500/10",
  },
  {
    id: "pricing",
    title: "ردیابی رتبه",
    description:
      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    icon: BadgeDollarSign,
    color: "text-green-500",
    bgColor: "bg-green-500/10",
  },
] as const;

interface Feature277Props {
  className?: string;
}

const Feature277 = ({ className }: Feature277Props) => {
  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-5xl grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
          {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 bg-muted-foreground/20",
                      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}
                className="flex flex-col items-center justify-center"
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature277 };

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

      <Button
        variant="ghost"
        className="group/btn mt-8 w-full hover:opacity-50"
        asChild
      >
        <a href="#">
          محتوای SEO
          <ArrowRight className="ms-2 size-4 transition-transform group-hover/btn:translate-x-1 rtl:rotate-180 rtl:group-hover/btn:-translate-x-1" />
        </a>
      </Button>
    </div>
  );
};