import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const services = [
  {
    title: "استراتژی محصول",
    description:
      "اهداف روشن تعریف می‌کنیم، ذینفعان را هم‌راستا می‌کنیم و ابتکاراتی را اولویت‌بندی می‌کنیم که تأثیر قابل اندازه‌گیری دارند.",
    image:
      "/block-media/shadcnblocks/block/photos/daria-nepriakhina-zoCDWPuiRuA-unsplash.jpg",
    categories: [
      "چشم‌انداز و اهداف",
      "هم‌راستایی ذینفعان",
      "اولویت‌بندی",
      "نقشه‌برداری",
      "برنامه‌ریزی تحویل",
      "شاخص‌ها",
    ],
  },
  {
    title: "بازاریابی رشد و چرخه عمر",
    description:
      "آزمایش تمام قیف و برنامه‌های چرخه عمر که مشتریان را جذب، فعال و حفظ می‌کنند.",
    image:
      "/block-media/shadcnblocks/block/photos/diggity-marketing-SB0WARG16HI-unsplash.jpg",
    categories: [
      "جذب",
      "فعال‌سازی",
      "حفظ",
      "انتساب",
      "آزمایش",
    ],
  },
  {
    title: "عملیات محتوا و سئو",
    description:
      "سیستم‌های محتوای عملیاتی و استراتژی‌های جستجو که رشد ارگانیک را در طول زمان تقویت می‌کنند.",
    image:
      "/block-media/shadcnblocks/block/photos/stephen-dawson-qwtCeJ5cLYs-unsplash.jpg",
    categories: [
      "نقشه‌برداری موضوعات",
      "سئوی فنی",
      "فرآیند تحریریه",
      "توزیع",
    ],
  },
  {
    title: "یکپارچه‌سازی هوش مصنوعی و اتوماسیون",
    description:
      "از هوش مصنوعی و اتوماسیون برای ساده‌سازی گردش کار، بهبود تصمیم‌گیری و ایجاد فرصت‌های جدید کسب‌وکار بهره ببرید.",
    image:
      "/block-media/shadcnblocks/block/photos/marvin-meyer-SYTO3xs06fU-unsplash.jpg",
    categories: [
      "اتوماسیون فرآیند",
      "یادگیری ماشین",
      "تحلیل داده",
      "چت‌بات‌ها",
      "تحلیل پیش‌بینی‌کننده",
      "راه‌حل‌های AI اختصاصی",
    ],
  },
];

interface Services16Props {
  className?: string;
}

const Services16 = ({ className }: Services16Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="grid items-start gap-4 md:grid-cols-4">
          <div className=""></div>
          <h1 className="col-span-3 text-2xll font-semibold sm:text-2xll md:text-8xl lg:text-9xl">
            خدمات.
          </h1>
        </div>
        <div className="mt-20">
          <Accordion type="multiple" defaultValue={["item-0"]}>
            {services.map((service, index) => (
              <AccordionItem value={`item-${index}`} key={index}>
                <AccordionTrigger className="hover:no-underline">
                  <div className="flex w-full grid-cols-4 items-center gap-4 sm:grid">
                    <span className="text-base text-muted-foreground">
                      {(index + 1).toLocaleString("fa-IR", {
                        minimumIntegerDigits: 2,
                      })}
                    </span>
                    <h2 className="col-span-3 text-lg font-semibold tracking-tight">
                      {service.title}
                    </h2>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="flex grid-cols-4 pt-6 pb-12 sm:grid sm:gap-4">
                  <div />
                  <div className="col-span-3 grid gap-10 lg:grid-cols-5">
                    <div className="flex flex-col gap-4 md:flex-row md:gap-8 lg:col-span-3">
                      <img
                        src={service.image}
                        alt={service.title}
                        className="aspect-[1.4] w-52 rounded-xl object-cover"
                      />
                      <div className="flex flex-col gap-2 sm:gap-3">
                        <h4 className="text-xl font-medium tracking-tight sm:text-3xl">
                          {service.title}
                        </h4>
                        <p className="text-muted-foreground sm:text-base">
                          {service.description}
                        </p>
                      </div>
                    </div>
                    <div className="flex flex-col gap-4 lg:col-span-2">
                      <p className="text-xs text-muted-foreground">
                        دسته‌بندی‌ها
                      </p>
                      <div className="flex flex-wrap gap-2">
                        {service.categories.map((category, index) => (
                          <Badge key={index}>{category}</Badge>
                        ))}
                      </div>
                    </div>
                  </div>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Services16 };