hanzo.ai/components/sales/Proof.tsx

'use client'

/**
 * The proof on /enterprise, from two records and no third.
 *
 * MODELS: the figures the landing leads with (components/home/Advantage), read
 * from the research runs when the page opens: Enso's GPQA Diamond run
 * (lib/enso `stat` over hooks/useEnso) and Kai's Decision Suite count
 * (lib/tally `kaiLead` over hooks/useSuite `useClaim`), each while its runs
 * hold it. Each opens the board on /benchmarks that draws
 * its runs. The export carries neither number; until the runs answer the row
 * says it is reading, and when they do not it is left out.
 *
 * CUSTOMERS: the data room's case studies, as lib/data/customers renders them,
 * one figure each, each opening its study.
 */

import { Text, View, XStack, YStack } from '@hanzo/ui'
import { ArrowRight } from 'lucide-react'
import { Loading } from '@/components/api/state'
import { useEnso } from '@/hooks/useEnso'
import { useKai } from '@/hooks/useKai'
import { useClaim } from '@/hooks/useSuite'
import { ready } from '@/lib/api/use'
import { featured, href, stories } from '@/lib/data/customers'
import { stat } from '@/lib/enso'
import { kaiLead, type Tile as Figure } from '@/lib/tally'
import { CARD } from './kit'

/** The studies shown, and which of each study's figures leads: Hanzo's own result in each. */
const STUDIES = (
  [
    ['damon-motorcycles', 0],
    ['kanoa', 0],
    ['trillerfest', 0],
    ['skully', 0],
    ['casper-blockchain', 0],
    ['bellabeat', 0],
  ] as const
).map(([id, n]) => {
  const s = [...featured, ...stories].find((x) => x.id === id)!
  return { story: s, figure: s.figures[n] }
})

/** The research figures, as the landing reads them, each pointed at its board on /benchmarks. */
function useFigures(): { settled: boolean; figures: Figure[] } {
  const read = useEnso()
  const enso = ready(read)
  const e = enso ? stat(enso) : null
  const runs = useKai().state
  const said = useClaim()
  const kai = said ? kaiLead(said.claim, said.kai) : null
  const figures = [
    e && enso ? { figure: e.figure, label: `Enso on ${enso.gpqa.label}`, note: e.note, href: '/benchmarks#enso' } : null,
    kai ? { ...kai, href: `/benchmarks${kai.href}` } : null,
  ].filter((f): f is Figure => Boolean(f))
  return { settled: read.state !== 'loading' && (said !== null || runs === 'unreachable'), figures }
}

export default function Proof() {
  const { settled, figures } = useFigures()
  return (
    <YStack gap={16}>
      {settled ? null : <Loading what="the research runs" />}
      {settled && figures.length ? (
        <View display="grid" gap={16} gridTemplateColumns="minmax(0, 1fr)" $md={{ gridTemplateColumns: `repeat(${figures.length}, minmax(0, 1fr))` }} data-slot="proof-runs">
          {figures.map((f) => (
            <YStack key={f.label} render={<a href={f.href} />} {...CARD} p={28} gap={8} minW={0} hoverStyle={{ borderColor: 'var(--border-strong)' }} $platform-web={{ textDecoration: 'none' }}>
              <Text fontSize="2.75rem" lineHeight="3rem" fontWeight="500" color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>
                {f.figure}
              </Text>
              <Text render="h3" fontSize="$4" fontWeight="600" color="$ink">
                {f.label}
              </Text>
              <Text render="p" fontSize="$2" lineHeight="1.3203rem" color="var(--muted-foreground)">
                {f.note}
              </Text>
              <XStack items="center" gap={6} mt={8}>
                <Text fontSize="$2" fontWeight="500" color="$ink">
                  See the runs
                </Text>
                <ArrowRight width={14} height={14} aria-hidden />
              </XStack>
            </YStack>
          ))}
        </View>
      ) : null}
      <View display="grid" gap={16} gridTemplateColumns="minmax(0, 1fr)" $md={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }} data-slot="proof-studies">
        {STUDIES.map(({ story, figure }) => (
          <YStack
            key={story.id}
            render={<a href={href(story)} aria-label={`${story.company}: ${figure.value} ${figure.label}. Read the case study`} />}
            {...CARD}
            p={28}
            gap={8}
            minW={0}
            hoverStyle={{ borderColor: 'var(--border-strong)' }}
            $platform-web={{ textDecoration: 'none' }}
          >
            {/* The customer's own mark, in the page's one ink on either ground. */}
            <View height={28} mb={12} filter="brightness(0) invert(1)" $theme-light={{ filter: 'brightness(0)' }} opacity={0.85}>
              {story.logo ? (
                <View render={<img src={story.logo} alt="" loading="lazy" />} display="block" height={28} width="auto" maxW={150} $platform-web={{ objectFit: 'contain', objectPosition: 'left' }} />
              ) : null}
            </View>
            <Text fontSize="2.25rem" lineHeight="2.5rem" fontWeight="500" color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>
              {figure.value}
            </Text>
            <Text render="p" fontSize="$3" color="$ink">
              {figure.label}
            </Text>
            <Text render="p" fontSize="$2" color="var(--muted-foreground)">
              {story.company} · {story.kind}
            </Text>
          </YStack>
        ))}
      </View>
    </YStack>
  )
}