import { Atom, ChevronRight, Settings, Zap } from "lucide-react";

import { cn } from "@/lib/utils";

interface Feature116Props {
  className?: string;
}

const Feature116 = ({ className }: Feature116Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <h1 className="mb-4 text-center text-xl font-semibold">
          رتبه کلمات کلیدی را پیگیری کنید
        </h1>
        <p className="text-center text-muted-foreground">
          با SEO دقیق‌تر رشد کنید
        </p>
        <div className="grid grid-cols-1 gap-y-5 pt-14 xl:grid-cols-3 xl:grid-rows-2 xl:gap-x-5 xl:gap-y-0">
          <a
            href="#"
            className="group relative col-span-2 row-span-3 overflow-hidden rounded-xl"
          >
            <img
              src="/block-media/external/unsplash/photo-1653288973812-81d1951b8127.jpg"
              alt="داشبورد SEO"
              className="h-full max-h-[580px] w-full rounded-xl object-cover object-center"
            />
            <div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
            <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
              <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
                <Atom className="h-auto w-6" />
                ترافیک ارگانیک
              </span>
              <div className="flex flex-col gap-5 text-background">
                <h4 className="text-xl font-semibold lg:text-3xl">
                  پیشنهاد عنوان
                </h4>
                <p className="flex items-center gap-1 font-medium">
                  تحلیل کلمه کلیدی
                  <ChevronRight className="h-auto w-4 rtl:rotate-180" />
                </p>
              </div>
            </div>
          </a>
          <div className="grid gap-y-5 xl:row-span-2">
            <a href="#" className="group relative overflow-hidden rounded-xl">
              <img
                src="/block-media/external/unsplash/photo-1647715360138-33fb6fe68539.jpg"
                alt="تحلیل کلمات کلیدی"
                className="h-full max-h-44 w-full rounded-xl object-cover object-center"
              />
              <div className="absolute inset-0 translate-y-10 rounded-xl bg-linear-to-t from-primary to-transparent opacity-80 transition-transform duration-300 group-hover:translate-y-0" />
              <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
                <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
                  <Settings className="h-auto w-6" />
                  رتبه‌بندی
                </span>
                <div className="flex flex-col gap-5 text-background">
                  <h4 className="text-xl font-semibold lg:text-3xl">
                    ممیزی فنی
                  </h4>
                  <p className="flex items-center gap-1 font-medium">
                    ردیابی رتبه
                    <ChevronRight className="h-auto w-4 rtl:rotate-180" />
                  </p>
                </div>
              </div>
            </a>
            <a
              href="#"
              className="group relative row-span-2 overflow-hidden rounded-xl"
            >
              <img
                src="/block-media/external/unsplash/photo-1563952532949-3d1a874ad614.jpg"
                alt="گزارش رتبه جستجو"
                className="h-full max-h-96 w-full rounded-xl object-cover object-center"
              />
              <div className="absolute inset-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" />
              <div className="absolute top-0 flex h-full w-full flex-col justify-between p-7">
                <span className="ms-auto flex w-fit items-center gap-1 p-2.5 text-sm font-semibold text-background">
                  <Zap className="h-auto w-6 fill-background" />
                  محتوای SEO
                </span>
                <div className="flex flex-col gap-5 text-background">
                  <h4 className="text-xl font-semibold lg:text-3xl">
                    بهینه‌سازی محتوا
                  </h4>
                  <p className="flex items-center gap-1 font-medium">
                    تحلیل رقیب
                    <ChevronRight className="h-auto w-4 rtl:rotate-180" />
                  </p>
                </div>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature116 };