import { ArrowDown, BookOpen, LayoutGrid, Sparkles } from "lucide-react";

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

interface Hero235Props {
  className?: string;
}

const SERVICES = [
  {
    icon: Sparkles,
    title: "هویت بصری",
    description:
      "هویت بصری منسجمی طراحی می‌کنیم که به ماندگاری برند و ایجاد ارتباط مؤثر با مخاطبان کمک می‌کند.",
  },
  {
    icon: LayoutGrid,
    title: "تجربه‌های تعاملی",
    description:
      "با ترکیب طراحی، فناوری و تعامل، تجربه‌هایی ماندگار برای کاربران خلق می‌کنیم.",
  },
  {
    icon: BookOpen,
    title: "کارگاه‌ها",
    description:
      "کارگاه‌های آموزشی و مشاوره‌ای متناسب با نیاز تیم شما برگزار می‌کنیم.",
  },
];

const Hero235 = ({ className }: Hero235Props) => {
  return (
    <section
      className={cn(
        "relative flex h-dvh items-center justify-center overflow-hidden bg-background py-32",
        className,
      )}
    >
      <div aria-hidden={true}>
        <div className="absolute -right-0 -bottom-[30rem] size-[35rem] rounded-full bg-rose-400 opacity-40 blur-[5rem] md:-right-[2rem] md:-bottom-[50rem] md:size-[55rem] dark:opacity-20" />
        <div className="absolute -right-[20rem] -bottom-[20rem] size-[35rem] rounded-full bg-sky-500 opacity-40 blur-[5rem] md:-right-[32rem] md:-bottom-[36rem] md:size-[55rem] dark:opacity-20" />
        <div
          className="pointer-events-none absolute inset-0 z-0 opacity-40"
          style={{
            backgroundImage:
              "url(/block-media/shadcnblocks/block/noise.png)",
            backgroundRepeat: "repeat",
          }}
        />
      </div>
      <div className="relative container flex h-full flex-col justify-between">
        <div className="flex flex-1 items-center justify-center">
          <div className="mx-auto flex max-w-2xl flex-col items-center text-center">
            <h1 className="text-xl font-semibold tracking-tight text-balance text-foreground md:text-2xll lg:text-2xll">
              استودیوی طراحی و توسعه محصولات دیجیتال
                                      </h1>
            <p className="mt-8 max-w-xl text-pretty text-muted-foreground md:text-lg">
              رابط‌های کاربری و تجربه‌های دیجیتالی طراحی می‌کنیم که علاوه بر زیبایی، عملکردی سریع، مقیاس‌پذیر و کاربرپسند داشته باشند.
                                      </p>
            <Button size="lg" className="mt-10">
              مشاهده مطالعات موردی
                                        <ArrowDown className="shrink-0" aria-hidden />
            </Button>
          </div>
        </div>
        <div className="pt-16">
          <div className="grid gap-12 lg:grid-cols-3 lg:gap-0">
            {SERVICES.map((service) => {
              const Icon = service.icon;
              return (
                <div
                  key={service.title}
                  className={cn(
                    "flex flex-col border-l border-primary px-6 md:px-8",
                  )}
                >
                  <Icon className="mb-4 size-6" aria-hidden />
                  <h2 className="font-semibold text-foreground">
                    {service.title}
                  </h2>
                  <p className="mt-2 text-sm text-muted-foreground">
                    {service.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Hero235 };