"use client";

import {
  Blocks,
  ChevronRight,
  Infinity as InfinityIcon,
  Laptop,
  ListEnd,
  type LucideIcon,
} from "lucide-react";

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

const itemsData: {
  title: string;
  description: string;
  icon: LucideIcon;
  imageSrc: string;
}[] = [
  {
    title: "موجودی انبار",
    description:
      "محصولات را دسته‌بندی کنید و ویژگی‌ها را برای جستجوی بهتر ساختاردهی کنید.",
    icon: Blocks,
    imageSrc: "/block-media/shadcnblocks/block/placeholder-1.svg",
  },
  {
    title: "بازگشت مشتری",
    description:
      "پرداخت سریع و امن اعتماد مشتری را در لحظه خرید حفظ می‌کند.",
    icon: Laptop,
    imageSrc: "/block-media/shadcnblocks/block/placeholder-2.svg",
  },
  {
    title: "صفحه فرود",
    description:
      "وضعیت ارسال را شفاف نشان دهید و تماس‌های پشتیبانی را کم کنید.",
    icon: ListEnd,
    imageSrc: "/block-media/shadcnblocks/block/placeholder-3.svg",
  },
  {
    title: "گزارش فروش",
    description:
      "کد تخفیف و کمپین را بر اساس رفتار خرید هدف بگیرید.",
    icon: InfinityIcon,
    imageSrc: "/block-media/shadcnblocks/block/placeholder-4.svg",
  },
];

const gridItems = [
  {
    id: 1,
    row: 3,
    col: 3,
    imgSrc: "/block-media/shadcnblocks/block/block-1.svg",
    alt: "مدیریت سفارش",
  },
  {
    id: 2,
    row: 4,
    col: 4,
    imgSrc: "/block-media/shadcnblocks/block/block-2.svg",
    alt: "داشبورد فروش",
  },
  {
    id: 3,
    row: 4,
    col: 7,
    imgSrc: "/block-media/shadcnblocks/block/block-2.svg",
    alt: "پنل فروشگاه آنلاین",
  },
];

interface Feature127Props {
  className?: string;
}

const Feature127 = ({ className }: Feature127Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container max-w-[1200px]">
        <div className="flex gap-6">
          <div className="w-full text-start">
            <span className="text-base text-muted-foreground">
              مسیر خرید را بهینه کنید تا سبد رها شده کمتر شود. پیشنهاد هوشمند محصول، میانگین سفارش را بالا می‌برد.
            </span>
            <h2 className="my-4 text-3xl font-medium">
              فروش آنلاین را مقیاس‌پذیر کنید
            </h2>

            <p className="text-lg text-muted-foreground">
              تجربه خرید را روان‌تر بسازید
            </p>
          </div>

          <div className="relative hidden w-full lg:block">
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,var(--tw-gradient-stops))] from-transparent to-background" />

            <div className="grid w-full grid-cols-8 grid-rows-4 gap-2">
              {Array.from({ length: 32 - gridItems.length }).map((_, index) => (
                <div
                  key={index}
                  className="flex w-full rounded-md bg-muted p-3"
                />
              ))}
              {gridItems.map((item) => (
                <div
                  key={item.id}
                  className={`col-start-${item.col} rounded-md row-start-${item.row} bg-muted p-3`}
                >
                  <img
                    src={item.imgSrc}
                    alt={item.alt}
                    className="h-full w-full object-cover"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-2 grid grid-cols-1 gap-6 md:grid-cols-2">
          {itemsData.map((item) => (
            <div key={item.title} className="rounded-lg border p-12 pb-0 text-start">
              <div className="mb-8 flex items-center justify-between">
                <div className="flex size-12 items-center justify-center rounded-lg bg-muted">
                  <item.icon className="size-6" />
                </div>
                <Button variant="outline" className="size-10 p-0" aria-label={`بیشتر درباره ${item.title}`}>
                  <ChevronRight className="size-4 rtl:rotate-180" />
                </Button>
              </div>

              <h4 className="mb-4 text-xl font-medium">{item.title}</h4>
              <p className="mb-8 text-muted-foreground">{item.description}</p>
              <div className="relative m-auto mt-4 w-full overflow-hidden">
                <div className="absolute inset-x-0 bottom-0 z-2 h-[100px] bg-[linear-gradient(to_top,white_0%,rgba(255,255,255,0)_100%)]" />
                <img
                  src={item.imageSrc}
                  alt={`نمای ${item.title}`}
                  className="max-h-[270px] w-full rounded-md object-cover"
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature127 };