"use client";

import type { Variants } from "framer-motion";
import { motion } from "framer-motion";
import { ArrowUpRight } from "lucide-react";

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

interface Project10Props {
  className?: string;
}

const Project10 = ({ className }: Project10Props) => {
  const images = [
    {
      src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
      alt: "موکاپ طراحی محصول",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
      alt: "معماری فرانت‌اند",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
      alt: "نمای محصول",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
      alt: "طراحی رابط دیجیتال",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
      alt: "بصری صفحه فرود بازاریابی",
    },
  ];

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

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

  const imageVariants: Variants = {
    hidden: { opacity: 0, scale: 0.95 },
    visible: {
      opacity: 1,
      scale: 1,
      transition: {
        duration: 0.8,
        ease: "easeOut",
      },
    },
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <motion.div
        className="container"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
      >
        <motion.header
          className="mb-12 flex flex-col gap-6 text-start lg:flex-row lg:items-start lg:justify-between"
          variants={itemVariants}
        >
          <div className="flex-1">
            <h1 className="mb-4 text-4xl font-bold sm:text-5xl lg:text-6xl">اتوماسیون بازاریابی</h1>
            <p className="max-w-md text-base leading-relaxed text-muted-foreground sm:text-lg">پشت هر رابط ساده، معماری منظمی از کامپوننت‌ها و توکن‌های طراحی نهفته است.</p>
          </div>

          <div className="flex flex-col gap-4 sm:flex-row lg:flex-col lg:items-end lg:gap-6">
            <Button
              variant="outline"
              size="sm"
              className="w-fit gap-2 border-muted-foreground/20 bg-transparent hover:bg-muted/10"
            >
              مشاهده مطالعه موردی
              <ArrowUpRight className="h-4 w-4 rtl:rotate-180" />
            </Button>

            <div className="flex gap-8 sm:gap-12">
              <div className="text-sm">
                <p className="mb-1 text-muted-foreground">حوزه</p>
                <p className="font-medium">طراحی</p>
              </div>
              <div className="text-sm">
                <p className="mb-1 text-muted-foreground">رسانه</p>
                <p className="font-medium">نمایش دیزاین سیستم</p>
              </div>
            </div>
          </div>
        </motion.header>

        <motion.div
          className="mb-16 overflow-hidden rounded-2xl bg-muted/20"
          variants={imageVariants}
        >
          <img
            src="/block-media/shadcnblocks/block/lummi/bw14.jpeg"
            alt="تصویر شاخص پروژه"
            className="h-auto w-full object-cover"
          />
        </motion.div>

        <div className="mb-20 space-y-12 text-start lg:space-y-16">
          <motion.section variants={itemVariants}>
            <div className="grid items-start gap-8 border-b border-border pb-8 lg:grid-cols-2 lg:gap-12 lg:pb-12">
              <div>
                <span className="text-4xl font-light text-muted-foreground sm:text-5xl lg:text-6xl">
                  ۱
                </span>
                <h2 className="mt-4 text-2xl font-bold sm:text-3xl">الهام.</h2>
              </div>
              <div className="space-y-4">
                <p className="leading-relaxed text-muted-foreground">طراحی محصول از تجربه‌های همیشه در حال تغییر کاربر، نیازهای تازه و تنوع بسترها الهام می‌گیرد. هر تعامل منحصربه‌فرد است و فرصت‌های بی‌پایانی برای بهبود تجربه فراهم می‌آورد.</p>
                <p className="leading-relaxed text-muted-foreground">از صفحه ورود تا داشبورد نهایی، هر نما بخشی از یک تجربه کاربری پیوسته است.</p>
              </div>
            </div>
          </motion.section>

          <motion.section variants={itemVariants}>
            <div className="grid items-start gap-8 border-b border-border pb-8 lg:grid-cols-2 lg:gap-12 lg:pb-12">
              <div>
                <span className="text-4xl font-light text-muted-foreground sm:text-5xl lg:text-6xl">
                  ۲
                </span>
                <h2 className="mt-4 text-2xl font-bold sm:text-3xl">
                  چالش کسب‌وکار‌ها.
                </h2>
              </div>
              <div className="space-y-4">
                <p className="leading-relaxed text-muted-foreground">رسیدن به رابط ایده‌آل اغلب به تکرار صبورانه، تست با کاربر و توجه دقیق به جزئیات نیاز دارد. انعطاف‌پذیری، احترام به دسترس‌پذیری و دیدی دقیق لازم است.</p>
                <p className="leading-relaxed text-muted-foreground">غیرقابل‌پیش‌بینی بودن رفتار کاربر، هر طراحی را به چالش کسب‌وکاری ارزشمند تبدیل می‌کند.</p>
              </div>
            </div>
          </motion.section>

          <motion.section variants={itemVariants}>
            <div className="grid items-start gap-8 border-b border-border pb-8 lg:grid-cols-2 lg:gap-12 lg:pb-12">
              <div>
                <span className="text-4xl font-light text-muted-foreground sm:text-5xl lg:text-6xl">
                  ۳
                </span>
                <h2 className="mt-4 text-2xl font-bold sm:text-3xl">پاداش.</h2>
              </div>
              <div className="space-y-4">
                <p className="leading-relaxed text-muted-foreground">پاداش ساخت با بلاک‌های آماده در سرعت و کیفیت آن است؛ هر کامپوننت قابل‌استفاده مجدد، زمان توسعه را کوتاه‌تر و تجربه را یکدست‌تر می‌کند.</p>
                <p className="leading-relaxed text-muted-foreground">زیبایی محصولات دیجیتال را از دریچه طراحی ثبت می‌کند؛ از صفحه فرود تا داشبورد.</p>
              </div>
            </div>
          </motion.section>
        </div>

        <motion.section className="space-y-4" variants={itemVariants}>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            {images.slice(0, 2).map((image, index) => (
              <motion.div
                key={index}
                className="overflow-hidden rounded-xl bg-muted/20"
                variants={imageVariants}
              >
                <img
                  src={image.src || "/placeholder.svg"}
                  alt={image.alt}
                  className="h-64 w-full object-cover transition-transform duration-500 hover:scale-105 sm:h-80 lg:h-96"
                />
              </motion.div>
            ))}
          </div>

          <div className="relative overflow-hidden rounded-xl">
            <motion.div
              className="flex gap-4"
              animate={{
                x: [0, 400, 800, 0],
              }}
              transition={{
                duration: 12,
                repeat: Number.POSITIVE_INFINITY,
                ease: "linear",
              }}
            >
              {images.slice(2, 5).map((image, index) => (
                <motion.div
                  key={index}
                  className="w-80 flex-shrink-0 overflow-hidden rounded-xl bg-muted/20 sm:w-96"
                  variants={imageVariants}
                >
                  <img
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    className="h-48 w-full object-cover sm:h-64"
                  />
                </motion.div>
              ))}

              {images.slice(2, 5).map((image, index) => (
                <motion.div
                  key={`duplicate-${index}`}
                  className="w-80 flex-shrink-0 overflow-hidden rounded-xl bg-muted/20 sm:w-96"
                  variants={imageVariants}
                >
                  <img
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    className="h-48 w-full object-cover sm:h-64"
                  />
                </motion.div>
              ))}
            </motion.div>
          </div>
        </motion.section>
      </motion.div>
    </section>
  );
};

export { Project10 };