hanzo.ai/components/family/Family.tsx

import type { ReactNode } from 'react'
import { Box, Text, View, YStack } from '@/components/ui'
import { Eyebrow, Title, Leaf } from '@hanzo/ui/marketing'
import { Grid } from '@hanzo/ui/grid'
import { KAI } from '@/lib/bench-data'
import { named } from '@/lib/kai'
import { kaiTiles, record } from '@/lib/tally'
import { Fact } from '@/components/enso/Lead'
import { LINEUP, NEXT } from '@/lib/zen'

/**
 * The three model families, on /models: what each one does, one fact from its
 * data, and its own page. Each family page is about that family alone; this is
 * the one place the three are set side by side.
 *
 * Every figure is read: Enso's from its research runs when the page opens
 * (components/enso/Lead `Fact`), Zen's generations from lib/zen, Kai's from the
 * research runs (KAI), and Kai's line shows only while a claim holds. A server
 * component, all gui props.
 */

/** Kai's lead line: the suites it leads, every row a research run (lib/tally). */
const CLAIM = KAI ? kaiTiles(record(KAI.index.wins), named(KAI.run))[0] : undefined

const FAMILIES: readonly { name: string; verb: string; body: string; fact?: ReactNode; href: string }[] = [
  {
    name: 'Enso',
    verb: 'routes',
    body: 'Picks the model for every call, in every modality.',
    fact: <Fact />,
    href: '/enso',
  },
  {
    name: 'Kai',
    verb: 'decides',
    body: 'Answers a choice, a score or a yes/no, with the probability of each.',
    fact: CLAIM ? `${CLAIM.figure} · ${CLAIM.label}` : undefined,
    href: '/kai',
  },
  {
    name: 'Zen',
    verb: 'reasons',
    body: 'Open weights for the code, the copy, the images and the voice.',
    fact: `${LINEUP} now · ${NEXT.name} in research preview`,
    href: '/zen',
  },
]

/** The card's small lines share a face. */
const SMALL = { fontFamily: '$mono', fontSize: '$1', lineHeight: '$1' } as const

export function Family() {
  return (
    <Box
      render="section"
      aria-labelledby="family-title"
      position="relative"
      py="$11"
      px="$4"
      $sm={{ px: '$5' }}
      $lg={{ px: '$6' }}
      borderTopWidth={1}
      borderColor="var(--border)"
    >
      <Grid columns={1} gap={40} width="100%" maxW={1024} mx="auto">
        <Grid columns={1} gap={14} width="100%" maxW={672} mx="auto" $platform-web={{ textAlign: 'center' }}>
          <Eyebrow>Three families</Eyebrow>
          <Title id="family-title">Enso routes. Kai decides. Zen reasons.</Title>
        </Grid>

        <View
          render="ol"
          display="grid"
          gridTemplateColumns="minmax(0, 1fr)"
          $md={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
          gap="$4"
          m={0}
          p={0}
        >
          {FAMILIES.map((f) => (
            <YStack render="li" key={f.name}>
              <Leaf
                href={f.href}
                width="100%"
                height="100%"
                display="flex"
                flexDirection="column"
                gap="$2"
                p="$5"
                borderColor="$edge"
                bg="$panel"
                transition="quickest"
                hoverStyle={{ borderColor: 'var(--border-strong)' }}
                focusVisibleStyle={{ borderColor: 'var(--border-strong)' }}
              >
                <Text {...SMALL} color="var(--text-tertiary)">
                  {f.verb}
                </Text>
                <Text fontSize="$7" lineHeight="$8" fontWeight="600" color="$ink">
                  {f.name}
                </Text>
                <Text mt="$1" fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                  {f.body}
                </Text>
                {f.fact ? (
                  <Text {...SMALL} mt="$2" color="var(--muted-foreground)">
                    {f.fact}
                  </Text>
                ) : null}
                <Text
                  mt="auto"
                  pt="$4"
                  fontSize="$2"
                  fontWeight="500"
                  color="$soft"
                  transition="quickest"
                  $group-hover={{ color: '$ink' }}
                  $group-focusVisible={{ color: '$ink' }}
                >
                  Explore {f.name} →
                </Text>
              </Leaf>
            </YStack>
          ))}
        </View>
      </Grid>
    </Box>
  )
}

export default Family