"use client";

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

import { Globe } from "@/components/magicui/globe";
import { Meteors } from "@/components/magicui/meteors";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Hero216Props {
  className?: string;
}

const Hero216 = ({ className }: Hero216Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container flex flex-col items-center justify-center gap-4 overflow-hidden">
        <p className="text-muted-foreground">
          توسعه بهتر، آینده‌ای هوشمندتر
                          </p>
        <h1 className="font-calSans max-w-3xl text-center text-2xll md:text-2xll">
          جامعه‌ای برای توسعه‌دهندگان سراسر جهان
                          </h1>

        <Meteors number={30} />

        <Button
          variant="secondary"
          className="text-md group mt-10 flex w-fit items-center justify-center gap-2 rounded-full px-4 py-1 tracking-tight"
        >
          شروع رایگان
                            <ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ms-3 group-hover:rotate-0 rtl:rotate-180" />
        </Button>
        <div className="relative h-115 w-full overflow-y-clip">
          <Globe className="translate-y-40 scale-175" />
        </div>
      </div>
    </section>
  );
};

export { Hero216 };