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

interface Changelog3Props {
  className?: string;
}

const Changelog3 = ({ className }: Changelog3Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="space-y-10">
          <article className="relative mx-auto flex max-w-3xl flex-col gap-6 md:flex-row md:gap-10">
            <time className="h-fit text-sm font-semibold text-muted-foreground md:sticky md:top-10">
              ۲۳ بهمن ۱۴۰۳
            </time>
            <div>
              <div className="flex flex-wrap gap-4">
                <div className="flex items-center gap-1.5">
                  <span className="size-3 rounded-full bg-amber-400"></span>
                  <p className="text-sm font-semibold text-primary/80">
                    نگهداری
                  </p>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="size-3 rounded-full bg-purple-500"></span>
                  <p className="text-sm font-semibold text-primary/80">
                    مستندات
                  </p>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="size-3 rounded-full bg-blue-500"></span>
                  <p className="text-sm font-semibold text-primary/80">
                    ویژگی
                  </p>
                </div>
              </div>
              <div className="prose mt-6 dark:prose-invert">
                <h2>داشبورد و تحلیل فروش جدید</h2>
                <p>
                  بخش تحلیل و داشبورد مدیریتی بازطراحی شده تا اطلاعات دقیق‌تری از وضعیت محصول و کاربران در اختیار شما قرار دهد.
                                                    <br />
                  همانند سایر
                                                    <a href="#" className="mx-1 underline">
                    یکپارچه‌سازی‌ها
                  </a>
                  های پلتفرم با تمرکز بر امنیت، کارایی و سهولت استفاده طراحی شده‌اند تا بدون پیچیدگی قابل استفاده باشند.
                                                    <br />
                  <br />
                  همچنین تنظیمات مرتبط با حریم خصوصی، اعلان‌ها و قابلیت‌های مدیریتی به‌صورت یکپارچه در اختیار مدیران سیستم قرار گرفته است.
                                                    <br />
                  <br />
                  برای اطلاعات بیشتر، به
                  <a href="#" className="mx-1 underline">
                    مستندات
                  </a>
                  مراجعه کنید.
                </p>
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="داشبورد و تحلیل فروش جدید"
                  className="my-4 aspect-video rounded-lg border border-border object-cover"
                />
              </div>
            </div>
          </article>
          <Separator />
          <article className="relative mx-auto flex max-w-3xl flex-col gap-6 md:flex-row md:gap-10">
            <time className="h-fit text-sm font-semibold text-muted-foreground md:sticky md:top-10">
              ۹ بهمن ۱۴۰۳
            </time>
            <div>
              <div className="flex flex-wrap gap-4">
                <div className="flex items-center gap-1.5">
                  <span className="size-3 rounded-full bg-amber-400"></span>
                  <p className="text-sm font-semibold text-primary/80">
                    نگهداری
                  </p>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="size-3 rounded-full bg-purple-500"></span>
                  <p className="text-sm font-semibold text-primary/80">
                    مستندات
                  </p>
                </div>
                <div className="flex items-center gap-1.5">
                  <span className="size-3 rounded-full bg-red-500"></span>
                  <p className="text-sm font-semibold text-primary/80">
                    امنیت
                  </p>
                </div>
              </div>
              <div className="prose mt-6 dark:prose-invert">
                <h2>امنیت سازمانی پیشرفته</h2>
                <p>
                  زیرساخت امنیتی بازطراحی شده است تا حفاظت از داده‌ها، احراز هویت و کنترل دسترسی با استانداردهای روز انجام شود. همانند سایر
                                                    <a href="#" className="mx-1 underline">
                    ویژگی‌های امنیتی
                  </a>
                  قابلیت‌های امنیتی، این بخش نیز با رمزنگاری پیشرفته، پایش مداوم و استانداردهای امنیتی پیاده‌سازی شده است.
                                                    <br />
                  <br />
                  در این نسخه، پایش لحظه‌ای تهدیدها، پاسخ خودکار به رخدادهای امنیتی و مدیریت الزامات انطباق بهبود یافته است.
                                                    <br />
                  <br />
                  برای اطلاعات بیشتر، به
                  <a href="#" className="mx-1 underline">
                    مستندات امنیتی
                  </a>
                  ما مراجعه کنید.
                </p>
                <img
                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
                  alt="امنیت سازمانی پیشرفته"
                  className="my-4 aspect-video rounded-lg border border-border object-cover"
                />
              </div>
            </div>
          </article>
        </div>
      </div>
    </section>
  );
};

export { Changelog3 };