"use client";

import {
  AlignLeft,
  GalleryVerticalEnd,
  Lightbulb,
  ListChecks,
  RefreshCcw,
} from "lucide-react";
import { useEffect, useRef, useState } from "react";

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

interface Content1Props {
  className?: string;
}

const faNum = (value: number) => value.toLocaleString("fa-IR");

const Content1 = ({ className }: Content1Props) => {
  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 max-w-7xl">
        <div className="relative grid-cols-3 gap-20 lg:grid">
          <div className="lg:col-span-2">
            <div>
              <Badge variant="outline">خودکارسازی بازاریابی</Badge>
              <h1 className="mt-3 text-3xl font-extrabold">چگونه نرخ تبدیل لیدها را با اتوماسیون ایمیل افزایش دهید</h1>
              <p className="mt-2 text-lg text-muted-foreground">
                تیم‌های فروش B2B با پیاده‌سازی جریان‌های ایمیل هدفمند و امتیازدهی لید، میانگین نرخ تبدیل خود را تا ۳۵٪ بهبود داده‌اند. این راهنما مراحل عملی راه‌اندازی را توضیح می‌دهد.
              </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 text-start dark:prose-invert"
            >
              <h2>راه‌اندازی جریان ایمیل</h2>
              <div className="ms-3.5">
                <div className="relative flex items-start pb-2">
                  <div className="absolute top-[2.75rem] h-[calc(100%-2.75rem)] w-px bg-border/70"></div>
                  <div className="absolute -ms-3.5 py-2">
                    <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted">
                      <RefreshCcw className="h-3.5 w-3.5" />
                    </div>
                  </div>
                  <div className="ps-12">
                    <h3 className="mt-2 text-base font-semibold">
                      بخش‌بندی مخاطبان
                    </h3>
                    <p>
                      لیدها را بر اساس صنعت، اندازه شرکت و مرحله قیف فروش دسته‌بندی کنید تا هر گروه پیام متناسب دریافت کند.
                    </p>
                  </div>
                </div>
                <div className="relative flex items-start pb-2">
                  <div className="absolute top-[2.75rem] h-[calc(100%-2.75rem)] w-px bg-border/70"></div>
                  <div className="absolute -ms-3.5 py-2">
                    <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted">
                      <GalleryVerticalEnd className="h-3.5 w-3.5" />
                    </div>
                  </div>
                  <div className="ps-12">
                    <h3 className="mt-2 text-base font-semibold">
                      طراحی دنباله ایمیل
                    </h3>
                    <p>
                      برای هر بخش، دنباله‌ای از ۳ تا ۵ ایمیل با فاصله زمانی مشخص طراحی کنید؛ از معرفی محصول تا دعوت به دمو زنده.
                    </p>
                  </div>
                </div>
                <div className="relative flex items-start pb-2">
                  <div className="absolute top-[2.75rem] h-[calc(100%-2.75rem)] w-px bg-border/70"></div>
                  <div className="absolute -ms-3.5 py-2">
                    <div className="flex size-7 shrink-0 items-center justify-center rounded-lg bg-muted">
                      <ListChecks className="h-3.5 w-3.5" />
                    </div>
                  </div>
                  <div className="ps-12">
                    <h3 className="mt-2 text-base font-semibold">فعال‌سازی و پایش</h3>
                    <p>
                      جریان را فعال کنید و نرخ باز شدن، کلیک و تبدیل را در داشبورد CRM روزانه بررسی کنید.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            <section
              id="section2"
              ref={(ref) => addSectionRef("section2", ref)}
              className="prose mb-8 text-start dark:prose-invert"
            >
              <h2>نتایج کمپین</h2>
              <p>
                پس از ۹۰ روز اجرای جریان ایمیل، تیم فروش CloudStar شاهد بهبود قابل‌توجهی در معیارهای کلیدی بود.
              </p>
              <div>
                <table>
                  <thead>
                    <tr>
                      <th>تعداد لید</th>
                      <th>نرخ تبدیل</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>{faNum(120)}</td>
                      <td>{faNum(8)}٪</td>
                    </tr>
                    <tr className="m-0 border-t p-0 even:bg-muted">
                      <td>{faNum(340)}</td>
                      <td>{faNum(14)}٪</td>
                    </tr>
                    <tr className="m-0 border-t p-0 even:bg-muted">
                      <td>{faNum(520)}</td>
                      <td>{faNum(22)}٪</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <p>
                لیدهایی که حداقل ۳ ایمیل از دنباله را باز کرده بودند، ۲.۸ برابر بیشتر احتمال تبدیل به مشتری داشتند.
              </p>
              <Alert>
                <Lightbulb className="h-4 w-4" />
                <AlertTitle>نکته عملی</AlertTitle>
                <AlertDescription>
                  ایمیل‌های با موضوع شخصی‌سازی‌شده (نام شرکت مخاطب) نرخ باز شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی داشتند.
                </AlertDescription>
              </Alert>
            </section>

            <section
              id="section3"
              ref={(ref) => addSectionRef("section3", ref)}
              className="prose mb-8 text-start dark:prose-invert"
            >
              <h2>امتیازدهی لید</h2>
              <p>
                تیم بازاریابی CloudStar با{" "}
                <a href="#">مدل امتیازدهی رفتاری</a> لیدهای آماده خرید را شناسایی کرد.
              </p>
              <blockquote>
                لیدهایی که صفحه قیمت را بازدید کرده و وایت‌پیپر را دانلود کرده‌اند، اولویت تماس فروش را دریافت می‌کنند.
              </blockquote>
              <p>
                معیارهای امتیازدهی بر اساس تعامل دیجیتال تعریف شد:
              </p>
              <ul>
                <li>بازدید صفحه قیمت: {faNum(15)} امتیاز</li>
                <li>دانلود وایت‌پیپر: {faNum(10)} امتیاز</li>
                <li>شرکت در وبینار: {faNum(25)} امتیاز</li>
              </ul>
              <p>
                لیدهایی با امتیاز بالای {faNum(30)} به‌صورت خودکار به نماینده فروش اختصاص داده می‌شوند و زمان پاسخ‌گویی به کمتر از ۲ ساعت رسید.
              </p>
            </section>
          </div>
          <div className="sticky top-8 hidden h-fit lg:block">
            <span className="flex items-center gap-2 text-sm">
              <AlignLeft className="h-4 w-4" />
              در این صفحه
            </span>
            <nav className="mt-2 text-sm" aria-label="فهرست مطالب">
              <ul>
                <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>
      </div>
    </section>
  );
};

export { Content1 };