"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: "برنامه‌ریزی استراتژیک و جایگاه‌یابی در بازار",
      description:
        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم. رویکرد استراتژیک ما تضمین می‌کند محصول شما نیازهای واقعی کاربران را برآورده کند.",
      items: [
        "تحقیق بازار",
        "پرسونای کاربر",
        "تحلیل رقبا",
        "نقشه راه محصول",
      ],
      deliverables: [
        "سند استراتژی",
        "پروفایل پرسونای کاربر",
        "گزارش تحلیل بازار",
      ],
    },
    {
      icon: <PenTool className="h-5 w-5" />,
      title: "طراحی",
      shortDescription: "راه‌حل‌های طراحی کاربرمحور",
      description:
        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند. بر زیبایی‌شناسی و کاربردپذیری تمرکز می‌کنیم تا طراحی‌هایی بسازیم که تبدیل ایجاد کنند.",
      items: [
        "طراحی رابط کاربری/تجربه کاربری",
        "نمونه‌سازی",
        "طراحی تعامل",
        "سیستم‌های طراحی",
      ],
      deliverables: ["سیستم طراحی", "نمونه‌های تعاملی", "موکاپ رابط کاربری/تجربه کاربری"],
    },
    {
      icon: <Code className="h-5 w-5" />,
      title: "توسعه وب",
      shortDescription: "اپلیکیشن‌های مدرن و مقیاس‌پذیر",
      description:
        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن. تضمین می‌کنیم اپلیکیشن شما سریع، امن و قابل نگهداری باشد.",
      items: [
        "توسعه فرانت‌اند",
        "توسعه بک‌اند",
        "یکپارچه‌سازی اتصال هوشمند",
        "بهینه‌سازی عملکرد",
      ],
      deliverables: ["کد منبع", "مستندات", "راهنمای استقرار"],
    },
    {
      icon: <Shrub className="h-5 w-5" />,
      title: "بازاریابی",
      shortDescription: "استراتژی‌های رشد و بهینه‌سازی",
      description:
        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر. از رویکردهای مبتنی بر داده برای بهینه‌سازی تلاش‌های بازاریابی استفاده می‌کنیم.",
      items: [
        "استراتژی سئو",
        "تحلیل و داده",
        "آزمایش A/B",
        "بازاریابی محتوا",
      ],
      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 };