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

interface Feature {
  title: string;
  description: string;
  image: string;
  imageAlt: string;
}

interface Feature166Props {
  title?: string;
  description?: string;
  feature1?: Feature;
  feature2?: Feature;
  feature3?: Feature;
  feature4?: Feature;
  className?: string;
}

const Feature166 = ({
  title = "فروش آنلاین را مقیاس‌پذیر کنید",
  description = "مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.",
  feature1 = {
    title: "مدیریت محصول",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "مدیریت سفارش",
  },
  feature2 = {
    title: "پرداخت امن",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "داشبورد فروش",
  },
  feature3 = {
    title: "ردیابی سفارش",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "پنل فروشگاه آنلاین",
  },
  feature4 = {
    title: "تخفیف هوشمند",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    image: "/block-media/shadcnblocks/block/placeholder-4.svg",
    imageAlt: "مدیریت سفارش",
  },
  className,
}: Feature166Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-24 flex flex-col items-center gap-6">
          <h1 className="text-center text-3xl font-semibold text-balance lg:max-w-3xl lg:text-2xll">
            {title}
          </h1>
          <p className="text-center text-lg font-medium text-pretty text-muted-foreground md:max-w-4xl lg:text-xl">
            {description}
          </p>
        </div>
        <div className="relative flex justify-center">
          <div className="border-muted2 relative flex w-full flex-col border md:w-1/2 lg:w-full">
            <div className="relative flex flex-col lg:flex-row">
              <div className="border-muted2 flex flex-col justify-between border-b border-solid p-10 text-start lg:w-3/5 lg:border-e lg:border-b-0">
                <h2 className="text-xl font-semibold">{feature1.title}</h2>
                <p className="text-pretty text-muted-foreground">
                  {feature1.description}
                </p>
                <img
                  src={feature1.image}
                  alt={feature1.imageAlt}
                  className="mt-8 aspect-[1.5] h-full w-full object-cover lg:aspect-[2.4]"
                />
              </div>
              <div className="flex flex-col justify-between p-10 text-start lg:w-2/5">
                <h2 className="text-xl font-semibold">{feature2.title}</h2>
                <p className="text-pretty text-muted-foreground">
                  {feature2.description}
                </p>
                <img
                  src={feature2.image}
                  alt={feature2.imageAlt}
                  className="mt-8 aspect-[1.45] h-full w-full object-cover"
                />
              </div>
            </div>
            <div className="border-muted2 relative flex flex-col border-t border-solid lg:flex-row">
              <div className="border-muted2 flex flex-col justify-between border-b border-solid p-10 text-start lg:w-2/5 lg:border-e lg:border-b-0">
                <h2 className="text-xl font-semibold">{feature3.title}</h2>
                <p className="text-pretty text-muted-foreground">
                  {feature3.description}
                </p>
                <img
                  src={feature3.image}
                  alt={feature3.imageAlt}
                  className="mt-8 aspect-[1.45] h-full w-full object-cover"
                />
              </div>
              <div className="flex flex-col justify-between p-10 text-start lg:w-3/5">
                <h2 className="text-xl font-semibold">{feature4.title}</h2>
                <p className="text-pretty text-muted-foreground">
                  {feature4.description}
                </p>
                <img
                  src={feature4.image}
                  alt={feature4.imageAlt}
                  className="mt-8 aspect-[1.5] h-full w-full object-cover lg:aspect-[2.4]"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature166 };