import { ArrowRight, DollarSign, Medal, Sparkle, Zap } from "lucide-react";

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

interface Hero68Props {
  className?: string;
}

const Hero68 = ({ className }: Hero68Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="border-x border-t border-dashed px-4 py-20 md:px-16">
          <div className="mx-auto max-w-3xl">
            <a
              href="#"
              className="mx-auto mb-4 flex w-fit items-center gap-2 rounded-full bg-muted px-4 py-2 text-sm"
            >
              <Badge>جدید</Badge>
              نسخه ۲٫۲ منتشر شد!
              <ArrowRight className="inline size-4 rtl:rotate-180" />
            </a>
            <h1 className="my-4 mb-6 text-center text-3xl font-semibold lg:text-8xl">
              طراحی وب‌سایت برای استارتاپ‌ها
                                      </h1>
            <p className="mx-auto mb-6 max-w-2xl text-center text-muted-foreground lg:text-xl">
              وب‌سایت‌هایی سریع، مقیاس‌پذیر و بهینه برای رشد کسب‌وکارهای نوپا طراحی می‌کنیم.
                                      </p>
            <div className="flex flex-col justify-center gap-2 sm:flex-row">
              <Button size="lg" className="w-full gap-2 sm:w-auto lg:mt-10">
                <div className="size-2 rounded-full bg-green-400"></div>
                شروع نسخه آزمایشی
                                            </Button>
              <Button
                variant="outline"
                size="lg"
                className="w-full gap-2 sm:w-auto lg:mt-10"
              >
                <Avatar className="size-8 rounded-full ring-1 ring-input">
                  <AvatarImage
                    src="/block-media/shadcnblocks/block/avatar-1.webp"
                    alt="نمونه"
                  />
                </Avatar>
                درخواست نسخه نمایشی
                                            </Button>
            </div>
          </div>
        </div>
        <div className="relative grid border-x border-dashed md:grid-cols-3">
          <Sparkle className="absolute top-0 right-0 h-auto w-5 translate-x-2.5 -translate-y-2.5 fill-primary" />
          <Sparkle className="absolute top-0 left-0 h-auto w-5 -translate-x-2.5 -translate-y-2.5 fill-primary" />
          <div className="flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
            <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
              <Zap className="w-5 lg:w-6" />
            </span>
            تحویل پروژه در ۲ تا ۴ هفته
                                </div>
          <div className="flex items-center gap-6 border-x border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
            <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
              <DollarSign className="w-5 lg:w-6" />
            </span>
            شفافیت کامل در هزینه‌ها
                                </div>
          <div className="flex items-center gap-6 border-t border-dashed p-4 font-medium md:justify-center lg:p-10 lg:text-lg">
            <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-muted text-sm lg:size-12 lg:text-base">
              <Medal className="w-5 lg:w-6" />
            </span>
            تضمین بازگشت وجه در صورت نارضایتی
                                </div>
        </div>
      </div>
    </section>
  );
};

export { Hero68 };