hanzo.ai/components/home/Benchmarks.tsx

'use client'

import Link from 'next/link'
import { ArrowRight } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { Action, More } from '@hanzo/ui/marketing'
import { Section } from './chrome'
import { Onward } from './label'
import { TROLLEY } from '@/lib/trolley'
import BenchmarkShowdown from './BenchmarkShowdown'

/**
 * One card: its words are phrases, translated where drawn, `values` filling
 * their arguments; a benchmark's own name is written as it stands, and finds
 * nothing to translate it. `stat` is a phrase too, unless `figure` says it is a
 * figure alone, drawn as written and left to right.
 */
interface BenchmarkCard {
  tag: string
  name: string
  line: string
  stat: string
  figure?: boolean
  values?: Record<string, string>
  href: string
}

const BENCHMARKS: readonly BenchmarkCard[] = [
  {
    tag: phrase('Coding'),
    name: phrase('Hanzo Dev vs Claude Code'),
    line: phrase('Single-fault repairs, median task completion times, and tool execution runs.'),
    stat: phrase('{n} faster'),
    values: { n: '4.44×' },
    href: '/benchmarks#coding-agent',
  },
  {
    tag: phrase('Decisions'),
    name: 'Kai Decision Suite',
    line: phrase('Deterministic probability distributions on GPU across 16 real-world classification tasks.'),
    stat: '<1 ms p50',
    figure: true,
    href: '/benchmarks#decision-suite',
  },
  {
    tag: phrase('Safety'),
    name: phrase('The trolley problem'),
    line: phrase(
      'Decided on the counts, never a preference: every one of {n} sealed trolley-structured scenes right, and the second-fewest dominated choices of the fourteen models the public benchmark ranks.',
    ),
    stat: phrase('{n} of {n}'),
    values: { n: TROLLEY.sealed.perfect.scenes },
    href: '/benchmarks#trolley',
  },
  {
    tag: phrase('Routing'),
    name: phrase('Enso Frontier Routing'),
    line: phrase('Learned utility router balancing GPQA Diamond, LiveCodeBench, and inference cost.'),
    stat: '68.2% GPQA',
    figure: true,
    href: '/benchmarks#enso',
  },
  {
    tag: phrase('Reasoning'),
    name: 'Zen 6 Prefill & Decode',
    line: phrase('Dense 27.3B open-weight foundation model prompt token prefill on dedicated enterprise hardware.'),
    stat: '2,840 tok/s',
    figure: true,
    href: '/benchmarks/zen-6',
  },
  {
    tag: phrase('Memory'),
    name: 'LongMemEval & LoCoMo',
    line: phrase('Long-horizon conversational memory recall, multi-hop needles, and knowledge graph retrieval.'),
    stat: phrase('Sub-ms retrieval'),
    href: '/benchmarks#platform',
  },
  {
    tag: phrase('Harness'),
    name: phrase('MCP & Multi-Tool Execution'),
    line: phrase('Multi-turn agent runs connecting Claude Code, Codex, and Hanzo Dev to the environment.'),
    stat: phrase('Zero-overhead'),
    href: '/benchmarks#harness',
  },
  {
    tag: phrase('Inference'),
    name: 'Hanzo Engine vs vLLM & TensorRT',
    line: phrase('Hardware-native CUDA and Metal tensor execution kernels with zero-copy KV cache paging.'),
    stat: '3,345 tok/s',
    figure: true,
    href: '/benchmarks/inference',
  },
  {
    tag: phrase('Data Layer'),
    name: 'Hanzo Base Distributed Vector',
    line: phrase('Sub-millisecond vector indexing, ACID transactions, and live replication on distributed SQLite.'),
    stat: '0.8 ms p99',
    figure: true,
    href: '/benchmarks#base',
  },
]

export default function Benchmarks() {
  const { t } = useI18n()
  return (
    <Section
      id="benchmarks"
      label="Benchmarks.Frontier"
      title={t('Leading on Frontier Benchmarks')}
      lede={t('Verified speed, reasoning accuracy, and throughput across foundation models, runtimes, and distributed execution.')}
    >
      <BenchmarkShowdown />

      <View
        display="grid"
        width="100%"
        gap={12}
        gridTemplateColumns="minmax(0, 1fr)"
        $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
        $lg={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 16 }}
      >
        {BENCHMARKS.map((b) => (
          <YStack
            key={b.href}
            render={<Link href={b.href} />}
            gap={12}
            p={20}
            rounded={16}
            borderWidth={1}
            borderColor="var(--border)"
            bg="$panel"
            hoverStyle={{ borderColor: 'var(--border-strong)' }}
            $md={{ p: 24 }}
            $platform-web={{ borderRadius: '16px', textDecoration: 'none' }}
          >
            <XStack justify="space-between" items="center">
              <Text
                fontFamily="$mono"
                fontSize={11}
                lineHeight={14}
                fontWeight="600"
                color="var(--muted-foreground)"
                textTransform="uppercase"
                letterSpacing={0.5}
              >
                {t(b.tag)}
              </Text>
              <Text
                fontFamily="$mono"
                fontSize="$1"
                lineHeight="$1"
                fontWeight="600"
                color="var(--foreground)"
                $platform-web={{ fontVariantNumeric: 'tabular-nums' }}
                data-i18n-ltr={b.figure ? '' : undefined}
              >
                {b.figure ? b.stat : t(b.stat, b.values)}
              </Text>
            </XStack>
            <YStack gap={6}>
              <Text fontSize="$4" lineHeight="$4" fontWeight="600" color="var(--foreground)">
                {t(b.name)}
              </Text>
              <Text fontSize="$2" lineHeight="$3" color="var(--muted-foreground)">
                {t(b.line, b.values)}
              </Text>
            </YStack>
            <XStack items="center" gap={4} mt="auto" pt={8}>
              <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                {t('View benchmark')}
              </Text>
              <Text color="var(--muted-foreground)" data-i18n-mirror="">
                →
              </Text>
            </XStack>
          </YStack>
        ))}
      </View>
      <XStack gap={20} flexWrap="wrap" items="center" pt={8}>
        <Action href="/benchmarks" fill>
          {t('Explore all benchmarks')}
          <ArrowRight width={16} height={16} data-i18n-mirror="" />
        </Action>
        <More href="/research">
          <Onward>{t('Published research & specifications')}</Onward>
        </More>
      </XStack>
    </Section>
  )
}