import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/utils";

const STEPS = [
  {
    id: "vision-preparation",
    number: "۱",
    title: "نقش و دسترسی",
    description:
      "برنامه تیم را هماهنگ کنید و تداخل وظایف را کاهش دهید.",
  },
  {
    id: "shooting-direction",
    number: "۲",
    title: "چک‌لیست تحویل",
    description:
      "نسخه درست فایل همیشه در دسترس همه اعضا باشد.",
  },
  {
    id: "editing-delivery",
    number: "۰۳",
    title: "گزارش پیشرفت",
    description:
      "بحث را کنار هر تسک نگه دارید تا تصمیم‌ها گم نشود.",
  },
];

interface Feature207Props {
  className?: string;
}

const Feature207 = ({ className }: Feature207Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <p className="text-sm font-light">اعلان‌های هوشمند فقط اطلاعات ضروری را می‌رسانند و حواس‌پرتی را کم می‌کنند.</p>
        <h2 className="mt-2 text-3xl font-medium text-balance md:text-2xll">
          همکاری از راه دور را ساده کنید
        </h2>
        <div className="mt-14">
          <Separator />
          {STEPS.map((step) => (
            <div key={step.id}>
              <div className="py-8">
                <div className="flex gap-4 md:items-center">
                  <span className="mt-0.5 shrink-0 font-mono text-muted-foreground md:mt-0">
                    {step.number}
                  </span>
                  <div className="grid items-center gap-3 text-start md:grid-cols-2 md:gap-8">
                    <h3 className="text-xl">{step.title}</h3>
                    <p className="text-pretty text-muted-foreground">
                      {step.description}
                    </p>
                  </div>
                </div>
              </div>
              <Separator />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature207 };