"use client";

import { ArrowRight, BadgeCheck, Pyramid, Sparkle, Zap } from "lucide-react";

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

interface DataItem {
  title: string;
  description: string;
  image: string;
  imageAlt: string;
  icon: React.ReactNode;
}

const DATA: DataItem[] = [
  {
    title: "بهینه‌سازی محتوا",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد SEO",
    icon: <Zap className="size-6" />,
  },
  {
    title: "تحلیل رقیب",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تحلیل کلمات کلیدی",
    icon: <Pyramid className="size-6" />,
  },
  {
    title: "لینک داخلی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "گزارش رتبه جستجو",
    icon: <Sparkle className="size-6" />,
  },
];

interface Feature182Props {
  className?: string;
}

const Feature182 = ({ className }: Feature182Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="text-center">
          <h2 className="mb-6 text-xl font-semibold text-balance sm:mb-9 sm:text-3xl lg:mb-14 lg:text-xl">
            رتبه کلمات کلیدی را پیگیری کنید
          </h2>
          <div className="flex flex-col justify-center gap-4 sm:flex-row">
            <Button className="w-full gap-2 sm:w-auto">
              ترافیک ارگانیک
              <ArrowRight className="size-4 rtl:rotate-180" />
            </Button>
            <Button variant="outline" className="w-full gap-2 shadow-sm sm:w-auto">
              شروع کنید
              <BadgeCheck className="size-4" />
            </Button>
          </div>
        </div>

        <div className="mt-12 grid gap-6 sm:gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
          {DATA.map((feature) => (
            <div key={feature.title} className="flex flex-col text-start">
              <img
                src={feature.image}
                alt={feature.imageAlt}
                className="h-64 w-full rounded-lg object-cover"
              />
              <p className="mt-4 mb-2 text-xl font-bold">{feature.title}</p>
              <p className="mb-6 text-sm text-pretty text-muted-foreground">
                {feature.description}
              </p>
              <div className="w-fit rounded-lg border p-2 shadow-sm">
                {feature.icon}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature182 };