import { Bell, PlayCircle } from "lucide-react";

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

interface Hero13Props {
  className?: string;
}

const Hero13 = ({ className }: Hero13Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <Badge
          variant="outline"
          className="mb-4 max-w-full text-sm font-normal lg:mb-10 lg:py-2 lg:pr-5 lg:pl-2"
        >
          <span className="me-2 flex size-8 shrink-0 items-center justify-center rounded-full bg-accent">
            <Bell className="size-4" />
          </span>
          <p className="truncate whitespace-nowrap">
            نسخه جدید منتشر شد؛ همکاری تیمی سریع‌تر و مدیریت پروژه‌ها ساده‌تر شده است.
                                </p>
        </Badge>
        <h1 className="mb-6 text-xl leading-none font-bold tracking-tighter md:text-[7vw] lg:text-8xl">
          همکاری تیمی را هوشمندتر مدیریت کنید
                          </h1>
        <p className="max-w-2xl text-muted-foreground md:text-[2vw] lg:text-xl">
          همه ابزارهای موردنیاز برای برنامه‌ریزی، همکاری، مدیریت وظایف و تحویل پروژه‌ها را در یک پلتفرم در اختیار داشته باشید.
                          </p>
        <div className="mt-6 flex flex-col gap-4 sm:flex-row lg:mt-10">
          <Button size="lg" className="w-full md:w-auto">
            درخواست نسخه نمایشی
                                </Button>
          <Button size="lg" variant="outline" className="w-full md:w-auto">
            <PlayCircle className="me-2 size-4" />
            تماشای ویدیو
          </Button>
        </div>
      </div>
    </section>
  );
};

export { Hero13 };