import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const features = [
  {
    title: "پیشنهاد عنوان",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد SEO",
    colSpan: "lg:col-span-4",
  },
  {
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تحلیل کلمات کلیدی",
    colSpan: "lg:col-span-3",
  },
];

interface Feature64Props {
  className?: string;
}

const Feature64 = ({ className }: Feature64Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center gap-16 lg:px-16">
        <div className="text-center">
          <Badge variant="outline" className="mb-6">
            ترافیک ارگانیک
          </Badge>
          <h3 className="mb-3 text-3xl font-semibold text-pretty md:mb-4 md:text-xl lg:mb-6 lg:max-w-3xl lg:text-2xll">
            ممیزی فنی
          </h3>
          <p className="text-muted-foreground lg:max-w-3xl lg:text-lg">
            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
          </p>
        </div>
        <div className="grid w-full gap-6 lg:grid-cols-7">
          {features.map((feature) => (
            <div
              key={feature.title}
              className={cn(
                "flex flex-col rounded-lg border border-border bg-accent p-6 md:p-8",
                feature.colSpan,
              )}
            >
              <div className="flex justify-center">
                <img
                  src={feature.image}
                  alt={feature.imageAlt}
                  className="mb-6 aspect-4/3 sm:max-h-64 md:mb-8 lg:w-full"
                />
              </div>
              <div className="mt-auto flex flex-col">
                <p className="mb-2 text-sm font-semibold md:text-base">
                  {feature.title}
                </p>
                <p className="text-sm text-muted-foreground md:text-base">
                  {feature.description}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Feature64 };