"use client";

import { motion } from "framer-motion";

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

interface Project5eProps {
  className?: string;
}

const Project5e = ({ className }: Project5eProps) => {
  const fadeInUp = {
    initial: { opacity: 0, y: 20 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.6 },
  };

  const staggerContainer = {
    animate: {
      transition: {
        staggerChildren: 0.1,
      },
    },
  };

  const images = [
    {
      src: "/block-media/shadcnblocks/block/lummi/bw13.jpeg",
      alt: "داشبورد فروش",
      title: "داشبورد فروش",
      description: "نمایش KPIهای درآمد و نرخ تبدیل",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
      alt: "خط لوله معاملات",
      title: "خط لوله معاملات",
      description: "مدیریت بصری مراحل فروش",
    },
    {
      src: "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-g3U7sqtdJ1w-unsplash.jpg",
      alt: "گزارش عملکرد",
      title: "گزارش عملکرد",
      description: "تحلیل ROI کمپین‌های بازاریابی",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw14.jpeg",
      alt: "امتیازدهی لید",
      title: "امتیازدهی لید",
      description: "شناسایی خودکار لیدهای آماده خرید",
    },
    {
      src: "/block-media/shadcnblocks/block/photos/christin-hume-Hcfwew744z4-unsplash.jpg",
      alt: "اتوماسیون ایمیل",
      title: "اتوماسیون ایمیل",
      description: "جریان‌های ایمیل هدفمند برای هر بخش",
    },
    {
      src: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
      alt: "یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری",
      title: "یکپارچه‌سازی سامانه مدیریت ارتباط با مشتری",
      description: "اتصال به Salesforce و HubSpot",
    },
    {
      src: "/block-media/shadcnblocks/block/photos/tiny-home/erik-mclean-u9-yqtr6YrM-unsplash.jpg",
      alt: "تحلیل سازمان مشتری",
      title: "تحلیل سازمان مشتری",
      description: "بخش‌بندی و پیش‌بینی ریزش",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-24 md:py-32", className)}>
      <div className="container">
        <motion.header
          className="pb-16 md:pb-24"
          initial="initial"
          animate="animate"
          variants={staggerContainer}
        >
          <motion.div variants={fadeInUp} className="space-y-8 text-center">
            <div className="space-y-4">
              <div className="flex items-center justify-center gap-4">
                <div className="h-px w-24 bg-foreground"></div>
                <span className="text-sm font-medium tracking-wider text-muted-foreground">
                  CloudStar Analytics
                </span>
                <div className="h-px w-24 bg-foreground"></div>
              </div>
              <h1 className="text-5xl font-bold tracking-tight text-foreground md:text-6xl lg:text-7xl">
                پلتفرم تحلیل فروش
              </h1>
              <p className="mx-auto max-w-3xl text-lg leading-relaxed text-muted-foreground md:text-xl">
                مجموعه‌ای از داشبوردها و ابزارهای تحلیلی برای تیم‌های فروش
                و بازاریابی B2B. داده‌های زنده از سامانه مدیریت ارتباط با مشتری، اتوماسیون ایمیل و
                گزارش‌گیری در یک پلتفرم یکپارچه.
              </p>
            </div>

            <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
              <Button variant="outline" size="lg">
                درخواست دمو
              </Button>
              <div className="text-sm text-muted-foreground">
                مورد استفاده ۵۰۰+ شرکت B2B • ۲۰۲۴ • SaaS
              </div>
            </div>
          </motion.div>
        </motion.header>

        <motion.main
          initial="initial"
          animate="animate"
          variants={staggerContainer}
          className="space-y-16"
        >
          <motion.div
            variants={fadeInUp}
            className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"
          >
            {images.map((image, index) => (
              <motion.div
                key={index}
                variants={fadeInUp}
                className={`group relative overflow-hidden rounded-lg bg-muted/20 ${
                  index === 0 ? "md:col-span-2 lg:col-span-1" : ""
                } ${index === 3 ? "lg:col-span-2" : ""} ${
                  index === 6 ? "md:col-span-2 lg:col-span-1" : ""
                }`}
              >
                <div className="relative aspect-square overflow-hidden">
                  <img
                    src={image.src}
                    alt={image.alt}
                    className="absolute inset-0 size-full min-h-full min-w-full object-cover object-center transition-transform duration-700 group-hover:scale-105"
                  />
                  <div className="absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" />
                </div>

                <div className="absolute inset-x-0 bottom-0 translate-y-full bg-gradient-to-t from-background/90 to-transparent p-6 text-start transition-transform duration-300 group-hover:translate-y-0">
                  <h3 className="mb-2 text-lg font-semibold text-foreground">
                    {image.title}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {image.description}
                  </p>
                </div>
              </motion.div>
            ))}
          </motion.div>

          <motion.div
            variants={fadeInUp}
            className="mx-auto max-w-4xl space-y-8 text-center"
          >
            <div className="space-y-4">
              <h2 className="text-3xl font-bold text-foreground">
                قابلیت‌های کلیدی
              </h2>
              <p className="text-lg leading-relaxed text-muted-foreground">
                پلتفرم CloudStar Analytics به تیم‌های فروش کمک می‌کند
                داده‌های پراکنده را در یک داشبورد یکپارچه ببینند. از
                امتیازدهی لید تا گزارش ROI کمپین، همه‌چیز در یک نما.
              </p>
              <p className="leading-relaxed text-muted-foreground">
                هر ویجت برای تصمیم‌گیری سریع طراحی شده: خط لوله معاملات،
                نرخ تبدیل، پیش‌بینی درآمد و هشدارهای خودکار برای لیدهای
                داغ. یکپارچه با Salesforce، HubSpot و ابزارهای محبوب فروش.
              </p>
            </div>

            <div className="grid grid-cols-1 gap-8 text-center md:grid-cols-3">
              <div className="space-y-2">
                <div className="text-2xl font-bold text-foreground">۷</div>
                <div className="text-sm text-muted-foreground">ماژول تحلیلی</div>
              </div>
              <div className="space-y-2">
                <div className="text-2xl font-bold text-foreground">۵۰۰+</div>
                <div className="text-sm text-muted-foreground">
                  شرکت B2B
                </div>
              </div>
              <div className="space-y-2">
                <div className="text-2xl font-bold text-foreground">۴۰٪</div>
                <div className="text-sm text-muted-foreground">افزایش تبدیل</div>
              </div>
            </div>
          </motion.div>
        </motion.main>
      </div>
    </section>
  );
};

export { Project5e };