"use client";

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

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

interface Service7Props {
  className?: string;
}

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

  const stats = [
    {
      icon: "/block-media/shadcnblocks/block/logos/adobe-icon.png",
      title: "پوشش تیم فروش",
      description: "آماده برای اجرا",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      description: "سال تجربه",
    },
    {
      icon: "/block-media/shadcnblocks/block/logos/sketch-icon.svg",
      title: "Sketch",
      description: "برنامه فعال‌سازی",
    },
  ];

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

  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="container max-w-4xl">
        {/* Icon and Intro */}
        <div className="mb-16 space-y-8">
          <div className="flex justify-start">
            <div className="rounded-full bg-muted p-6">
              <img
                src="/block-media/shadcnblocks/block/symbols/ux.svg"
                alt="فعال‌سازی فروش"
                className="h-16 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="max-w-3xl text-xl leading-relaxed text-muted-foreground">
              به تیم فروش ابزار، پیام و فرآیند می‌دهیم تا چرخه معامله کوتاه‌تر
              و نرخ برد بالاتر شود. فعال‌سازی یعنی هر نماینده بداند چه بگوید،
              چه بفرستد و چه زمانی ببندد.
            </p>
          </div>
        </div>

        {/* Expertise Section */}
        <div className="mb-16">
          <div className="mb-8">
            <h2 className="text-xl font-semibold tracking-tight md:text-xl">
              تخصص ما
            </h2>
            <p className="mt-2 text-muted-foreground">
              راهنمای فروش، محتوا و کوچینگ اجرایی برای تیم‌های B2B
            </p>
          </div>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
            {stats.map((stat, index) => (
              <div
                key={index}
                className="flex items-center gap-3 rounded-lg border p-4"
              >
                <div className="flex h-10 w-10 items-center justify-center">
                  <img
                    src={stat.icon}
                    alt={stat.title}
                    className="h-6 w-6 object-contain"
                  />
                </div>
                <div>
                  <div className="text-sm font-medium">{stat.title}</div>
                  <div className="text-xs text-muted-foreground">
                    {stat.description}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

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

          <p>
            دک‌ها، one-pagerها و مطالعات موردی را با مراحل قیف هم‌خوان
            می‌کنیم. هر دارایی دقیقاً برای یک مرحله معامله ساخته می‌شود.
          </p>

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

          <p>
            اتصال به سامانه مدیریت ارتباط با مشتری تضمین می‌کند فرآیند روی کاغذ نماند و هر مرحله فرصت
            با اقدام و دارایی مشخص همراه باشد.
          </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>
            وقتی محصول پیچیده‌تر می‌شود، بدون فعال‌سازی، فروش متوقف می‌ماند.
            ما سیستم دانش و اجرای فروش را طوری می‌سازیم که با رشد تیم کیفیت
            معامله افت نکند.
          </p>

          <p>
            از طراحی راهنمای فروش تا پایش عملکرد، تیم فروش شما با پیام واحد و
            فرآیند شفاف کار می‌کند.
          </p>
        </div>

        {/* Related Services */}
        <div>
          <div className="mb-8">
            <h2 className="text-xl font-semibold tracking-tight md:text-xl">
              خدمات مرتبط
            </h2>
            <p className="mt-2 text-muted-foreground">
              خدمات مکمل برای تسریع چرخه فروش
            </p>
          </div>
          <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
            {relatedServices.map((service, index) => {
              const Icon = service.icon;
              return (
                <div key={index} className="group">
                  <a
                    href={service.link}
                    className="block space-y-3 rounded-lg border p-6 transition-colors hover:bg-muted/50"
                  >
                    <div className="flex items-center gap-2">
                      <Icon className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
                      <div className="font-medium group-hover:text-primary">
                        {service.title}
                      </div>
                    </div>
                    <div className="text-sm leading-relaxed text-muted-foreground">
                      {service.description}
                    </div>
                  </a>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Service7 };