import { Expand, Globe, MoveRight, Rocket, Wrench } from "lucide-react";

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

interface Hero24Props {
  className?: string;
}

const Hero24 = ({ className }: Hero24Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <img
            src="/block-media/shadcnblocks/block/block-1.svg"
            alt="تصویر نمونه"
            className="mx-auto mb-5 w-16 md:mb-6 md:w-24 lg:mb-7 lg:w-28"
          />
          <span className="mb-3 text-sm tracking-widest text-muted-foreground md:text-base">
            پلتفرم
          </span>
          <h1 className="mt-4 text-xl font-semibold text-balance lg:text-2xll">
            کسب‌وکار خود را روی زیرساختی مقیاس‌پذیر توسعه دهید
                                </h1>
          <Button className="mt-8" size="lg">
            همین امروز رایگان شروع کنید
                                  <MoveRight className="ms-2 rtl:rotate-180" strokeWidth={1} />
          </Button>
        </div>
        <div className="mt-16 grid gap-px overflow-hidden rounded-lg border bg-input md:grid-cols-2 lg:grid-cols-4">
          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
            <Globe className="size-6 shrink-0" />
            <div>
              <h2 className="text-sm font-semibold md:text-base">
                زیرساخت قدرتمند
              </h2>
              <p className="text-sm text-muted-foreground md:text-base">
                زیرساختی قابل اعتماد برای رشد پایدار و مدیریت آسان سرویس‌ها.
                                            </p>
            </div>
          </div>
          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
            <Rocket className="size-6 shrink-0" />
            <div>
              <h2 className="text-sm font-semibold md:text-base">راه‌اندازی آسان</h2>
              <p className="text-sm text-muted-foreground md:text-base">
                بدون پیچیدگی، سرویس خود را در کوتاه‌ترین زمان راه‌اندازی کنید.
                                            </p>
            </div>
          </div>
          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
            <Expand className="size-6 shrink-0" />
            <div>
              <h2 className="text-sm font-semibold md:text-base">
                مقیاس‌پذیری بی‌دردسر
              </h2>
              <p className="text-sm text-muted-foreground md:text-base">
                همراه با رشد کاربران و نیازهای کسب‌وکار، بدون نگرانی مقیاس‌پذیر بمانید.
                                            </p>
            </div>
          </div>
          <div className="flex flex-col gap-3 bg-background p-5 md:gap-6">
            <Wrench className="size-6 shrink-0" />
            <div>
              <h2 className="text-sm font-semibold md:text-base">
                نگهداری کم
              </h2>
              <p className="text-sm text-muted-foreground md:text-base">
                زمان خود را صرف توسعه محصول کنید، نه مدیریت زیرساخت.
                                            </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero24 };