import { ChevronRight } from "lucide-react";

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

const Hero190 = () => {
  return (
    <section className="py-32">
      <div className="flex border-t">
        <BorderedSection>
          <DiagonalPattern />
        </BorderedSection>
        <div className="container mx-auto pt-16 pb-12 text-center md:pt-20 lg:pt-28">
          <h1 className="mx-auto max-w-[500px] text-[2.5rem] leading-[1.2] tracking-[-1.6px] text-balance md:text-[4rem] md:leading-[1.15]! md:tracking-[-4.32px] lg:text-2xll">
            مدیریت کارها را ساده‌تر کنید
                                </h1>
          <p className="mx-auto mt-5 max-w-[500px] leading-[1.5] tracking-[-0.32px] text-muted-foreground md:mt-6">
            وظایف تکراری را خودکار کنید، اولویت‌ها را مدیریت کنید و با کمک هوش مصنوعی بهره‌وری تیم را افزایش دهید.
                                </p>
          <Button asChild className="mt-6 gap-1 md:mt-8 lg:mt-10">
            <a href="/dashboard">
              شروع رایگان
                                        <ChevronRight className="size-4 rtl:rotate-180" />
            </a>
          </Button>
        </div>
        <BorderedSection className="border-r-0 border-l">
          <DiagonalPattern />
        </BorderedSection>
      </div>
      <div className="flex h-8 gap-1 max-lg:hidden">
        <div className="flex-1 border" />
        <DiagonalPattern className="w-52" />
        <div className="w-24 border" />
        <DiagonalPattern className="w-52" />
        <div className="w-24 border" />
        <DiagonalPattern className="w-52" />
        <div className="flex-1 border" />
      </div>
      <div className="flex">
        <BorderedSection />
        <div className="container pt-0! lg:p-1.5!">
          <img
            src="/block-media/shadcnblocks/block/placeholder-aspect-video-1.svg"
            alt="تصویر نمونه"
            className="rounded-xl border object-contain p-1"
            style={{
              boxShadow:
                "0px 8px 8px 0px rgba(0, 0, 0, 0.06), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 2px 0px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.06)",
            }}
          />
        </div>
        <BorderedSection className="border-r-0 border-l" />
      </div>
      <div className="flex max-lg:hidden">
        <div className="h-8 flex-1 border" />
        <div className="h-[96px] w-[min(753px,55vw)] -translate-y-1.5">
          <DiagonalPattern />
        </div>
        <div className="h-8 flex-1 border" />
      </div>
    </section>
  );
};

export { Hero190 };

const BorderedSection = ({
  children,
  className = "",
}: {
  children?: React.ReactNode;
  className?: string;
}) => (
  <div
    className={cn("relative w-[159px] border-r p-1 max-lg:hidden", className)}
  >
    {children}
  </div>
);

const DiagonalPattern = ({
  className,
  patternColor = "",
  patternOpacity = 0.15,
}: {
  className?: string;
  patternColor?: string;
  patternOpacity?: number;
}) => {
  const svgPattern = `${patternColor}${patternOpacity}`;

  return (
    <div
      className={cn("h-full w-full border-2 border-dashed", className)}
      style={{
        backgroundImage: svgPattern,
      }}
    />
  );
};