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

const SIDEBAR_INFO = [
  {
    label: "شرکت",
    value:
      "ری یو آی با استفاده از ری یو آی یک سیستم طراحی منسجم ایجاد کرد و توانست سرعت توسعه رابط کاربری و کیفیت محصول را به شکل چشمگیری افزایش دهد.",
    bordered: false,
  },
  {
    label: "حوزه",
    value: "فین‌تک",
    bordered: false,
  },
  {
    label: "موقعیت",
    value: "لندن، بریتانیا",
    bordered: true,
  },
  {
    label: "اندازه شرکت",
    value: "۱۱ تا ۵۰ نفر",
    bordered: false,
  },
  {
    label: "وب‌سایت",
    value: (
      <a href="#" className="underline hover:text-foreground">
        example.ir
      </a>
    ),
    bordered: false,
  },
  {
    label: "موضوعات",
    value: "سیستم طراحی، کامپوننت‌های رابط کاربری، ری یو آی",
    bordered: false,
  },
];

interface CaseStudy8Props {
  className?: string;
}

const CaseStudy8 = ({ className }: CaseStudy8Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col gap-12 lg:flex-row lg:gap-24">
        <article className="mx-auto text-start">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="پیش‌نمایش سیستم طراحی ری یو آی با ری یو آی"
            className="mb-8 aspect-video w-full max-w-3xl rounded-lg border object-cover"
          />
          <div className="prose text-start dark:prose-invert">
            <h1>چگونه ری یو آی با ری یو آی سیستم طراحی خود را ساخت</h1>
            <p>
              با رشد سریع محصول، حفظ یکپارچگی رابط کاربری دشوار شد. تیم ری یو آی با انتخاب ری یو آی به‌عنوان هسته سیستم طراحی، این چالش را برطرف کرد.
                                      </p>
            <h2>چرا ری یو آی؟</h2>
            <p>
              پس از بررسی گزینه‌های مختلف، shadcn/ui به دلیل انعطاف‌پذیری، مالکیت کامل کد و سازگاری با Tailwind CSS انتخاب شد.{" "}
              <a href="#">معیارهای انتخاب</a> که مهم‌ترین معیارهای آن سرعت توسعه، توسعه‌پذیری و سفارشی‌سازی بود.
                                      </p>
            <blockquote>
              «وقتی کامپوننت‌ها در اختیار تیم توسعه باشند، فاصله بین طراحی و
              پیاده‌سازی به حداقل می‌رسد.»
            </blockquote>
            <h3>ساخت کتابخانه کامپوننت</h3>
            <p>
              کتابخانه کامپوننت‌ها در سه لایه طراحی شد تا توسعه محصول ساختارمند و مقیاس‌پذیر باشد:
                                      </p>
            <ul>
              <li>پایه  دکمه‌ها، ورودی‌ها و فرم‌ها</li>
              <li>میانی  جداول، کارت‌ها و ناوبری</li>
              <li>پیشرفته  داشبوردها و جریان‌های چندمرحله‌ای</li>
            </ul>
            <p>
              تمام کامپوننت‌ها پیش از انتشار از نظر طراحی، دسترس‌پذیری و کیفیت فنی بررسی می‌شدند تا تجربه‌ای یکپارچه برای کاربران ایجاد شود.
                                      </p>
            <h3>همکاری بین تیم طراحی و توسعه</h3>
            <p>
              طراحان و توسعه‌دهندگان با استفاده از توکن‌های طراحی مشترک، فاصله بین طراحی و پیاده‌سازی را کاهش دادند و انتشار نسخه‌های جدید را سریع‌تر کردند.
                                      </p>
            <p>
              پس از سه ماه، بیش از ۸۰٪ صفحات جدید مستقیماً از کتابخانه داخلی
              ساخته می‌شدند و زمان تحویل فیچرها به‌طور میانگین ۳۵٪ کاهش یافت.
            </p>
            <h3>نتایج و تأثیر</h3>
            <p>
              یکپارچگی بصری و سرعت توسعه در طول زمان بهبود قابل‌توجهی داشت:
            </p>
            <div>
              <table>
                <thead>
                  <tr>
                    <th>یکپارچگی بصری</th>
                    <th>سرعت توسعه</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>پایین</td>
                    <td>کند</td>
                  </tr>
                  <tr className="m-0 border-t p-0 even:bg-muted">
                    <td>در حال بهبود</td>
                    <td>متوسط</td>
                  </tr>
                  <tr className="m-0 border-t p-0 even:bg-muted">
                    <td>بالا</td>
                    <td>سریع</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <p>
              امروزه سیستم طراحی ری یو آی به مرجع اصلی توسعه رابط کاربری تبدیل شده و هماهنگی میان تیم‌های طراحی، محصول و توسعه را تضمین می‌کند.
                                      </p>
            <p>
              این تجربه نشان داد سرمایه‌گذاری روی سیستم طراحی، علاوه بر کاهش هزینه‌های نگهداری، سرعت توسعه و کیفیت تجربه کاربری را نیز در بلندمدت افزایش می‌دهد.
                                      </p>
          </div>
        </article>

        <aside className="text-start lg:max-w-[300px]">
          <div className="flex flex-col items-start rounded-lg border border-border bg-accent py-6 md:py-8">
            <div className="mb-8 px-6">
              <img
                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
                alt="لوگوی ری یو آی"
                className="max-h-8 w-full"
              />
            </div>
            {SIDEBAR_INFO.map((item) => (
              <div
                key={item.label}
                className={cn(
                  "mb-5 px-6 last:mb-0",
                  item.bordered && "w-full border-t border-border pt-5",
                )}
              >
                <div className="mb-2 text-xs font-semibold">{item.label}</div>
                <div className="overflow-hidden text-xs text-muted-foreground md:text-sm">
                  {item.value}
                </div>
              </div>
            ))}
          </div>
        </aside>
      </div>
    </section>
  );
};

export { CaseStudy8 };