"use client";

import { Code, Cog, PenTool, Shrub } from "lucide-react";

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

interface Services8Props {
  className?: string;
}

const Services8 = ({ className }: Services8Props) => {
  const services = [
    {
      icon: <Cog className="h-5 w-5" />,
      title: "طراحی مدل داده",
      shortDescription: "تعریف رویداد، KPI و منبع حقیقت",
      description:
        "تاکسونومی رویداد و تعریف متریک‌ها را طوری می‌چینیم که محصول، بازاریابی و فروش روی یک زبان مشترک کار کنند.",
      items: [
        "تاکسونومی رویداد",
        "تعریف KPI فصلی",
        "مدل اتریبیوشن",
        "استاندارد نام‌گذاری",
      ],
      deliverables: [
        "سند مدل داده",
        "کاتالوگ متریک",
        "نقشه ردیابی",
      ],
    },
    {
      icon: <PenTool className="h-5 w-5" />,
      title: "راه‌اندازی تحلیل",
      shortDescription: "ابزار، ردیابی و کیفیت داده",
      description:
        "لایه ردیابی را ممیزی و پیاده می‌کنیم تا گزارش‌ها قابل اعتماد باشند و تصمیم‌ها بر اساس داده تمیز گرفته شوند.",
      items: [
        "ممیزی ردیابی",
        "راه‌اندازی ابزار تحلیل",
        "کنترل کیفیت داده",
        "دسترسی نقش‌محور",
      ],
      deliverables: ["پیکربندی ابزار", "چک‌لیست QA", "راهنمای دسترسی"],
    },
    {
      icon: <Code className="h-5 w-5" />,
      title: "داشبورد عملیاتی",
      shortDescription: "قیف، درآمد و سلامت محصول",
      description:
        "داشبوردهایی می‌سازیم که گلوگاه قیف، نگهداشت و بازده کانال را واضح نشان دهند و به اقدام وصل شوند.",
      items: [
        "داشبورد قیف",
        "گزارش کوهورت",
        "تحلیل مسیر کاربر",
        "هشدار افت متریک",
      ],
      deliverables: ["داشبورد زنده", "مستند KPI", "برنامه بازبینی هفتگی"],
    },
    {
      icon: <Shrub className="h-5 w-5" />,
      title: "بینش و آزمایش",
      shortDescription: "از داده تا اولویت رشد",
      description:
        "آزمایش A/B و تحلیل اثر را عملیاتی می‌کنیم تا بودجه و roadmap بر اساس تاثیر واقعی تنظیم شوند.",
      items: [
        "طراحی آزمایش",
        "تحلیل اثر ویژگی",
        "اولویت‌بندی رشد",
        "گزارش به مدیران",
      ],
      deliverables: [
        "لاگ آزمایش‌ها",
        "خلاصه بینش ماهانه",
        "پیشنهاد اولویت بعدی",
      ],
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-3xl space-y-16">
          <div className="space-y-4 text-center">
            <h2 className="text-3xl font-semibold tracking-tight md:text-xl">
              مشاوره تحلیل و داده
            </h2>
            <p className="text-lg tracking-tight text-muted-foreground md:text-xl">
              جزئیات هر خدمت را باز کنید تا محدوده و خروجی را ببینید.
            </p>
          </div>

          <Accordion
            type="single"
            collapsible
            defaultValue="item-0"
            className="space-y-4"
          >
            {services.map((service, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="rounded-lg border border-border last:border-b"
              >
                <AccordionTrigger className="px-6 py-6 hover:bg-muted/50 hover:no-underline">
                  <div className="flex items-center gap-4">
                    {service.icon}
                    <div className="text-start">
                      <h3 className="text-lg font-semibold">{service.title}</h3>
                      <p className="text-sm text-muted-foreground">
                        {service.shortDescription}
                      </p>
                    </div>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="space-y-6 border-t border-b border-border bg-muted/20 p-6">
                  <p className="leading-relaxed text-muted-foreground">
                    {service.description}
                  </p>

                  <div className="grid gap-6 md:grid-cols-2">
                    <div>
                      <h4 className="mb-3 font-medium">موارد شامل:</h4>
                      <ul className="space-y-1">
                        {service.items.map((item, itemIndex) => (
                          <li
                            key={itemIndex}
                            className="flex items-center gap-2 text-sm"
                          >
                            <div className="h-1 w-1 rounded-full bg-foreground" />
                            {item}
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div>
                      <h4 className="mb-3 font-medium">خروجی‌ها:</h4>
                      <ul className="space-y-1">
                        {service.deliverables.map((deliverable, delivIndex) => (
                          <li
                            key={delivIndex}
                            className="flex items-center gap-2 text-sm"
                          >
                            <div className="h-1 w-1 rounded-full bg-foreground" />
                            {deliverable}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </div>
    </section>
  );
};

export { Services8 };