import { ArrowRight } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const CUSTOMER_DATA = {
  company: {
    logo: "/block-media/shadcnblocks/block/logos/company/fictional-company-logo-8.svg",
    name: "Monzo",
  },
  stats: [
    {
      number: "۴۵٪",
      text: "بهبود در تکمیل فرآیند ورود کاربر",
    },
    {
      number: "۶۱٪",
      text: "کاهش زمان دستیابی به ارزش",
    },
    {
      number: "۳ برابر",
      text: "افزایش فعال‌سازی کاربران",
    },
  ],
  author: {
    name: "نیلوفر حسینی",
    image: "/block-media/shadcnblocks/block/avatar-1.webp",
    role: "مدیر فناوری، Monzo",
  },
  title: "بهینه‌سازی جریان ورود کاربر و سه‌برابر شدن فعال‌سازی",
  summary:
    "نحوه بازطراحی تجربه ورود کاربر به محصول با ابزار داخلی و کاهش بیش از ۶۰٪ زمان دستیابی به ارزش",
  link: "#",
};

interface AuthorProps {
  image: string;
  name: string;
  role: string;
}

const Author = ({ image, name, role }: AuthorProps) => {
  return (
    <div className="flex items-center gap-2.5">
      <Avatar className="size-10 rounded-[.5rem] border bg-background">
        <AvatarImage src={image} alt={name} />
        <AvatarFallback>{name}</AvatarFallback>
      </Avatar>
      <div className="flex flex-col gap-0.5 text-start">
        <div className="text-sm leading-normal font-medium">{name}</div>
        <div className="text-sm leading-normal font-medium text-muted-foreground">
          {role}
        </div>
      </div>
    </div>
  );
};

interface CaseStudies4Props {
  className?: string;
}

const CaseStudies4 = ({ className }: CaseStudies4Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="flex w-full flex-col items-stretch justify-between gap-10 rounded-[.5rem] bg-muted p-10 lg:flex-row">
          <div className="flex w-full max-w-[30rem] flex-col gap-10 rounded-[.5rem] bg-background p-5">
            <div className="max-w-[4.875rem]">
              <img
                src={CUSTOMER_DATA.company.logo}
                alt={`لوگوی ${CUSTOMER_DATA.company.name}`}
                className="block size-full object-contain object-center"
              />
            </div>
            <div className="flex w-full flex-col gap-8 sm:flex-row">
              {CUSTOMER_DATA.stats.map((item, i) => (
                <div
                  className="flex flex-col gap-1 text-start"
                  key={`stats-use-case-${i}`}
                >
                  <div className="text-xl font-semibold">{item.number}</div>
                  <div className="text-sm font-medium text-muted-foreground">
                    {item.text}
                  </div>
                </div>
              ))}
            </div>
            <Author {...CUSTOMER_DATA.author} />
          </div>
          <div className="flex max-w-[32rem] flex-col gap-5 text-start">
            <h2 className="text-xl leading-none font-bold md:text-3xl lg:text-xl">
              {CUSTOMER_DATA.title}
            </h2>
            <p className="text-base font-medium text-foreground">
              {CUSTOMER_DATA.summary}
            </p>
            <div className="shrink-0">
              <Button asChild variant="outline" size="sm">
                <a href={CUSTOMER_DATA.link}>
                  مشاهده گزارش موفقیت
                  <ArrowRight className="rtl:rotate-180" />
                </a>
              </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { CaseStudies4 };