import { BadgeCheck } from "lucide-react";
import React from "react";

import { CardStack } from "@/components/aceternity/card-stack";
import { cn } from "@/lib/utils";

const FEATURES = [
  { id: "instant", label: "داده سازمانی" },
  { id: "one-time", label: "هوش تجاری" },
  { id: "developer", label: "گزارش‌گیری" },
  { id: "responsive", label: "تحلیل پیشرفته" },
  { id: "production", label: "داده سازمانی" },
  { id: "support", label: "هوش تجاری" },
  { id: "updates", label: "گزارش‌گیری" },
  { id: "customizable", label: "تحلیل پیشرفته" },
  { id: "performance", label: "داده سازمانی" },
  { id: "accessibility", label: "هوش تجاری" },
  { id: "cross-browser", label: "گزارش‌گیری" },
  { id: "docs", label: "تحلیل پیشرفته" },
] as const;

export const Highlight = ({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) => {
  return (
    <span
      className={cn(
        "bg-emerald-100 px-1 py-0.5 font-bold text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500",
        className,
      )}
    >
      {children}
    </span>
  );
};

const CARDS = [
  {
    id: 0,
    name: "داده سازمانی",
    designation: "هوش تجاری",
    content: (
      <p className="text-pretty">
        پیاده‌سازی فوق‌العاده روان بود.{" "}
        <Highlight>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</Highlight> گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.
      </p>
    ),
  },
  {
    id: 1,
    name: "گزارش‌گیری",
    designation: "تحلیل پیشرفته",
    content: (
      <p className="text-pretty">
        به‌عنوان مدیر عملیات، گزارش‌های قابل اقدام برایم حیاتی است.{" "}
        <Highlight>هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.</Highlight> داده خام از منابع مختلف جمع و مدل‌سازی می‌شود. کاربران غیرفنی هم می‌توانند گزارش بسازند و به پاسخ برسند.
      </p>
    ),
  },
  {
    id: 2,
    name: "داده سازمانی",
    designation: "هوش تجاری",
    content: (
      <p className="text-pretty">
        امکانات دسترس‌پذیری عالی است.{" "}
        <Highlight>داشبوردهای تعاملی به تیم‌ها اجازه می‌دهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.</Highlight> ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.
      </p>
    ),
  },
];

interface Feature280Props {
  className?: string;
}

const Feature280 = ({ className }: Feature280Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn(
        "relative h-full w-full overflow-hidden py-32",
        className,
      )}
    >
      <div className="container flex w-full min-w-0 max-w-6xl flex-col items-center justify-between gap-12 lg:flex-row lg:gap-8">
        <div className="relative flex h-full w-full min-w-0 flex-col items-center justify-center gap-15 text-center lg:items-start lg:text-start">
          <h1 className="w-full max-w-md text-2xll font-semibold tracking-tighter text-balance lg:text-2xll">
            تصمیم استراتژیک را داده‌محور کنید
          </h1>

          <div className="flex w-full min-w-0 max-w-lg items-center gap-4 px-5">
            <span className="h-px min-w-4 flex-1 bg-muted-foreground/20" />
            <p className="max-w-[min(100%,16rem)] shrink text-center text-sm text-balance text-muted-foreground/50 sm:max-w-xs">
              هشدارهای هوشمند زمانی که شاخص از مسیر هدف خارج می‌شود، مدیران را به‌موقع مطلع می‌کند.
            </p>
            <span className="h-px min-w-4 flex-1 bg-muted-foreground/20" />
          </div>
          <ul className="grid w-full min-w-0 max-w-lg grid-cols-2 gap-3 text-start">
            {FEATURES.map((feature) => (
              <li key={feature.id} className="flex min-w-0 gap-2 lg:items-center">
                <BadgeCheck className="size-4 shrink-0 text-muted-foreground/80" />
                <p className="min-w-0 tracking-tight text-pretty text-muted-foreground/80">
                  {feature.label}
                </p>
              </li>
            ))}
          </ul>
        </div>
        <div className="mt-24 flex w-full min-w-0 max-w-96 items-center justify-center overflow-hidden lg:mt-0 lg:shrink-0">
          <CardStack items={CARDS} />
        </div>
      </div>
    </section>
  );
};

export { Feature280 };