import { ChevronRight } from "lucide-react";

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

interface Hero192Props {
  className?: string;
}

const Hero192 = ({ className }: Hero192Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-12 flex max-w-5xl flex-col items-center gap-6">
          <a
            href="#"
            className="flex items-center gap-2 rounded-full bg-muted py-1 pr-4 pl-1"
          >
            <Badge variant="outline" className="bg-background">
              بتا
            </Badge>
            <div className="flex items-center gap-1">
              <p className="text-sm font-semibold">پلتفرم را امتحان کنید</p>
              <ChevronRight className="h-4 w-4 rtl:rotate-180" />
            </div>
          </a>
          <h1 className="text-center text-2xll font-semibold md:text-2xll">
            شیوه مدیریت کسب‌وکار را متحول کنید
                                </h1>
          <p className="text-center text-lg text-muted-foreground md:text-xl">
            همه فرایندهای کاری، همکاری تیمی و مدیریت پروژه‌ها را در یک پلتفرم یکپارچه انجام دهید.
                                </p>
          <div className="flex gap-3">
            <Button size="lg">شروع رایگان</Button>
            <Button size="lg" variant="outline">
              بیشتر بدانید
            </Button>
          </div>
          <p className="text-sm text-muted-foreground">
            ۱۴ روز استفاده آزمایشی رایگان، بدون نیاز به تعهد.
                                </p>
        </div>
        <img
          src="/block-media/shadcnblocks/block/placeholder-1.svg"
          alt="تصویر نمونه"
          className="mx-auto max-h-[540px] rounded-lg object-cover drop-shadow sm:aspect-video"
        />
      </div>
    </section>
  );
};

export { Hero192 };