import {
  ArrowRight,
  Blend,
  ChartNoAxesColumn,
  CircleDot,
  Diamond,
} from "lucide-react";

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

const features = [
  {
    title: "گردش‌کارهای سفارشی",
    description: "پیشرفت را در جریان‌های کاری سفارشی تیم خود دنبال کنید.",
    icon: CircleDot,
  },
  {
    title: "نقاط عطف",
    description: "پروژه‌ها را به فازهای مشخص تقسیم کنید.",
    icon: Diamond,
  },
  {
    title: "پروژه‌های بین‌تیمی",
    description: "همکاری بین تیم‌ها و بخش‌ها.",
    icon: Blend,
  },
  {
    title: "بینش پیشرفت",
    description: "دامنه، سرعت و پیشرفت را در طول زمان رصد کنید.",
    icon: ChartNoAxesColumn,
  },
];

interface Hero186Props {
  className?: string;
}

const Hero186 = ({ className }: Hero186Props) => {
  return (
    <section
      className={cn(
        "relative mx-2.5 mt-2.5 rounded-t-2xl rounded-b-[36px] bg-linear-to-b from-background via-background to-background lg:mx-4",
        className,
      )}
    >
      <div className="py-32">
        <div className="container flex flex-col justify-between gap-8 md:gap-14 lg:flex-row">
          {/* Left side - Main content */}
          <div className="flex-1">
            <h1 className="text-3xl font-semibold tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
              مجموعه بلاک‌های آماده رابط کاربری
                                      </h1>

            <p className="mt-5 text-xl text-muted-foreground">
              صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
                                      </p>

            <div className="mt-8 flex flex-wrap items-center gap-4">
              <Button>شروع رایگان</Button>
              <a href="#">
                <Button variant="outline" className="h-auto">
                  <span className="flex items-center gap-2 text-start whitespace-pre-wrap">
                    مستندات <ArrowRight className="rtl:rotate-180" />
                  </span>
                </Button>
              </a>
            </div>
          </div>

          {/* Right side - Features */}
          <div className="relative flex flex-1 flex-col justify-center space-y-5 max-lg:pt-10 lg:ps-10">
            <DashedLine
              orientation="vertical"
              className="absolute top-0 left-0 max-lg:hidden"
            />
            <DashedLine
              orientation="horizontal"
              className="absolute top-0 lg:hidden"
            />
            {features.map((feature) => {
              const Icon = feature.icon;
              return (
                <div key={feature.title} className="flex gap-2.5 lg:gap-5">
                  <Icon className="mt-1 size-4 shrink-0 lg:size-5" />
                  <div>
                    <h2 className="font-semibold">{feature.title}</h2>
                    <p className="text-sm text-muted-foreground">
                      {feature.description}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        <div className="container mt-12 md:mt-20 lg:mt-24">
          <img
            src="/block-media/shadcnblocks/block/placeholder-3.svg"
            alt="تصویر نمونه"
            className="w-full rounded-2xl object-cover object-center sm:h-[500px] lg:h-[793px]"
          />
        </div>
      </div>
    </section>
  );
};

interface DashedLineProps {
  orientation?: "horizontal" | "vertical";
  className?: string;
}

const DashedLine = ({
  orientation = "horizontal",
  className,
}: DashedLineProps) => {
  const isHorizontal = orientation === "horizontal";

  return (
    <div
      className={cn(
        "relative text-muted-foreground",
        isHorizontal ? "h-px w-full" : "h-full w-px",
        className,
      )}
    >
      <div
        className={cn(
          isHorizontal
            ? [
                "h-px w-full",
                "bg-[repeating-linear-gradient(90deg,transparent,transparent_4px,currentColor_4px,currentColor_10px)]",
                "[mask-image:linear-gradient(90deg,transparent,black_25%,black_75%,transparent)]",
              ]
            : [
                "h-full w-px",
                "bg-[repeating-linear-gradient(180deg,transparent,transparent_4px,currentColor_4px,currentColor_8px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
              ],
        )}
      />
    </div>
  );
};

export { Hero186 };