import { Minus } from "lucide-react";

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

interface Hero50Props {
  className?: string;
}

const Hero50 = ({ className }: Hero50Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col gap-7 text-center">
        <a
          href="#"
          className="group mx-auto mb-3 w-fit gap-3 rounded-full border px-5 py-2 text-sm"
        >
          <span className="me-1 font-medium">
            در نظرسنجی کاربران شرکت کنید
                                </span>
          نظر شما به بهبود محصول کمک می‌کند.
                            <Minus className="mx-1 inline-block w-4" />
          <span className="font-semibold group-hover:underline">
            مشاهده معرفی محصول
                                </span>
        </a>
        <h1 className="mx-auto max-w-4xl text-xl font-semibold text-balance lg:text-2xll">
          همه داده‌های کسب‌وکار در یک داشبورد
                          </h1>
        <p className="mx-auto max-w-4xl text-muted-foreground lg:text-xl">
          اطلاعات مشتریان، بازاریابی، فروش و پشتیبانی را در یک محیط یکپارچه مدیریت و تحلیل کنید.
                          </p>
        <div className="flex flex-col justify-center gap-4 sm:flex-row">
          <Button size="lg">شروع رایگان</Button>
          <Button size="lg" variant="outline">
            درخواست نسخه نمایشی
                                </Button>
        </div>
      </div>
      <div className="relative px-8">
        <div className="absolute inset-0 top-1/2 h-full w-full bg-linear-to-b from-muted to-transparent to-50%"></div>
        <div className="relative mx-auto max-w-5xl">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="mt-20 max-h-[580px] w-full rounded-lg object-cover shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_1px_1px_-0.5px_rgba(0,0,0,0.06),0px_3px_3px_-1.5px_rgba(0,0,0,0.06),0px_6px_6px_-3px_rgba(0,0,0,0.06),0px_12px_12px_-6px_rgba(0,0,0,0.06),0px_24px_24px_-12px_rgba(0,0,0,0.06)]"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-dark-2.svg"
            alt="تصویر نمونه"
            className="absolute top-1/2 -left-3 hidden max-h-56 -translate-y-1/2 rounded-lg object-cover shadow-md md:block xl:-left-10"
          />
          <img
            src="/block-media/shadcnblocks/block/placeholder-dark-3.svg"
            alt="تصویر نمونه"
            className="absolute top-1/3 -right-3 hidden h-24 w-24 -translate-y-1/2 rounded-lg bg-muted shadow-md md:block xl:-right-10"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero50 };