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

interface Feature34Props {
  className?: string;
}

const Feature34 = ({ className }: Feature34Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mx-auto mb-20 max-w-3xl text-center">
          <h1 className="mb-6 text-xl font-medium lg:text-2xll">
            رتبه کلمات کلیدی را پیگیری کنید
          </h1>
          <p className="font-medium text-muted-foreground">
            با SEO دقیق‌تر رشد کنید
          </p>
        </div>
        <div className="mx-auto grid gap-10 lg:grid-cols-3">
          <div className="order-1 flex h-full items-center rounded-lg bg-muted p-4 lg:order-none">
            <div className="mx-auto max-w-80 rounded-lg bg-background p-6">
              <div className="mb-2 flex items-center gap-2">
                <img
                  src="/block-media/shadcnblocks/block/block-1.svg"
                  alt="داشبورد SEO"
                  className="h-7"
                />
                <span className="text-lg font-semibold">ترافیک ارگانیک</span>
              </div>
              <p className="text-sm text-muted-foreground">
                تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
              </p>
            </div>
          </div>
          <div className="order-3 flex h-full items-center rounded-lg bg-muted lg:order-none">
            <img
              src="/block-media/shadcnblocks/block/placeholder-1.svg"
              alt="تحلیل کلمات کلیدی"
              className="aspect-video h-full w-full rounded-lg object-cover"
            />
          </div>
          <div className="order-5 grid h-full grid-cols-3 gap-4 rounded-lg bg-muted p-4 lg:order-none">
            <div className="flex items-center justify-center self-stretch rounded-lg bg-background text-xl font-medium">
              ۱
            </div>
            <div className="col-span-2 flex items-center justify-center self-stretch rounded-lg bg-background p-6 text-xl font-medium">
              <img
                src="/block-media/shadcnblocks/block/block-3.svg"
                alt="گزارش رتبه جستجو"
                className="max-h-16"
              />
            </div>

            <div className="col-span-3 flex items-center justify-center self-stretch rounded-lg bg-background p-6 text-xl font-medium">
              <img
                src="/block-media/shadcnblocks/block/block-4.svg"
                alt="داشبورد SEO"
                className="max-h-44"
              />
            </div>
            <div className="col-span-2 flex items-center justify-center self-stretch rounded-lg bg-background p-6 text-xl font-medium">
              <img
                src="/block-media/shadcnblocks/block/block-5.svg"
                alt="تحلیل کلمات کلیدی"
                className="max-h-16"
              />
            </div>
            <div className="flex items-center justify-center self-stretch rounded-lg bg-background text-xl font-medium">
              ۱۰
            </div>
          </div>
          <div className="order-2 -mt-6 max-w-[412px] lg:order-none">
            <p className="mb-6 text-sm text-muted-foreground lg:mb-12">
              گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
            </p>
            <h3 className="mb-3 text-xl font-medium lg:mb-6">
              پیشنهاد عنوان
            </h3>
            <p className="mb-6 text-muted-foreground">
              تحلیل کلمه کلیدی
            </p>
          </div>
          <div className="order-4 -mt-6 max-w-[412px] lg:order-none">
            <p className="mb-6 text-sm text-muted-foreground lg:mb-12">
              با چک‌لیست بهینه‌سازی، صفحات جدید را از ابتدا برای جستجو آماده منتشر کنید.
            </p>
            <h3 className="mb-3 text-xl font-medium lg:mb-6">
              ممیزی فنی
            </h3>
            <p className="mb-6 text-muted-foreground">
              ردیابی رتبه
            </p>
          </div>
          <div className="order-6 -mt-6 max-w-[412px] lg:order-none">
            <p className="mb-6 text-sm text-muted-foreground lg:mb-12">
              تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
            </p>
            <h3 className="mb-3 text-xl font-medium lg:mb-6">
              بهینه‌سازی محتوا
            </h3>
            <p className="mb-6 text-muted-foreground">
              تحلیل رقیب
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature34 };