import { Blocks, BookOpen, Palette, Zap } from "lucide-react";

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

const features = [
  {
    id: "feature-1",
    title: "بهینه‌سازی محتوا",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: <Blocks className="size-10" strokeWidth={1.5} />,
  },
  {
    id: "feature-2",
    title: "تحلیل رقیب",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: <Palette className="size-10" strokeWidth={1.5} />,
  },
  {
    id: "feature-3",
    title: "لینک داخلی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: <Zap className="size-10" strokeWidth={1.5} />,
  },
  {
    id: "feature-4",
    title: "گزارش Core Web Vitals",
    description:
      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    icon: <BookOpen className="size-10" strokeWidth={1.5} />,
  },
];

interface Feature76Props {
  className?: string;
}

const Feature76 = ({ className }: Feature76Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("relative pt-32", className)}>
      <div className="relative z-10 container flex flex-col space-y-14">
        <h2 className="px-6 text-3xl font-semibold md:mb-4 md:text-2xll lg:mb-6 lg:max-w-md lg:px-10">
          رتبه کلمات کلیدی را پیگیری کنید
        </h2>
        <div className="relative mt-6 md:mt-10">
          <div className="absolute inset-x-0 top-0 h-px bg-border" />
          <div className="grid divide-border md:grid-cols-4 md:divide-s">
            {features.map((feature) => (
              <div
                key={feature.id}
                className="relative px-6 pb-20 md:pb-10 lg:px-10"
              >
                <div className="absolute inset-x-0 top-0 h-px bg-border md:hidden" />
                <div className="relative -mt-6 mb-10 flex aspect-square w-12 items-center justify-center bg-background md:-mt-10 md:mb-10 md:w-20">
                  {feature.icon}
                </div>
                <div>
                  <h3 className="mb-3 max-w-xs text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
                    {feature.title}
                  </h3>
                  <p className="text-muted-foreground">{feature.description}</p>
                </div>
              </div>
            ))}
          </div>
          <div className="absolute inset-x-0 bottom-0 h-px bg-border" />
        </div>
      </div>
      <div className="absolute inset-0 container hidden h-full md:block">
        <div className="relative h-full">
          <div className="absolute inset-y-0 start-0 h-full w-px bg-border" />
          <div className="absolute inset-y-0 end-0 h-full w-px bg-border" />
        </div>
      </div>
    </section>
  );
};

export { Feature76 };