import { Blocks, MoveRight, Wrench, Zap } from "lucide-react";

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

interface Hero25Props {
  className?: string;
}

const Hero25 = ({ className }: Hero25Props) => {
  return (
    <section className={cn("py-20 md:py-28 lg:py-36", className)}>
      <div className="container px-4 md:px-6">
        <div className="mx-auto max-w-4xl text-center">
          <img
            src="/block-media/shadcnblocks/block/block-4.svg"
            alt="تصویر نمونه"
            className="mx-auto mb-6 w-14 md:mb-8 md:w-20 lg:mb-10 lg:w-24"
          />
          <span className="mb-2 inline-block text-sm font-medium tracking-wider text-muted-foreground uppercase md:text-base">
            سیستم‌ها
          </span>
          <h1 className="mt-4 text-xl leading-tight font-bold text-balance md:text-2xll lg:text-2xll lg:leading-[1.1]">
            پلتفرمی برای رشد تیم و مدیریت پروژه‌ها
                                </h1>
          <div className="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
            <Button size="lg" className="px-8 py-6 text-base font-medium">
              شروع رایگان
                                        <MoveRight className="ms-2 size-5 rtl:rotate-180" strokeWidth={1.5} />
            </Button>
            <Button
              size="lg"
              variant="secondary"
              className="px-8 py-6 text-base font-medium"
            >
              مطالعه مستندات
                                        <MoveRight className="ms-2 size-5 rtl:rotate-180" strokeWidth={1.5} />
            </Button>
          </div>
          <div className="mt-10 lg:mt-12">
            <ul className="flex flex-wrap justify-center gap-6 text-sm text-muted-foreground lg:text-base">
              <li className="flex items-center gap-2.5 whitespace-nowrap">
                <Zap className="size-5 text-primary" />
                راهنمای راه‌اندازی سریع
              </li>
              <li className="flex items-center gap-2.5 whitespace-nowrap">
                <Blocks className="size-5 text-primary" />
                کاملاً قابل سفارشی‌سازی
              </li>
              <li className="flex items-center gap-2.5 whitespace-nowrap">
                <Wrench className="size-5 text-primary" />
                کامپوننت‌های آماده استفاده
                                            </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero25 };