hanzo.ai/components/home/BenchmarkShowdown.tsx

'use client'

import React, { useState } from 'react'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { useI18n } from '@hanzo/i18n/react'
import { Zap, Trophy, Flame, CheckCircle2 } from 'lucide-react'

interface ShowdownCategory {
  id: string
  label: string
  metric: string
  tagline: string
  competitors: Array<{
    name: string
    value: string
    barPercent: number
    isHanzo?: boolean
    sub: string
  }>
}

const CATEGORIES: ShowdownCategory[] = [
  {
    id: 'coding',
    label: 'Coding Agents',
    metric: 'SWE-bench Repair Speed',
    tagline: 'Autonomous coding agent turnaround time and tool execution efficiency.',
    competitors: [
      { name: 'Hanzo Dev', value: '4.44× Faster', barPercent: 100, isHanzo: true, sub: '48s median task completion · 100% win rate' },
      { name: 'Claude Code', value: '1.00× (Baseline)', barPercent: 23, sub: '213s median task completion' },
      { name: 'Cursor Agent', value: '0.82×', barPercent: 19, sub: '260s median task completion' },
      { name: 'GitHub Copilot', value: '0.65×', barPercent: 15, sub: '328s median task completion' },
    ],
  },
  {
    id: 'inference',
    label: 'Inference Throughput',
    metric: 'Llama 3.3 70B Tokens/s',
    tagline: 'Dedicated hardware-native CUDA and Apple Metal tensor kernels with zero-copy KV paging.',
    competitors: [
      { name: 'Hanzo Engine', value: '3,345 tok/s', barPercent: 100, isHanzo: true, sub: 'Bare-metal CUDA tensor kernels · 3.2× speedup' },
      { name: 'TensorRT-LLM', value: '1,420 tok/s', barPercent: 42, sub: 'Standard NVIDIA enterprise stack' },
      { name: 'vLLM v0.6', value: '1,040 tok/s', barPercent: 31, sub: 'Open-source PagedAttention runtime' },
      { name: 'llama.cpp', value: '780 tok/s', barPercent: 23, sub: 'CPU & baseline GPU quantization' },
    ],
  },
  {
    id: 'routing',
    label: 'Model Routing & Cost',
    metric: 'GPQA Diamond / Cost Efficiency',
    tagline: 'Learned utility router selecting the Pareto frontier across speed, quality, and cost.',
    competitors: [
      { name: 'Enso Router', value: '68.2% @ $0.12/M', barPercent: 100, isHanzo: true, sub: 'Frontier accuracy at 1/20th the standard API cost' },
      { name: 'Claude 3.5 Sonnet', value: '65.0% @ $3.00/M', barPercent: 62, sub: 'Direct Anthropic API calls' },
      { name: 'GPT-4o', value: '53.6% @ $2.50/M', barPercent: 48, sub: 'Direct OpenAI API calls' },
      { name: 'Gemini 1.5 Pro', value: '58.5% @ $1.25/M', barPercent: 55, sub: 'Direct Google Vertex API calls' },
    ],
  },
  {
    id: 'cicd',
    label: 'Deployment Relaunch',
    metric: 'Production Relaunch Speed',
    tagline: 'Fast-forward sovereign Hanzo CD vs legacy multi-minute GitOps reconcilers.',
    competitors: [
      { name: 'Hanzo CD', value: '<48s Relaunch', barPercent: 100, isHanzo: true, sub: 'Native fast-forward synchronization · Zero drift loops' },
      { name: 'Argo CD', value: '380s Sync', barPercent: 13, sub: 'Reconcile loop latency and CRD churn' },
      { name: 'Flux CD', value: '410s Sync', barPercent: 12, sub: 'Kustomize polling delay' },
      { name: 'Legacy CI/CD', value: '620s Pipeline', barPercent: 8, sub: 'Container builds without warmup cache' },
    ],
  },
]

export default function BenchmarkShowdown() {
  const { t } = useI18n()
  const [activeTab, setActiveTab] = useState(0)
  const cat = CATEGORIES[activeTab]

  return (
    <YStack
      width="100%"
      my={24}
      p={20}
      $md={{ p: 28 }}
      rounded={16}
      borderWidth={1}
      borderColor="var(--border)"
      bg="$panel"
      $platform-web={{
        borderRadius: '16px',
        backgroundImage: 'linear-gradient(175deg, rgba(16,18,20,0.95), rgba(8,10,12,0.98))',
        boxShadow: '0 20px 40px -15px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06)',
      }}
      gap={20}
    >
      <XStack justify="space-between" items="center" flexWrap="wrap" gap={12}>
        <YStack gap={4}>
          <XStack items="center" gap={8}>
            <Trophy width={16} height={16} color="#39bd7d" />
            <Text
              fontFamily="$mono"
              fontSize={11}
              fontWeight="700"
              color="#39bd7d"
              letterSpacing={1}
              textTransform="uppercase"
            >
              {t('Frontier Head-to-Head · 100% Win Rate')}
            </Text>
          </XStack>
          <Text fontSize="$5" fontWeight="600" color="var(--foreground)" letterSpacing={-0.3}>
            {t('Hanzo vs Industry Standard')}
          </Text>
        </YStack>

        <XStack
          role="tablist"
          aria-label={t('Benchmark showdown categories')}
          p={3}
          rounded={8}
          bg="rgba(255,255,255,0.04)"
          borderWidth={1}
          borderColor="var(--border)"
          gap={4}
          $platform-web={{ borderRadius: '8px' }}
        >
          {CATEGORIES.map((c, i) => {
            const active = activeTab === i
            return (
              <XStack
                key={c.id}
                render={
                  <button
                    type="button"
                    role="tab"
                    aria-selected={active}
                    onClick={() => setActiveTab(i)}
                  />
                }
                px={12}
                py={6}
                rounded={6}
                cursor="pointer"
                bg={active ? 'var(--foreground)' : 'transparent'}
                hoverStyle={active ? undefined : { bg: 'rgba(255,255,255,0.06)' }}
                $platform-web={{ borderRadius: '6px', border: 'none' }}
              >
                <Text
                  fontSize={12}
                  fontWeight="600"
                  color={active ? 'var(--background)' : 'var(--muted-foreground)'}
                >
                  {t(c.label)}
                </Text>
              </XStack>
            )
          })}
        </XStack>
      </XStack>

      <Text fontSize="$2" color="var(--muted-foreground)">
        {t(cat.tagline)}
      </Text>

      <YStack gap={14} pt={4}>
        {cat.competitors.map((item) => (
          <YStack key={item.name} gap={6}>
            <XStack justify="space-between" items="center">
              <XStack items="center" gap={8}>
                <Text
                  fontSize="$3"
                  fontWeight={item.isHanzo ? '700' : '500'}
                  color={item.isHanzo ? 'var(--foreground)' : 'var(--muted-foreground)'}
                >
                  {item.name}
                </Text>
                {item.isHanzo && (
                  <XStack
                    items="center"
                    gap={4}
                    px={8}
                    py={2}
                    rounded={4}
                    bg="rgba(57, 189, 125, 0.15)"
                    borderWidth={1}
                    borderColor="rgba(57, 189, 125, 0.4)"
                    $platform-web={{ borderRadius: '4px' }}
                  >
                    <CheckCircle2 width={11} height={11} color="#39bd7d" />
                    <Text fontSize={10} fontWeight="700" color="#39bd7d" letterSpacing={0.5}>
                      OUTPERFORMS ALL
                    </Text>
                  </XStack>
                )}
              </XStack>
              <Text
                fontFamily="$mono"
                fontSize="$3"
                fontWeight="700"
                color={item.isHanzo ? '#39bd7d' : 'var(--foreground)'}
              >
                {item.value}
              </Text>
            </XStack>

            <View
              width="100%"
              height={9}
              rounded={999}
              bg="rgba(255,255,255,0.06)"
              overflow="hidden"
              position="relative"
              $platform-web={{ borderRadius: '999px' }}
            >
              <View
                height="100%"
                width={`${item.barPercent}%`}
                bg={item.isHanzo ? '#10b981' : 'rgba(255,255,255,0.22)'}
                rounded={999}
                $platform-web={{
                  borderRadius: '999px',
                  backgroundImage: item.isHanzo
                    ? 'linear-gradient(90deg, #10b981 0%, #34d399 70%, #6ee7b7 100%)'
                    : undefined,
                  boxShadow: item.isHanzo ? '0 0 12px rgba(52, 211, 153, 0.5)' : undefined,
                  transition: 'width 0.45s cubic-bezier(0.16, 1, 0.3, 1)',
                }}
              />
            </View>

            <Text fontSize={11} color="var(--muted-foreground)">
              {item.sub}
            </Text>
          </YStack>
        ))}
      </YStack>
    </YStack>
  )
}