import {
  ArrowRight,
  Blocks,
  MessagesSquare,
  MoveRight,
  Users,
} from "lucide-react";

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

interface Hero26Props {
  className?: string;
}

const Hero26 = ({ className }: Hero26Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <a
            href="#"
            className="mx-auto mb-3 inline-flex items-center gap-3 rounded-full border px-2 py-1 text-sm"
          >
            <Badge className="rounded-full">نسخه جدید</Badge>
            معرفی Collaboration 2.0
                                  <span className="flex size-7 items-center justify-center rounded-full bg-muted">
              <ArrowRight className="w-4" />
            </span>
          </a>
          <h1 className="mx-auto mt-4 mb-3 max-w-3xl text-xl font-semibold text-balance lg:mb-7 lg:text-2xll">
            همکاری مؤثر را تجربه کنید
                                </h1>
          <p className="m mx-auto max-w-3xl text-muted-foreground lg:text-xl">
            پلتفرمی برای توانمندسازی
                                  <span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
              <Users className="me-1 w-4 md:w-5" />
              تیم‌ها
            </span>
            در
                                  <span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
              <Blocks className="me-1 w-5" />
              همکاری،
            </span>
            <span className="relative top-[5px] mx-2 inline-flex font-medium text-primary md:top-[3px]">
              <MessagesSquare className="me-1 w-5" />
              ارتباط مؤثر
                                      </span>
            و مدیریت پروژه‌ها. بدون نیاز به کارت بانکی، رایگان شروع کنید.
                                </p>
          <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
            <Button size="lg">
              شروع رایگان
                                        <MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
            </Button>
            <Button size="lg" variant="ghost">
              آشنایی بیشتر
                                        <MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero26 };