import type { LucideIcon } from "lucide-react";
import { Cpu, Database, Globe, ShieldCheck } from "lucide-react";

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

interface FeatureItem {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
}

const FEATURES: FeatureItem[] = [
  {
    id: "global-distribution",
    title: "موجودی انبار",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    icon: Globe,
  },
  {
    id: "scalable-compute",
    title: "بازگشت مشتری",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    icon: Cpu,
  },
  {
    id: "managed-databases",
    title: "صفحه فرود",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    icon: Database,
  },
  {
    id: "layered-security",
    title: "گزارش فروش",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    icon: ShieldCheck,
  },
];

interface Feature230Props {
  className?: string;
}

const Feature230 = ({ className }: Feature230Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("overflow-hidden py-32", className)}>
      <div className="relative container">
        <div className="absolute -top-px left-1/2 h-px w-screen -translate-x-1/2 bg-border" />
        <img
          src="/block-media/shadcnblocks/block/placeholder-1.svg"
          alt="مدیریت سفارش"
          className="relative left-1/2 aspect-video max-h-[680px] w-screen max-w-none -translate-x-1/2 rounded-b-xl border-b border-border object-cover lg:static lg:max-w-full lg:translate-x-0 lg:border-x"
        />
        <div className="mt-20 grid gap-8 lg:grid-cols-10">
          <div className="text-start lg:col-span-4">
            <h2 className="mb-8 text-2xll font-medium text-balance md:text-2xll">
              فروش آنلاین را مقیاس‌پذیر کنید
            </h2>
            <p className="text-xl text-pretty text-muted-foreground">
              مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
            </p>
          </div>
          <div className="grid gap-8 sm:grid-cols-2 lg:col-span-6">
            {FEATURES.map((feature) => (
              <div key={feature.id} className="text-start">
                <feature.icon className="size-6" />
                <h3 className="mt-4 text-lg font-medium">{feature.title}</h3>
                <p className="mt-2 text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature230 };