"use client";

import { useEffect, useState } from "react";
import { FaLinkedin } from "react-icons/fa";
import { FaBluesky, FaXTwitter } from "react-icons/fa6";

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

interface Changelog4Props {
  className?: string;
}

const Changelog4 = ({ className }: Changelog4Props) => {
  const [scrollProgress, setScrollProgress] = useState(8);

  useEffect(() => {
    const handleScroll = () => {
      const totalHeight =
        document.documentElement.scrollHeight - window.innerHeight;
      const progress = (window.scrollY / totalHeight) * 92 + 8;
      setScrollProgress(Math.min(progress, 100));
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto w-full max-w-5xl md:px-10">
          <div className="flex flex-col gap-16">
            <h1 className="text-2xll font-bold">تاریخچه نسخه‌ها</h1>
            <div className="mx-auto flex w-full items-center justify-center gap-2 rounded-2xl bg-muted p-3 md:gap-4">
              <a href="#" aria-label="لینکدین">
                <FaLinkedin className="size-6 text-muted-foreground duration-150 hover:text-primary" />
              </a>
              <a href="#" aria-label="ایکس (توییتر)">
                <FaXTwitter className="size-6 text-muted-foreground duration-150 hover:text-primary" />
              </a>
              <a href="#" aria-label="بلوسکای">
                <FaBluesky className="size-6 text-muted-foreground duration-150 hover:text-primary" />
              </a>
              <p className="text-sm text-muted-foreground">
                برای خبر نسخه و قابلیت تازه، ما را دنبال کنید.
                                            </p>
            </div>
            <div className="relative space-y-20">
              <div className="absolute top-4 hidden h-full w-0.5 md:-inset-s-12 md:block lg:-inset-s-14">
                <div className="h-full w-full rounded-full bg-muted">
                  <div
                    className="relative max-h-full w-full rounded-full bg-linear-to-b from-primary/20 via-primary/40 to-primary transition-all duration-300"
                    style={{
                      height: `${scrollProgress}%`,
                    }}
                  ></div>
                </div>
              </div>
              <div className="relative">
                <span className="absolute top-2 hidden size-5 -translate-x-1/2 place-items-center rounded-full border bg-background md:-inset-s-12 md:grid lg:-inset-s-[55px]">
                  <span className="size-2 rounded-full bg-primary" />
                </span>
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="به‌روزرسانی زیرساخت و عملکرد"
                  className="aspect-video rounded-md border border-border object-cover"
                />
                <div className="my-4 flex items-center gap-2">
                  <Avatar className="size-8 rounded-full border border-border">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-1.webp"
                      alt="نویسنده"
                    />
                  </Avatar>
                  <time className="text-sm text-muted-foreground">
                    ۲۳ بهمن ۱۴۰۳
                  </time>
                </div>
                <div className="prose max-w-none dark:prose-invert">
                  <h2 className="text-xl">
                    ارتقای زیرساخت و بهبود سرعت پلتفرم
                  </h2>
                  <p>
                    پشته فناوری خود را ارتقا دادیم تا از{" "}
                    <b>جدیدترین فناوری‌های وب</b> بهره ببریم و عملکرد و
                    تجربه توسعه بهتری در سراسر پلتفرم فراهم کنیم.
                  </p>
                  <h3>به‌روزرسانی‌های فریم‌ورک:</h3>
                  <ul>
                    <li>
                      <b>رابط کاربری نسل جدید</b>  رندر همزمان و دسته‌بندی خودکار برای
                      عملکرد بهتر.
                    </li>
                    <li>
                      <b>زبان نوع‌ایمن ۵</b>  استنتاج نوع بهتر و پشتیبانی از
                      دکوراتورها.
                    </li>
                    <li>
                      <b>ابزار ساخت ۵</b>  بیلد بسیار سریع و جایگزینی ماژول
                      داغ بهبودیافته.
                    </li>
                  </ul>
                  <p>
                    درباره پشته فناوری ما در{" "}
                    <a href="#">مستندات</a> بیشتر بخوانید.
                  </p>
                  <h3>بهبودهای عملکرد:</h3>
                  <ul>
                    <li>
                      <b>بارگذاری تنبل</b>  کاهش زمان بارگذاری اولیه و
                      بهبود تجربه کاربری.
                    </li>
                    <li>
                      <b>تقسیم کد</b>  سازماندهی بهتر کد و نگهداری آسان‌تر.
                    </li>
                  </ul>
                </div>
              </div>
              <div className="relative">
                <span className="absolute top-2 hidden size-5 -translate-x-1/2 place-items-center rounded-full border bg-background md:-inset-s-12 md:grid lg:-inset-s-[55px]">
                  <span className="size-2 rounded-full bg-primary" />
                </span>
                <img
                  src="/block-media/shadcnblocks/block/placeholder-2.svg"
                  alt="به‌روزرسانی زیرساخت و امنیت داده"
                  className="aspect-video rounded-md border border-border object-cover"
                />
                <div className="my-4 flex items-center gap-2">
                  <Avatar className="size-8 rounded-full border border-border">
                    <AvatarImage
                      src="/block-media/shadcnblocks/block/avatar-2.webp"
                      alt="نویسنده"
                    />
                  </Avatar>
                  <time className="text-sm text-muted-foreground">
                    ۲ مهر ۱۴۰۳
                  </time>
                </div>
                <div className="prose max-w-none dark:prose-invert">
                  <h2 className="text-xl">
                    به‌روزرسانی زیرساخت و امنیت داده
                  </h2>
                  <p>
                    بهبودهای قابل توجهی در زیرساخت و امنیت اعمال کردیم تا
                    پلتفرمی پایدارتر و امن‌تر داشته باشید.
                  </p>
                  <h3>به‌روزرسانی‌های زیرساخت:</h3>
                  <ul>
                    <li>
                      <b>کانتینرهای کانتینر</b>  یکنواختی بیشتر در استقرار و
                      مقیاس‌پذیری
                    </li>
                    <li>
                      <b>مدیریت کانتینر</b>  ارکستراسیون بهتر کانتینرها و
                      مقیاس‌دهی خودکار
                    </li>
                    <li>
                      <b>کش کش سریع</b>  زمان پاسخ سریع‌تر و کاهش بار پایگاه
                      داده
                    </li>
                  </ul>
                  <h3>بهبودهای امنیتی:</h3>
                  <ul>
                    <li>
                      <b>احراز هویت استاندارد</b>  جریان‌های احراز هویت و مجوزدهی
                      پیشرفته‌تر
                    </li>
                    <li>
                      <b>محدودیت نرخ درخواست</b>  محافظت در برابر حملات حمله سایبری
                      و سوءاستفاده
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Changelog4 };