import { Download } from "lucide-react";

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

interface Hero5Props {
  className?: string;
}

const Hero5 = ({ className }: Hero5Props) => {
  return (
    <section className={cn("overflow-hidden py-32", className)}>
      <div className="container">
        <div className="flex flex-col items-center justify-between gap-20 lg:flex-row">
          <div className="flex flex-col items-center gap-6 text-center lg:items-start lg:text-start">
            <h1 className="text-xl font-bold text-pretty lg:max-w-md lg:text-2xll">
              رابط کاربری حرفه‌ای، سریع و آماده استفاده
                                      </h1>
            <p className="max-w-xl text-xl font-medium lg:text-xl">
              با استفاده از کامپوننت‌های آماده، طراحی و توسعه محصولات دیجیتال را سریع‌تر و باکیفیت‌تر انجام دهید.
                                      </p>
            <div className="flex w-full justify-center lg:justify-start">
              <Button className="w-full sm:w-auto" size="lg">
                <Download className="me-2 size-5" />
                مشاهده امکانات
                                            </Button>
            </div>
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="تصویر نمونه قهرمان"
            className="aspect-video rounded-md object-cover"
          />
        </div>
      </div>
    </section>
  );
};

export { Hero5 };