"use client";

import { ArrowLeft } from "lucide-react";
import { motion } from "motion/react";

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

const headingLines = [
  "در قلب داده‌های فروش",
  "تجربه‌ای از طراحی داشبورد محصول",
  "برای تصمیم‌گیری سریع‌تر",
];

const maskReveal = {
  hidden: { clipPath: "inset(0% 0% 0% 100%)", opacity: 0 },
  visible: {
    clipPath: "inset(0% 0% 0% 0%)",
    opacity: 1,
  },
};

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: {
    opacity: 1,
    y: 0,
  },
};

interface Project12Props {
  className?: string;
}

const Project12 = ({ className }: Project12Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container space-y-12">
        <div className="flex flex-col gap-8 text-start lg:flex-row lg:items-start lg:justify-between lg:gap-16">
          <div className="flex-1 lg:max-w-2xl">
            <motion.div
              initial="hidden"
              animate="visible"
              variants={fadeUp}
              transition={{ delay: 0.5, duration: 0.8, ease: "easeOut" }}
            >
              <Button
                variant="secondary"
                className="mb-6 h-auto p-1 font-normal text-muted-foreground hover:text-foreground"
              >
                <ArrowLeft className="ms-2 h-4 w-4 rtl:rotate-180" />
                بازگشت
              </Button>
            </motion.div>

            <div className="space-y-2 overflow-hidden">
              {headingLines.map((line, i) => (
                <motion.h1
                  key={i}
                  className="text-3xl leading-tight font-bold text-foreground md:text-4xl lg:text-5xl"
                  initial="hidden"
                  animate="visible"
                  variants={maskReveal}
                  transition={{
                    delay: i * 0.3,
                    duration: 0.9,
                    ease: "easeInOut",
                  }}
                >
                  {line}
                </motion.h1>
              ))}
            </div>
          </div>

          <motion.div
            className="mt-1 flex-shrink-0 lg:w-80"
            initial="hidden"
            animate="visible"
            variants={fadeUp}
            transition={{ delay: 0.7, duration: 0.8, ease: "easeOut" }}
          >
            <div className="space-y-6">
              <p className="text-sm leading-relaxed text-muted-foreground">این پروژه تجربه مرور مطالعات موردی را از مسیر یک رابط روان بازطراحی می‌کند. مجموعه‌ای از بهترین نتایج سازمان مشتریان با هدف نمایش ROI و معیارهای قابل اندازه‌گیری.</p>

              <div className="space-y-4">
                {[
                  ["سال همکاری", "۲۲۵"],
                  ["پروژه", "داشبورد مطالعات موردی B2B"],
                  ["لوممی", "نمای کلی"],
                ].map(([label, value], i) => (
                  <motion.div
                    key={label}
                    variants={fadeUp}
                    transition={{
                      delay: 0.9 + i * 0.2,
                      duration: 0.8,
                      ease: "easeOut",
                    }}
                    initial="hidden"
                    animate="visible"
                  >
                    <p className="mb-1 text-xs tracking-wide text-muted-foreground">
                      {label}
                    </p>
                    <p className="font-medium text-foreground">{value}</p>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>
        </div>

        <motion.div
          className="w-full"
          initial={{ opacity: 0, y: 40, scale: 1.02 }}
          animate={{ opacity: 1, y: 0, scale: 1 }}
          transition={{ duration: 1.2, delay: 1, ease: "easeOut" }}
        >
          <img
            src="/block-media/shadcnblocks/block/photos/pat-whelen-gWfpmH0H2bM-unsplash.jpg"
            alt="طراح محصول"
            className="w-full rounded-xl border border-border object-cover shadow-xl"
          />
        </motion.div>
      </div>
    </section>
  );
};

export { Project12 };