"use client";

import type { Variants } from "framer-motion";
import { motion } from "framer-motion";

import { Card } from "@/components/ui/card";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

const SERVICES = [
  {
    id: "01",
    number: "۱",
    title: "گزارش‌ساز",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    image: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
    imageAlt: "گزارش‌ساز",
  },
  {
    id: "02",
    number: "۲",
    title: "Pivot تعاملی",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    image: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
    imageAlt: "تحلیل داده سازمان",
  },
  {
    id: "03",
    number: "۰۳",
    title: "داشبورد مدیریتی",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    image: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
    imageAlt: "داشبورد هوش تجاری",
  },
  {
    id: "04",
    number: "۰۴",
    title: "اتصال منبع",
    description:
      "داده پراکنده را در یک مدل واحد ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
    imageAlt: "گزارش‌ساز",
  },
  {
    id: "05",
    number: "۰۵",
    title: "سطح دسترسی",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    image: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
    imageAlt: "تحلیل داده سازمان",
  },
  {
    id: "06",
    number: "۰۶",
    title: "تحلیل پیش‌بین",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    image: "/block-media/shadcnblocks/block/lummi/person5.jpeg",
    imageAlt: "داشبورد هوش تجاری",
  },
] as const;

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const cardVariants: Variants = {
  hidden: { opacity: 0, y: 30 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } },
};

interface Feature266Props {
  className?: string;
}

const Feature266 = ({ className }: Feature266Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <motion.div
          className="mb-16 text-center"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          <p className="mb-4 text-sm tracking-widest text-muted-foreground">
            داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
          </p>
          <h1 className="text-xl font-light tracking-wide text-balance md:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
            <br />
            هر تیم داشبورد خودش را داشته باشد
          </h1>
        </motion.div>

        <motion.div
          className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
          variants={containerVariants}
          initial="hidden"
          animate="visible"
        >
          {SERVICES.map((service) => (
            <motion.div
              key={service.id}
              variants={cardVariants}
              className="group cursor-pointer"
            >
              <Card className="border-border/20 bg-card/5 p-8 backdrop-blur-sm transition-colors duration-300 hover:bg-card/10">
                <p className="mb-8 text-xs tracking-widest text-muted-foreground">
                  {service.number}
                </p>

                <div className="relative mb-8 flex h-40 items-center justify-center">
                  <TooltipProvider delayDuration={0}>
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <div className="h-32 w-24 overflow-hidden rounded-lg border border-border/30 bg-linear-to-br from-primary/30 to-secondary/30 shadow-lg">
                          <img
                            src={service.image}
                            alt={service.imageAlt}
                            className="size-full object-cover"
                          />
                        </div>
                      </TooltipTrigger>
                      <TooltipContent side="top" align="center" className="p-2">
                        <img
                          src={service.image}
                          alt={`${service.imageAlt}  بزرگ`}
                          className="h-60 w-40 rounded-md object-cover"
                        />
                      </TooltipContent>
                    </Tooltip>
                  </TooltipProvider>
                </div>

                <h3 className="mb-2 text-center text-lg font-light tracking-wide text-balance transition-colors duration-300 group-hover:text-primary">
                  {service.title}
                </h3>
                <p className="text-center text-sm text-pretty text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80">
                  {service.description}
                </p>
              </Card>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
};

export { Feature266 };