import { ArrowRight } from "lucide-react";
import React from "react";

import { BackgroundBeamsWithCollision } from "@/components/aceternity/background-beams-with-collision";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero241Props {
  className?: string;
}

const Hero241 = ({ className }: Hero241Props) => {
  return (
    <section
      className={cn(
        "relative h-full min-h-screen w-screen overflow-hidden py-32",
        className,
      )}
    >
      <div className="static z-10 container flex flex-col items-center justify-center gap-10 text-center">
        <h1 className="font-playfair mt-10 text-2xll font-medium tracking-tight lg:text-2xll">
          سریع‌ترین مسیر برای <br /> رابط‌های کاربری آماده استفاده
                          </h1>
        <p className="max-w-xl leading-5 font-medium">
          صدها بلاک و کامپوننت آماده مبتنی بر رابط کاربری، استایل‌دهی مدرن و ری یو آی که مستقیماً در پروژه‌های شما قابل استفاده هستند.
                          </p>
        <div className="flex items-center gap-4">
          <Button className="text-md rounded-xl font-serif">
            مشاهده مستندات <ArrowRight className="-rotate-45 rtl:rotate-180" />{" "}
          </Button>
          <Button variant="secondary" className="text-md rounded-xl font-serif">
            شروع رایگان <ArrowRight className="-rotate-45 rtl:rotate-180" />{" "}
          </Button>
        </div>
        <div className="absolute bottom-8 flex items-center justify-center gap-7">
          <div className="text-end">
            <h1 className="font-serif text-xl tracking-tight">+۱ میلیون</h1>
            <p className="text-muted-foreground">مورد اعتماد توسعه‌دهندگان</p>
          </div>
          <div className="h-24 w-px bg-foreground" />
          <div className="text-start">
            <h1 className="font-serif text-xl tracking-tight">95.1%</h1>
            <p className="text-muted-foreground">کاهش زمان توسعه</p>
          </div>
        </div>
      </div>
      <BackgroundBeamsWithCollision className="absolute bottom-0 z-1 bg-gradient-to-b from-[#d9d9d9]/0 to-[#89e5ff]">
        <span></span>
      </BackgroundBeamsWithCollision>
    </section>
  );
};

export { Hero241 };