import { ArrowDown } from "lucide-react";

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

interface Hero88Props {
  className?: string;
}

const Hero88 = ({ className }: Hero88Props) => {
  return (
    <section
      className={cn("font-dm_sans bg-background py-12 md:py-32", className)}
    >
      <div className="container">
        <div className="flex w-full flex-col gap-6">
          <h1 className="text-xl font-bold sm:text-2xll md:text-2xll lg:text-2xll xl:text-8xl">
            <span className="bg-linear-to-t from-primary to-primary/70 bg-clip-text text-transparent">
              پلتفرم توسعه رابط کاربری
                                      </span>
            <br />
            <span className="text-foreground">
              ایده‌های شما را به محصولات دیجیتال حرفه‌ای تبدیل می‌کنیم.
                                      </span>
          </h1>

          <p className="text-xl text-muted-foreground sm:text-3xl">
            با بیش از{" "}
            <strong className="font-semibold text-foreground">
              سال‌ها تجربه
                                      </strong>
            ، محصولات دیجیتال باکیفیت می‌سازیم که مخاطبان را جذب و رشد
            کسب‌وکار را شتاب می‌دهند.
          </p>

          <div className="flex flex-col items-center gap-4 py-4 sm:flex-row sm:flex-wrap">
            <Button className="w-full rounded-full px-8 py-6 text-lg font-bold sm:w-fit sm:px-12 sm:py-8">
              شروع همکاری
                                      </Button>
            <a
              href="#"
              className="inline-flex items-center gap-2 text-lg text-muted-foreground transition-colors hover:text-foreground sm:text-xl"
            >
              <span>مشاهده مطالعات موردی</span>
              <ArrowDown className="size-4 shrink-0 sm:size-6" aria-hidden />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero88 };