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

'use client'

import { useState, type ReactNode } from 'react'
import {
  Users,
  ArrowUpRight,
  Shield,
  Zap,
  Sparkles,
  Globe,
} from 'lucide-react'
import { Page, PageHero, Section, Prose, Cta, CardGrid } from '@/components/marketing/page-kit'
import { featured, href } from '@/lib/data/customers'
import { Models } from '@/components/api/count'
import { backerLogos } from '@/lib/constants/partner-logos'
import { PartnerLogoRow } from '@/components/shared'
import Proof from '@/components/home/Proof'
import Link from 'next/link'
import { Box, Text, View, XStack, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'

interface CaseStudy {
  company: string
  category: 'all' | 'hardware' | 'health' | 'media' | 'commerce'
  categoryLabel: string
  highlight: string
  metric: string
  metricLabel: string
  quote: string
  author: string
  role: string
  tags: string[]
}

const CASE_STUDIES: CaseStudy[] = [
  {
    company: 'Damon Motorcycles',
    category: 'hardware',
    categoryLabel: 'Autonomous Hardware & EV',
    highlight: 'Next-Gen Electric Hypersport Telemetry',
    metric: '<50ms',
    metricLabel: 'Edge Telemetry Latency',
    quote:
      'Hanzo has transformed our approach to electric motorcycle development. Their platform gives us the tools to innovate at a pace that would be impossible with traditional infrastructure.',
    author: 'Jay Giraud',
    role: 'Founder & CEO at Damon Motorcycles',
    tags: ['Edge Telemetry', 'Embedded Zen', 'Sub-50ms Inference', 'IoT Telematics'],
  },
  {
    company: 'SKULLY',
    category: 'hardware',
    categoryLabel: 'Spatial Computing & AR',
    highlight: 'AR HUD Smart Helmets · #1 Indiegogo Campaign',
    metric: '#1',
    metricLabel: 'Funded Campaign in History',
    quote:
      'Working with Hanzo has transformed our ability to create the highest successfully funded Indiegogo project in history. Their DX platform streamlines our development processes while maintaining the highest standards of quality and safety.',
    author: 'Marcus Weller',
    role: 'CEO at SKULLY',
    tags: ['Computer Vision', 'AR HUD Interface', 'Edge Inference', 'DX Platform'],
  },
  {
    company: 'Bellabeat',
    category: 'health',
    categoryLabel: 'Digital Health & Wearables',
    highlight: "Scaling Women's Health IoT to Millions of Users",
    metric: 'Millions',
    metricLabel: 'Active Connected Devices',
    quote:
      "As a company focused on women's health technology, we need partners who understand both tech and human needs. Hanzo has been instrumental in helping us scale our infrastructure while maintaining the personal touch our customers expect.",
    author: 'Sandro Mur',
    role: 'Co-founder & CEO at Bellabeat',
    tags: ['Context Memory', 'Private Clusters', 'Biometric AI'],
  },
  {
    company: 'Triller',
    category: 'media',
    categoryLabel: 'Media & Streaming',
    highlight: '169M+ Global Streaming Audience at Scale',
    metric: '169M+',
    metricLabel: 'Event Audience Reached',
    quote:
      "With Trillerfest reaching over 169M people, Hanzo's platform has been essential to our success. Their scalable solutions have allowed us to deliver exceptional user experiences at a global scale.",
    author: 'Vincent Butta',
    role: 'Board Member at Triller',
    tags: ['High-Throughput Ingress', 'Live Streaming', 'Recommendation Engine', 'Global Edge CDN'],
  },
  {
    company: 'Karma',
    category: 'commerce',
    categoryLabel: 'Next-Gen Commerce',
    highlight: 'AI-Driven Crowdfunding & Predictive Merchandising',
    metric: '3.4×',
    metricLabel: 'Campaign Growth Lift',
    quote:
      "Hanzo's platform transformed our growth strategy and catalyzed sales for our crowdfunding campaign. Their AI-driven insights helped us connect with our audience in ways we never thought possible, making our latest collection launch our most successful to date.",
    author: 'Antje Worring',
    role: 'CEO at Karma Fashion',
    tags: ['Semantic Search', 'Dynamic Personalization', 'Predictive Commerce', 'Autonomous Merchandising'],
  },
  {
    company: 'Myle Tap',
    category: 'hardware',
    categoryLabel: 'Wearables & Voice Control',
    highlight: 'World’s First Wearable Voice-Activated App Shortcut',
    metric: '200%',
    metricLabel: 'Crowdfunding Goal Achieved',
    quote:
      'Hanzo understood exactly what was needed to make Myle Tap accessible and appealing to a broad audience. Their work on our mobile app and digital presence significantly contributed to our successful launch.',
    author: 'Pavel Bondarev',
    role: 'Founder at Myle Tap',
    tags: ['Voice UI', 'Wearable Hardware', 'Mobile App', 'IoT Shortcut'],
  },
  {
    company: 'Cover Build',
    category: 'hardware',
    categoryLabel: 'Precision Prefab & 3D',
    highlight: 'Next-Gen Precision-Engineered Prefab Housing Platform',
    metric: '300%',
    metricLabel: 'Increase in Qualified Leads',
    quote:
      'Hanzo transformed how potential customers experience our homes before they’re built. The visualization tools and clear communication of our value proposition have dramatically improved our conversion rates and reduced our sales cycle.',
    author: 'Alexis Rivas',
    role: 'CEO at Cover Build',
    tags: ['3D Visualization', 'Parametric Design', 'Customization Engine', 'High-Converting Web'],
  },
  {
    company: 'Unikrn',
    category: 'media',
    categoryLabel: 'Esports Gaming & Blockchain',
    highlight: '120,000 ETH Token Launch & Global Virtual Economy',
    metric: '120,000 ETH',
    metricLabel: 'Raised in Token Sale',
    quote:
      'Hanzo’s expertise in blockchain technology and regulatory compliance was instrumental in bringing UnikoinGold to market. Their strategic insights helped us navigate complex challenges while their technical implementation enabled us to create a truly decentralized ecosystem.',
    author: 'Rahul Sood',
    role: 'CEO at Unikrn',
    tags: ['Ethereum Smart Contracts', 'Compliance Framework', 'Esports Betting', '15+ Jurisdictions'],
  },
  {
    company: 'Casper Labs',
    category: 'hardware',
    categoryLabel: 'Enterprise Proof-of-Stake Blockchain',
    highlight: 'Co-Designed Architecture & Initial Validator Deployment',
    metric: 'Mainnet',
    metricLabel: 'Enterprise PoS Network',
    quote:
      'Hanzo’s visionary approach and technical expertise were instrumental in shaping Casper into the enterprise-grade blockchain it is today. Their early involvement and strategic guidance helped us navigate critical decisions that established our competitive position.',
    author: 'Mrinal Manohar',
    role: 'CEO at Casper Labs',
    tags: ['Rust Architecture', 'PoS Consensus', 'Validator Operation', 'Enterprise Blockchain'],
  },
  {
    company: 'Keek',
    category: 'media',
    categoryLabel: 'AI Social Discovery & Moderation',
    highlight: '12M Daily Content Items Processed via Zen Multimodal AI',
    metric: '12M/day',
    metricLabel: 'Content Items Processed',
    quote:
      'Hanzo didn’t just give us AI features — they gave us AI infrastructure. The recommendation engine transformed how our users discover content, and the moderation system gave us confidence to scale without sacrificing safety.',
    author: 'Darius Mirshahzadeh',
    role: 'CEO at Personas Social',
    tags: ['EARLE Recommendation', 'Zen Vision Models', 'Real-time Safety', 'Multimodal Pipeline'],
  },
  {
    company: 'Zoo Labs Foundation',
    category: 'commerce',
    categoryLabel: 'Decentralized AI Research Foundation',
    highlight: '501(c)(3) Non-Profit Open AI Research & Multi-Agent Network',
    metric: '$18',
    metricLabel: 'Model Adaptation vs $15k Fine-Tuning',
    quote:
      'Zoo proves that frontier AI research does not require a billion-dollar budget. With the right infrastructure and governance, an open community can push the boundaries of AI while keeping development transparent and accountable. Hanzo built that infrastructure from scratch.',
    author: 'Antje Worring',
    role: 'Co-founder at Zoo Labs Foundation',
    tags: ['Gym Training', 'DSO Protocol', 'ZIPs Governance', 'PoAI Consensus'],
  },
  {
    company: 'KANOA',
    category: 'hardware',
    categoryLabel: 'Smart Audio & Earbuds',
    highlight: 'Zero-Press Launch to $1.5M/Mo and 50K Pre-Orders',
    metric: '$10M+',
    metricLabel: 'Total Revenue Generated',
    quote:
      'KANOA launched without press coverage and relied exclusively on Hanzo’s data and AI engine, scaling smoothly from zero to millions in monthly revenue with 50K pre-orders.',
    author: 'Cindi Busch',
    role: 'Operations at KANOA',
    tags: ['Autonomous AI', 'Predictive Commerce', 'High-Converting Funnel', 'Smart Audio'],
  },
  {
    company: 'Arca',
    category: 'commerce',
    categoryLabel: 'Institutional Digital Assets',
    highlight: 'First SEC-Approved Interest-Bearing Digital Security',
    metric: '$500M+',
    metricLabel: 'AUM Scaled by 2021',
    quote:
      'Hanzo’s institutional-grade blockchain and cryptographic architecture helped Arca launch the first SEC-approved interest-bearing treasury coin, establishing a new asset class.',
    author: 'Rayne Steinberg',
    role: 'Chief Executive Officer at Arca',
    tags: ['SEC Registered', 'Smart Contracts', 'Custody Architecture', 'Stablecoin Engine'],
  },
  {
    company: 'LUX Network',
    category: 'hardware',
    categoryLabel: 'Post-Quantum Blockchain',
    highlight: 'Quantum-Resistant Consensus Reaching $2.4B+ ATH Market Cap',
    metric: '$2.4B+',
    metricLabel: 'ATH Market Capitalization',
    quote:
      'Hanzo designed the core cryptographic primitives and quantum-resistant consensus mechanism for LUX, securing $10M+ in token sale and scaling to billions in market cap.',
    author: 'Hanzo Systems',
    role: 'Core Architecture Partner',
    tags: ['Post-Quantum Cryptography', 'Sub-second Finality', 'ZAP Bridge', 'Validator Fleet'],
  },
]

const STATS = [
  { value: '169M+', label: 'Global Audience Reached', hint: 'Trillerfest streaming event' },
  { value: "Techstars '17", label: 'Battle-Tested Foundation', hint: 'Pioneer AI infrastructure' },
  { value: '1M Context', label: 'Frontier Long-Horizon Window', hint: 'Zen MoDE architecture' },
  { value: '125 ns', label: 'Live Goroutine Spawn', hint: 'Sub-microsecond agent runtime' },
]

const PILLARS = [
  {
    icon: Shield,
    title: 'Consensus-Native Security & KMS',
    description:
      'Mnemonic-derived ML-DSA-65 post-quantum service identities, consensus-backed authorization envelopes, and zero-fallback fail-closed KMS vaults protecting sensitive tenant data.',
  },
  {
    icon: Zap,
    title: 'Ultra-Low Latency & High Density',
    description:
      '125 ns live agent spawn, 477 bytes dormant agent state, and accelerated edge inference engines delivering peak throughput across commodity silicon.',
  },
  {
    icon: Globe,
    title: 'Universal AI Gateway & Open Tooling',
    description: (
      <>
        One gateway to <Models />, every subsystem as MCP tools, and a memory that records when each fact was known.
      </>
    ),
  },
]

const CATEGORIES = [
  { id: 'all', label: 'All Sectors' },
  { id: 'hardware', label: 'Autonomous & IoT' },
  { id: 'health', label: 'Health & Bio' },
  { id: 'media', label: 'Media & Streaming' },
  { id: 'commerce', label: 'Next-Gen Commerce' },
] as const

/** Every line on these cards sits on the page's 20px line, whatever its size. */
const LINE = '1.25rem'

/** The mono small caps over a row of logos. */
function Kicker({ children }: { children: ReactNode }) {
  return (
    <Text
      display="block"
      mb={14}
      fontFamily="$mono"
      fontSize="$2"
      lineHeight={LINE}
      letterSpacing={1.04}
      textTransform="uppercase"
      color="var(--white-55)"
    >
      {children}
    </Text>
  )
}

function getInitials(name: string) {
  return name
    .split(' ')
    .map((p) => p[0])
    .slice(0, 2)
    .join('')
    .toUpperCase()
}

/** A case study told as a card: its sector and figure, the line it is known for, the quote, the stack, and who said it. */
function Spotlight({ item }: { item: CaseStudy }) {
  return (
    <YStack
      justify="space-between"
      gap={20}
      position="relative"
      py={28}
      px={24}
      bg="var(--neutral-950)"
      borderWidth={1}
      borderColor="var(--white-14)"
      rounded={12}
      id={item.company.toLowerCase().replace(/[^a-z0-9]+/g, '-')}
    >
      <Box>
        {/* Top bar: sector badge + metric callout */}
        <XStack justify="space-between" items="flex-start" mb={16} gap={12}>
          <Box>
            <Text
              py={3}
              px={8}
              rounded={4}
              borderWidth={1}
              borderColor="var(--white-08)"
              bg="var(--white-05)"
              fontFamily="$mono"
              fontSize="$1"
              lineHeight={LINE}
              letterSpacing={0.66}
              textTransform="uppercase"
              color="var(--white-55)"
            >
              {item.categoryLabel}
            </Text>
            <Text render="h3" display="block" mt={10} fontSize="$6" lineHeight={LINE} fontWeight="600" color="var(--pure-white)">
              {item.company}
            </Text>
          </Box>

          <Box py={4} px={10} rounded={6} borderWidth={1} borderColor="var(--white-10)" bg="var(--white-05)" $platform-web={{ textAlign: 'right' }}>
            <Text display="block" fontFamily="$mono" fontSize="$4" lineHeight={LINE} fontWeight="600" color="var(--pure-white)">
              {item.metric}
            </Text>
            <Text display="block" fontSize={10} lineHeight={LINE} color="var(--white-55)">
              {item.metricLabel}
            </Text>
          </Box>
        </XStack>

        <XStack items="center" gap={6} mb={14}>
          <Sparkles size={13} color="var(--white-60)" />
          <Text fontSize="$2" lineHeight={LINE} fontWeight="500" color="var(--white-78)">
            {item.highlight}
          </Text>
        </XStack>

        <Text render="blockquote" display="block" m={0} fontSize="$3" lineHeight="1.4rem" fontStyle="italic" color="var(--white-80)">
          &ldquo;{item.quote}&rdquo;
        </Text>
      </Box>

      <Box>
        {/* Tech tags */}
        <XStack flexWrap="wrap" gap={6} mb={16} pt={14} borderTopWidth={1} borderColor="var(--white-08)">
          {item.tags.map((tag) => (
            <Text key={tag} py={2} px={6} rounded={4} bg="var(--white-03)" fontFamily="$mono" fontSize="$1" lineHeight={LINE} color="var(--white-60)">
              #{tag}
            </Text>
          ))}
        </XStack>

        {/* Author attribution */}
        <XStack items="center" gap={12}>
          <XStack
            width={42}
            height={42}
            shrink={0}
            rounded={9999}
            items="center"
            justify="center"
            bg="var(--white-08)"
            borderWidth={1}
            borderColor="var(--white-20)"
          >
            <Text fontFamily="$mono" fontSize="$3" lineHeight={LINE} fontWeight="600" color="var(--pure-white)">
              {getInitials(item.author)}
            </Text>
          </XStack>
          <Box>
            <Text display="block" fontSize="$2" lineHeight={LINE} fontWeight="600" color="var(--pure-white)">
              {item.author}
            </Text>
            <Text display="block" fontSize="$2" lineHeight={LINE} color="var(--white-55)">
              {item.role}
            </Text>
          </Box>
        </XStack>
      </Box>
    </YStack>
  )
}

export default function CustomersPage() {
  const [activeCategory, setActiveCategory] = useState<string>('all')

  const filtered =
    activeCategory === 'all'
      ? CASE_STUDIES
      : CASE_STUDIES.filter((c) => c.category === activeCategory)

  return (
    <Page>
      <PageHero
        eyebrow="Customers"
        icon={Users}
        title="Teams building on Hanzo"
        lede="Hardware, health, media and fintech companies run production workloads on the platform. Here is what they say about it."
      />

      {/* ── The launches told in full, each on its own page ── */}
      <Section title="Case studies">
        <CardGrid
          items={featured.map((s) => ({ title: s.company, description: s.did, href: href(s), meta: s.year ? String(s.year) : undefined }))}
        />
      </Section>

      {/* ── Metric proof strip ── */}
      <Section>
        <View
          display="grid"
          gridTemplateColumns="repeat(auto-fit, minmax(200px, 1fr))"
          gap={16}
          py={24}
          px={28}
          bg="var(--neutral-950)"
          borderWidth={1}
          borderColor="var(--white-14)"
          rounded={12}
        >
          {STATS.map((stat) => (
            <YStack key={stat.label} gap={4}>
              <Text
                display="block"
                lineHeight={LINE}
                fontWeight="600"
                color="var(--pure-white)"
                $platform-web={{ fontSize: 'clamp(var(--text-3xl), 3vw, var(--text-4xl))', letterSpacing: '-0.03em' }}
              >
                {stat.value}
              </Text>
              <Text display="block" fontSize="$2" lineHeight={LINE} fontWeight="500" color="var(--white-80)">
                {stat.label}
              </Text>
              <Text display="block" fontFamily="$mono" fontSize="$1" lineHeight={LINE} color="var(--white-45)">
                {stat.hint}
              </Text>
            </YStack>
          ))}
        </View>
      </Section>

      {/* ── Domain filter buttons ── */}
      <Section title="Customer spotlights & production case studies">
        <XStack flexWrap="wrap" gap={8} mb={28}>
          {CATEGORIES.map((cat) => {
            const selected = activeCategory === cat.id
            return (
              <Text
                key={cat.id}
                render={<button onClick={() => setActiveCategory(cat.id)} />}
                display="block"
                py={8}
                px={16}
                rounded={20}
                borderWidth={1}
                borderColor={selected ? 'var(--pure-white)' : 'var(--white-14)'}
                bg={selected ? 'var(--white-14)' : 'var(--white-03)'}
                fontSize="$2"
                lineHeight={LINE}
                fontWeight="500"
                color={selected ? 'var(--pure-white)' : 'var(--white-60)'}
                cursor="pointer"
              >
                {cat.label}
              </Text>
            )
          })}
        </XStack>

        {/* ── High-fidelity case study cards ── */}
        <Grid columns={{ min: 320, max: 2 }} gap={20}>
          {filtered.map((item) => (
            <Spotlight key={item.company} item={item} />
          ))}
        </Grid>
      </Section>

      {/* ── Architecture Pillars ── */}
      <Section title="Why industry leaders build on Hanzo">
        <Grid columns={{ min: 280, max: 3 }} gap={16}>
          {PILLARS.map((pillar) => {
            const Icon = pillar.icon
            return (
              <YStack key={pillar.title} gap={12} py={24} px={20} bg="var(--neutral-950)" borderWidth={1} borderColor="var(--white-14)" rounded={12}>
                <XStack width={36} height={36} rounded={8} items="center" justify="center" bg="var(--white-06)" borderWidth={1} borderColor="var(--white-15)">
                  <Icon size={18} color="var(--pure-white)" />
                </XStack>
                <Text render="h4" display="block" m={0} fontSize="$4" lineHeight={LINE} fontWeight="600" color="var(--pure-white)">
                  {pillar.title}
                </Text>
                <Text render="p" display="block" m={0} fontSize="$2" lineHeight="1.2594rem" color="var(--white-60)">
                  {pillar.description}
                </Text>
              </YStack>
            )
          })}
        </Grid>
      </Section>

      {/* ── What Hanzo shipped, and the open source behind it ── */}
      <Proof />

      {/* ── Backed by ── */}
      <Section title="Backed by builders.">
        <YStack>
          <Kicker>Backed by</Kicker>
          <PartnerLogoRow logos={backerLogos} invert columnGap={36} rowGap={20} />
        </YStack>
      </Section>

      {/* ── Bottom Call to Action ── */}
      <Section title="Build on the same foundation">
        <Prose>
          <p>
            The infrastructure powering these deployments is open, modular, and developer-first.
            Explore the <Link href="https://docs.hanzo.ai">developer documentation</Link>, inspect our{' '}
            <Link href="/benchmarks">verified performance benchmarks</Link>, or speak directly with an
            enterprise solutions architect about your workload.
          </p>
        </Prose>
        <XStack mt={24} flexWrap="wrap" gap={14}>
          <Cta href="/contact" icon={ArrowUpRight}>
            Talk to us
          </Cta>
          <Text
            render={<Link href="/cloud" />}
            display="inline-flex"
            items="center"
            gap={8}
            py={10}
            px={20}
            rounded={8}
            bg="var(--white-05)"
            borderWidth={1}
            borderColor="var(--white-15)"
            fontSize="$3"
            lineHeight={LINE}
            fontWeight="500"
            color="var(--pure-white)"
            textDecorationLine="none"
          >
            Explore platform →
          </Text>
        </XStack>
      </Section>
    </Page>
  )
}