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

'use client'

/**
 * /contact — sends each question to the team that answers it.
 *
 * Sales leads, as the one loud card: "Talk to sales" opens /contact-sales and
 * "See Enterprise" opens /enterprise. Support is /support (the Help Center,
 * the docs and status); press and everything else are the mailboxes those
 * teams read. Then the office, and where else Hanzo is.
 *
 * The cards are the funnel's (components/sales/kit). The community row is one
 * ink: each network's own mark, drawn in the page's colour.
 */

import type { LucideIcon } from 'lucide-react'
import { ArrowRight, Calendar, Globe, LifeBuoy, Mail, MapPin, MessageSquare, Newspaper, Video } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { Github, Linkedin, Facebook, Instagram } from '@/components/brand'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { Leaf, Lift, More, Title } from '@hanzo/ui/marketing'
import { Fold } from '@/components/marketing/fold'
import { INTRO } from '@/components/home/nav-data'
import { CARD, Mark, Talk, Tile } from '@/components/sales/kit'

/** X's mark, which no icon set here carries. */
function X({ width, height }: { width?: number; height?: number }) {
  return (
    <svg width={width} height={height} fill="currentColor" viewBox="0 0 24 24" aria-hidden>
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
    </svg>
  )
}

const COMMUNITY: { icon: (p: { width?: number; height?: number }) => React.ReactNode; label: string; href: string }[] = [
  { icon: MessageSquare, label: 'Discord', href: 'https://discord.gg/XthHQQj' },
  { icon: Github, label: 'GitHub', href: 'https://github.com/hanzoai' },
  { icon: X, label: 'X', href: 'https://x.com/hanzoai' },
  { icon: Linkedin, label: 'LinkedIn', href: 'https://linkedin.com/company/hanzo-ai' },
  { icon: Facebook, label: 'Facebook', href: 'https://facebook.com/hanzoinc' },
  { icon: Globe, label: 'Bluesky', href: 'https://bsky.app/profile/hanzoai.bsky.social' },
  { icon: MessageSquare, label: 'Reddit', href: 'https://www.reddit.com/r/HanzoAI/' },
  { icon: Video, label: 'TikTok', href: 'https://www.tiktok.com/@hanzoinc' },
  { icon: Instagram, label: 'Instagram', href: 'https://www.instagram.com/hanzoinc' },
]

/** The teams past sales, each with where it answers. */
const TEAMS: { icon: LucideIcon; title: string; body: string; label: string; href: string }[] = [
  { icon: Mail, title: phrase('Developer Dispatch'), body: phrase('Frontier AI model releases (Enso, Zen 6), tutorials, and engineering announcements.'), label: phrase('Subscribe to newsletter'), href: '/newsletter' },
  { icon: LifeBuoy, title: phrase('Support'), body: phrase('Help with your account, billing or the product: the Help Center, the docs and live status.'), label: phrase('Get support'), href: '/support' },
  { icon: Newspaper, title: phrase('Press & General'), body: phrase('Stories, interviews, partnerships and general inquiries.'), label: '[email protected]', href: 'mailto:[email protected]' },
]

export default function ContactPage() {
  const { t } = useI18n()
  return (
    <Fold title="How can we help?" lede="Sales, support, press or anything else: reach the right people here.">
      <YStack width="100%" gap={48}>
        {/* Sales: the one loud card. */}
        <YStack
          {...CARD}
          data-slot="contact-sales"
          p={28}
          gap={24}
          $sm={{ p: 40 }}
          $lg={{ flexDirection: 'row', items: 'center', justify: 'space-between', gap: 48 }}
          boxShadow="var(--edge-highlight), var(--shadow-floating)"
        >
          <YStack gap={10} minW={0} maxW={560}>
            <Text render="p" fontSize="$2" color="var(--muted-foreground)">
              {t('Sales')}
            </Text>
            <Title>{t('Bring Hanzo to your company.')}</Title>
            <Text render="p" fontSize="$3" lineHeight="1.5rem" color="var(--muted-foreground)">
              {t('Enterprise plans, your own infrastructure, dedicated compute and engineers on call around the clock.')}
            </Text>
          </YStack>
          <YStack gap={12} items="stretch" shrink={0} $sm={{ items: 'flex-start' }} $lg={{ items: 'flex-end' }}>
            <Talk />
            <XStack flexWrap="wrap" columnGap={20} rowGap={4} justify="center" $sm={{ justify: 'flex-start' }}>
              <More href="/enterprise" minH={44}>
                {t('See Enterprise')}
                <ArrowRight width={14} height={14} aria-hidden data-i18n-mirror />
              </More>
              <More href={INTRO} target="_blank" rel="noopener noreferrer" minH={44}>
                <Calendar width={14} height={14} aria-hidden />
                {t('Book a 30-minute call')}
              </More>
            </XStack>
          </YStack>
        </YStack>

        <View display="grid" gap={16} gridTemplateColumns="minmax(0, 1fr)" $md={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }} data-slot="contact-teams">
          {TEAMS.map(({ icon: Icon, title, body, label, href }) => (
            <Tile key={title}>
              <Mark>
                <Icon width={20} height={20} aria-hidden />
              </Mark>
              <Text render="h3" fontSize="$5" lineHeight="1.75rem" fontWeight="600" color="$ink">
                {t(title)}
              </Text>
              <Text render="p" fontSize="$3" lineHeight="1.5rem" color="var(--muted-foreground)" grow={1}>
                {t(body)}
              </Text>
              <More href={href} self="flex-start" minH={44}>
                {t(label)}
                <ArrowRight width={14} height={14} aria-hidden data-i18n-mirror />
              </More>
            </Tile>
          ))}
        </View>

        <View display="grid" gap={16} gridTemplateColumns="minmax(0, 1fr)" $md={{ gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 2fr)' }}>
          <Tile flexDirection="row" gap={16}>
            <Mark>
              <MapPin width={20} height={20} aria-hidden />
            </Mark>
            <YStack gap={4} minW={0}>
              <Text render="h3" fontSize="$5" lineHeight="1.75rem" fontWeight="600" color="$ink">
                {t('Visit')}
              </Text>
              <Text render="p" fontSize="$3" lineHeight="1.5rem" color="var(--muted-foreground)">
                995 Market Street
                <br />
                San Francisco, CA 94103
              </Text>
            </YStack>
          </Tile>
          <Tile>
            <Text render="h3" fontSize="$5" lineHeight="1.75rem" fontWeight="600" color="$ink">
              {t('Join the community')}
            </Text>
            <XStack render="ul" flexWrap="wrap" gap={8} m={0} p={0} mt={6} $platform-web={{ listStyle: 'none' }} data-slot="contact-community">
              {COMMUNITY.map(({ icon: Icon, label, href }) => (
                <li key={label}>
                  <Leaf render="a" href={href} target="_blank" rel="noopener noreferrer" display="flex" flexDirection="row" items="center" gap={8} px={14} minH={44} rounded="var(--radius-full)" borderColor="var(--border)" bg="var(--background)" color="var(--muted-foreground)">
                    <Lift display="inline-flex">
                      <Icon width={16} height={16} />
                    </Lift>
                    <Lift fontSize="$2" fontWeight="500">
                      {label}
                    </Lift>
                  </Leaf>
                </li>
              ))}
            </XStack>
          </Tile>
        </View>
      </YStack>
    </Fold>
  )
}