import { Lightbulb } from "lucide-react";

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

interface Blogpost1Props {
  className?: string;
  title?: string;
  author?: {
    name: string;
    website: string;
    websiteName: string;
    image: string;
  };
  image?: string;
  pubDate?: Date;
  description?: string;
}

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

const Blogpost1 = ({
  className,
  title = "افزایش ۴۰٪ نرخ تبدیل با اتوماسیون بازاریابی سامانه مدیریت ارتباط با مشتری",
  author = {
    name: "علی رضایی",
    website: "https://www.ShadcnBlocks",
    websiteName: "ShadcnBlocks",
    image: "/block-media/shadcnblocks/block/avatar-2.webp",
  },
  image = "/block-media/shadcnblocks/block/placeholder-1.svg",
  pubDate = new Date(),
  description =
    "مطالعه موردی نحوه پیاده‌سازی اتوماسیون بازاریابی برای افزایش نرخ تبدیل و بهبود بهره‌وری تیم فروش.",
}: Blogpost1Props) => {
  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-4 text-center">
          <h1 className="max-w-3xl text-2xll font-semibold text-pretty md:text-2xll">
            {title}
          </h1>
          <h3 className="max-w-3xl text-lg text-muted-foreground md:text-xl">
            {description}
          </h3>
          <div className="flex flex-col items-center gap-1 text-sm md:flex-row md:gap-2 md:text-base">
            <div className="flex items-center gap-2">
              <Avatar className="h-8 w-8 border">
                <AvatarImage src={author.image} />
                <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <span className="font-semibold">{author.name}</span>
            </div>
            <span className="text-muted-foreground">
              مالک{" "}
              <a
                href={author.website}
                className="font-semibold text-foreground hover:underline"
              >
                {author.websiteName}
              </a>
            </span>
            <span className="text-muted-foreground">
              منتشر شده در {formatPersianDate(pubDate)}
            </span>
          </div>
          <img
            src={image}
            alt="تصویر شاخص مطلب"
            className="mt-4 mb-8 aspect-video w-full rounded-lg border object-cover"
          />
        </div>
      </div>
      <div className="container">
        <div className="mx-auto prose max-w-3xl dark:prose-invert">
          <h2 className="text-3xl font-extrabold">اتوماسیون بازاریابی چیست و چرا اهمیت دارد؟</h2>
          <p className="mt-2 text-lg text-muted-foreground">
            اتوماسیون بازاریابی فرایند اجرای خودکار جریان‌های ایمیل، امتیازدهی لید و اختصاص معامله به فروشندگان بر اساس رفتار دیجیتال مخاطب است. تیم‌های B2B با این رویکرد، زمان پاسخ‌گویی را از ۴۸ ساعت به کمتر از ۲ ساعت کاهش داده‌اند.
                                </p>

          <h2>چرا امتیازدهی لید مهم است؟</h2>
          <p>
            با امتیازدهی رفتاری، لیدهای آماده خرید شناسایی شده و به‌صورت خودکار به فروش اختصاص می‌یابند. این رویکرد نرخ تبدیل را تا ۴۰٪ افزایش می‌دهد.
                                </p>
          <Alert>
            <Lightbulb className="h-4 w-4" />
            <AlertTitle>نکته کلیدی</AlertTitle>
            <AlertDescription>
              ایمیل‌های شخصی‌سازی‌شده با نام شرکت مخاطب، نرخ باز شدن ۴۲٪ بالاتری نسبت به قالب‌های عمومی دارند.
                                      </AlertDescription>
          </Alert>
          <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>

          <h2>بهینه‌سازی جریان ایمیل</h2>

          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="داشبورد تحلیل نرخ تبدیل"
            className="my-8 aspect-video w-full rounded-md object-cover"
          />
          <p>
            تیم بازاریابی با تست A/B موضوع ایمیل، نرخ باز شدن را از ۱۸٪ به ۲۶٪ رساند.
                                </p>
          <blockquote>
            «ایمیل‌های کوتاه با یک CTA واضح، نرخ کلیک ۳۵٪ بالاتری نسبت به ایمیل‌های چندبخشی داشتند.»
                                </blockquote>
          <p>
            سه نوع دنباله ایمیل برای بخش‌های مختلف قیف فروش طراحی شد:
          </p>
          <ul>
            <li>آگاهی: معرفی مشکل و راه‌حل</li>
            <li>بررسی: مقایسه با رقبا و مطالعه موردی</li>
            <li>تصمیم: دعوت به دمو و پیشنهاد آزمایشی</li>
          </ul>
          <p>
            زمان پاسخ فروش به لیدهای داغ از ۲۴ ساعت به کمتر از ۲ ساعت رسید و نرخ بستن معامله ۴۰٪ افزایش یافت.
                                </p>
        </div>
      </div>
    </section>
  );
};

export { Blogpost1 };