hanzo.ai/components/bot/PricingModelExplained.tsx

'use client'

import { motion } from '@/components/motion'
import { Brain, Cpu, FileCode2, Layers, Lock, ShieldCheck, Sparkles, Terminal, Zap } from 'lucide-react'
import { Box, Text, View, XStack, YStack } from '@hanzo/ui'
import { Band, Head } from '@/components/marketing/band'
import { Chip, Eyebrow, Lede, Title } from '@hanzo/ui/marketing'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

const PILLARS = [
  {
    icon: Cpu,
    tag: phrase('Compute Floor'),
    title: phrase('Why a {floor} entry floor?'),
    lede: phrase('Not a chat window. A resident cloud computer.'),
    body: phrase(
      'Standard chat models terminate compute as soon as tokens finish streaming. A resident Hanzo Bot lives in an active cloud sandbox with its own Chromium browser, bash terminal, isolated filesystem, and scheduled cron jobs. The {month} floor covers continuous cloud sandboxing and dedicated container resources.',
    ),
    values: { floor: '$100/mo', month: '$100/month' },
  },
  {
    icon: Zap,
    tag: phrase('Token Economics'),
    title: phrase('Routine work at {fraction} the token cost'),
    lede: phrase('Intelligent routing through Enso & {sol}.'),
    body: phrase(
      'Up to {share} of a resident bot’s daily work consists of triaging inboxes, summarizing documents, parsing receipts, and scraping pages. Rather than burning expensive frontier reasoning on routine tasks, Hanzo Bot executes routine loops on Enso & {sol} at {cheap} the token price, leaving your monthly AI allowance intact for the tasks that need it.',
    ),
    values: { fraction: '1/5th', sol: 'Sol 6.1', share: '90%', cheap: '~1/5th' },
  },
  {
    icon: Sparkles,
    tag: phrase('Frontier Autonomy'),
    title: phrase('Zen Ultra for complex reasoning ({price})'),
    lede: phrase('Extended capacity for non-stop autonomous loops.'),
    body: phrase(
      'When your bot needs to perform deep multi-hour research, autonomous software engineering, or multi-step strategic analysis, the Max 50x tier ({price}) includes Zen Ultra and Astra Ultra frontier models with {burst} burst headroom, dedicated inference clusters, and zero rate cutoffs.',
    ),
    values: { price: '$500/mo', burst: '50x' },
  },
  {
    icon: Brain,
    tag: phrase('Auditable Memory'),
    title: phrase('Plain Markdown files you can inspect & edit'),
    lede: phrase('No black-box fine-tuning or opaque vector locks.'),
    body: phrase(
      'Hanzo Bot records what it learns in human-readable Markdown files in its workspace ({memory}, {skills}). You can open them, audit them, version-control them in Git, or delete them anytime. The bot begins every session from what you leave.',
    ),
    values: { memory: '`MEMORY.md`', skills: '`SKILLS.md`' },
  },
]

export function PricingModelExplained() {
  const { t } = useI18n()
  return (
    <Band id="pricing-model" measure={1080}>
      <Head
        eyebrow={t('Agent Architecture & Pricing Model')}
        title={t('Why Hanzo Bot is built and priced this way')}
        lede={t('Designed around the real economics of autonomous resident agents: dedicated sandboxes, cost-efficient model tiering, and transparent, auditable memory.')}
      />

      <Box
        display="grid"
        gridTemplateColumns="repeat(1, 1fr)"
        gap={24}
        $md={{ gridTemplateColumns: 'repeat(2, 1fr)' }}
      >
        {PILLARS.map((p, i) => (
          <Box
            key={p.title}
            p={28}
            $sm={{ p: 36 }}
            rounded="var(--radius-2xl)"
            borderWidth={1}
            borderColor="var(--neutral-800)"
            display="flex"
            flexDirection="column"
            $platform-web={{
              backgroundColor: 'color-mix(in oklab, var(--neutral-900) 60%, transparent)',
            }}
          >
            <XStack items="center" justify="space-between" mb={20}>
              <Box
                width={44}
                height={44}
                rounded="var(--radius-lg)"
                borderWidth={1}
                borderColor="var(--neutral-700)"
                $platform-web={{ backgroundColor: 'var(--neutral-800)' }}
                display="flex"
                items="center"
                justify="center"
              >
                <p.icon width={22} height={22} color="var(--primary)" />
              </Box>
              <Chip px={10} py={2} bg="var(--neutral-800)">
                {t(p.tag)}
              </Chip>
            </XStack>

            <Text render="h3" fontSize="$4" lineHeight="1.5rem" fontWeight="600" color="var(--foreground)" mb={8}>
              {t(p.title, p.values)}
            </Text>

            <Text fontSize="$2" fontWeight="500" color="var(--text-secondary)" mb={16}>
              {t(p.lede, p.values)}
            </Text>

            <Text fontSize="$2" lineHeight="1.375rem" color="var(--muted-foreground)" flex={1}>
              {t(p.body, p.values)}
            </Text>
          </Box>
        ))}
      </Box>

      {/* Comparison Callout */}
      <Box
        mt={32}
        p={24}
        rounded="var(--radius-xl)"
        borderWidth={1}
        borderColor="var(--neutral-800)"
        $platform-web={{
          backgroundColor: 'color-mix(in oklab, var(--neutral-950) 80%, black)',
        }}
      >
        <XStack flexWrap="wrap" items="center" justify="space-between" gap={16}>
          <YStack gap={4} maxW={680} shrink={1} minW={0}>
            <Text fontSize="$3" fontWeight="600" color="var(--foreground)">
              {t('Prefer running on your own machine? It’s {share} free.', { share: '100%' })}
            </Text>
            <Text fontSize="$2" color="var(--muted-foreground)">
              {t('Hanzo Bot is open source under the MIT license. You can run the exact same gateway, sandboxes, and skills on your own Mac or Linux machine with your own API keys at zero subscription cost.')}
            </Text>
          </YStack>
          <XStack items="center" gap={12}>
            <Chip px={14} py={8} bg="var(--neutral-800)">
              {t('MIT Open Source')}
            </Chip>
          </XStack>
        </XStack>
      </Box>
    </Band>
  )
}