import { ArrowUpRight } from "lucide-react";
import { BiLogoPlayStore } from "react-icons/bi";
import { FaApple } from "react-icons/fa";
import { SiTrustpilot } from "react-icons/si";

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

interface Hero15Props {
  className?: string;
}

const Hero15 = ({ className }: Hero15Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="flex items-center justify-center">
          <Badge variant="outline" asChild>
            <a href="#" className="inline-flex items-center py-0">
              <span className="me-1 py-0.5 font-semibold">جدید</span>
              <span className="mx-1 w-px self-stretch bg-border"></span>
              <span className="py-0.5">مشاهده جزئیات</span>
              <ArrowUpRight className="ms-1 size-3" />
            </a>
          </Badge>
        </div>
        <h1 className="mx-auto my-4 mb-6 max-w-3xl text-center text-3xl font-bold lg:text-2xll">
          ابزارهایی برای افزایش بهره‌وری تیم شما
                          </h1>
        <p className="mx-auto mb-8 max-w-2xl text-center text-muted-foreground lg:text-xl">
          فرآیندهای کاری را یکپارچه کنید و با تمرکز بیشتر، پروژه‌ها را سریع‌تر به نتیجه برسانید.
                          </p>
        <div className="flex justify-center">
          <Button
            size="lg"
            className="w-full shadow-sm transition-shadow hover:shadow-md sm:w-auto lg:mt-10"
          >
            شروع رایگان
                                </Button>
        </div>
        <div className="mt-8 lg:mt-12">
          <ul className="flex flex-wrap justify-center gap-6 text-sm lg:text-base">
            <li className="flex items-center gap-2 whitespace-nowrap">
              <BiLogoPlayStore className="size-5" />
              امتیاز ۴٫۷ در فروشگاه اندروید
            </li>
            <li className="flex items-center gap-2 whitespace-nowrap">
              <FaApple className="size-5" />
              امتیاز ۴٫۸ در فروشگاه آی‌اواس
            </li>
            <li className="flex items-center gap-2 whitespace-nowrap">
              <SiTrustpilot className="size-5" />
              امتیاز ۴٫۹ در سایت نظرسنجی
            </li>
          </ul>
        </div>
      </div>
    </section>
  );
};

export { Hero15 };