import { CircleHelp, Eye, Lightbulb, Volume2 } from "lucide-react";

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

const DATA = [
  {
    title: "سطح دسترسی",
    description:
      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
    icon: CircleHelp,
    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
    imageAlt: "گزارش‌ساز",
  },
  {
    title: "تحلیل پیش‌بین",
    description:
      "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
    icon: Volume2,
    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
    imageAlt: "تحلیل داده سازمان",
  },
  {
    title: "اشتراک گزارش",
    description:
      "نمای اجرایی برای تصمیم‌های سریع طراحی کنید.",
    icon: Lightbulb,
    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
    imageAlt: "داشبورد هوش تجاری",
  },
];

interface Feature169Props {
  className?: string;
}

const Feature169 = ({ className }: Feature169Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="border-y">
        <div className="container flex flex-col gap-6 py-4 text-right max-md:mx-0 max-md:max-w-none md:mx-8 md:mx-auto md:border-x lg:py-8">
          <Badge variant="outline">
            <Eye className="size-4" />
            <span>داده سازمانی</span>
          </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 overflow-hidden px-0 max-md:mx-0 max-md:max-w-none md:mx-8 md:mx-auto md:border-x">
        <Tabs dir="rtl" defaultValue={DATA[0].title}>
          <TabsList
            variant="line"
            className="relative grid h-auto! w-full grid-cols-1 justify-between gap-px! rounded-none! border-b! bg-border! p-0! md:grid-cols-3"
          >
            {DATA.map((item) => (
              <TabsTrigger
                key={item.title}
                value={item.title}
                className="group relative h-full! w-full! flex-col! items-start! rounded-none! border-0! bg-background! p-6! text-right! whitespace-normal! text-foreground! shadow-none! ring-0 after:hidden! data-[state=inactive]:opacity-60! lg:p-8!"
              >
                <div className="flex items-center gap-2 text-lg font-medium tracking-tight lg:text-xl">
                  <span className="grid size-6 place-items-center rounded-full bg-muted">
                    <item.icon className="size-4" />
                  </span>
                  {item.title}
                </div>
                <p className="mt-2.5 text-right text-sm text-pretty text-muted-foreground lg:text-base">
                  {item.description}
                </p>
                <span className="absolute -top-1 -start-1 hidden size-2 rounded-full border border-border bg-background md:block" />
                <span className="absolute -bottom-1 -start-1 z-10 hidden size-2 rounded-full border border-border bg-background md:block" />
                <div className="absolute start-0 -bottom-px h-px w-0 bg-linear-to-e from-blue-600 via-sky-300 to-transparent transition-all duration-300 group-data-[state=active]:w-full" />
              </TabsTrigger>
            ))}
            <span className="absolute -end-1 -bottom-1 hidden size-2 rounded-full border border-border bg-background lg:block" />
            <span className="absolute -top-1 -end-1 size-2 rounded-full border border-border bg-background" />
          </TabsList>
          {DATA.map((item) => (
            <TabsContent
              key={item.title}
              value={item.title}
              className="p-6 lg:p-10"
            >
              <img
                src={item.image}
                alt={item.imageAlt}
                className="aspect-video h-full w-full rounded-sm border border-border object-cover"
              />
            </TabsContent>
          ))}
        </Tabs>
      </div>
      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
        <div className="container size-full md:border-x" />
      </div>
    </section>
  );
};

export { Feature169 };