"use client";

import {
  Handshake,
  Download,
  GraduationCap,
  Headphones,
  RefreshCw,
  BarChart3,
} from "lucide-react";

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

const cooperationSteps = [
  {
    title: "برگزاری جلسه معرفی و نیازسنجی",
    description: "شناسایی نیازها و تعیین اهداف همکاری",
    icon: Handshake,
  },
  {
    title: "نصب نسخه اختصاصی",
    description: "راه‌اندازی سامانه متناسب با کسب‌وکار شما",
    icon: Download,
  },
  {
    title: "آموزش و راه‌اندازی",
    description: "آموزش تیم و راه‌اندازی عملیاتی",
    icon: GraduationCap,
  },
  {
    title: "۶ ماه پشتیبانی رایگان",
    description: "پشتیبانی فنی در ماه‌های اول همکاری",
    icon: Headphones,
  },
  {
    title: "ادامه پشتیبانی و توسعه ماهانه",
    description: "پشتیبانی مستمر و به‌روزرسانی‌های دوره‌ای",
    icon: RefreshCw,
  },
  {
    title: "ارزیابی و بهینه‌سازی مستمر",
    description: "بررسی عملکرد و پیشنهاد بهبود",
    icon: BarChart3,
  },
];

interface Feature104Props {
  className?: string;
}

const Feature104 = ({ className }: Feature104Props) => {
  return (
    <section
      className={cn(
        "overflow-visible border-t border-border/50 bg-background py-10 sm:py-16 md:py-24 lg:py-32",
        className
      )}
      dir="rtl"
    >
      <div className="container mx-auto px-4 sm:px-6">
        <div className="mx-auto max-w-3xl text-center">
          <Badge
            variant="outline"
            className="mb-3 sm:mb-4 border-primary/50 bg-background px-3 py-1 sm:px-4 sm:py-1.5 text-caption font-medium text-foreground"
          >
            مسیر همکاری
          </Badge>
          <h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
            فرآیند همکاری
          </h2>
          <p className="mt-3 text-body text-muted-foreground sm:mt-4">
            از اولین تماس تا راه‌اندازی و پشتیبانی، در هر مرحله همراه شما
            هستیم تا همکاری با مستر دکور ساده و شفاف باشد.
          </p>
        </div>

        <div className="mx-auto mt-8 max-w-5xl sm:mt-12">
          <div className="relative overflow-hidden rounded-lg border border-border bg-card sm:rounded-xl">
            <img
              src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-letters-and-arrows-flying-out-of-a-black-hole.svg"
              alt=""
              className="h-32 w-full scale-x-[-1] object-cover object-center opacity-60 sm:h-40 md:h-48"
            />
          </div>
        </div>

        <div className="mx-auto mt-10 grid max-w-6xl gap-4 sm:mt-16 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {cooperationSteps.map((step, index) => (
            <div
              key={index}
              className="flex flex-col gap-3 rounded-xl border border-border bg-card p-4 shadow-sm transition-colors hover:bg-accent/50 sm:gap-4 sm:p-6"
            >
              <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary sm:size-10">
                <step.icon className="size-5" />
              </div>
              <h3 className="text-heading-4 font-semibold leading-tight text-foreground">
                {step.title}
              </h3>
              <p className="text-body-sm text-muted-foreground">
                {step.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature104 };