"use client";

import { BookOpen, Map, Palette, Pen, TestTube, Users } from "lucide-react";

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

interface Service4Props {
  className?: string;
}

const Service4 = ({ className }: Service4Props) => {
  const services = [
    {
      icon: Users,
      title: "طراحی جریان پشتیبانی و سطح‌بندی تیکت",
    },
    {
      icon: Map,
      title: "نقشه‌برداری مسیر مشتری و نقاط تماس",
    },
    {
      icon: Pen,
      title: "ساخت پایگاه دانش و پاسخ‌های استاندارد",
    },
    {
      icon: Palette,
      title: "اتوماسیون اعلان و ارجاع هوشمند تیکت",
    },
    {
      icon: TestTube,
      title: "پایش SLA و کیفیت پاسخ‌گویی",
    },
    {
      icon: BookOpen,
      title: "آموزش تیم و راهنمای عملیاتی پشتیبانی",
    },
  ];

  const stats = [
    {
      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
      title: "پوشش کانال‌ها",
      value: "۱۰۰٪",
      description: "یکپارچگی omnichannel",
    },
    {
      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: "فرآیند استقرار‌شده",
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("pb-32", className)}>
      {/* Simple Hero */}
      <div className="bg-muted py-32">
        <div className="container">
          <div className="flex items-center justify-center gap-4">
            <img
              src="/block-media/shadcnblocks/block/symbols/ux.svg"
              alt="عملیات پشتیبانی مشتری"
              className="h-16 dark:invert"
            />
            <h1 className="text-xl font-medium tracking-tight md:text-2xll lg:text-2xll">
              عملیات پشتیبانی مشتری
            </h1>
          </div>
        </div>
      </div>

      {/* Main Content with Sidebar */}
      <div className="py-16">
        <div className="container max-w-5xl">
          <div className="grid gap-12 lg:grid-cols-3">
            {/* Content Section */}
            <div className="lg:col-span-2">
              <div className="prose prose-sm max-w-none dark:prose-invert">
                <h2>پشتیبانی مقیاس‌پذیر با SLA شفاف</h2>
                <p>
                  صف تیکت، دانش‌نامه و اتوماسیون را طوری می‌چینیم که زمان
                  پاسخ کوتاه بماند و رضایت مشتری بالا برود. پشتیبانی از هزینه
                  عملیاتی به مزیت رقابتی تبدیل می‌شود.
                </p>

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

                <p>
                  سطح‌بندی تیکت، اولویت‌بندی و SLA را بر اساس اثر کسب‌وکار
                  تعریف می‌کنیم. تیم می‌داند چه چیزی فوری است و مدیر دقیقاً
                  می‌بیند کجا گلوگاه وجود دارد.
                </p>

                <p>
                  پایگاه دانش و پاسخ‌های آماده باعث می‌شود موارد تکراری سریع
                  حل شوند و کارشناسان روی مسائل پیچیده تمرکز کنند. نرخ حل در
                  تماس اول بالا می‌رود.
                </p>

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

                <p>
                  نتیجه: هزینه پشتیبانی کنترل‌شده، نگهداشت بالاتر و تجربه
                  مشتری یکدست در تمام نقاط تماس.
                </p>

                <h2>خدمات عملیات پشتیبانی ما</h2>
                <div className="space-y-3">
                  {services.map((service, index) => {
                    const Icon = service.icon;
                    return (
                      <div key={index} className="flex items-center gap-3">
                        <Icon className="h-5 w-5 text-primary" />
                        <span>{service.title}</span>
                      </div>
                    );
                  })}
                </div>

                <h2>پشتیبانی به‌عنوان لایه نگهداشت</h2>
                <p>
                  در SaaS، پشتیبانی خوب فقط مشکل را حل نمی‌کند؛ تمدید قرارداد
                  و افزایش درآمد را هم محافظت می‌کند. ما عملیات را طوری می‌سازیم
                  که هر تعامل، ارزش محصول را تقویت کند.
                </p>

                <p>
                  از طراحی فرآیند تا پایش مستمر کیفیت، تیم شما آمادگی مقیاس
                  گرفتن بدون افت کیفیت پاسخ‌گویی را دارد.
                </p>
              </div>
            </div>

            {/* Stats Sidebar */}
            <div className="lg:col-span-1">
              <div className="rounded-lg bg-muted/50 p-6 lg:sticky lg:top-8">
                <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>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service4 };