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

const feature95Tabs = [
  {
    title: "تحلیل کانال",
    description: "مخاطبان را بر اساس رفتار، صنعت یا مرحله خرید دسته‌بندی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  },
  {
    title: "اتوماسیون ایمیل",
    description:
      "ببینید کدام کانال بیشترین سرنخ با کیفیت را می‌آورد.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-2.svg",
  },
  {
    title: "A/B تست",
    description:
      "مسیرهای ایمیل را بدون کدنویسی برای هر سگمنت طراحی کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-3.svg",
  },
  {
    title: "تقویم محتوا",
    description:
      "عنوان، تصویر یا فراخوان را تست کنید و برنده را سریع پیدا کنید.",
    image: "/block-media/shadcnblocks/block/placeholder-dark-1.svg",
  },
] as const;

interface Feature95Props {
  className?: string;
}

const Feature95 = ({ className }: Feature95Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="mb-16 max-w-xl text-right">
          <Badge variant="outline">کمپین</Badge>
          <h2 className="mt-6 mb-3 text-3xl font-medium tracking-tight text-balance md:text-xl">
            کمپین‌هایی بسازید که واقعاً تبدیل می‌شوند
          </h2>
          <p className="text-pretty text-muted-foreground">
            با سگمنت‌بندی دقیق، پیام مناسب را به مخاطب مناسب برسانید. داده رفتاری نشان می‌دهد کدام محتوا بیشترین تأثیر را روی تبدیل دارد.
          </p>
        </div>
        <div>
          <Tabs dir="rtl" defaultValue="0" className="flex-col">
            <TabsList
              variant="line"
              className="relative grid !h-auto w-full items-start gap-6 rounded-none p-0 lg:grid-cols-4"
            >
              <div className="absolute start-4 end-0 top-7 hidden h-px bg-linear-to-l from-input from-80% to-transparent lg:block" />
              <div className="absolute start-3.5 top-0 bottom-0 w-px bg-gradient-to-b from-input from-80% to-transparent lg:hidden" />
              {feature95Tabs.map((tab, index) => (
                <TabsTrigger
                  key={tab.title}
                  value={index.toString()}
                  className="group flex !h-auto cursor-pointer flex-col items-start rounded-none border-none p-0 whitespace-normal text-foreground after:hidden"
                >
                  <div className="flex gap-4 rounded-md text-right hover:bg-muted lg:block lg:p-4">
                    <div className="flex flex-col items-center lg:contents">
                      <span className="flex size-7 shrink-0 items-center justify-center rounded-full border bg-background font-mono text-xs font-medium group-data-[state=active]:bg-primary group-data-[state=active]:text-background group-data-[state=active]:ring group-data-[state=active]:ring-muted-foreground/40">
                        {(index + 1).toLocaleString("fa-IR")}
                      </span>
                    </div>
                    <div className="text-right">
                      <h3 className="mb-1 font-semibold text-foreground lg:mt-4">
                        {tab.title}
                      </h3>
                      <p className="text-foreground-muted text-sm font-normal">
                        {tab.description}
                      </p>
                    </div>
                  </div>
                  <div className="mt-6 block rounded-md border bg-muted p-2 lg:hidden">
                    <div className="aspect-video">
                      <img
                        src={tab.image}
                        alt={`نمای ${tab.title}`}
                        className="h-full w-full rounded-md border object-cover"
                      />
                    </div>
                  </div>
                </TabsTrigger>
              ))}
            </TabsList>
            {feature95Tabs.map((tab, index) => (
              <TabsContent
                key={tab.title}
                value={index.toString()}
                className="mt-10 hidden rounded-xl border bg-muted p-3 lg:block"
              >
                <div className="aspect-video">
                  <img
                    src={tab.image}
                    alt={`نمای ${tab.title}`}
                    className="h-full w-full rounded-xl border object-cover shadow"
                  />
                </div>
              </TabsContent>
            ))}
          </Tabs>
        </div>
      </div>
    </section>
  );
};

export { Feature95 };