import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";

interface Changelog2Props {
  className?: string;
}

const Changelog2 = ({ className }: Changelog2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <h1 className="mb-6 text-2xll font-semibold md:text-2xll">
            تاریخچه نسخه‌ها
            <sup>
              <Badge className="ms-2 bg-emerald-400 hover:bg-emerald-400">
                جدید
              </Badge>
            </sup>
          </h1>
          <p className="mx-auto max-w-lg text-lg">
            قابلیت‌های تازه، بهبود عملکرد و رفع مشکل‌های پلتفرم فروش را اینجا دنبال کنید.
                                </p>
          <div className="mx-auto mt-10 flex w-full max-w-xs items-center gap-2">
            <Input
              type="email"
              placeholder="ایمیل برای خبرنامه نسخه"
            />
            <Button type="submit" aria-label="عضویت در خبرنامه محصول">
              <ArrowRight className="size-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
        <div className="mx-auto mt-20 max-w-xl space-y-10 border-s border-dashed border-border ps-6">
          <div>
            <p className="relative font-mono text-sm text-muted-foreground">
              <time className="absolute top-1 -inset-s-6 size-3 -translate-x-1/2 rounded-full bg-emerald-400"></time>
              ۲۲ دی ۱۴۰۳
            </p>
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="خروجی گزارش قوی‌تر"
              className="my-4 aspect-8/7 rounded-md object-cover"
            />
            <h2 className="mb-2 text-3xl font-semibold">خروجی گزارش قوی‌تر</h2>
            <p className="prose text-primary/80 dark:prose-invert">
              <a href="#">ماژول‌ها</a> و{" "}
              <a href="#">تحلیل‌ها</a> را توسعه داده‌ایم تا بتوانید عملکرد محصول، رفتار کاربران و شاخص‌های کلیدی را دقیق‌تر تحلیل کنید.
                                        <br />
              <br />
              همانند سایر <a href="#">یکپارچه‌سازی‌ها</a>های پلتفرم، این قابلیت نیز با راه‌اندازی ساده، امنیت بالا و رعایت استانداردهای حریم خصوصی ارائه شده است.
                                      </p>
          </div>
          <div>
            <p className="relative font-mono text-sm text-muted-foreground">
              <time className="absolute top-1 -inset-s-6 size-3 -translate-x-1/2 rounded-full bg-emerald-400"></time>
              ۳ دی ۱۴۰۳
            </p>
            <img
              src="/block-media/shadcnblocks/block/placeholder-2.svg"
              alt="داشبورد و تحلیل فروش جدید"
              className="my-4 aspect-8/7 rounded-md object-cover"
            />
            <h2 className="mb-2 text-3xl font-semibold">
              داشبورد و تحلیل فروش جدید
            </h2>
            <p className="prose text-primary/80 dark:prose-invert">
              <a href="#">ماژول‌ها</a> و{" "}
              <a href="#">تحلیل‌ها</a> را توسعه داده‌ایم تا بتوانید عملکرد محصول، رفتار کاربران و شاخص‌های کلیدی را دقیق‌تر تحلیل کنید.
                                        <br />
              <br />
              همانند سایر <a href="#">یکپارچه‌سازی‌ها</a>های پلتفرم، این قابلیت نیز با راه‌اندازی ساده، امنیت بالا و رعایت استانداردهای حریم خصوصی ارائه شده است.
                                      </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Changelog2 };