hanzo.ai/components/about/HistoryTimeline.tsx

'use client'

// /about's timeline: Hanzo AI 12-year trajectory from 2014 to today.
//
// Track record across 12 years:
// - Built and invested in over 100 startups, generating over $1B in revenue, 9 unicorns, and 2 IPO exits.
// - 2014: SKULLY — raised $2.5M on Indiegogo, $3.3M on Hanzo, reaching tens of millions; hanzoai/commerce open-sourced.
// - 2015: Bellabeat — 250K email signups, tens of thousands of pre-orders, $650M revenue in 2023.
// - 2016: KANOA — 50K pre-orders, grew to $1.5M/mo ($10M+ total), early wireless earbuds, scaled with zero press.
// - 2017: Unikrn — first regulated esports bookmaker ICO, 120K+ ETH raised, acquired; Techstars '17.
// - 2018: Arca ($500M+ AUM SEC-approved stablecoin) & Casper (CSPR $650M ATH, network launch, DEVxDAO).
// - 2019: Damon Motorcycles — won CES 2020 & 2022, $8.4M month one, $100M+ in sales, IPO, sub-50ms CoPilot radar.
// - 2020: Triller — TrillerFest seen by 169M+ people, 82M+ MAU, IPO.
// - 2021: ZOO (Zoo Labs Foundation) — $5M+ token sale, early AI blockchain, $2.7B+ ATH market cap.
// - 2022: LUX Network — $10M+ token sale, $2.4B+ ATH market cap, post-quantum blockchain.
// - 2023: Karma Fashion — 3.4× campaign growth lift, AI-driven crowdfunding, dynamic neural personalization.
// - 2024: Keek — 12M items/day processed through Zen multimodal AI pipeline, 400% engagement lift.
// - 2025: Native MCP ecosystem (260+ tools, 13 HIP-0300 primitives), Operative computer use, Hanzo Dev & Desktop.
// - 2026: Sovereign AI Cloud, Zen 4 through Zen 7, Enso reasoning, Kai multimodal intelligence, C/CUDA/Metal engine.

import { Text, XStack, YStack } from '@hanzo/gui'
import { ArrowUpRight } from 'lucide-react'
import { Lede, Line, More, Title } from '@hanzo/ui/marketing'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

type Stop = {
  year: string
  title: string
  badge?: string
  lines: string[]
  highlight?: {
    tag: string
    title: string
    description: string
    metric?: string
  }
  posts?: { label: string; href: string }[]
}

const BLOG = 'https://hanzo.blog/blog'

const stops: Stop[] = [
  {
    year: '2014',
    title: 'SKULLY & Open-Source Commerce',
    badge: '$5.8M Raised · Indiegogo #1',
    lines: [
      phrase('Hanzo was founded in 2014. First customer: SKULLY, pioneering the world’s first AI and augmented reality heads-up display motorcycle helmet.'),
      phrase('Raised $2.5M on Indiegogo and $3.3M directly on Hanzo, reaching tens of millions of people worldwide with embedded spatial computer vision and real-time telematics.'),
      phrase('Open-sourced hanzoai/commerce as one of our earliest public repositories, establishing our decade-long commitment to open infrastructure.'),
    ],
    highlight: {
      tag: 'Launch · 2014',
      title: 'SKULLY AR Helmet',
      description: 'Spatial computing, heads-up display telemetry, and computer vision interface reaching tens of millions.',
      metric: '$5.8M Raised · #1 Campaign',
    },
    posts: [
      { label: 'SKULLY Case Study', href: '/customers#skully' },
      { label: 'hanzoai/commerce (GitHub)', href: 'https://github.com/hanzoai/commerce' },
    ],
  },
  {
    year: '2015',
    title: 'Bellabeat AI Wearables for Women',
    badge: '250k Signups · $650M Revenue',
    lines: [
      phrase('Partnered with Bellabeat to architect their women’s health AI wearable platform and data infrastructure.'),
      phrase('Collected 250,000 email signups and tens of thousands of pre-orders at launch, establishing the platform that scaled to $650M in annual revenue by 2023.'),
    ],
    highlight: {
      tag: 'Launch · 2015',
      title: 'Bellabeat Health Platform',
      description: 'AI-driven biometric tracking and personalized wellness wearables scaled to millions of connected devices.',
      metric: '$650M Revenue in 2023',
    },
    posts: [
      { label: 'Bellabeat Case Study', href: '/customers#bellabeat' },
      { label: 'Agency Story', href: 'https://hanzo.agency/case-study/bellabeat' },
    ],
  },
  {
    year: '2016',
    title: 'KANOA Smart Audio & Earbuds',
    badge: 'Zero Press · $1.5M/Mo',
    lines: [
      phrase('Launched KANOA, pioneering early true wireless smart earbuds.'),
      phrase('Launched without press coverage, relying exclusively on Hanzo’s data + AI engine to collect 50,000 pre-orders and scale smoothly from zero to $1.5M/month month-over-month ($10M+ total).'),
    ],
    highlight: {
      tag: 'Launch · 2016',
      title: 'KANOA Wireless Audio',
      description: 'Early true wireless earbuds powered entirely by Hanzo data & autonomous audience segmentation.',
      metric: '$1.5M/Mo · $10M+ Sales',
    },
    posts: [
      { label: 'KANOA Case Study', href: '/customers#kanoa' },
      { label: 'Customer Portfolio', href: '/customers' },
    ],
  },
  {
    year: '2017',
    title: 'Unikrn 120,000 ETH ICO & Techstars',
    badge: '120k ETH · Regulated ICO',
    lines: [
      phrase('Engineered the token launch for Unikrn (Unikoin Gold), the first regulated esports bookmaker, raising over 120,000 ETH from the public across 15+ jurisdictions before its acquisition by Entain.'),
      phrase("Selected for Techstars ’17 (Boulder/NYC), architecting distributed infrastructure for smart contract auditing and cryptographic settlement."),
    ],
    highlight: {
      tag: 'Consensus · 2017',
      title: 'Unikrn (Unikoin Gold)',
      description: 'Regulated Ethereum token economy with multi-jurisdiction compliance and automated verification.',
      metric: '120k ETH Raised · Acquired',
    },
    posts: [
      { label: 'Unikrn Case Study', href: '/customers#unikrn' },
      { label: 'Agency Story', href: 'https://hanzo.agency/case-study/unikoin-gold' },
      { label: "Techstars '17 Announcement", href: `${BLOG}/2017-06-08-techstars-17/` },
    ],
  },
  {
    year: '2018',
    title: 'Arca SEC Stablecoin & Casper Network',
    badge: 'SEC Approved · $650M ATH',
    lines: [
      phrase('Arca: Launched the first SEC-approved interest-bearing stablecoin, scaling institutional assets under management to $500M+ by 2021.'),
      phrase('Casper Labs: Co-designed architecture, led the Rust pivot, and launched the network as founding members of DEVxDAO (early Swiss DAO). CSPR reached an all-time-high market cap of $650M.'),
    ],
    highlight: {
      tag: 'Institutional Web3 · 2018',
      title: 'Arca Stablecoin & Casper Blockchain',
      description: 'First SEC-regulated interest-bearing digital asset ($500M+ AUM) and enterprise proof-of-stake blockchain.',
      metric: '$500M+ AUM · $650M ATH',
    },
    posts: [
      { label: 'Arca Case Study', href: '/customers#arca' },
      { label: 'Casper Case Study', href: '/customers#casper-labs' },
      { label: 'Casper Agency Story', href: 'https://hanzo.agency/case-study/casper-blockchain' },
    ],
  },
  {
    year: '2019',
    title: 'Damon Electric Hypersport & CoPilot Radar',
    badge: 'CES Best of Innovation · IPO',
    lines: [
      phrase("Engineered the digital platform and edge telematics for Damon Motorcycles, generating $8.4M in sales in month one and exceeding $100M+ in total sales leading to IPO."),
      phrase('Powered the sub-50ms CoPilot 360° radar collision warning system, winning CES Best of Innovation in 2020 and 2022.'),
    ],
    highlight: {
      tag: 'EV & Edge AI · 2019',
      title: 'Damon Motorcycles',
      description: 'Sub-50ms radar edge telematics and 500x ROI launch campaign for next-gen electric superbikes.',
      metric: '$100M+ Sales · IPO',
    },
    posts: [
      { label: 'Damon Case Study', href: '/customers#damon-motorcycles' },
      { label: 'Agency Story', href: 'https://hanzo.agency/case-study/damon-motorcycles' },
    ],
  },
  {
    year: '2020',
    title: 'TrillerFest & Planetary Scale Streaming',
    badge: '169M+ Viewers · 82M MAU',
    lines: [
      phrase('Architected low-latency global ingress for Triller, delivering TrillerFest to over 169M live viewers worldwide.'),
      phrase('Scaled platform infrastructure as monthly active users grew past 82M, powering creator distribution toward public listing (IPO).'),
    ],
    highlight: {
      tag: 'Global Media · 2020',
      title: 'Triller & TrillerFest',
      description: 'Largest virtual streaming event in history with high-concurrency real-time audience distribution.',
      metric: '169M+ Viewers · 82M MAU',
    },
    posts: [
      { label: 'Triller Case Study', href: '/customers#triller' },
      { label: 'Trillerfest Agency Story', href: 'https://hanzo.agency/case-study/trillerfest' },
    ],
  },
  {
    year: '2021',
    title: 'Zoo Labs Foundation & Decentralized AI',
    badge: '$2.7B+ ATH Market Cap',
    lines: [
      phrase('Founded Zoo Labs Foundation as a 501(c)(3) nonprofit research institution dedicated to decentralized AI research and open foundation models.'),
      phrase('Completed a $5M+ token sale for early AI blockchain compute, with ZOO market cap reaching an all-time high of $2.7B+. Built the Gym distributed training platform and DSO protocol ($18 per model adaptation).'),
    ],
    highlight: {
      tag: 'Decentralized AI · 2021',
      title: 'Zoo Labs Foundation',
      description: '501(c)(3) non-profit AI research network, Gym training cluster, and community ZIPs governance.',
      metric: '$2.7B+ ATH Market Cap',
    },
    posts: [
      { label: 'Zoo Labs Case Study', href: '/customers#zoo-labs-foundation' },
      { label: 'Agency Story', href: 'https://hanzo.agency/case-study/zoo-foundation' },
      { label: 'Zoo Labs NGO', href: 'https://zoolabs.org' },
      { label: 'Research Papers', href: '/research' },
    ],
  },
  {
    year: '2022',
    title: 'LUX Post-Quantum Consensus Network',
    badge: '$2.4B+ ATH Market Cap',
    lines: [
      phrase('Engineered LUX Network, a high-speed post-quantum blockchain architecture with sub-second finality.'),
      phrase('Raised $10M+ in token sale, reaching an all-time-high market cap of $2.4B+, establishing foundational cryptographic primitives used across Hanzo KMS.'),
    ],
    highlight: {
      tag: 'Post-Quantum · 2022',
      title: 'LUX Network',
      description: 'Quantum-resistant consensus and high-throughput transaction pipelines.',
      metric: '$2.4B+ ATH Market Cap',
    },
    posts: [
      { label: 'LUX Case Study', href: '/customers#lux-network' },
      { label: 'LUX Network', href: 'https://lux.network' },
    ],
  },
  {
    year: '2023',
    title: 'Predictive Commerce & Autonomous Merchandising',
    badge: '3.4× Lift · AI Personalization',
    lines: [
      phrase('Scaled predictive AI commerce with Karma Fashion, generating a 3.4× campaign growth lift and automated neural personalization for direct-to-consumer retail.'),
      phrase('Integrated real-time semantic discovery and autonomous merchandising workflows across next-generation commerce brands.'),
    ],
    highlight: {
      tag: 'Commerce AI · 2023',
      title: 'Karma Fashion',
      description: 'AI-driven crowdfunding and dynamic neural personalization that catalyzed retail growth.',
      metric: '3.4× Growth Lift',
    },
    posts: [
      { label: 'Karma Case Study', href: '/customers#karma' },
      { label: 'Customer Portfolio', href: '/customers' },
    ],
  },
  {
    year: '2024',
    title: 'Multimodal Social Discovery & Real-Time AI Moderation',
    badge: '12M Items / Day · 400% Engagement',
    lines: [
      phrase('Deployed Zen multimodal vision and text models to process 12M daily content items for Keek with sub-second latency.'),
      phrase('Adapted the EARLE recommendation architecture for large-scale social discovery, driving a 400% increase in content engagement and 85% reduction in harmful content reach.'),
    ],
    highlight: {
      tag: 'Multimodal AI · 2024',
      title: 'Keek Social Platform',
      description: 'Multimodal content understanding and real-time safety pipeline processing 12M items daily.',
      metric: '12M Items / Day',
    },
    posts: [
      { label: 'Keek Case Study', href: '/customers#keek' },
      { label: 'Customer Portfolio', href: '/customers' },
    ],
  },
  {
    year: '2025',
    title: 'The Agent Protocol (MCP) & Computer Control',
    badge: '13 HIP-0300 Tools · 260+ Tools',
    lines: [
      phrase('Pioneered the Model Context Protocol (MCP) ecosystem, standardizing 260+ tools across 13 HIP-0300 unified primitives with automatic ZAP service bridging.'),
      phrase('Released Operative for multimodal computer use, Hanzo Dev for autonomous terminal coding, and the cross-platform Hanzo Desktop app.'),
    ],
    highlight: {
      tag: 'Protocol Milestone · 2025',
      title: 'Hanzo MCP & Operative',
      description: 'Native agent protocol exposing every cloud subsystem as an executable tool with browser and OS control.',
      metric: '260+ Tools',
    },
    posts: [
      { label: 'Operative Launch', href: `${BLOG}/2025-04-20-hanzo-operative-launch/` },
      { label: 'MCP Tools Ecosystem', href: `${BLOG}/2025-07-24-mcp-tools-ecosystem/` },
      { label: 'Hanzo Dev', href: `${BLOG}/2025-09-06-hanzo-dev-launch/` },
    ],
  },
  {
    year: '2026',
    title: 'The Sovereign AI Cloud & Frontier Zen Family',
    badge: 'Zen 4 – Zen 7 · Sovereign Stack',
    lines: [
      phrase('Released the frontier Zen model family: Zen 4 in February, Zen 5 in May, Zen 6 and Zen 6 Flash in September, with Zen 7 research preview underway.'),
      phrase('Introduced original reasoning architectures Enso and Kai multimodal intelligence, powered by the C/CUDA/Metal Hanzo Engine, distributed Hanzo Base, and sovereign Hanzo KMS key custody on api.hanzo.ai.'),
    ],
    highlight: {
      tag: 'Sovereign Cloud · 2026',
      title: 'Zen, Enso & Sovereign Stack',
      description: 'Full sovereign AI cloud: low-level C/CUDA/Metal engine, private KMS custody, and frontier foundation models.',
      metric: '131k Context',
    },
    posts: [
      { label: 'Zen 4 Launch', href: `${BLOG}/2026-02-09-zen4-launch/` },
      { label: 'Introducing Enso', href: `${BLOG}/introducing-enso/` },
      { label: 'Explore Models', href: '/models' },
      { label: 'Sovereign Cloud', href: '/cloud' },
    ],
  },
]

/** The dot on the rail, centred on the year's first line. */
const DOT = 13

const HistoryTimeline = () => {
  const { t } = useI18n()
  return (
    <YStack render="section" id="timeline" py={96} px={16} $sm={{ px: 24 }} $lg={{ px: 32 }}>
      <YStack width="100%" maxW={840} mx="auto">
        <Title quiet mb={12}>
          {t('Twelve years of engineering')}
        </Title>
        <Lede mb={56} mt="$3.5">
          {t('Built and invested in over 100 startups, generating over $1B in revenue, 9 unicorns, and 2 IPO exits. From our first customer SKULLY in 2014 to the sovereign AI cloud today.')}
        </Lede>

        {/* No list marker to clear: the stops are rows, not list items. */}
        <YStack render="ol" position="relative" m={0} p={0}>
          {/* The rail: one line behind every stop, from the first dot to the last. */}
          <YStack
            aria-hidden
            position="absolute"
            t={DOT / 2 + 12}
            b={24}
            l={DOT / 2}
            width={1}
            bg="var(--border)"
          />
          {stops.map((stop, i) => (
            <XStack render="li" key={stop.year} position="relative" gap={24} pb={i === stops.length - 1 ? 0 : 56}>
              <YStack
                aria-hidden
                width={DOT}
                height={DOT}
                mt={12}
                shrink={0}
                rounded={9999}
                bg={i === stops.length - 1 ? 'var(--foreground)' : 'var(--background)'}
                borderWidth={2}
                borderColor="var(--foreground)"
              />
              <YStack flex={1} minW={0} gap={12} $md={{ flexDirection: 'row', gap: 32 }}>
                <YStack $md={{ width: 140, shrink: 0 }} gap={6}>
                  <Line
                    render="h3"
                    fontSize="$8"
                    lineHeight="$8"
                    fontWeight="700"
                    color="$ink"
                    m={0}
                    fontVariant={['tabular-nums']}
                    letterSpacing="-0.02em"
                  >
                    {stop.year}
                  </Line>
                  {stop.badge ? (
                    <Text
                      display="inline-flex"
                      fontSize="$1"
                      fontWeight="500"
                      color="var(--primary)"
                      lineHeight={16}
                    >
                      {t(stop.badge)}
                    </Text>
                  ) : null}
                </YStack>

                <YStack minW={0} gap={10} $md={{ pt: 4, flex: 1 }}>
                  <Line render="h4" fontSize="$5" fontWeight="600" color="$ink" m={0}>
                    {t(stop.title)}
                  </Line>

                  {stop.lines.map((line) => (
                    <Text key={line} render="p" fontSize="$4" lineHeight="$5" color="$soft" m={0}>
                      {t(line)}
                    </Text>
                  ))}

                  {stop.highlight ? (
                    <YStack
                      mt={6}
                      p={16}
                      rounded="var(--radius-lg)"
                      borderWidth={1}
                      borderColor="var(--border)"
                      $platform-web={{ background: 'color-mix(in srgb, var(--card) 60%, transparent)' }}
                      gap={6}
                    >
                      <XStack justify="space-between" items="center" flexWrap="wrap" gap={8}>
                        <Text fontSize="$1" fontWeight="600" color="var(--primary)" textTransform="uppercase" letterSpacing={0.5}>
                          {t(stop.highlight.tag)}
                        </Text>
                        {stop.highlight.metric ? (
                          <Text
                            fontSize="$1"
                            fontWeight="600"
                            px={8}
                            py={2}
                            rounded={9999}
                            $platform-web={{ background: 'color-mix(in srgb, var(--primary) 12%, transparent)' }}
                            color="var(--primary)"
                          >
                            {stop.highlight.metric}
                          </Text>
                        ) : null}
                      </XStack>
                      <Line render="h5" fontSize="$3" fontWeight="600" color="$ink" m={0}>
                        {t(stop.highlight.title)}
                      </Line>
                      <Text render="p" fontSize="$2" lineHeight="$3" color="$soft" m={0}>
                        {t(stop.highlight.description)}
                      </Text>
                    </YStack>
                  ) : null}

                  {stop.posts ? (
                    <XStack flexWrap="wrap" gap={16} mt={6}>
                      {stop.posts.map((post) => (
                        <More key={post.href} href={post.href}>
                          {t(post.label)}
                          <ArrowUpRight width={14} height={14} aria-hidden data-i18n-mirror />
                        </More>
                      ))}
                    </XStack>
                  ) : null}
                </YStack>
              </YStack>
            </XStack>
          ))}
        </YStack>
      </YStack>
    </YStack>
  )
}

export default HistoryTimeline