"use client";

import { Code, Droplet, Layout, Smartphone } from "lucide-react";

import { cn } from "@/lib/utils";

interface Service5Props {
  className?: string;
}

const Service5 = ({ className }: Service5Props) => {
  const stats = [
    {
      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
      title: "پوشش چرخه عمر",
      value: "۱۰۰٪",
      description: "جریان‌های فعال",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      value: "۵+",
      description: "سال تجربه",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
      title: "Sketch",
      value: "۲۰۰+",
      description: "اتوماسیون راه‌اندازی‌شده",
    },
  ];

  const relatedServices = [
    {
      icon: Droplet,
      title: "امتیازدهی سرنخ",
      description: "اولویت‌بندی سرنخ‌های گرم برای فروش",
      link: "#",
    },
    {
      icon: Code,
      title: "یکپارچه‌سازی CRM",
      description: "همگام‌سازی داده بین بازاریابی و فروش",
      link: "#",
    },
    {
      icon: Smartphone,
      title: "پیام‌رسانی چندکاناله",
      description: "ایمیل، درون‌محصولی و اعلان هدفمند",
      link: "#",
    },
    {
      icon: Layout,
      title: "داشبورد قیف",
      description: "پایش تبدیل در هر مرحله چرخه عمر",
      link: "#",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-5xl">
        <div className="grid gap-12 lg:grid-cols-3">
          {/* Content Section */}
          <div className="lg:col-span-2">
            {/* Icon and Intro */}
            <div className="mb-12 space-y-8">
              <div className="flex justify-center lg:justify-start">
                <div className="rounded-lg bg-muted p-4">
                  <img
                    src="/block-media/shadcnblocks/block/symbols/ux.svg"
                    alt="اتوماسیون بازاریابی"
                    className="h-12 dark:invert"
                  />
                </div>
              </div>

              <div className="space-y-6">
                <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
                  اتوماسیون بازاریابی
                </h1>
                <p className="text-xl leading-relaxed text-muted-foreground">
                  مسیرهای پرورش سرنخ، ایمیل و تریگرهای رفتاری را طوری می‌سازیم
                  که سرنخ‌های سرد گرم شوند و فروش فقط با خریداران آماده صحبت
                  کند. اتوماسیون جایگزین استراتژی نیست؛ مقیاس‌دهنده آن است.
                </p>
              </div>
            </div>

            {/* Main Content */}
            <div className="prose prose-sm max-w-none dark:prose-invert">
              <h2>جریان‌هایی که قیف را حرکت می‌دهند</h2>
              <p>
                بخش‌بندی مخاطب، تریگر و پیام را بر اساس رفتار واقعی کاربر
                تنظیم می‌کنیم تا هر تماس بعدی مرتبط و به‌موقع باشد.
              </p>

              <p>
                از welcome series تا re-engagement و upsell، جریان‌ها را به
                مراحل چرخه عمر وصل می‌کنیم. نرخ باز شدن مهم است، اما معیار
                نهایی تبدیل به فرصت و تمدید است.
              </p>

              <p>
                یکپارچگی با CRM تضمین می‌کند که فروش وضعیت سرنخ را لحظه‌ای
                ببیند و اتوماسیون پس از تحویل به فروش متوقف یا تغییر مسیر دهد.
              </p>

              <p>
                آزمایش موضوع، زمان ارسال و پیشنهاد را ساختاریافته اجرا می‌کنیم
                تا عملکرد جریان‌ها به‌صورت مستمر بهتر شود، نه با حدس فصلی.
              </p>

              <p>
                نتیجه: حجم پرورش بالاتر با نیروی انسانی کمتر و هماهنگی تمیز
                بین بازاریابی و فروش.
              </p>

              <h2>خدمات اتوماسیون بازاریابی ما</h2>
              <ul>
                <li>طراحی نقشه سفر و نقاط تریگر</li>
                <li>بخش‌بندی و جریان‌های مبتنی بر رفتار</li>
                <li>امتیازدهی سرنخ و قوانین تحویل به فروش</li>
                <li>ایمیل، درون‌محصولی و پیام چندکاناله</li>
                <li>یکپارچه‌سازی با CRM و ابزارهای تبلیغات</li>
                <li>گزارش تبدیل جریان و بهینه‌سازی مستمر</li>
              </ul>

              <h2>اتوماسیون با کنترل کیفیت</h2>
              <p>
                اتوماسیون بد حجم نویز می‌سازد. ما قوانین توقف، فرکانس و انطباق
                را از روز اول می‌گذاریم تا برند شما قابل اعتماد بماند و لیست
                مخاطب سلامت خود را حفظ کند.
              </p>

              <p>
                از طراحی جریان تا پایش عملکرد، تیم شما سیستمی دارد که در
                مقیاس، سرنخ واجد شرایط تحویل می‌دهد.
              </p>
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-8 lg:col-span-1">
            {/* Stats Section */}
            <div className="rounded-lg bg-muted/50 p-6">
              <h3 className="mb-6 text-lg font-semibold">تخصص ما</h3>
              <div className="space-y-6">
                {stats.map((stat, index) => (
                  <div key={index} className="flex items-center gap-4">
                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center">
                      <img
                        src={stat.icon}
                        alt={stat.title}
                        className="h-6 w-6 object-contain"
                      />
                    </div>
                    <div className="flex-1">
                      <div className="text-sm font-medium">{stat.title}</div>
                      <div className="text-xs text-muted-foreground">
                        {stat.description}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Related Services */}
            <div className="rounded-lg bg-muted/50 p-6">
              <h3 className="mb-6 text-lg font-semibold">خدمات مرتبط</h3>
              <div className="space-y-4">
                {relatedServices.map((service, index) => {
                  const Icon = service.icon;
                  return (
                    <div key={index} className="group">
                      <a
                        href={service.link}
                        className="block space-y-1 rounded-md p-3 transition-colors hover:bg-background"
                      >
                        <div className="flex items-center gap-2">
                          <Icon className="h-4 w-4 text-muted-foreground group-hover:text-primary" />
                          <div className="text-sm font-medium group-hover:text-primary">
                            {service.title}
                          </div>
                        </div>
                        <div className="text-xs text-muted-foreground">
                          {service.description}
                        </div>
                      </a>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service5 };