"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: [
        "تحلیل بازار و بینش‌ها",
        "تعیین اهداف و نقشه‌برداری",
        "یکپارچه‌سازی نوآوری",
      ],
    },
    {
      title: "مشاوره",
      description:
        "با شما همکاری می‌کنیم تا نیازهای منحصربه‌فردتان را بشناسیم و بینش و راه‌حل‌های عملی ارائه دهیم.",
      items: [
        "بازطراحی ساختار سازمانی",
        "بهینه‌سازی فرآیندها",
        "تحلیل و بهبود عملکرد",
      ],
    },
    {
      title: "توسعه",
      description:
        "از استراتژی‌های ورود به بازار تا توسعه مشارکت‌ها، محرک سفر رشد شما هستیم.",
      items: [
        "استراتژی‌های ورود به بازار",
        "توسعه مشارکت‌ها",
        "ادغام و تملک",
      ],
    },
    {
      title: "پایش",
      description:
        "ابزارها و بینش‌های لازم برای نظارت و بهبود هر جنبه از عملیات کسب‌وکار شما را فراهم می‌کنیم.",
      items: [
        "تحلیل لحظه‌ای",
        "پایش شاخص‌های عملکرد",
        "راه‌حل‌های مدیریت ریسک",
      ],
    },
  ];

  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 };