import { Circle, Trophy } from "lucide-react";

import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero160Props {
  className?: string;
}

const Hero160 = ({ className }: Hero160Props) => {
  return (
    <section
      className={cn(
        "dark relative overflow-hidden bg-background py-12 font-sans md:py-28",
        className,
      )}
    >
      <img
        src="/block-media/external/unsplash/photo-1637946175559-22c4fe13fc54.jpg"
        alt="تصویر نمونه"
        className="absolute top-0 left-0 z-10 aspect-2/1 w-full"
      />
      <div className="absolute inset-0 z-20 bg-linear-to-b from-transparent to-black" />
      <div className="relative z-20 container">
        <div className="flex flex-col items-center gap-5">
          <Badge className="mb-2 flex w-fit items-center gap-2 rounded-full border border-muted-foreground bg-background px-4 py-2 hover:bg-background">
            <Trophy className="h-4 w-4 stroke-muted-foreground" />
            <p className="text-sm leading-normal font-light text-muted-foreground">
              برترین استارتاپ سال ۲۲۳
            </p>
          </Badge>
          <h1 className="bg-[linear-gradient(135deg,theme(colors.muted2.DEFAULT)_25%,theme(colors.muted2.foreground))] w-full max-w-[37.5rem] bg-clip-text py-2 text-center text-xl leading-tight font-normal text-transparent md:max-w-[50rem] md:text-2xll xl:max-w-[62.5rem] xl:text-[3.6rem]">
            پرداخت‌ها را هوشمند مدیریت کنید و فروش خود را افزایش دهید.
                                </h1>
          <p className="w-full max-w-[51.875rem] text-center text-xl text-muted-foreground">
            فرآیندهای مالی و فروش را یکپارچه کنید و با تصمیم‌گیری مبتنی بر داده، رشد پایدارتری تجربه کنید.
                                </p>
          <div className="mt-4 flex flex-col items-center gap-4 md:flex-row">
            <Button asChild>
              <a href="#">شروع آزمایش رایگان</a>
            </Button>
            <Button variant="secondary">
              <a href="#">درخواست نسخه نمایشی</a>
            </Button>
          </div>
          <div className="flex flex-wrap items-center gap-3 md:flex-row">
            <p className="text-sm text-muted-foreground">
              نیاز به کارت اعتباری نیست
            </p>
            <Circle className="h-1 w-1 fill-muted-foreground" />
            <p className="text-sm text-muted-foreground">لغو در هر زمان</p>
          </div>
        </div>
      </div>
      <div className="relative z-20 mx-auto max-w-[86.5rem] px-8 py-20 md:py-32">
        <AspectRatio
          ratio={1.562130178 / 1}
          className="overflow-hidden rounded-2xl border border-white/15"
        >
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="h-full w-full object-cover object-center"
          />
        </AspectRatio>
      </div>
    </section>
  );
};

export { Hero160 };