"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:
        "ICP، کانال و پیام جذب را تعریف می‌کنیم تا سرنخ‌های واردشده با مخاطب هدف فروش هم‌خوان باشند.",
      items: [
        "تعریف ICP و بخش‌بندی",
        "نقشه کانال‌های جذب",
        "معیار واجد شرایط بودن سرنخ",
        "برنامه فصلی جذب",
      ],
      deliverables: [
        "سند ICP",
        "نقشه کانال",
        "معیار MQL/SQL",
      ],
      duration: "۲ تا ۴ هفته",
      price: "از ۵٬۰۰۰ دلار",
      featured: false,
    },
    {
      icon: <PenTool className="h-6 w-6" />,
      title: "کمپین و لندینگ",
      description:
        "صفحات فرود، فرم‌ها و پیشنهادها را برای افزایش نرخ تبدیل و کیفیت سرنخ بهینه می‌کنیم.",
      items: [
        "طراحی لندینگ‌پیج",
        "بهینه‌سازی فرم و CTA",
        "آزمایش پیشنهاد ارزش",
        "ردیابی تبدیل",
      ],
      deliverables: ["لندینگ آماده", "گزارش تبدیل", "برنامه آزمایش"],
      duration: "۳ تا ۶ هفته",
      price: "از ۸٬۰۰۰ دلار",
      featured: true,
    },
    {
      icon: <Code className="h-6 w-6" />,
      title: "پرورش و تحویل به فروش",
      description:
        "امتیازدهی و جریان پرورش را وصل می‌کنیم تا فروش فقط با سرنخ‌های آماده وارد گفتگو شود.",
      items: [
        "امتیازدهی رفتاری",
        "جریان پرورش خودکار",
        "قوانین تحویل به فروش",
        "همگام‌سازی CRM",
      ],
      deliverables: ["مدل امتیازدهی", "جریان پرورش", "راهنمای SLA فروش"],
      duration: "۴ تا ۸ هفته",
      price: "از ۱۰٬۰۰۰ دلار",
      featured: true,
    },
    {
      icon: <Shrub className="h-6 w-6" />,
      title: "بهینه‌سازی مستمر",
      description:
        "هزینه جذب، نرخ تبدیل و نرخ برد را پایش می‌کنیم و بودجه را به کانال‌های پربازده منتقل می‌کنیم.",
      items: [
        "داشبورد هزینه جذب",
        "تحلیل کیفیت سرنخ",
        "آزمایش کانال",
        "گزارش درآمد منتسب",
      ],
      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">
              سیستم جذب سرنخ B2B
            </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 };