"use client";

import { Check, ChevronRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const checkedItems = [
  "زمان حل مسئله را کوتاه کنید",
  "تیکت",
  "رضایت مشتری",
];

interface Feature124Props {
  className?: string;
}

const Feature124 = ({ className }: Feature124Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "container mx-auto flex flex-col items-start gap-20 py-32 md:flex-row md:items-center",
        className,
      )}
    >
      <div className="w-full text-start lg:w-[40%]">
        <h2 className="mb-8 text-3xl font-bold">
          کیفیت پاسخگویی را قابل اندازه‌گیری کنید
        </h2>
        <p className="mb-10">
          تیم پشتیبانی را هوشمندتر کنید
        </p>
        <ul className="mb-8 flex flex-col gap-2 text-muted-foreground">
          {checkedItems.map((item) => (
            <li className="flex items-center gap-2" key={item}>
              <Check className="size-5 shrink-0" />
              {item}
            </li>
          ))}
        </ul>
        <Button variant="outline">
          مرکز تماس
          <ChevronRight className="ms-2 h-4 w-4 rtl:rotate-180" />
        </Button>
      </div>
      <div className="relative flex h-[430px] w-full p-4 before:absolute before:inset-0 before:bg-primary/20 before:[mask-image:url(/block-media/shadcnblocks/block/patterns/cross-pattern.svg)] before:[mask-size:32px_32px] before:[mask-repeat:repeat]">
        <div className="absolute inset-0 z-1 bg-[radial-gradient(ellipse_at_center,var(--tw-gradient-stops))] from-transparent to-background opacity-30" />
        <div className="relative z-10 m-auto w-[80%]">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="مدیریت تیکت"
            className="max-h-[350px] w-full rounded-md object-cover"
          />
        </div>
        <div className="absolute inset-0 z-5 bg-linear-to-l from-background/50 via-transparent to-background/50" />
        <div className="absolute inset-0 z-5 bg-linear-to-t from-background/50 via-transparent to-background/50" />
      </div>
    </section>
  );
};

export { Feature124 };