"use client";

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

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Services10Props {
  className?: string;
}

const Services10 = ({ className }: Services10Props) => {
  const services = [
    {
      icon: <Cog className="h-6 w-6" />,
      title: "استراتژی محصول",
      description:
        "از تحقیق بازار تا پرسونای کاربر، به ساخت محصولاتی که اهمیت دارند کمک می‌کنیم. رویکرد استراتژیک ما تضمین می‌کند محصول شما نیازهای واقعی کاربران را برآورده کند.",
      items: [
        "تحقیق و تحلیل بازار",
        "پرسونای کاربر و نقشه‌برداری سفر",
        "تحلیل رقبا",
        "توسعه نقشه راه محصول",
      ],
      deliverables: [
        "سند استراتژی",
        "گزارش تحقیق کاربر",
        "نقشه راه و زمان‌بندی",
      ],
      duration: "۲ تا ۴ هفته",
      price: "از ۵٬۰۰۰ دلار",
      featured: false,
    },
    {
      icon: <PenTool className="h-6 w-6" />,
      title: "طراحی",
      description:
        "طراحی‌های زیبا و کاربردی که تجربه‌های به‌یادماندنی برای کاربر خلق می‌کنند. بر زیبایی‌شناسی و کاربردپذیری تمرکز می‌کنیم تا طراحی‌هایی بسازیم که تبدیل ایجاد کنند.",
      items: [
        "طراحی رابط کاربری/تجربه کاربری",
        "نمونه‌سازی تعاملی",
        "ایجاد سیستم طراحی",
        "آزمایش کاربردپذیری",
      ],
      deliverables: ["سیستم طراحی", "نمونه‌های تعاملی", "مشخصات طراحی"],
      duration: "۳ تا ۶ هفته",
      price: "از ۸٬۰۰۰ دلار",
      featured: true,
    },
    {
      icon: <Code className="h-6 w-6" />,
      title: "توسعه وب",
      description:
        "اپلیکیشن‌های پایدار و مقیاس‌پذیر با فناوری‌ها و فریم‌ورک‌های مدرن. تضمین می‌کنیم اپلیکیشن شما سریع، امن و قابل نگهداری باشد.",
      items: [
        "توسعه فرانت‌اند",
        "توسعه بک‌اند",
        "یکپارچه‌سازی اتصال هوشمند",
        "بهینه‌سازی عملکرد",
      ],
      deliverables: ["کد منبع", "مستندات فنی", "راهنمای استقرار"],
      duration: "۶ تا ۱۲ هفته",
      price: "از ۱۵٬۰۰۰ دلار",
      featured: true,
    },
    {
      icon: <Shrub className="h-6 w-6" />,
      title: "بازاریابی",
      description:
        "ابتکارات رشد استراتژیک برای مقیاس‌دهی محصول و بیشینه‌سازی تأثیر. از رویکردهای مبتنی بر داده برای بهینه‌سازی تلاش‌های بازاریابی استفاده می‌کنیم.",
      items: [
        "استراتژی و پیاده‌سازی سئو",
        "تحلیل و پایش عملکرد",
        "آزمایش A/B و بهینه‌سازی",
        "استراتژی بازاریابی محتوا",
      ],
      deliverables: [
        "برنامه بازاریابی",
        "داشبورد تحلیل",
        "گزارش‌های عملکرد",
      ],
      duration: "مداوم",
      price: "از ۳٬۰۰۰ دلار در ماه",
      featured: false,
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("bg-muted/30 py-32", className)}>
      <div className="container">
        <div className="mx-auto max-w-6xl space-y-16">
          <div className="space-y-4 text-center">
            <Badge variant="outline" className="bg-background">
              خدمات ما
            </Badge>
            <h2 className="text-3xl font-semibold tracking-tight md:text-xl lg:text-2xll">
              راه‌حل‌های دیجیتال جامع
            </h2>
            <p className="mx-auto max-w-2xl text-lg tracking-tight text-muted-foreground md:text-xl">
              قیمت‌گذاری شفاف برای راه‌حل‌های دیجیتال در سطح جهانی، متناسب با
              نیازهای کسب‌وکار و اهداف رشد شما.
            </p>
          </div>

          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            {services.map((service, index) => (
              <div
                key={index}
                className={`group relative overflow-hidden rounded-xl border transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${
                  service.featured
                    ? "border-primary/20 bg-background shadow-lg"
                    : "border-border bg-background/80 backdrop-blur-sm hover:bg-background"
                }`}
              >
                <div className="p-8">
                  <div className="flex items-start justify-between">
                    <div className="flex items-center gap-3">
                      <div
                        className={`rounded-lg p-3 ${
                          service.featured
                            ? "bg-primary/10 text-primary"
                            : "bg-muted text-muted-foreground"
                        }`}
                      >
                        {service.icon}
                      </div>
                      <div>
                        <h3 className="text-xl font-semibold">
                          {service.title}
                        </h3>
                        <div className="mt-1 text-sm text-muted-foreground">
                          {service.duration}
                        </div>
                      </div>
                    </div>
                  </div>

                  <p className="mt-6 leading-relaxed text-muted-foreground">
                    {service.description}
                  </p>

                  <div className="mt-6 space-y-4">
                    <div>
                      <h4 className="mb-3 text-sm font-medium">
                        موارد شامل:
                      </h4>
                      <ul className="space-y-2">
                        {service.items.map((item, itemIndex) => (
                          <li
                            key={itemIndex}
                            className="flex items-center gap-3 text-sm"
                          >
                            <CheckCircle className="h-4 w-4 shrink-0 text-green-600" />
                            {item}
                          </li>
                        ))}
                      </ul>
                    </div>

                    <div className="rounded-lg bg-muted/50 p-4">
                      <h4 className="mb-2 text-sm font-medium">خروجی‌ها:</h4>
                      <div className="flex flex-wrap gap-2">
                        {service.deliverables.map((deliverable, delivIndex) => (
                          <Badge
                            key={delivIndex}
                            variant="secondary"
                            className="text-xs"
                          >
                            {deliverable}
                          </Badge>
                        ))}
                      </div>
                    </div>
                  </div>

                  <div className="mt-8 border-t border-border pt-6">
                    <div className="flex items-center justify-between">
                      <div>
                        <div className="text-lg font-semibold">
                          {service.price}
                        </div>
                        <div className="text-xs text-muted-foreground">
                          پیشنهاد قیمت اختصاصی در دسترس است
                        </div>
                      </div>
                      <Button
                        size="sm"
                        variant={service.featured ? "default" : "outline"}
                        className="transition-all group-hover:shadow-md"
                      >
                        شروع کنید
                        <ArrowRight className="ms-1 h-3 w-3 rtl:rotate-180 transition-transform group-hover:translate-x-1 rtl:group-hover:-translate-x-1" />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="rounded-xl border bg-background p-8 text-center">
            <h3 className="mb-2 text-xl font-semibold">
              به راه‌حل اختصاصی نیاز دارید؟
            </h3>
            <p className="mb-6 text-muted-foreground">
              بسته‌های سفارشی ترکیبی از چند خدمت برای تحول دیجیتال جامع
              ارائه می‌دهیم.
            </p>
            <Button
              size="lg"
              className="bg-gradient-to-r from-primary to-primary/80"
            >
              رزرو مشاوره
              <ArrowRight className="ms-2 h-4 w-4 rtl:rotate-180" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Services10 };