"use client";

import { ArrowRight } from "lucide-react";

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

const people = [
  {
    id: 1,
    name: "Alex",
    designation: "مهندس نرم‌افزار",
    image:
      "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
  },
  {
    id: 2,
    name: "Lisa",
    designation: "طراح محصول",
    image:
      "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
  },
  {
    id: 3,
    name: "Julia",
    designation: "پژوهشگر تجربه کاربری",
    image:
      "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
  },
];

interface Hero248Props {
  className?: string;
}

const Hero248 = ({ className }: Hero248Props) => {
  return (
    <section className={cn("py-32", className)}>
      <div className="container">
        <div className="grid grid-cols-1 items-start gap-12 md:grid-cols-2 lg:gap-16">
          <div className="space-y-8">
            <h1 className="text-xl font-semibold tracking-tight md:text-2xll">
              تیم ما{" "}
              <span className="inline-flex items-start gap-4">
                <div className="relative flex items-start">
                  <div className="flex [&>div]:transition-transform [&>div]:duration-300 [&>div:hover]:rotate-0 [&>div:nth-child(1)]:-rotate-3 [&>div:nth-child(2)]:rotate-2 [&>div:nth-child(3)]:-rotate-1">
                    {/* <AnimatedTooltip items={people} /> */}
                  </div>
                </div>
              </span>
              <span className="ms-6">
                محصولات دیجیتالی طراحی می‌کنیم که نیاز کاربران و اهداف کسب‌وکار را هم‌زمان پوشش می‌دهند.
                                            </span>
            </h1>
            <p className="text-lg leading-relaxed text-muted-foreground md:text-xl">
              از ایده تا اجرا  تجربه‌های بصری و راهکارهای مقیاس‌پذیر می‌سازیم
              که با اهداف کسب‌وکار شما هم‌راستا است و واقعاً با مخاطبان‌تان
              ارتباط برقرار می‌کند.
            </p>
            <Button size="lg">
              درخواست مشاوره
                                        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
            </Button>
          </div>
          <div className="mx-auto max-w-xl lg:pt-4"></div>
        </div>
      </div>
    </section>
  );
};

export { Hero248 };