"use client";

import { BadgeCheck } from "lucide-react";
import React from "react";

import { cn } from "@/lib/utils";

interface Feature246Props {
  className?: string;
}

const Feature246 = ({ className }: Feature246Props) => {
  const benefits = [
    "برگزاری جلسه معرفی و نیازسنجی",
    "نصب نسخه اختصاصی",
    "آموزش و راه‌اندازی",
    "۶ ماه پشتیبانی رایگان",
    "ادامه پشتیبانی و توسعه ماهانه",
  ];

  return (
    <section className={cn("overflow-visible bg-background", className)} dir="rtl">
      <div className="container mx-auto flex flex-col items-center justify-between overflow-visible px-6 py-40 lg:flex-row">
        <div className="flex w-full max-w-4xl flex-col items-center gap-20 text-center lg:mr-2 lg:items-start lg:text-left">
          <h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground">
            بخش فرآیند همکاری
          </h2>
          <div className="flex flex-col space-y-5 lg:items-start">
            {benefits.map((benefit, index) => (
              <div key={index} className="flex items-center justify-center gap-4 lg:justify-start">
                <div className="flex h-7 w-7 items-center justify-center">
                  <BadgeCheck className="h-20" />
                </div>
                <span className="text-heading-4 leading-[var(--line-height-heading)] tracking-tight text-foreground">
                  {benefit}
                </span>
              </div>
            ))}
          </div>
        </div>
        <div className="relative flex min-h-[400px] w-full items-center justify-center overflow-visible rounded-none py-12 lg:min-h-[500px] lg:py-20">
          <img
            src="https://deifkwefumgah.cloudfront.net/shadcnblocks/block/illustrations/tokyo-letters-and-arrows-flying-out-of-a-black-hole.svg"
            className="h-full w-full scale-x-[-1] object-contain object-center"
            alt=""
          />
        </div>
      </div>
    </section>
  );
};

export { Feature246 };