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: [
      "اهداف و KPI",
      "هم‌راستایی ذینفعان",
      "اولویت‌بندی نقشه راه",
      "نقشه قیف",
      "برنامه تحویل",
      "شاخص‌های رشد",
    ],
  },
  {
    title: "بازاریابی چرخه عمر",
    description:
      "جریان‌های جذب، فعال‌سازی و نگهداشت را می‌سازیم تا مشتری از اولین لمس تا تمدید هدایت شود.",
    image:
      "/block-media/shadcnblocks/block/photos/diggity-marketing-SB0WARG16HI-unsplash.jpg",
    categories: [
      "جذب",
      "فعال‌سازی",
      "نگهداشت",
      "اتریبیوشن",
      "آزمایش A/B",
    ],
  },
  {
    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: [
      "اتوماسیون فرآیند",
      "امتیازدهی سرنخ",
      "داشبورد عملیات",
      "چت و پاسخ خودکار",
      "تحلیل پیش‌بینی",
      "یکپارچگی CRM",
    ],
  },
];

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