import { ArrowRight } from "lucide-react";

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

const FEATURES = [
  {
    id: "modern",
    number: "۱",
    title: "بهینه‌سازی محتوا",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
  },
  {
    id: "responsive",
    number: "۲",
    title: "تحلیل رقیب",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
  },
  {
    id: "customizable",
    number: "۳",
    title: "لینک داخلی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
  },
  {
    id: "accessible",
    number: "۴",
    title: "گزارش Core Web Vitals",
    description:
      "تغییرات رتبه را روزانه ببینید و واکنش سریع داشته باشید.",
  },
] as const;

interface Feature231Props {
  className?: string;
}

const Feature231 = ({ className }: Feature231Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative overflow-hidden bg-background py-24 md:py-32",
        className,
      )}
    >
      <div className="container">
        <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
          <div className="space-y-8 text-start">
            <h1 className="text-2xll font-semibold tracking-tight text-balance sm:text-2xll">
              <span className="mb-2 block text-muted-foreground">
                رتبه کلمات کلیدی را پیگیری کنید
              </span>
              <span className="mb-2 block text-primary">تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.</span>
              <span className="block">ترافیک ارگانیک</span>
            </h1>

            <hr className="w-24 border-t-2 border-border" />

            <p className="max-w-md text-lg text-pretty text-muted-foreground">
              گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
            </p>

            <div className="flex gap-4">
              <Button size="lg" className="gap-2">
                شروع کنید
                <ArrowRight className="size-4 rtl:rotate-180" />
              </Button>
              <Button size="lg" variant="outline">
                بیشتر بدانید
              </Button>
            </div>
          </div>

          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 sm:gap-8">
            {FEATURES.map((feature) => (
              <div
                key={feature.id}
                className="rounded-lg border border-border bg-card p-6 text-start shadow-sm transition-all"
              >
                <div className="mb-4 flex size-8 items-center justify-center rounded-full bg-primary/10">
                  <span className="font-bold text-primary">{feature.number}</span>
                </div>
                <h3 className="mb-2 text-xl font-semibold">{feature.title}</h3>
                <p className="text-sm text-pretty text-muted-foreground">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export { Feature231 };