import {
  ChartArea,
  ChartNoAxesCombined,
  Layout,
  Medal,
  Monitor,
  Target,
  TrendingUp,
  type LucideIcon,
} from "lucide-react";

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

const leftFeatures = [
  {
    title: "بهینه‌سازی محتوا",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: Target,
  },
  {
    title: "تحلیل رقیب",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: Layout,
  },
  {
    title: "لینک داخلی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: ChartArea,
  },
];

const rightFeatures = [
  {
    title: "گزارش Core Web Vitals",
    description:
      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
    icon: TrendingUp,
  },
  {
    title: "پیشنهاد عنوان",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: ChartNoAxesCombined,
  },
  {
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: Monitor,
  },
];

function FeatureCard({
  icon: Icon,
  title,
  description,
}: {
  icon: LucideIcon;
  title: string;
  description: string;
}) {
  return (
    <div className="flex flex-col gap-3 rounded-lg border p-6">
      <div className="flex items-center gap-2.5">
        <span className="flex size-12 items-center justify-center rounded-md bg-muted">
          <Icon className="h-auto w-6" />
        </span>
        <h3 className="font-medium">{title}</h3>
      </div>
      <p className="text-sm text-muted-foreground md:text-base">{description}</p>
    </div>
  );
}

interface Feature104Props {
  className?: string;
}

const Feature104 = ({ className }: Feature104Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto flex max-w-3xl flex-col items-center gap-4">
          <Badge
            variant="outline"
            className="flex items-center gap-1 px-2.5 py-1.5 text-sm"
          >
            <Medal className="h-auto w-4" />
            ترافیک ارگانیک
          </Badge>
          <h2 className="text-center text-3xl font-semibold lg:text-xl">
            رتبه کلمات کلیدی را پیگیری کنید
          </h2>
          <p className="text-center text-muted-foreground lg:text-lg">
            با SEO دقیق‌تر رشد کنید
          </p>
        </div>
        <div className="mt-14 grid gap-2.5 lg:grid-cols-3">
          <div className="flex flex-col gap-2.5">
            {leftFeatures.map((feature) => (
              <FeatureCard key={feature.title} {...feature} />
            ))}
          </div>
          <img
            src="/block-media/shadcnblocks/block/placeholder-1.svg"
            alt="داشبورد SEO"
            className="hidden h-full rounded-lg object-cover lg:block"
          />
          <div className="flex flex-col gap-2.5">
            {rightFeatures.map((feature) => (
              <FeatureCard key={feature.title} {...feature} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature104 };