import { CheckCircle2, Globe, Lock, Star, Zap } from "lucide-react";

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

interface Hero57Props {
  className?: string;
}

const Hero57 = ({ className }: Hero57Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div
          className="absolute inset-0 top-0 -z-10 mx-auto max-h-[600px] w-full opacity-10"
          style={{
            backgroundImage: `url('/block-media/shadcnblocks/block/patterns/grid3.svg')`,
            backgroundRepeat: "repeat",
            maskImage:
              "radial-gradient(ellipse 80% 100% at 50% 30%, #000 40%, transparent 75%)",
            WebkitMaskImage:
              "radial-gradient(ellipse 80% 100% at 50% 30%, #000 40%, transparent 75%)",
          }}
        ></div>
        <h1 className="relative mx-auto mb-8 max-w-3xl flex-wrap text-center text-xl font-semibold md:mb-10 md:text-2xll md:leading-snug">
          <span>
            پیشنهادهای حرفه‌ای
                                  <span className="ms-1 opacity-50">۱۰ برابر سریع‌تر</span> با
            <Globe className="mx-2 mb-1 inline-block h-auto w-8 md:mx-4 md:mb-3 md:w-14" />
            AI
          </span>
          <div className="absolute -top-10 -left-20 hidden w-fit -rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
            <Zap className="h-auto w-3" />
            سریع
          </div>
          <div className="absolute top-14 -left-24 hidden w-fit -rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
            <Lock className="h-auto w-3" />
            امن
          </div>
          <div className="absolute -top-10 -right-24 hidden w-fit rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
            حرفه‌ای
            <Star className="h-auto w-3" />
          </div>
          <div className="absolute top-14 -right-28 hidden w-fit rotate-12 gap-1 border-b border-dashed border-muted-foreground text-sm font-normal text-muted-foreground underline-offset-3 lg:flex">
            بهینه
            <CheckCircle2 className="h-auto w-3" />
          </div>
        </h1>
        <p className="mx-auto mb-10 max-w-3xl text-center font-medium text-muted-foreground md:text-xl">
          با کمک هوش مصنوعی، پیشنهادهای حرفه‌ای و شخصی‌سازی‌شده ایجاد کنید و نرخ تبدیل را افزایش دهید.
                          </p>
        <div className="flex flex-col items-center justify-center gap-3 pt-3 pb-12">
          <Button size="lg">شروع آزمایش رایگان ۱۴ روزه</Button>
          <div className="text-sm text-muted-foreground md:text-balance">
            مبتنی بر هوش مصنوعی
                                </div>
        </div>
      </div>
    </section>
  );
};

export { Hero57 };