"use client";

import { motion } from "framer-motion";

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

interface Project14Props {
  className?: string;
}

const Project14 = ({ className }: Project14Props) => {
  const fadeInUp = {
    initial: { opacity: 0, y: 40 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.7, ease: "easeOut" },
  };

  const staggerContainer = {
    initial: {},
    animate: {
      transition: {
        staggerChildren: 0.18,
        delayChildren: 0.2,
      },
    },
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <motion.div
          className="mb-16 text-center"
          variants={fadeInUp}
          initial="initial"
          animate="animate"
        >
          <motion.p
            className="mb-4 text-sm tracking-widest text-muted-foreground"
            variants={fadeInUp}
          >
            پروژه
          </motion.p>
          <motion.h1
            className="text-2xl font-bold tracking-wide md:text-5xl lg:text-7xl"
            variants={fadeInUp}
          >
            آستین موتورز
          </motion.h1>
        </motion.div>

        <motion.div
          className="mb-24 grid gap-6 md:grid-cols-2"
          variants={staggerContainer}
          initial="initial"
          animate="animate"
        >
          <motion.div
            className="relative overflow-hidden rounded-md"
            variants={fadeInUp}
          >
            <motion.div
              className="relative h-[400px] w-full"
              whileHover={{ scale: 1.03 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <img
                src="/block-media/shadcnblocks/block/lummi/bw1.jpeg"
                alt="نمای محصول با انیمیشن حرکت روان"
                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
              />
            </motion.div>
          </motion.div>
          <motion.div
            className="relative overflow-hidden rounded-md"
            variants={fadeInUp}
          >
            <motion.div
              className="relative h-[400px] w-full"
              whileHover={{ scale: 1.03 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <img
                src="/block-media/shadcnblocks/block/lummi/bw2.jpeg"
                alt="نمای اصلی محصول با تم دراماتیک"
                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
              />
            </motion.div>
          </motion.div>
        </motion.div>

        <motion.div
          className="mb-16 text-center"
          variants={staggerContainer}
          initial="initial"
          animate="animate"
        >
          <motion.div
            className="mb-12 flex items-center justify-evenly gap-4"
            variants={staggerContainer}
          >
            <motion.div variants={fadeInUp}>
              <p className="mb-2 text-xs tracking-widest text-muted-foreground">
                حوزه
              </p>
              <p className="font-medium tracking-wide md:text-lg">محصول</p>
            </motion.div>
            <motion.div variants={fadeInUp}>
              <p className="mb-2 text-xs tracking-widest text-muted-foreground">
                سال همکاری
              </p>
              <p className="font-medium tracking-wide md:text-lg">۲۲۵</p>
            </motion.div>
            <motion.div variants={fadeInUp}>
              <p className="mb-2 text-xs tracking-widest text-muted-foreground">محصول</p>
              <p className="font-medium tracking-wide md:text-lg">
                آستین لایف‌استایل
              </p>
            </motion.div>
          </motion.div>
          <motion.div className="mx-auto max-w-4xl" variants={fadeInUp}>
            <p className="leading-relaxed">آستین موتورز با این پروژه، پیکربندی‌گر آنلاین و وب‌سایت محصول خود را به یک تجربه دیجیتال مدرن تبدیل کرد. هر صفحه با بلاک‌های آماده ری یو آی ساخته شده تا تعهد برند به مهندسی دقیق و طراحی ماندگار در فضای وب هم بازتاب یابد؛ جایی که کامپوننت‌های استاندارد با یک تم اختصاصی درهم می‌آمیزند. نتیجه و شاخص‌ها، رابطی سریع، واکنش‌گرا و یکدست روی همه دستگاه‌هاست که هویت برند را در هر تعامل تقویت می‌کند.</p>
          </motion.div>
        </motion.div>

        <motion.div
          className="mb-6"
          variants={fadeInUp}
          initial="initial"
          animate="animate"
        >
          <motion.div
            className="relative overflow-hidden rounded-lg"
            whileHover={{ scale: 1.02 }}
            transition={{ duration: 0.4, ease: "easeOut" }}
          >
            <div className="relative h-[600px] w-full">
              <img
                src="/block-media/shadcnblocks/block/lummi/bw7.jpeg"
                alt="داشبورد محصول با کامپوننت‌های غنی و تم مدرن"
                className="h-full w-full object-cover grayscale filter duration-500 hover:scale-105"
              />
            </div>
          </motion.div>
        </motion.div>

        <motion.div
          className="grid gap-6 md:grid-cols-2"
          variants={staggerContainer}
          initial="initial"
          animate="animate"
        >
          <motion.div
            className="relative overflow-hidden rounded-md"
            variants={fadeInUp}
          >
            <motion.div
              className="relative h-[400px] w-full"
              whileHover={{ scale: 1.03 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <img
                src="/block-media/shadcnblocks/block/lummi/bw9.jpeg"
                alt="نمای جانبی محصول روی پس‌زمینه شهری"
                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
              />
            </motion.div>
          </motion.div>
          <motion.div
            className="relative overflow-hidden rounded-md"
            variants={fadeInUp}
          >
            <motion.div
              className="relative h-[400px] w-full"
              whileHover={{ scale: 1.03 }}
              transition={{ duration: 0.4, ease: "easeOut" }}
            >
              <img
                src="/block-media/shadcnblocks/block/lummi/bw5.jpeg"
                alt="نمای نزدیک کامپوننت و جزئیات تعامل"
                className="h-full w-full object-cover grayscale filter transition-transform duration-500 hover:scale-105"
              />
            </motion.div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
};

export { Project14 };