import { ChevronRight, Play } from "lucide-react";

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

interface Hero21Props {
  className?: string;
}

const Hero21 = ({ className }: Hero21Props) => {
  return (
    <section className={cn("mb-32 border-b pt-32", className)}>
      <div className="container">
        <div className="relative pb-16">
          <div className="absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center opacity-100" />
          <a
            href="#"
            className="mx-auto flex w-fit items-center gap-2 rounded-lg bg-muted p-3 sm:rounded-full sm:py-1 sm:pr-3 sm:pl-1"
          >
            <Badge className="hidden sm:block">نسخه جدید</Badge>
            <p className="flex items-center gap-1 text-sm">
              نسخه جدید با امکانات بیشتر منتشر شده است.
                                        <ChevronRight className="mt-0.5 size-4 shrink-0" />
            </p>
          </a>
          <h1 className="mx-auto my-5 max-w-5xl text-center text-3xl text-balance md:text-2xll">
            مدیریت هوشمند خانه، ساده و امن
                                </h1>
          <p className="mx-auto max-w-3xl text-center text-sm text-muted-foreground md:text-base">
            روشنایی، امنیت، تجهیزات و سناریوهای هوشمند را از هر مکان و تنها با یک داشبورد مدیریت کنید.
                                </p>
          <div className="mt-8 flex items-center justify-center gap-3">
            <Button>
              شروع رایگان <ChevronRight className="ms-2 size-4 rtl:rotate-180" />
            </Button>
            <Button variant="outline">
              <Play className="me-2 size-4" />
              مشاهده دمو
                                      </Button>
          </div>
          <div className="mt-5 flex justify-center">
            <a
              href="#"
              className="flex items-center gap-1 border-b border-dashed text-sm hover:border-solid hover:border-primary"
            >
              رزرو جلسه مشاوره
                                        <ChevronRight className="size-3.5 rtl:rotate-180" />
            </a>
          </div>
        </div>
        <div className="rounded-t-lg border-x border-t px-1 pt-1">
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه"
            className="max-h-80 w-full rounded-t-lg object-cover md:max-h-[430px]"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero21 };