"use client";

import { Facebook, Home, Lightbulb, Linkedin, Twitter } 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 {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

interface Blogpost5Props {
  className?: string;
}

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

const Blogpost5 = ({ className }: Blogpost5Props) => {
  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">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink href="/">
                <Home className="h-4 w-4" />
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbLink href="/">کامپوننت‌ها</BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage>وبلاگ</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
        <h1 className="mt-9 mb-7 max-w-3xl text-start text-xl font-bold md:mb-10 md:text-2xll">
          چگونه نرخ تبدیل لیدها را ۴۰٪ با سامانه مدیریت ارتباط با مشتری هوشمند افزایش دهید
        </h1>
        <div className="flex flex-wrap items-center gap-3 text-sm md:text-base">
          <Avatar className="h-8 w-8 border">
            <AvatarImage
              src="/block-media/shadcnblocks/block/avatar-2.webp"
              alt="علی رضایی"
            />
          </Avatar>
          <span>
            <a href="#" className="font-medium">
              علی رضایی
            </a>
            <span className="ms-1 text-muted-foreground">
              در {formatPersianDate(new Date("2024-09-23"))}
            </span>
          </span>
        </div>
        <div className="relative mt-12 grid max-w-7xl gap-14 lg:mt-14 lg:grid lg:grid-cols-12 lg:gap-6">
          <div className="order-2 lg:order-none lg:col-span-8 lg:col-start-4">
            <div>
              <img
                src="/block-media/shadcnblocks/block/placeholder-1.svg"
                alt="تصویر شاخص مطلب"
                className="mt-0 mb-8 aspect-video w-full rounded-lg border object-cover"
              />
              <p className="text-start text-sm text-muted-foreground">
                اتوماسیون بازاریابی به معنای اجرای خودکار جریان‌های ایمیل،
                امتیازدهی لید و اختصاص معامله به فروشندگان بر اساس رفتار
                دیجیتال مخاطب است.
              </p>
            </div>
            <section
              id="section1"
              ref={(ref) => addSectionRef("section1", ref)}
              className="my-8 prose dark:prose-invert"
            >
              <h2>راه‌اندازی امتیازدهی لید</h2>
              <p>
                تیم بازاریابی CloudStar با{" "}
                <a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را
                شناسایی کرد.
              </p>
              <blockquote>
                لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود
                کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
              </blockquote>
              <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/B موضوع ایمیل</a> نرخ باز شدن را از ۱۸٪
                به ۲۶٪ رساند.
              </p>
              <blockquote>
                ایمیل‌های کوتاه با یک CTA واضح، نرخ کلیک ۳۵٪ بالاتری نسبت
                به ایمیل‌های چندبخشی داشتند.
              </blockquote>
              <p>
                سه نوع دنباله ایمیل برای بخش‌های مختلف قیف فروش طراحی شد:
              </p>
              <ul>
                <li>آگاهی: معرفی مشکل و راه‌حل</li>
                <li>بررسی: مقایسه با رقبا و مطالعه موردی</li>
                <li>تصمیم: دعوت به دمو و پیشنهاد آزمایشی</li>
              </ul>
              <p>
                زمان پاسخ فروش به لیدهای داغ از ۲۴ ساعت به کمتر از ۲ ساعت
                رسید و نرخ بستن معامله ۴۰٪ افزایش یافت.
              </p>
            </section>
          </div>
          <div className="order-1 flex h-fit flex-col text-start text-sm lg:sticky lg:top-8 lg:order-none lg:col-span-3 lg:col-start-1 lg:text-xs">
            <div className="order-3 lg:order-none">
              <span className="text-xs font-medium">در این صفحه</span>
              <nav className="mt-2 lg:mt-4">
                <ul className="space-y-1">
                  <li>
                    <a
                      href="#section1"
                      className={cn(
                        "block py-1 transition-colors duration-200",
                        activeSection === "section1"
                          ? "text-muted-foreground lg: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"
                          ? "text-muted-foreground lg: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"
                          ? "text-muted-foreground lg:text-primary"
                          : "text-muted-foreground hover:text-primary",
                      )}
                    >
                      بهینه‌سازی جریان ایمیل
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
            <Separator className="order-2 mt-8 mb-11 lg:hidden" />
            <div className="order-1 flex flex-col gap-2 lg:order-none lg:mt-9">
              <p className="font-medium text-muted-foreground">
                اشتراک‌گذاری این مطلب:
              </p>
              <ul className="flex gap-2">
                <li>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="group rounded-full"
                    asChild
                  >
                    <a href="#" aria-label="اشتراک در فیسبوک">
                      <Facebook className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
                    </a>
                  </Button>
                </li>
                <li>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="group rounded-full"
                    asChild
                  >
                    <a href="#" aria-label="اشتراک در لینکدین">
                      <Linkedin className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
                    </a>
                  </Button>
                </li>
                <li>
                  <Button
                    variant="secondary"
                    size="icon"
                    className="group rounded-full"
                    asChild
                  >
                    <a href="#" aria-label="اشتراک در توییتر">
                      <Twitter className="h-4 w-4 fill-muted-foreground text-muted-foreground transition-colors group-hover:fill-primary group-hover:text-primary" />
                    </a>
                  </Button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Blogpost5 };