"use client";

import { Lightbulb } from "lucide-react";
import { useEffect, useRef, useState } from "react";

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Avatar, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Blogpost3Props {
  className?: string;
}

const formatPersianDate = (date: Date) =>
  new Intl.DateTimeFormat("fa-IR", {
    year: "numeric",
    month: "long",
    day: "numeric",
  }).format(date);

const Blogpost3 = ({ className }: Blogpost3Props) => {
  const [activeSection, setActiveSection] = useState<string | null>(null);
  const sectionRefs = useRef<Record<string, HTMLElement>>({});

  useEffect(() => {
    const sections = Object.keys(sectionRefs.current);

    const observerCallback = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setActiveSection(entry.target.id);
        }
      });
    };

    let observer: IntersectionObserver | null = new IntersectionObserver(
      observerCallback,
      {
        root: null,
        rootMargin: "0px",
        threshold: 1,
      },
    );

    sections.forEach((sectionId) => {
      const element = sectionRefs.current[sectionId];
      if (element) {
        observer?.observe(element);
      }
    });

    return () => {
      observer?.disconnect();
      observer = null;
    };
  }, []);

  const addSectionRef = (id: string, ref: HTMLElement | null) => {
    if (ref) {
      sectionRefs.current[id] = ref;
    }
  };

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-5xl flex-col items-center gap-5">
          <Badge variant="secondary">به‌روزرسانی محصول</Badge>
          <h1 className="text-center text-3xl font-medium text-pretty lg:text-2xll">
            ابزارهای جدید اتوماسیون بازاریابی برای افزایش نرخ تبدیل
          </h1>
          <p className="text-center text-muted-foreground lg:text-lg">
            ببینید قابلیت‌های جدید اتوماسیون ما چطور می‌تواند بهره‌وری تیم
            فروش شما را متحول کند. با جدیدترین ابزارها و امکانات برای افزایش
            نرخ تبدیل، کاهش کارهای دستی و بهبود همکاری در سازمان آشنا شوید.
          </p>
          <div className="mt-6 flex items-center gap-4">
            <Avatar className="size-12 border">
              <AvatarImage
                src="/block-media/shadcnblocks/block/avatar-2.webp"
                alt="علی رضایی"
              />
            </Avatar>
            <div className="text-start">
              <p className="text-sm font-medium">علی رضایی</p>
              <p className="text-sm text-muted-foreground">
                به‌روزرسانی در{" "}
                {formatPersianDate(new Date("2024-12-07"))}
              </p>
            </div>
          </div>
        </div>
        <div className="mx-auto mt-12 max-w-6xl rounded-lg border p-2">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر شاخص مطلب"
            className="aspect-video rounded-lg object-cover"
          />
        </div>
        <div className="relative mx-auto mt-12 grid max-w-6xl gap-8 lg:grid-cols-4">
          <div className="sticky top-8 hidden h-fit text-start lg:block">
            <span className="mb-6 text-lg">فهرست مطالب</span>
            <nav className="mt-2">
              <ul className="space-y-2">
                <li>
                  <a
                    href="#section1"
                    className={cn(
                      "block py-1 transition-colors duration-200",
                      activeSection === "section1"
                        ? "font-medium text-primary"
                        : "text-muted-foreground hover:text-primary",
                    )}
                  >
                    چرا اتوماسیون بازاریابی مهم است؟
                                                        </a>
                </li>
                <li>
                  <a
                    href="#section2"
                    className={cn(
                      "block py-1 transition-colors duration-200",
                      activeSection === "section2"
                        ? "font-medium text-primary"
                        : "text-muted-foreground hover:text-primary",
                    )}
                  >
                    بهترین روش‌ها
                                                        </a>
                </li>
                <li>
                  <a
                    href="#section3"
                    className={cn(
                      "block py-1 transition-colors duration-200",
                      activeSection === "section3"
                        ? "font-medium text-primary"
                        : "text-muted-foreground hover:text-primary",
                    )}
                  >
                    جمع‌بندی
                                                        </a>
                </li>
              </ul>
            </nav>
          </div>
          <div className="lg:col-span-2">
            <div className="lg:col-span-2">
              <div>
                <h1 className="text-3xl font-extrabold">راهنمای طراحی رابط کاربری مدرن با رابط کاربری</h1>
                <p className="mt-2 text-lg text-muted-foreground">
                  طراحی رابط کاربری مدرن تنها به ظاهر زیبا محدود نمی‌شود. استفاده از کامپوننت‌های قابل استفاده مجدد و رعایت اصول تجربه کاربری، توسعه محصولات باکیفیت را ساده‌تر می‌کند.
                                                  </p>
                <img
                  src="/block-media/shadcnblocks/block/placeholder-1.svg"
                  alt="داشبورد خودکارسازی بازاریابی"
                  className="my-8 aspect-video w-full rounded-md object-cover"
                />
              </div>
              <section
                id="section1"
                ref={(ref) => addSectionRef("section1", ref)}
                className="prose mb-8 dark:prose-invert"
              >
                <h2>چرا معماری کامپوننت‌محور؟</h2>
                <p>
                  معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
                                                  </p>
                <Alert>
                  <Lightbulb className="h-4 w-4" />
                  <AlertTitle>نکته مهم</AlertTitle>
                  <AlertDescription>
                    پیش از شروع توسعه، ساختار طراحی، رنگ‌ها و کامپوننت‌های پایه را مشخص کنید تا محصولی یکپارچه داشته باشید.
                                                        </AlertDescription>
                </Alert>
              </section>

              <section
                id="section2"
                ref={(ref) => addSectionRef("section2", ref)}
                className="prose mb-8 dark:prose-invert"
              >
                <h2>بهترین روش‌ها</h2>
                <p>
                  استفاده از سیستم طراحی، نام‌گذاری استاندارد و مستندسازی کامپوننت‌ها کیفیت توسعه را در پروژه‌های بزرگ افزایش می‌دهد.
                                                  </p>
                <div>
                  <table>
                    <thead>
                      <tr>
                        <th>تعداد لید</th>
                        <th>نرخ تبدیل</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>{(120).toLocaleString("fa-IR")}</td>
                        <td>{(8).toLocaleString("fa-IR")}٪</td>
                      </tr>
                      <tr className="m-0 border-t p-0 even:bg-muted">
                        <td>{(340).toLocaleString("fa-IR")}</td>
                        <td>{(14).toLocaleString("fa-IR")}٪</td>
                      </tr>
                      <tr className="m-0 border-t p-0 even:bg-muted">
                        <td>{(520).toLocaleString("fa-IR")}</td>
                        <td>{(22).toLocaleString("fa-IR")}٪</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <p>
                  معماری کامپوننت‌محور باعث کاهش تکرار کد، نگهداری آسان‌تر پروژه و توسعه سریع‌تر قابلیت‌های جدید می‌شود.
                                                  </p>
              </section>

              <section
                id="section3"
                ref={(ref) => addSectionRef("section3", ref)}
                className="prose mb-8 dark:prose-invert"
              >
                <h2>جمع‌بندی</h2>
                <p>
                  برای شروع کافی است{" "}
                  <a href="#">یک ساختار مناسب</a> را برای پروژه خود انتخاب کنید و به‌مرور توسعه دهید.
                                                  </p>
                <blockquote>
                  «رابط کاربری خوب فقط زیبا نیست؛ استفاده از آن باید ساده، سریع و لذت‌بخش باشد.»
                                                  </blockquote>
                <p>
                  برای بهبود نرخ تبدیل، این سه اصل را در اولویت قرار دهید:
                </p>
                <ul>
                  <li>طراحی سیستم منسجم</li>
                  <li>کامپوننت‌های قابل استفاده مجدد</li>
                  <li>مستندسازی استاندارد</li>
                </ul>
                <p>
                  با رعایت این اصول، توسعه پروژه سریع‌تر، نگهداری آن ساده‌تر و تجربه کاربران نیز بهتر خواهد بود.
                                                  </p>
              </section>
            </div>
          </div>
          <div className="sticky top-8 prose hidden h-fit rounded-lg border p-6 text-start lg:block dark:prose-invert">
            <h5 className="text-xl font-semibold">با راهکار ما شروع کنید</h5>
            <ul className="my-6 text-sm [&>li]:ps-0 [&>li]:pe-0">
                  <li>افزایش ۴۰٪ نرخ تبدیل با امتیازدهی لید</li>
                  <li>کاهش ۶۰٪ زمان پاسخ‌گویی به مشتریان</li>
                  <li>گزارش‌های دقیق فروش با داشبورد بلادرنگ</li>
            </ul>
            <div className="flex flex-col gap-2">
              <Button>شروع کنید</Button>
              <Button variant="outline">بیشتر بدانید</Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blogpost3 };