"use client";

import { cn } from "@/lib/utils";
import { CheckCircle2 } from "lucide-react";

interface CooperationProcessSectionProps {
  className?: string;
}

export default function CooperationProcessSection({ className }: CooperationProcessSectionProps) {
  const steps = [
    "برگزاری جلسه معرفی و نیازسنجی",
    "نصب نسخه اختصاصی",
    "آموزش و راه‌اندازی",
    "۶ ماه پشتیبانی رایگان",
    "ادامه پشتیبانی و توسعه ماهانه"
  ];

  return (
    <section className={cn("py-16 md:py-24 lg:py-32 border-t border-border/50", className)}>
      <div className="container mx-auto max-w-4xl px-6">
        <div className="flex flex-col items-center space-y-8">
          <h2 className="text-heading-2 font-semibold text-center">
            فرآیند همکاری
          </h2>
          <div className="w-full space-y-4">
            {steps.map((step, index) => (
              <div key={index} className="flex items-start gap-4 p-6 rounded-lg bg-card border border-border shadow-sm">
                <div className="flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground font-semibold shrink-0">
                  {index + 1}
                </div>
                <p className="text-base leading-relaxed text-foreground md:text-lg pt-1">
                  {step}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}