"use client";

import {
  Blocks,
  Infinity as InfinityIcon,
  Laptop,
  ListEnd,
  Zap,
  ZoomIn,
  type LucideIcon,
} from "lucide-react";

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

const items: { icon: LucideIcon; description: string }[] = [
  {
    icon: ZoomIn,
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
  },
  {
    icon: Blocks,
    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
  },
  {
    icon: Laptop,
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
  },
  {
    icon: ListEnd,
    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
  },
  {
    icon: Zap,
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
  },
  {
    icon: InfinityIcon,
    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
  },
];

interface Feature128Props {
  className?: string;
}

const Feature128 = ({ className }: Feature128Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("container py-32", className)}>
      <div className="m-auto rounded-3xl bg-muted px-8 pt-14 pb-8 text-center md:px-16 md:pt-24 md:pb-16">
        <h2 className="mx-auto mb-4 max-w-96 text-3xl font-normal md:max-w-xl md:text-2xll">
          ترافیک ارگانیک را با{" "}
          <span className="italic">تحلیل دقیق کلمات کلیدی</span> پایدار رشد دهید
        </h2>
        <p className="mx-auto max-w-xl text-sm font-normal text-muted-foreground">
          تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
        </p>
        <div className="mt-16 grid w-full grid-cols-2 gap-px bg-muted-foreground md:grid-cols-3">
          {items.map((item) => (
            <div
              key={item.description}
              className="flex w-full flex-col items-center justify-center gap-6 bg-muted px-3 py-4 md:gap-8 md:px-6 md:py-8"
            >
              <div className="flex size-12 items-center justify-center rounded-xl border border-primary/10 bg-background drop-shadow-lg">
                <item.icon className="size-6" />
              </div>
              <p>{item.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature128 };