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

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_10px)]",
                "[mask-image:linear-gradient(180deg,transparent,black_25%,black_75%,transparent)]",
              ],
        )}
      />
    </div>
  );
};

interface Stat {
  value: string;
  label: string;
}

interface Hero262Props {
  heading?: string;
  subheading?: string;
  description?: string;
  stats?: Stat[];
  className?: string;
}

const Hero262 = ({
  heading = "نرم‌افزار باکیفیت برای همه",
  subheading = "توسعه نرم‌افزارهای مدرن با کمک هوش مصنوعی.",
  description =
    "ما متعهدیم که نحوه برنامه‌ریزی، اجرا و تحویل پروژه‌ها توسط تیم‌ها را متحول کنیم. مأموریت ما ارائه مزیت غیرقابل‌رقابت به مشتریان در برابر تأخیر، ناکارآمدی و بی‌نظمی از طریق بینش‌های عملی و همکاری یکپارچه است. برای دادن ابزارهایی که هر پروژه را به خط پایان می‌رسانند، حاضر به هر تلاشی هستیم.\n\nما مشتری‌مدار هستیم  وقت می‌گذاریم تا هر جنبه جریان کار شما را درک کنیم و بهتر از همیشه عمل کنید. ما در این مسیر با هم هستیم؛ چون موفقیت شما، موفقیت ما است.",
  stats = [
    {
      value: "۱۵۰ میلیون دلار",
      label: "سرمایه جمع‌آوری‌شده",
    },
    {
      value: "۲۰ هزار",
      label: "شرکت",
    },
    {
      value: "۱٫۳ میلیارد",
      label: "تراکنش ماهانه",
    },
    {
      value: "۱٫۵ هزار",
      label: "اتصال در دقیقه",
    },
  ],
  className,
}: Hero262Props) => {
  return (
    <section className={cn("py-28 lg:py-32", className)}>
      <div className="container flex max-w-5xl flex-col justify-between gap-8 md:gap-20 lg:flex-row lg:items-center lg:gap-24 xl:gap-24">
        <div className="flex-[1.5] text-start">
          <h1 className="text-3xl tracking-tight sm:text-xl md:text-2xll lg:text-2xll">
            {heading}
          </h1>

          <p className="mt-5 text-xl text-muted-foreground md:text-3xl lg:text-xl">
            {subheading}
          </p>

          <div className="mt-8 hidden max-w-lg space-y-6 text-lg text-balance text-muted-foreground md:block lg:mt-12">
            {description.split("\n\n").map((paragraph, i) => (
              <p key={i}>{paragraph}</p>
            ))}
          </div>
        </div>

        <div className="relative flex flex-1 flex-col justify-center gap-3 text-start pt-10 lg:pt-0 lg:ps-10">
          <DashedLine
            orientation="vertical"
            className="absolute top-0 start-0 max-lg:hidden"
          />
          <DashedLine
            orientation="horizontal"
            className="absolute top-0 lg:hidden"
          />
          {stats.map((stat) => (
            <div key={stat.label} className="flex flex-col gap-1">
              <div className="text-xl tracking-wide md:text-2xll">
                {stat.value}
              </div>
              <div className="text-muted-foreground">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Hero262 };