import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface CaseStudyStat {
  value: string;
  label: string;
  description: string;
}

interface CaseStudyItem {
  image: string;
  imageAlt: string;
  quote: string;
  authorName: string;
  authorRole: string;
  companyLogo: string;
  companyLogoAlt: string;
  stats: [CaseStudyStat, CaseStudyStat];
}

const CASE_STUDIES: CaseStudyItem[] = [
  {
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "مدیر محصول در حال بررسی داشبورد تیمی",
    quote:
      "این ابزار بهره‌وری نحوه همکاری ما را متحول کرد. جریان کار تیم به‌شکل چشمگیری بهتر شد و زمان جلسات را نصف کردیم، در حالی که خروجی بیشتر شد.",
    authorName: "محمد رضایی",
    authorRole: "مدیر محصول",
    companyLogo:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-2.svg",
    companyLogoAlt: "لوگوی شرکت",
    stats: [
      {
        value: "۹۸٪",
        label: "رضایت مشتریان",
        description: "از نظرات تأییدشده",
      },
      {
        value: "۳.۸x",
        label: "بهبود بازگشت سرمایه",
        description: "در سه‌ماهه اول",
      },
    ],
  },
  {
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "مدیر عملیات در جلسه برنامه‌ریزی تیم",
    quote:
      "رابط کاربری شهودی و متناسب با نیازهای ماست. با آموزش حداقلی در همه بخش‌ها اجرا کردیم و بلافاصله نتیجه گرفتیم.",
    authorName: "سارا احمدی",
    authorRole: "مدیر عملیات",
    companyLogo:
      "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg",
    companyLogoAlt: "لوگوی شرکت",
    stats: [
      {
        value: "۴.۲x",
        label: "کارایی تیم",
        description: "افزایش بهره‌وری اثبات‌شده",
      },
      {
        value: "۷۲٪",
        label: "کاهش زمان انجام کار",
        description: "در تمام پروژه‌ها",
      },
    ],
  },
];

interface CaseStudies2Props {
  className?: string;
}

const CaseStudies2 = ({ className }: CaseStudies2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex flex-col gap-6 text-center">
          <p className="font-medium">بیش از ۴۵۰۰ مشتری راضی</p>
          <h2 className="text-xl font-medium md:text-2xll">
            نتایج واقعی از کاربران واقعی
          </h2>
        </div>
        <div className="mt-20">
          {CASE_STUDIES.map((caseStudy, index) => (
            <div key={caseStudy.authorName}>
              {index > 0 && <Separator className="my-20" />}
              <div className="grid gap-16 lg:grid-cols-3 xl:gap-24">
                <div className="flex flex-col gap-10 border-border sm:flex-row lg:col-span-2 lg:border-e lg:pe-16 xl:pe-24">
                  <img
                    src={caseStudy.image}
                    alt={caseStudy.imageAlt}
                    className="aspect-29/35 h-full w-full max-w-60 rounded-2xl object-cover"
                  />
                  <div className="flex h-full flex-col justify-between gap-10">
                    <q className="text-start sm:text-xl">{caseStudy.quote}</q>
                    <div className="flex items-end gap-6">
                      <div className="flex flex-col gap-1 text-start">
                        <p className="text-lg font-semibold text-foreground">
                          {caseStudy.authorName}
                        </p>
                        <p className="text-muted-foreground">
                          {caseStudy.authorRole}
                        </p>
                      </div>
                      <img
                        src={caseStudy.companyLogo}
                        alt={caseStudy.companyLogoAlt}
                      />
                    </div>
                  </div>
                </div>
                <div className="flex gap-10 self-center lg:flex-col">
                  {caseStudy.stats.map((stat) => (
                    <div
                      key={stat.label}
                      className="flex flex-col gap-2 text-start"
                    >
                      <p className="text-xl font-medium text-foreground sm:text-2xll">
                        {stat.value}
                      </p>
                      <p className="font-semibold text-foreground">
                        {stat.label}
                      </p>
                      <p className="text-muted-foreground">
                        {stat.description}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { CaseStudies2 };