reui-blocks/blocks/compare9.tsx

"use client";

import { CheckCircle, Minus, XCircle } from "lucide-react";
import { useState } from "react";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { cn } from "@/lib/utils";

interface Compare9Props {
  className?: string;
}

const comparisonData = [
  {
    metric: "پنجره زمینه",
    gpt4: { value: "۱۲۸هزار توکن", status: "worst" },
    claude: { value: "۲۰۰هزار توکن", status: "neutral" },
    gemini: { value: "۲ میلیون توکن", status: "best" },
  },
  {
    metric: "سرعت پاسخ",
    gpt4: { value: "۱٫۲ ثانیه", status: "best" },
    claude: { value: "۱٫۸ ثانیه", status: "neutral" },
    gemini: { value: "۲٫۲ ثانیه", status: "worst" },
  },
  {
    metric: "تولید کد",
    gpt4: { value: "۹۴٪", status: "neutral" },
    claude: { value: "۹۵٪", status: "best" },
    gemini: { value: "۸۸٪", status: "worst" },
  },
  {
    metric: "امتیاز استدلال",
    gpt4: { value: "۹۱ از ۱۰۰", status: "neutral" },
    claude: { value: "۹۲ از ۱۰۰", status: "best" },
    gemini: { value: "۸۶ از ۱۰۰", status: "worst" },
  },
  {
    metric: "توکن‌های ورودی",
    gpt4: { value: "۳٫۵۰ دلار/۱M", status: "worst" },
    claude: { value: "۳٫۰۰ دلار/۱M", status: "neutral" },
    gemini: { value: "۱٫۲۵ دلار/۱M", status: "best" },
  },
  {
    metric: "توکن‌های خروجی",
    gpt4: { value: "۱۴٫۰۰ دلار/۱M", status: "neutral" },
    claude: { value: "۱۵٫۰۰ دلار/۱M", status: "worst" },
    gemini: { value: "۵٫۰۰ دلار/۱M", status: "best" },
  },
  {
    metric: "محدودیت نرخ",
    gpt4: { value: "۵۰هزار RPM", status: "neutral" },
    claude: { value: "۴۰هزار RPM", status: "worst" },
    gemini: { value: "۶۰هزار RPM", status: "best" },
  },
  {
    metric: "طرح رایگان",
    gpt4: { value: "بسیار محدود", status: "worst" },
    claude: { value: "محدود", status: "neutral" },
    gemini: { value: "گسترده", status: "best" },
  },
];

const Compare9 = ({ className }: Compare9Props) => {
  const [hoveredModel, setHoveredModel] = useState<string | null>(null);

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container mx-auto">
        <div className="relative overflow-hidden p-8">
          <div className="relative overflow-hidden border border-border/50 bg-background/50 backdrop-blur-sm">
            <Table>
              <TableHeader>
                <TableRow className="border-border/50">
                  <TableHead className="font-semibold text-foreground">
                    معیار
                  </TableHead>
                  <TableHead className="text-center font-semibold text-foreground">
                    <div className="flex items-center justify-center gap-2">
                      <img
                        src="/block-media/shadcnblocks/block/logos/openai-icon.svg"
                        alt="OpenAI"
                        width={16}
                        height={16}
                        className="h-4 w-4"
                      />
                      مدل هوشمند ۴
                    </div>
                  </TableHead>
                  <TableHead className="text-center font-semibold text-foreground">
                    <div className="flex items-center justify-center gap-2">
                      <img
                        src="/block-media/shadcnblocks/block/logos/claude-icon.svg"
                        alt="Claude"
                        width={16}
                        height={16}
                        className="h-4 w-4"
                      />
                      دستیار هوشمند ۳٫۵
                    </div>
                  </TableHead>
                  <TableHead className="text-center font-semibold text-foreground">
                    <div className="flex items-center justify-center gap-2">
                      <img
                        src="/block-media/shadcnblocks/block/logos/gemini-icon.svg"
                        alt="Gemini"
                        width={16}
                        height={16}
                        className="h-4 w-4"
                      />
                      هوش مصنوعی پیشرفته ۱٫۵
                    </div>
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {comparisonData.map((row, index) => (
                  <TableRow
                    key={index}
                    className="border-border/30 transition-colors hover:bg-muted/30"
                  >
                    <TableCell className="py-4 font-medium text-foreground">
                      {row.metric}
                    </TableCell>
                    <TableCell
                      className={cn(
                        "cursor-pointer py-4 text-center font-medium transition-all duration-300",
                        row.gpt4.status === "best"
                          ? "bg-green-50 text-green-600 dark:bg-green-950/20"
                          : row.gpt4.status === "worst"
                            ? "bg-red-50 text-red-600 dark:bg-red-950/20"
                            : "bg-muted/50 text-foreground",
                        hoveredModel === "gpt4" &&
                          "bg-red-50/80 dark:bg-red-950/30",
                      )}
                      onMouseEnter={() => setHoveredModel("gpt4")}
                      onMouseLeave={() => setHoveredModel(null)}
                    >
                      <div className="flex items-center justify-center gap-2">
                        {row.gpt4.status === "best" && (
                          <CheckCircle
                            className="h-4 w-4 text-green-600"
                            aria-hidden="true"
                          />
                        )}
                        {row.gpt4.status === "worst" && (
                          <XCircle
                            className="h-4 w-4 text-red-600"
                            aria-hidden="true"
                          />
                        )}
                        {row.gpt4.status === "neutral" && (
                          <Minus
                            className="h-4 w-4 text-muted-foreground"
                            aria-hidden="true"
                          />
                        )}
                        <span>{row.gpt4.value}</span>
                      </div>
                    </TableCell>
                    <TableCell
                      className={cn(
                        "cursor-pointer py-4 text-center font-medium transition-all duration-300",
                        row.claude.status === "best"
                          ? "bg-green-50 text-green-600 dark:bg-green-950/20"
                          : row.claude.status === "worst"
                            ? "bg-red-50 text-red-600 dark:bg-red-950/20"
                            : "bg-muted/50 text-foreground",
                        hoveredModel === "claude" &&
                          "bg-blue-50/80 dark:bg-blue-950/30",
                      )}
                      onMouseEnter={() => setHoveredModel("claude")}
                      onMouseLeave={() => setHoveredModel(null)}
                    >
                      <div className="flex items-center justify-center gap-2">
                        {row.claude.status === "best" && (
                          <CheckCircle
                            className="h-4 w-4 text-green-600"
                            aria-hidden="true"
                          />
                        )}
                        {row.claude.status === "worst" && (
                          <XCircle
                            className="h-4 w-4 text-red-600"
                            aria-hidden="true"
                          />
                        )}
                        {row.claude.status === "neutral" && (
                          <Minus
                            className="h-4 w-4 text-muted-foreground"
                            aria-hidden="true"
                          />
                        )}
                        <span>{row.claude.value}</span>
                      </div>
                    </TableCell>
                    <TableCell
                      className={cn(
                        "cursor-pointer py-4 text-center font-medium transition-all duration-300",
                        row.gemini.status === "best"
                          ? "bg-green-50 text-green-600 dark:bg-green-950/20"
                          : row.gemini.status === "worst"
                            ? "bg-red-50 text-red-600 dark:bg-red-950/20"
                            : "bg-muted/50 text-foreground",
                        hoveredModel === "gemini" &&
                          "bg-green-50/80 dark:bg-green-950/30",
                      )}
                      onMouseEnter={() => setHoveredModel("gemini")}
                      onMouseLeave={() => setHoveredModel(null)}
                    >
                      <div className="flex items-center justify-center gap-2">
                        {row.gemini.status === "best" && (
                          <CheckCircle
                            className="h-4 w-4 text-green-600"
                            aria-hidden="true"
                          />
                        )}
                        {row.gemini.status === "worst" && (
                          <XCircle
                            className="h-4 w-4 text-red-600"
                            aria-hidden="true"
                          />
                        )}
                        {row.gemini.status === "neutral" && (
                          <Minus
                            className="h-4 w-4 text-muted-foreground"
                            aria-hidden="true"
                          />
                        )}
                        <span>{row.gemini.value}</span>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          <div className="relative mt-8 border border-border/50 bg-muted/20 p-6">
            <div className="relative">
              <h4 className="mb-4 font-mono text-sm font-semibold tracking-wider text-foreground">
                تحلیل و ارزیابی فنی
                                            </h4>
              <div className="space-y-3 font-mono text-xs text-muted-foreground">
                <div className="grid gap-2 md:grid-cols-3">
                  <div
                    className={cn(
                      "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300",
                      hoveredModel === "gpt4" &&
                        "bg-red-50/20 shadow-lg ring-2 ring-red-500/50 dark:bg-red-950/10",
                    )}
                  >
                    <div className="mb-1 font-medium text-foreground">
                      مدل هوشمند ۴
                    </div>
                    <div className="space-y-1">
                      <div>• تأخیر پاسخ: ۱٫۲ ثانیه (بهترین)</div>
                      <div>• دقت کد: ۹۴٪ (متوسط)</div>
                      <div>• امتیاز استدلال: ۹۱ از ۱۰۰ (متوسط)</div>
                      <div>• هزینه ورودی: ۳٫۵۰ دلار/۱M توکن (ضعیف‌ترین)</div>
                      <div>• محدودیت نرخ: ۵۰هزار RPM (متوسط)</div>
                    </div>
                  </div>
                  <div
                    className={cn(
                      "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300",
                      hoveredModel === "claude" &&
                        "bg-blue-50/20 shadow-lg ring-2 ring-blue-500/50 dark:bg-blue-950/10",
                    )}
                  >
                    <div className="mb-1 font-medium text-foreground">
                      دستیار هوشمند ۳٫۵
                    </div>
                    <div className="space-y-1">
                      <div>• تأخیر پاسخ: ۱٫۸ ثانیه (متوسط)</div>
                      <div>• دقت کد: ۹۵٪ (بهترین)</div>
                      <div>• امتیاز استدلال: ۹۲ از ۱۰۰ (بهترین)</div>
                      <div>• هزینه ورودی: ۳٫۰۰ دلار/۱M توکن (متوسط)</div>
                      <div>• محدودیت نرخ: ۴۰هزار RPM (ضعیف‌ترین)</div>
                    </div>
                  </div>
                  <div
                    className={cn(
                      "rounded border border-border/30 bg-background/50 p-3 transition-all duration-300",
                      hoveredModel === "gemini" &&
                        "bg-green-50/20 shadow-lg ring-2 ring-green-500/50 dark:bg-green-950/10",
                    )}
                  >
                    <div className="mb-1 font-medium text-foreground">
                      هوش مصنوعی پیشرفته ۱٫۵
                    </div>
                    <div className="space-y-1">
                      <div>• پنجره زمینه: ۲ میلیون توکن (بهترین)</div>
                      <div>• هزینه ورودی: ۱٫۲۵ دلار/۱M توکن (بهترین)</div>
                      <div>• هزینه خروجی: ۵٫۰۰ دلار/۱M توکن (بهترین)</div>
                      <div>• محدودیت نرخ: ۶۰هزار RPM (بهترین)</div>
                      <div>• طرح رایگان: گسترده (بهترین)</div>
                    </div>
                  </div>
                </div>
                <div className="mt-4 rounded border border-border/30 bg-background/50 p-3">
                  <div className="mb-2 font-medium text-foreground">
                    جمع‌بندی مقایسه
                                                        </div>
                  <div className="space-y-1">
                    <div>
                      • مدل هوشمند ۴: مناسب برای پاسخ‌گویی سریع و تولید کد باکیفیت.
                                                              </div>
                    <div>
                      • دستیار هوشمند ۳٫۵: انتخابی مناسب برای تحلیل، استدلال و نگارش دقیق.
                                                              </div>
                    <div>
                      • هوش مصنوعی پیشرفته ۱٫۵: گزینه‌ای اقتصادی با پنجره زمینه بزرگ و هزینه پایین.
                                                              </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Compare9 };