import {
  Blocks,
  CalendarClock,
  ChartNoAxesCombined,
  SquarePen,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";

const FEATURES_DATA = [
  {
    title: "پیشنهاد عنوان",
    description:
      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
    icon: SquarePen,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "داشبورد SEO",
  },
  {
    title: "تحلیل کلمه کلیدی",
    description:
      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
    icon: CalendarClock,
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تحلیل کلمات کلیدی",
  },
  {
    title: "ممیزی فنی",
    description:
      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
    icon: ChartNoAxesCombined,
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "گزارش رتبه جستجو",
  },
];

interface Feature167Props {
  className?: string;
}

const Feature167 = ({ className }: Feature167Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container flex flex-col gap-6 border-x py-4 text-right max-lg:border-x lg:py-8">
          <Badge variant="outline" className="w-fit gap-1">
            <Blocks />
            ترافیک ارگانیک
          </Badge>

          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
            رتبه کلمات کلیدی را پیگیری کنید
          </h2>
          <p className="max-w-[600px] text-pretty text-muted-foreground">
            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
          </p>
        </div>
      </div>

      <div className="container border-x px-0">
        <Tabs
          dir="rtl"
          defaultValue={FEATURES_DATA[0].title}
          className="flex flex-col items-stretch gap-0 divide-y rounded-none lg:flex-row! lg:divide-x lg:divide-y-0"
        >
          <TabsList className="flex h-auto! w-full flex-col rounded-none border-b bg-transparent p-0 lg:w-1/3 lg:border-e lg:border-b-0">
            {FEATURES_DATA.map((item, index, array) => (
              <TabsTrigger
                key={item.title}
                value={item.title}
                className={cn(
                  "group relative flex w-full rounded-none px-8 py-4 text-right whitespace-normal data-[state=active]:shadow-none! lg:px-6 lg:py-5",
                  index !== array.length - 1 && "border-b",
                )}
              >
                <div className="absolute start-0 bottom-[-1px] z-10 h-[2px] w-0 bg-linear-to-e from-blue-600 via-sky-300 to-transparent transition-all duration-300 group-data-[state=active]:w-1/2" />
                <div className="flex w-full flex-col text-right">
                  <div className="flex items-center gap-1.5">
                    <item.icon className="size-4" />
                    <h3 className="text-lg tracking-tight">{item.title}</h3>
                  </div>
                  <p className="mt-2.5 text-right text-sm text-pretty text-muted-foreground">
                    {item.description}
                  </p>
                </div>
              </TabsTrigger>
            ))}
          </TabsList>

          <div className="relative flex-1">
            <div className="h-[300px] lg:h-[400px]">
              {FEATURES_DATA.map((item) => (
                <TabsContent
                  key={item.title}
                  value={item.title}
                  className="absolute inset-0 m-0 rounded-none p-6 transition-all duration-500 data-[state=inactive]:pointer-events-none data-[state=inactive]:opacity-0"
                >
                  <div className="flex h-full">
                    <img
                      src={item.image}
                      alt={item.imageAlt}
                      className="h-full w-full object-cover"
                    />
                  </div>
                </TabsContent>
              ))}
            </div>
          </div>
        </Tabs>
      </div>

      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container h-full w-full border-x" />
      </div>
    </section>
  );
};

export { Feature167 };