import { Check, ChevronRight } from "lucide-react";
import { type SVGProps, useId } from "react";

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

const PLAN_FEATURES = [
  "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
  "Mainline AI",
  "ترافیک ارگانیک",
];

export function Feature195() {
  return (
    <section dir="rtl" lang="fa" className="py-32 text-background md:container md:max-w-5xl">
      <div className="relative isolate container grid items-center overflow-hidden bg-linear-to-r from-primary to-primary/75 py-8 max-lg:gap-10 max-md:gap-6 md:rounded-3xl lg:grid-cols-2 lg:px-8 rtl:bg-linear-to-l">
        <div className="absolute inset-0 -z-10 [mask-image:linear-gradient(to_left,black_50%,transparent_100%)] rtl:[mask-image:linear-gradient(to_right,black_50%,transparent_100%)]">
          <PlusSigns className="h-full w-full text-background/[0.05]" />
        </div>
        <div className="border-background/20 text-start lg:border-s lg:py-16 lg:pe-20">
          <h2 className="text-3xl font-semibold tracking-tight text-balance md:text-xl lg:text-2xll">
            رتبه کلمات کلیدی را پیگیری کنید
          </h2>
          <p className="mt-3 text-sm font-medium text-pretty text-background/70">
            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
          </p>
          <div className="mt-8 flex flex-wrap gap-4 max-md:hidden">
            <Button size="lg" variant="secondary" className="group gap-1" asChild>
              <a href="/signup">
                رتبه‌بندی
                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
              </a>
            </Button>
            <Button size="lg" className="group gap-1 bg-secondary-foreground" asChild>
              <a href="/">
                محتوای SEO
                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
              </a>
            </Button>
          </div>
        </div>

        <div className="space-y-6 text-start lg:py-10 lg:ps-20">
          <div>
            <h3 className="text-3xl font-semibold text-background md:text-xl lg:text-2xll">
              <span dir="rtl" className="inline-block">
                پیشنهاد عنوان
              </span>
            </h3>
            <p className="mt-1 text-xl font-medium text-background/70">
              گزارش رتبه و ترافیک نشان می‌دهد کدام اقدام بیشترین اثر را روی دیده‌شدن داشته است.
            </p>
          </div>
          <ul className="space-y-3 text-sm text-background/70">
            {PLAN_FEATURES.map((feature) => (
              <li key={feature} className="flex items-center gap-2">
                <Check className="size-4 shrink-0" />
                <span className="text-pretty">{feature}</span>
              </li>
            ))}
          </ul>
          <div className="mt-10 flex flex-wrap gap-4 md:hidden">
            <Button size="lg" variant="secondary" className="group w-full" asChild>
              <a href="/signup" className="flex items-center gap-2">
                بهینه‌سازی جستجو
                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
              </a>
            </Button>
            <Button size="lg" className="group w-full bg-secondary-foreground" asChild>
              <a href="/" className="flex items-center gap-2">
                ترافیک ارگانیک
                <ChevronRight className="size-4 transition-transform group-hover:translate-x-0.5 rtl:rotate-180 rtl:group-hover:-translate-x-0.5" />
              </a>
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

interface PlusSignsProps extends SVGProps<SVGSVGElement> {
  className?: string;
}

const PlusSigns = ({ className, ...props }: PlusSignsProps) => {
  const GAP = 16;
  const STROKE_WIDTH = 1;
  const PLUS_SIZE = 6;
  const id = useId();
  const patternId = `plus-pattern-${id}`;

  return (
    <svg width={GAP * 2} height={GAP * 2} className={className} {...props}>
      <defs>
        <pattern
          id={patternId}
          x="0"
          y="0"
          width={GAP}
          height={GAP}
          patternUnits="userSpaceOnUse"
        >
          <line
            x1={GAP / 2}
            y1={(GAP - PLUS_SIZE) / 2}
            x2={GAP / 2}
            y2={(GAP + PLUS_SIZE) / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
          <line
            x1={(GAP - PLUS_SIZE) / 2}
            y1={GAP / 2}
            x2={(GAP + PLUS_SIZE) / 2}
            y2={GAP / 2}
            stroke="currentColor"
            strokeWidth={STROKE_WIDTH}
          />
        </pattern>
      </defs>
      <rect width="100%" height="100%" fill={`url(#${patternId})`} />
    </svg>
  );
};