import type { LucideIcon } from "lucide-react";
import {
  ChevronRight,
  ClipboardCheck,
  Component,
  Files,
  FormInput,
  KeyRound,
  LayoutDashboard,
  Mail,
  Megaphone,
  Newspaper,
  Rocket,
  ScrollText,
  Sparkles,
  Users,
} from "lucide-react";

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

const FEATURES: {
  id: string;
  title: string;
  description: string;
  icon: LucideIcon;
  link: string;
}[] = [
  {
    id: "blog-templates",
    title: "بهینه‌سازی محتوا",
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: Newspaper,
    link: "#",
  },
  {
    id: "portfolio",
    title: "تحلیل رقیب",
    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: Files,
    link: "#",
  },
  {
    id: "dashboard-ui",
    title: "لینک داخلی",
    description: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: LayoutDashboard,
    link: "#",
  },
  {
    id: "landing-pages",
    title: "گزارش Core Web Vitals",
    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    icon: Rocket,
    link: "#",
  },
  {
    id: "documentation",
    title: "پیشنهاد عنوان",
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: ClipboardCheck,
    link: "#",
  },
  {
    id: "authentication",
    title: "تحلیل کلمه کلیدی",
    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: KeyRound,
    link: "#",
  },
  {
    id: "marketing-sites",
    title: "ممیزی فنی",
    description: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: Megaphone,
    link: "#",
  },
  {
    id: "social-media",
    title: "ردیابی رتبه",
    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    icon: Users,
    link: "#",
  },
  {
    id: "forms",
    title: "بهینه‌سازی محتوا",
    description: "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: FormInput,
    link: "#",
  },
  {
    id: "email-templates",
    title: "تحلیل رقیب",
    description: "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: Mail,
    link: "#",
  },
  {
    id: "components",
    title: "لینک داخلی",
    description: "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: Component,
    link: "#",
  },
  {
    id: "animations",
    title: "گزارش Core Web Vitals",
    description: "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    icon: Sparkles,
    link: "#",
  },
];

interface Feature210Props {
  className?: string;
}

const Feature210 = ({ className }: Feature210Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-6xl flex-col justify-between gap-3 md:flex-row md:items-end md:gap-12">
          <div className="flex basis-1/2 flex-col gap-3 text-start">
            <div className="flex items-center gap-2">
              <ScrollText className="size-4" />
              <p className="text-sm font-medium">تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.</p>
            </div>
            <h2 className="text-3xl font-medium text-balance md:text-xl">
              رتبه کلمات کلیدی را پیگیری کنید
            </h2>
          </div>
          <p className="w-fit basis-1/2 text-pretty font-medium text-muted-foreground">
            گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
          </p>
        </div>
        <div className="mx-auto mt-16 grid max-w-6xl gap-6 sm:grid-cols-2 sm:gap-8 md:mt-32 md:gap-y-6 lg:grid-cols-3 lg:gap-x-4 lg:gap-y-10 xl:grid-cols-4">
          {FEATURES.map((feature) => {
            const Icon = feature.icon;

            return (
              <a
                key={feature.id}
                href={feature.link}
                className="group flex flex-col gap-1 rounded-lg text-start transition-colors md:p-4 md:hover:bg-muted"
              >
                <div className="flex items-center gap-2">
                  <Icon className="size-4 shrink-0" />
                  <div className="flex items-center gap-1">
                    <p className="text-sm font-medium">{feature.title}</p>
                    <ChevronRight className="size-4 shrink-0 transition-transform md:group-hover:translate-x-0.5 rtl:rotate-180 rtl:md:group-hover:-translate-x-0.5" />
                  </div>
                </div>
                <p className="text-sm text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export { Feature210 };