"use client";

import { Check } from "lucide-react";

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

interface Services1Props {
  className?: string;
}

const Services1 = ({ className }: Services1Props) => {
  const services = [
    {
      title: "استراتژی کانال",
      description:
        "نقشه جذب و بودجه را بر اساس هزینه سرنخ و نرخ تبدیل می‌چینیم تا هر کانال سهم مشخصی از قیف داشته باشد.",
      subHeading: "خدمات استراتژی",
      items: [
        "تحلیل بازار و فرصت کانال",
        "تعیین KPI و نقشه فصلی",
        "اولویت‌بندی آزمایش‌های رشد",
      ],
    },
    {
      title: "کمپین عملکردی",
      description:
        "تبلیغات و لندینگ را برای سرنخ واجد شرایط بهینه می‌کنیم؛ تمرکز روی تبدیل و هزینه جذب است نه صرفاً کلیک.",
      items: [
        "راه‌اندازی و بودجه‌بندی کمپین",
        "بهینه‌سازی نرخ تبدیل",
        "اتریبیوشن و گزارش بازده",
      ],
    },
    {
      title: "محتوای B2B",
      description:
        "محتوا را به مسیر خریدار وصل می‌کنیم تا بازاریابی و فروش با پیام واحد روی یک منبع حقیقت کار کنند.",
      items: [
        "نقشه محتوا و خوشه‌بندی موضوعی",
        "مقالات، وبینار و صفحات محصول",
        "فعال‌سازی فروش با دارایی محتوایی",
      ],
    },
    {
      title: "داشبورد رشد",
      description:
        "شاخص‌های قیف، کانال و درآمد را لحظه‌ای در اختیار تیم می‌گذاریم تا بودجه به بهترین عملکرد منتقل شود.",
      items: [
        "ردیابی رویداد و قیف",
        "پایش KPIهای فصلی",
        "هشدار افت عملکرد کانال",
      ],
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl">
          <h2 className="mb-4 text-xl font-semibold text-foreground">بازاریابی دیجیتال</h2>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            {services.map((service, index) => (
              <div key={index} className="rounded-lg bg-muted p-8">
                <h3 className="mb-4 text-base font-medium text-foreground">
                  {service.title}
                </h3>

                <p className="mb-6 text-xs leading-relaxed text-muted-foreground">
                  {service.description}
                </p>

                <ul className="space-y-3">
                  {service.items.map((item, itemIndex) => (
                    <li key={itemIndex} className="flex items-center gap-3">
                      <div className="flex h-4 w-4 items-center justify-center rounded-full bg-muted-foreground/20">
                        <Check className="h-2.5 w-2.5 text-muted-foreground" />
                      </div>
                      <span className="text-xs text-foreground">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Services1 };