import { ArrowRightIcon } from "lucide-react";

import { LinkPreview } from "@/components/shadcnblocks/link-preview";
import { cn } from "@/lib/utils";

const TECH_STACK = [
  {
    id: "payment",
    label: "درگاه پرداخت",
    url: "https://ShadcnBlocks",
  },
  {
    id: "shipping",
    label: "شرکت حمل",
    url: "https://ui.shadcn.com",
  },
  {
    id: "inventory",
    label: "مدیریت موجودی",
    url: "https://tailwindcss.com",
  },
  {
    id: "سامانه مدیریت ارتباط با مشتری",
    label: "مدیریت مشتری",
    url: "https://www.framer.com/motion",
  },
  {
    id: "analytics",
    label: "تحلیل فروش",
    url: "https://nextjs.org",
  },
  {
    id: "email",
    label: "ایمیل مارکتینگ",
    url: "https://www.typescriptlang.org",
  },
] as const;

interface Feature289Props {
  className?: string;
}

const Feature289 = ({ className }: Feature289Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden py-32", className)}
    >
      <div className="relative z-20 container flex w-full flex-col items-center justify-between gap-10 md:flex-row">
        <div className="text-start">
          <h1 className="text-2xll font-semibold tracking-tighter text-balance md:text-2xll lg:text-8xl">
            فروش آنلاین را مقیاس‌پذیر کنید
            <br />
            تجربه خرید را روان‌تر بسازید
          </h1>

          <div className="mt-18 max-w-md">
            <div className="mb-2 h-px w-full bg-foreground" />
            <div className="flex items-center justify-between">
              <p className="text-lg text-foreground">بیشتر بدانید</p>
              <ArrowRightIcon className="size-5 stroke-1 rtl:rotate-180" />
            </div>
          </div>
        </div>
        <div className="flex gap-5 text-lg lg:gap-10">
          <p className="shrink-0 font-semibold">یکپارچگی با ابزارهای فروش</p>
          <ul className="text-start">
            {TECH_STACK.map((item) => (
              <li key={item.id}>
                <LinkPreview
                  url={item.url}
                  className="opacity-40 hover:opacity-100"
                >
                  {item.label}
                </LinkPreview>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Feature289 };