hanzo.ai/components/enso/EnsoLanding.tsx

/**
 * /enso — Hanzo's agentic language model. One endpoint, and for each request a
 * route: which lane (write, decide, act), which preset, which model.
 *
 * The thesis is the headline: the right intelligence, every time. The hero
 * plays Enso's film, the band under it draws one request taking its route,
 * and the page under that tells the whole story in short claims, each with
 * the thing that backs it: the runtime's layers, the paths, what a call is
 * weighed on, the measured tiers, one request end to end, the glue it
 * replaces, the models it routes across, agents, decisions, the benchmarks
 * (where Enso leads), infrastructure, the call itself, enterprise.
 *
 * Every figure is read. The lead, the chart and the tables are the research
 * API's `enso.*` runs, read when the page opens (lib/enso, components/enso/Lead,
 * components/enso/Chart, components/enso/Routed, components/benchmarks/Ladder);
 * a preset's rate is the price list's
 * (components/api/rate); the model count and the labs are the catalog
 * snapshot, passed in. A preset card states no score: the runs measured
 * enso-bench's router at a tag, not a preset the catalog sells. A sentence that
 * compares Enso with the field is a condition on the runs, so a rerun changes
 * the sentence rather than leaving it stale.
 * Decide is a lane being built — Kai inside Enso is in progress — and it is drawn
 * and said that way.
 *
 * A server component; the dot field (/'s, deferred: ./Opening), the film,
 * the route figure, the turning verb, the walking lists, the reveals and the
 * magnetic control are the client pieces it stacks.
 */
import { ArrowRight } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { T } from '@hanzo/i18n/react'
import { Fragment, type ReactNode } from 'react'
import { Call, Pair, Price } from '@/components/api/rate'
import { ModelCardSection } from '@/components/product/ModelCardSection'
import { ProductArticlesSection, type ArticleItem } from '@/components/product/ProductArticlesSection'
import { ProductUseCasesSection, type UseCaseItem } from '@/components/product/ProductUseCasesSection'
import { AgentPrompt } from '@/components/product/AgentPrompt'
import { product } from '@/lib/product'
import { SiteFooter, SiteHeader } from '@/components/home/shell'
import { Siblings } from '@/components/family/Hero'
import Closing from '@/components/marketing/Closing'
import { Band, Card, Head } from '@/components/marketing/band'
import { Sample } from '@/components/models/kit'
import { Box, Text, View, XStack, YStack } from '@/components/ui'
import { Action, Chip, Display, Lede, More, Run } from '@hanzo/ui/marketing'
import { Faq } from '@/components/ui/faq'
import { Grid } from '@hanzo/ui/grid'
import { signUp } from '@hanzo/app/lib/destination'
import { modelPagePath } from '@hanzo/app/lib/path'
import { Read } from '@/components/family/Read'
import { CODE, PRESETS } from '@/lib/enso'
import { Models } from '@/components/api/count'
import { Ladder } from '@/components/benchmarks/Ladder'
import { Code } from '@/components/code'
import { Magnetic } from '@/components/marketing/magnetic'
import { Rise } from '@/components/marketing/rise'
import Runtime from './Runtime'
import { Chart } from './Chart'
import { Lead } from './Lead'
import { Routed } from './Routed'
import { Requests, SecondPass, Walk } from './Story'
import { Words } from './Words'
import type { Lane, Scene, Step } from './scenes'
import { Fold } from '@/components/marketing/fold'
import { Film } from '@/components/family/Film'

const DOCS = 'https://docs.hanzo.ai/docs/models'

/* ---- the runtime: three lanes, and the requests that take them ---- */

/** Write and act are served; decide is the lane being built, drawn as such. */
const LANES: readonly Lane[] = [
  { id: 'write', verb: phrase('Write'), who: phrase('Zen and the frontier’s models') },
  { id: 'decide', verb: phrase('Decide'), who: phrase('Kai, the decision model'), soon: phrase('In progress') },
  { id: 'act', verb: phrase('Act'), who: phrase('Tools and agents') },
]

/**
 * Five requests, each the kind of work its lane is for. The write lane's three
 * are the presets' own jobs — volume, someone waiting, an expensive mistake —
 * so the figure and the preset cards describe one product.
 */
const SCENES: readonly Scene[] = (
  [
    { request: phrase('Review this change.'), lane: 'write', pick: 'enso-pro', why: phrase('Someone is waiting on the review.') },
    { request: phrase('Classify this ticket.'), lane: 'write', pick: 'enso', why: phrase('High volume, and a fast answer is enough.') },
    { request: phrase('File the bug and assign it.'), lane: 'act', pick: 'tool call', why: phrase('The answer is an action, so it comes back as a tool call.') },
    { request: phrase('Should the deploy continue?'), lane: 'decide', pick: 'Kai', why: phrase('A bounded choice with known options — Kai’s job once it ships inside Enso.') },
    { request: phrase('Audit this design.'), lane: 'write', pick: 'enso-ultra', why: phrase('A wrong answer here is expensive.') },
  ] as const
).map((scene) => ({
  ...scene,
  name: PRESETS.find((t) => t.id === scene.pick)?.name ?? (scene.pick === 'tool call' ? phrase('A tool call') : phrase('Kai · in progress')),
}))

/** The verbs the hero line turns through: the lanes, and the steps around them. */
const VERBS = [phrase('write'), phrase('decide'), phrase('retrieve'), phrase('act'), phrase('route')]

/** What a call is weighed on. Policy is the fence, said under the three and drawn on the figure. */
const AXES = [
  { name: phrase('Quality'), body: phrase('A call the cheap preset can answer does not spend the flagship.') },
  { name: phrase('Latency'), body: phrase('When someone is waiting, the faster preset that can do the work comes first.') },
  { name: phrase('Cost'), body: phrase('The dearer preset is for the call where being wrong is the expensive part.') },
]

/* ---- the story ---- */

/** The layers one request can touch. Enso is the router across them. */
const LAYERS = [
  { name: phrase('Models'), body: phrase('Zen, and the frontier’s models, behind one endpoint.') },
  { name: phrase('Agents'), body: phrase('Long-running agents in sandboxes, on a schedule or a trigger.') },
  { name: phrase('Tools'), body: phrase('MCP tools your agents call, from search to a deploy.') },
  { name: phrase('Memory'), body: phrase('Your files and knowledge, retrieved into the work.') },
  { name: phrase('Decisions'), body: phrase('Kai answers a bounded choice with calibrated odds.'), soon: phrase('Inside Enso: in progress') },
  { name: phrase('Data'), body: phrase('Each organisation’s data in its own encrypted store.') },
  { name: phrase('Compute'), body: phrase('Our cloud, or your own machine.') },
] as const

/** One request, start to answer. Every step is what Enso does today, except where it says. */
const RUN: readonly Step[] = [
  { title: phrase('Understand'), body: phrase('Enso reads what the request is for — an answer, an action, or a choice.') },
  { title: phrase('Constrain'), body: phrase('Your policy sets the bounds: the models you allow, and the budget on your key.') },
  { title: phrase('Route'), body: phrase('The preset, and the model inside it, that should answer this call.') },
  { title: phrase('Act'), body: phrase('When the answer is an action, it comes back as a tool call your agent runs.') },
  { title: phrase('Check'), body: phrase('Ultra looks again when its first pass is unsure.') },
  { title: phrase('Learn'), body: phrase('Scores from your traffic sharpen the next choice of the same kind.') },
]

/** What a team stitches together without a runtime. Each is a part of Hanzo's. */
const GLUE = [
  phrase('Model gateway'),
  phrase('Agent runtime'),
  phrase('Tools'),
  phrase('Memory'),
  phrase('Policy'),
  phrase('Routing'),
  phrase('Decisions'),
  phrase('Observability'),
  phrase('Compute'),
]

/** What a route is chosen on. */
const FACTORS = [
  { name: phrase('Capability'), body: phrase('Can this model do this work at all?') },
  { name: phrase('Latency'), body: phrase('Is someone waiting on the answer?') },
  { name: phrase('Cost'), body: phrase('What is a wrong answer worth here?') },
  { name: phrase('Policy'), body: phrase('Which models is this call allowed to reach?') },
  { name: phrase('Context'), body: phrase('How much does the call carry, and which window holds it?') },
]

/** An agent's loop. Every turn is a call, and every call is routed. */
const LOOP = [phrase('Plan'), phrase('Act'), phrase('Observe'), phrase('Decide'), phrase('Continue')]

/** The path from an application to the metal, and what rides along it. */
const STACK = [phrase('Your application'), 'Enso', phrase('Models · Agents · Tools'), 'Hanzo Compute']
const ALONG = [
  phrase('Routing'),
  phrase('Observability'),
  phrase('Policy'),
  phrase('Authentication'),
  phrase('Usage'),
  phrase('Billing'),
  phrase('Deployment'),
]

const LEARN: readonly Step[] = [
  { title: phrase('Rules first'), body: phrase('A new kind of work has no scores yet, so the call follows the rules.') },
  { title: phrase('Then your scores'), body: phrase('Scores from your traffic take over that kind of call.') },
  { title: phrase('Unsure, rules again'), body: phrase('A score that is not confident gives the call back to the rules.') },
]

/** The three ways to route, one API for all of them. */
const WAYS = [
  { name: phrase('Static'), body: phrase('Pin a model to a route or a tier. The same model answers, every time.') },
  { name: phrase('Policy'), body: phrase('Set rules on cost, latency, capability, provider and data residency. Every call stays inside them.') },
  { name: phrase('Trained'), body: phrase('Train a router on your own usage and evals, the way Enso is trained.') },
]

/** Ultra's two outcomes. Flash and Pro pick once; this is the flagship's extra pass. */
const PASS: readonly Step[] = [
  { title: phrase('Sure'), body: phrase('The first pass holds, and that answer is the one that comes back.') },
  { title: phrase('Not sure'), body: phrase('Ultra asks again and keeps the answer that holds.') },
]

/** Enterprise, as what is true of the platform today. */
const TRUST = [
  {
    question: phrase('Security'),
    answer: phrase('People sign in through Hanzo IAM with single sign-on. Secrets live in Hanzo KMS, never in code or config.'),
  },
  {
    question: phrase('Governance'),
    answer: phrase('The models you allow are a fence. Every preset, and every route inside it, stays within them.'),
  },
  {
    question: phrase('Control'),
    answer: phrase('Each key carries its own budget and rate, and shows when it was last used.'),
  },
  {
    question: phrase('Observability'),
    answer: phrase('Every call is metered and traced: the tokens, what they cost, and the span the call ran in.'),
  },
  {
    question: phrase('Reliability'),
    answer: phrase('When an upstream model fails, the call moves to the next one in its pool rather than failing with it.'),
  },
]

const CALL = `curl https://api.hanzo.ai/v1/chat/completions \\
  -H "Authorization: Bearer $HANZO_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{
    "model": "enso",
    "messages": [{ "role": "user", "content": "Plan the migration." }]
  }'`

const PY = `import os

from openai import OpenAI

client = OpenAI(base_url="https://api.hanzo.ai/v1", api_key=os.environ["HANZO_API_KEY"])

answer = client.chat.completions.create(
    model="enso",  # or enso-flash, enso-ultra
    messages=[{"role": "user", "content": "Plan the migration."}],
)`

const REST = SCENES.findIndex((s) => s.pick === (PRESETS.find((t) => t.featured)?.id ?? 'enso'))

/** A statement band: one line, set large, and the sentence that backs it. */
function Statement({ line, under }: { line: ReactNode; under: ReactNode }) {
  return (
    <Band measure={1024}>
      <Rise items="center" gap="$4" $platform-web={{ textAlign: 'center' }}>
        <Display render="h2" fontSize="$11" $lg={{ fontSize: 'var(--text-6xl)' }} $platform-web={{ textWrap: 'balance' }}>
          {line}
        </Display>
        <Lede maxW={640}>{under}</Lede>
      </Rise>
    </Band>
  )
}

/** A figure and its label, as the measured strip under the hero sets them. */
function Figure({ value, label, note, beat }: { value: ReactNode; label: ReactNode; note: ReactNode; beat: number }) {
  return (
    <Rise beat={beat} gap="$1" flex={1} minW={180}>
      <Text fontSize="$10" lineHeight="$10" fontWeight="600" color="$ink" $platform-web={{ fontVariantNumeric: 'tabular-nums' }}>
        {value}
      </Text>
      <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="$ink" $platform-web={{ textTransform: 'uppercase', letterSpacing: '0.12em' }}>
        {label}
      </Text>
      <Text fontSize="$2" lineHeight="$2" color="var(--text-secondary)">
        {note}
      </Text>
    </Rise>
  )
}

const JOBS = [
  { role: phrase('Coding and review'), body: phrase('Pro is the default when someone is waiting on the change. The call is the endpoint you already speak.') },
  { role: phrase('A long, careful run'), body: phrase('Ultra is the preset where a wrong answer costs more than the tokens.') },
  { role: phrase('Volume'), body: phrase('Flash is the preset for a label, an extraction, or a short step, repeated.') },
  { role: phrase('A pool you bound'), body: phrase('The choice stays inside the models you allow. That holds on every preset.') },
]

const QUESTIONS = [
  {
    question: phrase('What do I send?'),
    answer: phrase('Set model to enso, or to a preset id. One key, on /v1/chat/completions and on /v1/messages.'),
  },
  {
    question: phrase('What do the three presets change?'),
    answer: (
      <>
        <T>The pool, and the rate.</T>
        {PRESETS.map((t) => (
          <Fragment key={t.id}>
            {' '}
            <T values={{ name: t.name, input: <Price id={t.id} side="input" />, output: <Price id={t.id} side="output" /> }}>
              {'{name} is {input} in and {output} out per million tokens.'}
            </T>
          </Fragment>
        ))}
      </>
    ),
  },
  {
    question: phrase('Can I see which model answered?'),
    answer: phrase('No. Enso is a closed family. You name the preset and the models you allow. The response is the answer.'),
  },
  {
    question: phrase('Does Enso route to Kai today?'),
    answer: phrase('Not yet. Kai is live on its own endpoint, /v1/decisions; routing a bounded choice to it from inside Enso is in progress.'),
  },
  {
    question: phrase('Where is the rest of the measurement?'),
    answer: phrase(
      'The boards on this page are GPQA Diamond and LiveCodeBench, every row a research run read when the page opens. The GPQA write-up is on its own page, and the benchmarks page draws each board as accuracy against what the run cost at list prices.',
    ),
  },
]

/** The headline, broken on purpose. Display owns the size; these are its lines. */
function Promise() {
  return (
    <>
      <T>The right intelligence.</T>
      <br />
      <T>Every time.</T>
    </>
  )
}

/** A question list's answers, drawn in the reader's language where they are written as text. */
function said(items: readonly { question: string; answer: ReactNode }[]) {
  return items.map(({ question, answer }) => ({ question, answer: typeof answer === 'string' ? <T>{answer}</T> : answer }))
}

/**
 * The opening, on the one first screen (components/marketing/fold): the
 * promise over what Enso is, consensus mode, the turning verb and the two
 * doors, beside Enso's film — the ensō of light its card plays on the landing
 * (components/family/Film), on its square master. Narrower than 1024px the
 * film stands under the copy. One request taking its route (Runtime) follows
 * on the next screen.
 */
function Hero() {
  return (
    <Fold
      id="enso-promise"
      label="Hanzo / Enso"
      title={<Promise />}
      lede={
        <T values={{ models: <Models /> }}>
          {"Enso is a meta-LLM: Hanzo's own small model that coordinates {models} for higher intelligence, faster and at lower cost."}
        </T>
      }
      actions={
        <>
          <Magnetic>
            <Action href="https://platform.hanzo.ai/keys" fill>
              <T>Get API key</T> <ArrowRight size={16} data-i18n-mirror />
            </Action>
          </Magnetic>
          <Action href="https://github.com/hanzoai/enso">
            <T>Explore GitHub examples →</T>
          </Action>
        </>
      }
      below={
        <>
          <More href="https://docs.hanzo.ai/docs/models/enso">
            <T>Read the docs →</T>
          </More>
          <Words lead={phrase('Enso knows when to')} verbs={VERBS} />
          <YStack
            gap="$1"
            maxW={460}
            px="$4"
            py="$3"
            borderWidth={1}
            borderColor="var(--border)"
            rounded={16}
            bg="$panel"
            $platform-web={{ borderRadius: '16px' }}
          >
            <Text render="h2" fontSize="$3" lineHeight="$3" fontWeight="600" color="$ink">
              <T>Consensus mode</T>
            </Text>
            <Text render="p" fontSize="$2" lineHeight="$2" color="var(--text-secondary)">
              <T>When accuracy matters more than cost, Enso brings multiple models together to independently evaluate, compare and verify their answers.</T>
            </Text>
          </YStack>
        </>
      }
      preview={<Film slug="enso" square hero />}
    />
  )
}

export default function EnsoLanding({ models, labs }: { models: string; labs: number }) {
  /* Rounded down, as the model count is: the catalog moves, and the claim should outlast a sync. */
  const many = labs >= 20 ? `${Math.floor(labs / 10) * 10}+` : String(labs)
  return (
    <>
      <SiteHeader />

      <Box render="main" bg="$background" $platform-web={{ color: 'var(--foreground)' }}>
        <Hero />

        {/* One request taking its route, the promise worked through: the lane, the preset, the reason. */}
        <Band id="route" measure={720} rule={false} pad="$10">
          <Runtime lanes={LANES} scenes={SCENES} rest={Math.max(0, REST)} />
        </Band>

        {/* What the runs say, first: three lines read from the research API when the page opens. */}
        <Band id="lead" measure={1024}>
          <Lead />
          <XStack mt="$8" flexWrap="wrap" gap="$8" justify="space-between">
            <Figure beat={0} value={models} label={<T>Models</T>} note={<T values={{ many }}>{'From {many} labs, behind one endpoint.'}</T>} />
            <Figure
              beat={1}
              value="2"
              label={<T>APIs it speaks</T>}
              note={<T>OpenAI-compatible and Anthropic-compatible, one key.</T>}
            />
          </XStack>
        </Band>

        <Band measure={1024}>
          <Head
            eyebrow={phrase('One runtime')}
            title={<T>One runtime. Every layer of AI.</T>}
            lede={
              <T>
                A request can touch a model, a tool, an agent, your memory, a decision and the machine it runs on. Enso is the runtime that decides which.
              </T>
            }
          />
          <Grid columns={{ min: 220, max: 4 }} gap={12}>
            {LAYERS.map((layer, n) => (
              <Rise key={layer.name} beat={n}>
                <Card display="flex" flexDirection="column" gap="$2" p="$5" height="100%" borderStyle={'soon' in layer ? 'dashed' : 'solid'}>
                  <XStack justify="space-between" items="baseline" gap="$2">
                    <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                      <T>{layer.name}</T>
                    </Text>
                  </XStack>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    <T>{layer.body}</T>
                  </Text>
                  {'soon' in layer ? (
                    <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
                      <T>{layer.soon}</T>
                    </Text>
                  ) : null}
                </Card>
              </Rise>
            ))}
            <Rise beat={LAYERS.length}>
              <Card display="flex" flexDirection="column" justify="center" gap="$2" p="$5" height="100%" borderColor="var(--border-strong)" bg="$hover">
                <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                  Enso
                </Text>
                <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                  <T>The route between all of them, chosen per request.</T>
                </Text>
              </Card>
            </Rise>
          </Grid>
        </Band>

        <Band measure={896}>
          <Head
            eyebrow={phrase('One request at a time')}
            title={<T>Every request has a different best path.</T>}
            lede={<T>Same endpoint. A review, a label, an action and a choice each take the lane and the preset the work needs.</T>}
          />
          <Requests scenes={SCENES} lanes={LANES} rest={Math.max(0, REST)} />
        </Band>

        <Statement
          line={<T>Spend intelligence where it matters.</T>}
          under={<T>The flagship is for the call where being wrong is expensive. Everything else gets the preset that is fast and enough.</T>}
        />

        <Band measure={896}>
          <Head
            eyebrow={phrase('The balance')}
            title={<T>Weighed the same way, every call.</T>}
            lede={<T>Quality, latency and cost — inside the fence your policy draws.</T>}
          />
          <Run rest="var(--muted-foreground)" flexDirection="row" flexWrap="wrap" justify="center" gap="$6">
            {AXES.map((axis, i) => (
              <XStack key={axis.name} data-beat={i}>
                <Text fontSize="$6" lineHeight="$6" fontWeight="500" color="inherit">
                  <T>{axis.name}</T>
                </Text>
              </XStack>
            ))}
          </Run>
          <YStack mt="$8" borderTopWidth={1} borderColor="var(--border)">
            {AXES.map((axis) => (
              <YStack key={axis.name} gap="$2" py="$5" borderBottomWidth={1} borderColor="var(--border)">
                <Text fontFamily="$mono" fontSize="$2" lineHeight="$2" color="$ink">
                  <T>{axis.name}</T>
                </Text>
                <Text fontSize="$4" lineHeight="$4" color="var(--text-secondary)">
                  <T>{axis.body}</T>
                </Text>
              </YStack>
            ))}
          </YStack>
          <Text display="block" mt="$5" fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
            <T>Policy is the fence. The choice stays inside the models you allow.</T>
          </Text>
        </Band>

        <Band id="presets" measure={1024}>
          <Head
            eyebrow="Flash · Pro · Ultra"
            title={<T>Pick speed or depth per call.</T>}
            lede={
              <T>
                Name a preset when you already know. Name Enso when you want the choice. A preset is a pool and a rate; rates per million tokens, in → out.
              </T>
            }
          />
          <Grid columns={{ min: 280, max: 3 }} gap={16}>
            {PRESETS.map((t, n) => (
              <Rise key={t.id} beat={n}>
                <Card
                  display="flex"
                  flexDirection="column"
                  gap="$3"
                  p="$6"
                  height="100%"
                  borderColor={t.flagship ? 'var(--border-strong)' : 'var(--border)'}
                  bg={t.flagship ? '$hover' : '$panel'}
                >
                  <YStack gap="$1">
                    <Text render="h3" fontSize="$6" lineHeight="$6" fontWeight="600" color="$ink">
                      {t.name}
                    </Text>
                    <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
                      {t.featured ? <T values={{ id: t.id }}>{'Default · {id}'}</T> : t.id}
                    </Text>
                  </YStack>
                  <Text py="$3" borderTopWidth={1} borderBottomWidth={1} borderColor="var(--border)" fontFamily="$mono" fontSize="$3" lineHeight="$3" color="$ink">
                    <Pair id={t.id} />
                  </Text>
                  <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
                    <T values={{ call: <Call id={t.id} />, n: '1,000' }}>{'{call} for {n} in and {n} out'}</T>
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    <T>{t.blurb}</T>
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
          <XStack mt="$6" justify="center">
            <More href="/pricing">
              <T>Pricing →</T>
            </More>
          </XStack>
        </Band>

        <Band measure={768}>
          <Head
            eyebrow={phrase('End to end')}
            title={<T>Watch one request run.</T>}
            lede={<T>Six steps between the request and the answer. You write none of them.</T>}
          />
          <Walk id="enso-run" steps={RUN} />
        </Band>

        <Band measure={1024}>
          <Head
            eyebrow={phrase('The glue')}
            title={<T>Stop stitching the AI stack together.</T>}
            lede={
              <T>
                A gateway here, an agent runtime there, a policy layer, a tracer, a GPU contract. Each is one more integration to keep alive. On Hanzo they are one runtime.
              </T>
            }
          />
          <Run rest="var(--text-secondary)" flexDirection="row" flexWrap="wrap" justify="center" gap="$2" step={0.22}>
            {GLUE.map((part, n) => (
              <Chip key={part} data-beat={n} px={14} py={6} fontSize="$2" lineHeight="$2">
                <T>{part}</T>
              </Chip>
            ))}
          </Run>
          <YStack items="center" mt="$6" gap="$3">
            <View width={1} height={40} bg="var(--border)" />
            <Card px="$6" py="$4" borderColor="var(--border-strong)" bg="$hover">
              <Text display="block" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink" $platform-web={{ textAlign: 'center' }}>
                <T>Enso runtime</T>
              </Text>
              <Text display="block" fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)" $platform-web={{ textAlign: 'center' }}>
                <T>one key · one bill · one trace</T>
              </Text>
            </Card>
          </YStack>
        </Band>

        <Band measure={1024}>
          <Head
            eyebrow={phrase('Models')}
            title={<T>{'Every model you can name. One you don’t have to.'}</T>}
            lede={<T values={{ models, many }}>{'Enso picks among {models} models from {many} labs. It weighs five things.'}</T>}
          />
          <Grid columns={{ min: 180, max: 5 }} gap={12}>
            {FACTORS.map((f, n) => (
              <Rise key={f.name} beat={n}>
                <Card display="flex" flexDirection="column" gap="$2" p="$5" height="100%">
                  <Text render="h3" fontSize="$4" lineHeight="$4" fontWeight="600" color="$ink">
                    <T>{f.name}</T>
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    <T>{f.body}</T>
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
        </Band>

        <Band measure={896}>
          <Head
            eyebrow={phrase('Agents')}
            title={<T>Agents inside a runtime, not a demo.</T>}
            lede={
              <T>
                An agent makes hundreds of calls to finish one task. Every turn is a call, and every call is routed: the plan gets depth, the routine step gets speed.
              </T>
            }
          />
          <Run rest="var(--text-secondary)" flexDirection="row" flexWrap="wrap" justify="center" items="center" gap="$3" step={0.5}>
            {LOOP.map((step, n) => (
              <XStack key={step} data-beat={n} items="center" gap="$3">
                <Text fontSize="$7" lineHeight="$7" fontWeight="600" color="inherit">
                  <T>{step}</T>
                </Text>
                {n < LOOP.length - 1 ? (
                  <Text aria-hidden data-i18n-mirror fontSize="$5" lineHeight="$5" color="var(--muted-foreground)">
                    →
                  </Text>
                ) : null}
              </XStack>
            ))}
          </Run>
          <Text display="block" mt="$6" fontSize="$3" lineHeight="$3" color="var(--text-secondary)" $platform-web={{ textAlign: 'center' }}>
            <T>Agents run in sandboxes, call tools over MCP, and keep their memory between runs.</T>
          </Text>
        </Band>

        <Band measure={896}>
          <Head
            eyebrow={phrase('Decisions')}
            title={<T>Zen answers “what could we do?” Kai answers “what should we do?”</T>}
            lede={<T>Kai takes the state, the evidence and the options, and returns a calibrated distribution over them — no prose to parse. Inside Enso, routing a bounded choice to Kai is in progress; Kai is live on its own today.</T>}
          />
          <Grid columns={{ min: 260, max: 2 }} gap={16}>
            <Card display="flex" flexDirection="column" gap="$2" p="$6">
              <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
                <T>Write · Zen</T>
              </Text>
              <Text fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                <T>Draft the migration plan.</T>
              </Text>
            </Card>
            <Card display="flex" flexDirection="column" gap="$2" p="$6" borderStyle="dashed">
              <Text fontFamily="$mono" fontSize="$1" lineHeight="$1" color="var(--muted-foreground)">
                <T>Decide · Kai · in progress inside Enso</T>
              </Text>
              <Text fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                <T>Should the migration proceed?</T>
              </Text>
            </Card>
          </Grid>
          <Text display="block" mt="$6" fontFamily="$mono" fontSize="$2" lineHeight="$2" color="var(--text-secondary)" $platform-web={{ textAlign: 'center' }}>
            <T values={{ call: 'POST /v1/decisions' }}>{'Kai today: {call}'}</T>
          </Text>
        </Band>

        <Band measure={768}>
          <Head
            eyebrow="Ultra"
            title={<T>Sure on the first pass. Checked when it is not.</T>}
            lede={<T>Flash and Pro pick once. Ultra answers once when the first pass holds, and looks again when it does not.</T>}
          />
          <SecondPass steps={PASS} />
        </Band>

        <Band measure={768}>
          <Head
            eyebrow={phrase('Your traffic')}
            title={<T>The same choice, getting sharper.</T>}
            lede={<T>A new workload follows the rules. Scores from your traffic take over, and the rules return when a score is unsure.</T>}
          />
          <Walk id="enso-learn" steps={LEARN} />
          <Text display="block" mt="$5" fontSize="$3" lineHeight="$3" color="var(--text-secondary)" $platform-web={{ textAlign: 'center' }}>
            <T>What is kept is the score, not the text of the prompt.</T>
          </Text>
        </Band>

        <Band id="routing" measure={1024}>
          <Head
            eyebrow={phrase('Your routing')}
            title={<T>Route it your way.</T>}
            lede={<T>Static, by policy, or trained on your own traffic. One API for all three.</T>}
          />
          <Grid columns={{ min: 240, max: 3 }} gap={16}>
            {WAYS.map((way, n) => (
              <Rise key={way.name} beat={n}>
                <Card display="flex" flexDirection="column" gap="$2" p="$6" height="100%">
                  <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
                    <T>{way.name}</T>
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    <T>{way.body}</T>
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
          <YStack mt="$6" items="center" gap="$2">
            <Text display="block" fontFamily="$mono" fontSize="$3" lineHeight="$3" color="$ink" $platform-web={{ textAlign: 'center' }}>
              {'"model": "enso", "consensus": true'}
            </Text>
            <Text display="block" fontSize="$3" lineHeight="$3" color="var(--text-secondary)" $platform-web={{ textAlign: 'center' }}>
              <T>Fixed policies are overrides in the console.</T>
            </Text>
          </YStack>
        </Band>

        <Band id="benchmarks" measure={1024}>
          <Head
            eyebrow={phrase('Measured')}
            title={<T>Accuracy, and what it costs.</T>}
            lede={
              <T values={{ n: '1,000' }}>
                {'Enso beside single models from the labs, on the same questions: GPQA Diamond against what {n} questions cost, then LiveCodeBench.'}
              </T>
            }
          />
          <YStack gap="$3">
            <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
              GPQA Diamond
            </Text>
            <Chart />
            <Routed />
          </YStack>
          <YStack mt="$8" gap="$3">
            <Text render="h3" fontSize="$5" lineHeight="$5" fontWeight="600" color="$ink">
              LiveCodeBench
            </Text>
            <Ladder bench={CODE} />
          </YStack>
          <XStack mt="$5" flexWrap="wrap" justify="flex-end" gap="$3">
            <More href="/benchmarks/gpqa">
              <T>The GPQA page →</T>
            </More>
            <More href="/benchmarks#frontier">
              <T>The frontier →</T>
            </More>
          </XStack>
        </Band>

        <Band measure={1024}>
          <Head
            eyebrow={phrase('Infrastructure')}
            title={<T>From prototype to production without changing the architecture.</T>}
            lede={<T>The call you make on day one is the call you make at scale. What changes is what rides along it.</T>}
          />
          <YStack items="center" gap="$2">
            {STACK.map((layer, n) => (
              <YStack key={layer} items="center" gap="$2" width="100%">
                <Rise beat={n} width="100%" maxW={420}>
                  <Card px="$5" py="$4" borderColor={layer === 'Enso' ? 'var(--border-strong)' : 'var(--border)'} bg={layer === 'Enso' ? '$hover' : '$panel'}>
                    <Text display="block" fontSize="$4" lineHeight="$4" fontWeight="600" color="$ink" $platform-web={{ textAlign: 'center' }}>
                      <T>{layer}</T>
                    </Text>
                  </Card>
                </Rise>
                {n < STACK.length - 1 ? <View width={1} height={20} bg="var(--border)" /> : null}
              </YStack>
            ))}
          </YStack>
          <XStack mt="$8" flexWrap="wrap" justify="center" gap="$2">
            {ALONG.map((part) => (
              <Chip key={part} px={12} py={5} fontSize="$1" lineHeight="$1">
                <T>{part}</T>
              </Chip>
            ))}
          </XStack>
        </Band>

        <Band measure={896}>
          <Head
            eyebrow={phrase('Drop-in')}
            title={<T>Name Enso. It picks the model.</T>}
            lede={
              <T>
                Same key on /v1/chat/completions and /v1/messages. Send enso, or name the preset. The SDK you already use works: point it at api.hanzo.ai.
              </T>
            }
          />
          <YStack gap="$4">
            <Sample lang="bash">
              <Code lang="bash" code={CALL} />
            </Sample>
            <Sample lang="python">
              <Code lang="python" code={PY} />
            </Sample>
          </YStack>
        </Band>

        <Band measure={1024}>
          <Head eyebrow={phrase('Built for')} title={<T>What the presets are for.</T>} />
          <Grid columns={{ min: 280, max: 2 }} gap={16}>
            {JOBS.map((job, n) => (
              <Rise key={job.role} beat={n}>
                <Card display="flex" flexDirection="column" gap="$2" p="$5" height="100%">
                  <Text render="h3" fontSize="$4" lineHeight="$4" fontWeight="600" color="$ink">
                    <T>{job.role}</T>
                  </Text>
                  <Text fontSize="$3" lineHeight="$3" color="var(--text-secondary)">
                    <T>{job.body}</T>
                  </Text>
                </Card>
              </Rise>
            ))}
          </Grid>
        </Band>

        <Band measure={768}>
          <Head
            eyebrow={phrase('Enterprise')}
            title={<T>Built for AI that actually runs businesses.</T>}
            lede={<T>What holds today, said plainly.</T>}
          />
          <Faq items={said(TRUST)} />
        </Band>

        <Band measure={768}>
          <Head eyebrow={phrase('Questions')} title={<T>Asked plainly.</T>} />
          <Faq items={said(QUESTIONS)} />
        </Band>

        <ModelCardSection
          id="model-card"
          badge={phrase('Enso · Model Router')}
          title={phrase('Microsecond model routing. Intelligent optimization across quality, latency, and cost.')}
          description={
            <>
              <T values={{ time: '12 µs' }}>{'Learned bilinear utility model evaluates each incoming prompt in {time}.'}</T>{' '}
              <T values={{ models: <Models /> }}>{'Routes across {models} from frontier labs and Hanzo native weights behind one unified API.'}</T>
            </>
          }
          modelId="enso-auto"
          endpoint="POST https://api.hanzo.ai/v1/chat/completions"
          specs={[
            { label: phrase('Decision Objective'), value: 'quality - λ·cost - μ·latency', mono: true },
            { label: phrase('Routing Latency'), value: phrase('300 ns rule-based · 12 µs learned policy'), note: phrase('Measured in-process before inference') },
            { label: phrase('API Compatibility'), value: 'OpenAI /v1/chat/completions & Anthropic /v1/messages' },
            { label: phrase('Managed SKUs'), value: 'enso-auto · enso-flash · enso-ultra · enso-pro · enso-free', mono: true },
            { label: phrase('Context Capacity'), value: phrase('Up to 1,000,000 tokens (model dependent)') },
            { label: phrase('Safety & Policy'), value: phrase('Strict organization fences, budget caps, and model whitelist') },
            { label: phrase('Online Feedback'), value: 'POST /v1/ai/feedback LinUCB contextual bandit updates' },
          ]}
          sdkLinks={[
            { language: 'Python', href: 'https://github.com/hanzoai/enso/tree/main/examples/python', tag: 'examples/python' },
            { language: 'Go', href: 'https://github.com/hanzoai/enso/tree/main/examples/go', tag: 'examples/go' },
            { language: 'Rust', href: 'https://github.com/hanzoai/enso/tree/main/examples/rust', tag: 'examples/rust' },
            { language: 'TypeScript', href: 'https://github.com/hanzoai/enso/tree/main/examples', tag: 'examples' },
            { language: 'cURL', href: 'https://github.com/hanzoai/enso/tree/main/examples', tag: 'curl' },
          ]}
          recipesLink={{
            label: phrase('Modular Rust Routing Recipes Crate'),
            href: 'https://github.com/hanzoai/enso/tree/main/recipes',
          }}
          githubRepo="https://github.com/hanzoai/enso"
          docsUrl="https://docs.hanzo.ai/docs/models/enso"
          sampleCode={{
            lang: 'bash',
            code: `curl -X POST https://api.hanzo.ai/v1/chat/completions \\
  -H "Authorization: Bearer $HANZO_API_KEY" \\
  -H "Content-Type: application/json" \\
  -H "X-Max-Latency-Ms: 800" \\
  -d '{
    "model": "auto",
    "messages": [{"role": "user", "content": "Analyze and optimize this SQL query."}]
  }'`,
          }}
        />

        <ProductUseCasesSection
          eyebrow={phrase('Enterprise Solutions')}
          title={phrase('Battle-tested model routing blueprints across enterprise scale.')}
          lede={phrase('Save up to 90% in LLM cloud compute costs while enforcing strict SLA latency caps and organization data fences.')}
          useCases={[
            {
              tag: phrase('Cost and latency'),
              title: phrase('AI Inference Optimization & Workload Routing'),
              stack: 'Enso + Kai + Zen',
              description: phrase(
                'Learned bilinear utility model maps each prompt to the optimal model based on quality, latency, and token cost. Bypasses expensive frontier models when specialized open weights suffice.',
              ),
              whitepaper: { label: phrase('Hanzo Router (Bilinear Utility)'), href: 'https://papers.hanzo.ai/hanzo-router/' },
              blogPost: { label: phrase('Route Prompts, Cut AI Costs 90%'), href: 'https://hanzo.blog/blog/2026-07-07-hanzo-router-cut-ai-costs/' },
              sourceCode: { label: 'recipes/src/routing.rs', href: 'https://github.com/hanzoai/enso/tree/main/recipes' },
              actionLabel: phrase('Explore the routing recipe'),
              actionHref: 'https://github.com/hanzoai/enso/tree/main/recipes',
            },
            {
              tag: phrase('Supply chain'),
              title: phrase('Distribution & EDI Exception Routing'),
              stack: 'Kai + Enso',
              description: phrase(
                'Parses ASN discrepancies, EDI 856 transmission mismatches, and missed carrier ETAs. Enso routes exceptions to automated disposition or escalation under strict SLA bounds.',
              ),
              whitepaper: { label: phrase('HIP-0510 (Learned Router Spec)'), href: 'https://hips.hanzo.ai/docs/hip-0510-enso-learned-router' },
              blogPost: { label: phrase('Introducing Enso Intelligence'), href: 'https://hanzo.blog/blog/introducing-enso/' },
              sourceCode: { label: 'recipes/src/routing.rs', href: 'https://github.com/hanzoai/enso/tree/main/recipes' },
              actionLabel: phrase('Explore the logistics recipe'),
              actionHref: 'https://github.com/hanzoai/enso/tree/main/recipes',
            },
            {
              tag: phrase('Retail media'),
              title: phrase('Retail Media & Seller Campaign Ad Ops'),
              stack: 'Kai + Zen + Enso',
              description: phrase(
                'Evaluates seller promotional copy and sponsored banner creatives against trademark and safety guidelines. Enso routes real-time bidstream requests with deterministic latency.',
              ),
              whitepaper: { label: phrase('HIP-1332 (Real-Time Policies)'), href: 'https://hips.hanzo.ai/docs/hip-1332-kai-the-decision-model' },
              blogPost: { label: phrase('The Router is the Registry'), href: 'https://hanzo.blog/blog/2026-07-27-the-router-is-the-registry/' },
              sourceCode: { label: 'recipes/src/routing.rs', href: 'https://github.com/hanzoai/enso/tree/main/recipes' },
              actionLabel: phrase('Explore the ad ops recipe'),
              actionHref: 'https://github.com/hanzoai/enso/tree/main/recipes',
            },
            {
              tag: phrase('Governance'),
              title: phrase('Audit, Evaluation & Enterprise Guardrails'),
              stack: 'Kai + Kata',
              description: phrase(
                'Guarantees strict enterprise boundary fences, automated verification, and false-alarm suppression across all routed AI requests in production.',
              ),
              whitepaper: { label: phrase('HIP-1145 (Research Experiment Record)'), href: 'https://hips.hanzo.ai/docs/hip-1145-research-experiment-record' },
              blogPost: { label: phrase('Proof of AI: Deterministic Cloud'), href: 'https://hanzo.blog/blog/proof-of-ai/' },
              sourceCode: { label: 'recipes/src/routing.rs', href: 'https://github.com/hanzoai/enso/tree/main/recipes' },
              actionLabel: phrase('Explore the audit recipe'),
              actionHref: 'https://github.com/hanzoai/enso/tree/main/recipes',
            },
          ]}
        />

        <ProductArticlesSection
          eyebrow={phrase('Research & Architecture')}
          title={phrase('Routing theory, microsecond data planes, and learned utilities.')}
          lede={phrase('Read engineering papers, latency benchmarks, and architectural designs from the Enso routing team.')}
          articles={[
            {
              title: phrase('Introducing Enso — one API, routed to the best frontier intelligence'),
              href: 'https://hanzo.blog/blog/introducing-enso/',
              date: '2026-07-17',
              category: phrase('Architecture'),
              description: phrase("Enso is Hanzo's small language model that also routes. Billed at fixed per-token prices per tier."),
            },
            {
              title: phrase('Route every prompt to the right model — and cut AI cloud costs by up to 90%'),
              href: 'https://hanzo.blog/blog/2026-07-07-hanzo-router-cut-ai-costs/',
              date: '2026-07-07',
              category: phrase('Economics'),
              description: phrase(
                'Hanzo Router places each request on the cheapest model that can still serve it: local models for free, open weights that fit, or frontier cloud models when needed.',
              ),
            },
            {
              title: phrase('The router is the registry'),
              href: 'https://hanzo.blog/blog/2026-07-27-the-router-is-the-registry/',
              date: '2026-07-27',
              category: phrase('Infrastructure'),
              description: phrase(
                'Hanzo Cloud has no checked-in OpenAPI file. The live route table is the source, projected three ways, with bijection tests failing the build if any projection drifts.',
              ),
            },
          ]}
        />

        <Read
          eyebrow={phrase('Read')}
          title={phrase('Models, benchmarks, research.')}
          lede={phrase('The three presets, the runs that measure the router, and the writing.')}
          groups={[
            {
              label: phrase('Models'),
              links: [
                ...PRESETS.map((t) => ({ href: modelPagePath(t.id), label: `${t.name} →` })),
                { href: '#presets', label: phrase('The three presets →') },
              ],
            },
            {
              label: phrase('Benchmarks'),
              links: [
                { href: '#benchmarks', label: phrase('On this page →') },
                { href: '/benchmarks/gpqa', label: 'GPQA-Diamond →' },
                { href: '/models/enso', label: phrase('Enso, measured →') },
                { href: '/benchmarks', label: phrase('The suite →') },
              ],
            },
            {
              label: phrase('Research'),
              links: [
                {
                  href: 'https://papers.hanzo.ai/hanzo-router/',
                  label: 'Hanzo Router →',
                  note: phrase('The router paper. The live board is the one on this page.'),
                },
                {
                  href: 'https://hips.hanzo.ai/docs/hip-0510-enso-learned-router',
                  label: 'HIP-0510 →',
                  note: phrase('The learned router.'),
                },
                { href: DOCS, label: phrase('Docs →') },
                { href: '/pricing', label: phrase('Pricing →') },
                { href: 'https://hips.hanzo.ai', label: 'HIPs →' },
                { href: '/research', label: phrase('Research →') },
              ],
            },
          ]}
        />
        <Siblings name="Enso" />
        {product('enso') && <AgentPrompt product={product('enso')!} />}
        <Closing
          title={phrase('Route every call through Enso.')}
          secondary={{ label: phrase('Explore routing recipes'), href: 'https://github.com/hanzoai/enso/tree/main/recipes' }}
        />
      </Box>

      <SiteFooter />
    </>
  )
}