hanzo.ai/app/(marketing)/investors/page.tsx

'use client'

import Link from 'next/link'
import { ArrowUpRight, Bot, Building2, Cloud, FileText, Mail, Scale, Sparkles, Users } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { Action, Display, Lede } from '@hanzo/ui/marketing'
import { Section, Win } from '@/components/home/chrome'
import Backing from '@/components/home/Backing'
import Research from '@/components/home/Research'
import Trusted from '@/components/home/Trusted'
import Activity from '@/components/oss/Activity'
import { Fold } from '@/components/marketing/fold'

const PROOF = [
  [phrase('Smarter'), phrase('Frontier intelligence on a measured Pareto frontier.')],
  [phrase('Faster'), phrase('Up to 200× faster for direct decisions.')],
  [phrase('Cheaper'), phrase('Up to 400× cheaper on the work we measure.')],
] as const

const THESIS = [
  { icon: Sparkles, title: phrase('Frontier models'), line: phrase('One API for intelligence, with measured accuracy, speed and cost.'), href: '/models' },
  { icon: Bot, title: phrase('Agents that do the work'), line: phrase('Coding agents and autonomous runs on the same account and tools.'), href: '/dev' },
  { icon: Cloud, title: phrase('A cloud they can own'), line: phrase('Managed on Hanzo, in a customer cloud, or on their own hardware.'), href: '/platform' },
] as const

/** Investor relations: the product, the evidence, the people and one direct door. */
export default function InvestorsPage() {
  const { t } = useI18n()
  return (
    <>
      <Fold
        id="investor-title"
        slot="investor-hero"
        label="Hanzo Investor Relations"
        title="The intelligence layer for business."
        lede="Models, agents and the cloud beneath them — one account, one key, one bill."
        actions={
          <>
            <Action href="mailto:[email protected]" fill>
              <Mail size={15} aria-hidden />
              {t('Contact investor relations')}
            </Action>
            <Action href="#research">
              {t('See the research')}
              <ArrowUpRight size={15} aria-hidden />
            </Action>
          </>
        }
        preview={
          <Win title="Hanzo.Thesis" icon={<Building2 size={14} color="var(--background)" />} aside={t('one platform')} slot="investor-thesis">
            <YStack p={20} gap={0}>
              {PROOF.map(([name, line], i) => (
                <XStack key={name} gap={16} items="flex-start" py={16} borderTopWidth={i ? 1 : 0} borderColor="var(--border)">
                  <Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)" pt={4} width={72} shrink={0}>{`0${i + 1}`}</Text>
                  {/* A column beside the number gives way: a View does not shrink unless told. */}
                  <YStack gap={4} flex={1} minW={0}>
                    <Text fontSize="$5" lineHeight="$5" fontWeight="600" color="var(--foreground)">{t(name)}</Text>
                    <Text fontSize="$3" lineHeight="$4" color="var(--muted-foreground)">{t(line)}</Text>
                  </YStack>
                </XStack>
              ))}
            </YStack>
          </Win>
        }
      />

      <Backing />

      <Section id="thesis" label={t('The platform')} title={t('One account for the whole AI stack.')} lede={t('The models people use, the agents that put them to work, and the infrastructure a company needs to run both. Each layer makes the next one more useful.')}>
        <View display="grid" gridTemplateColumns="minmax(0, 1fr)" gap={16} $md={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}>
          {THESIS.map((item) => (
            <YStack key={item.title} render={<Link href={item.href} />} gap={14} p={24} rounded={20} borderWidth={1} borderColor="var(--border)" bg="$panel" hoverStyle={{ borderColor: 'var(--border-strong)' }} $platform-web={{ borderRadius: '20px', textDecoration: 'none' }}>
              <item.icon size={22} color="var(--foreground)" aria-hidden />
              <Text fontSize="$5" lineHeight="$5" fontWeight="600" color="var(--foreground)">{t(item.title)}</Text>
              <Text fontSize="$3" lineHeight="$4" color="var(--muted-foreground)">{t(item.line)}</Text>
              <Text fontSize="$2" fontWeight="600" color="var(--foreground)" mt="auto">{t('Explore')} <ArrowUpRight size={13} aria-hidden data-i18n-mirror /></Text>
            </YStack>
          ))}
        </View>
      </Section>

      <Research />

      <Section id="oss" label="Open.Source" title={t('Built in public. Shipping every day.')} lede={t('The cloud, the gateway, the agents and the runtime are developed in the open. This is the public commit record, not a marketing projection.')}>
        <Activity />
      </Section>

      <Trusted label={t('Products Hanzo built and launched')} />

      <Section id="team" label={t('The team')} title={t('Operators building for the long term.')} lede={t('Executive leadership of Hanzo AI, Inc., with the corporate structure and governance stated plainly.')}>
        <View display="grid" gridTemplateColumns="minmax(0, 1fr)" gap={16} $md={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}>
          {[
            { name: 'Antje Worring', role: phrase('CEO, Hanzo AI, Inc.'), href: 'https://www.linkedin.com/in/antje-worring/' },
            { name: 'Zach Kelling', role: phrase('CTO, Hanzo AI, Inc.'), href: 'https://www.linkedin.com/in/zeekay/' },
          ].map((person) => (
            <XStack key={person.name} render={<a href={person.href} target="_blank" rel="noopener noreferrer" />} items="center" justify="space-between" gap={16} p={24} rounded={20} borderWidth={1} borderColor="var(--border)" bg="$panel" $platform-web={{ borderRadius: '20px', textDecoration: 'none' }}>
              <YStack gap={5}>
                <Text fontSize="$5" fontWeight="600" color="var(--foreground)">{person.name}</Text>
                <Text fontSize="$3" color="var(--muted-foreground)">{t(person.role)}</Text>
              </YStack>
              <Users size={20} color="var(--muted-foreground)" aria-hidden />
            </XStack>
          ))}
        </View>
        <View display="grid" gridTemplateColumns="minmax(0, 1fr)" gap={16} $md={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}>
          <YStack gap={10} p={24} rounded={20} borderWidth={1} borderColor="var(--border)">
            <Building2 size={20} color="var(--foreground)" aria-hidden />
            <Text fontSize="$4" fontWeight="600" color="var(--foreground)">{t('Corporate structure')}</Text>
            <Text fontSize="$3" lineHeight="$4" color="var(--muted-foreground)">{t('Investors invest in Hanzo Industries Inc., the holding company. It owns 51% of Hanzo AI, Inc., which holds the AI IP and the app.')}</Text>
          </YStack>
          <YStack gap={10} p={24} rounded={20} borderWidth={1} borderColor="var(--border)">
            <Scale size={20} color="var(--foreground)" aria-hidden />
            <Text fontSize="$4" fontWeight="600" color="var(--foreground)">{t('Governance')}</Text>
            <Text fontSize="$3" lineHeight="$4" color="var(--muted-foreground)">{t('Hanzo Industries Inc. is privately held and does not publish financial statements. Requests for information are answered case by case by investor relations.')}</Text>
            <XStack gap={16} flexWrap="wrap">
              <Text render={<Link href="/legal/terms" />} fontSize="$2" color="var(--foreground)">{t('Legal')}</Text>
              <Text render={<Link href="/security" />} fontSize="$2" color="var(--foreground)">{t('Security')}</Text>
              <Text render={<Link href="/press" />} fontSize="$2" color="var(--foreground)">{t('Press')}</Text>
            </XStack>
          </YStack>
        </View>
      </Section>

      <View render="section" aria-labelledby="investor-contact" width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" pb={80}>
        <YStack items="center" gap={18} p={32} rounded={24} borderWidth={1} borderColor="var(--border)" bg="$panel" $md={{ p: 56 }} $platform-web={{ borderRadius: '24px', textAlign: 'center' }}>
          <FileText size={24} color="var(--foreground)" aria-hidden />
          <Display id="investor-contact" render="h2" text="center">{t('Build the future with us.')}</Display>
          <Lede text="center" maxW={560}>{t('For investment enquiries, company information and requests beyond this page, write directly to our team.')}</Lede>
          <XStack justify="center" gap={12} flexWrap="wrap" pt={8}>
            <Action href="mailto:[email protected]" fill><Mail size={15} aria-hidden />ir@hanzo.ai</Action>
            <Action href="https://cal.com/hanzo" target="_blank" rel="noopener noreferrer">{t('Book a call')}<ArrowUpRight size={15} aria-hidden data-i18n-mirror /></Action>
          </XStack>
        </YStack>
      </View>
    </>
  )
}