import { Sparkles } from "lucide-react";

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

interface Hero197Props {
  className?: string;
}

const Hero197 = ({ className }: Hero197Props) => {
  return (
    <section className={cn("relative overflow-hidden py-32", className)}>
      <div className="container">
        {/* Background pattern with dots */}
        <div className="absolute inset-0 -z-10 h-full w-full bg-[radial-gradient(var(--primary)_1px,transparent_1px)] [background-size:20px_20px] opacity-25"></div>

        <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
          <div className="max-w-2xl">
            <Badge
              variant="outline"
              className="mb-6 bg-background px-4 py-1.5 text-sm"
            >
              به‌زودی <Sparkles className="ms-1 size-3.5" />
            </Badge>

            <h1 className="bg-linear-to-r from-foreground to-foreground/70 bg-clip-text text-2xll font-bold text-transparent md:text-2xll lg:text-2xll">
              توسعه نرم‌افزار را سریع‌تر پیش ببرید
                                      </h1>

            <p className="mt-6 max-w-xl text-xl text-muted-foreground">
              با خودکارسازی فرایندها، همکاری تیمی و مدیریت توسعه، نرم‌افزارهای باکیفیت را سریع‌تر منتشر کنید.
                                      </p>

            <div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center">
              <Button size="lg" className="w-full sm:w-auto">
                رایگان شروع کنید
              </Button>
              <Button size="lg" variant="outline" className="w-full sm:w-auto">
                درخواست نسخه نمایشی
                                            </Button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero197 };