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 { Github, Linkedin, Facebook, Instagram } from '@/components/brand'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { Display, Lede, Leaf, Lift, More, Title } from '@hanzo/ui/marketing'
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: Video, label: 'YouTube', href: 'https://youtube.com/@HanzoAI' },
  { 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: 'Developer Dispatch', body: 'Frontier AI model releases (Enso, Zen 6), tutorials, and engineering announcements.', label: 'Subscribe to newsletter', href: '/newsletter' },
  { icon: LifeBuoy, title: 'Support', body: 'Help with your account, billing or the product: the Help Center, the docs and live status.', label: 'Get support', href: '/support' },
  { icon: Newspaper, title: 'Press & General', body: 'Stories, interviews, partnerships and general inquiries.', label: '[email protected]', href: 'mailto:[email protected]' },
]

export default function ContactPage() {
  return (
    <YStack render="section" aria-label="Contact" position="relative" overflow="hidden" pt={112} pb={96} px="$4" $md={{ px: '$6' }} $lg={{ pt: 136, px: '$8' }}>
      <View
        aria-hidden
        position="absolute"
        t={0}
        l={0}
        r={0}
        height={560}
        pointerEvents="none"
        backgroundImage="radial-gradient(ellipse 60% 100% at 50% 0%, var(--white-08), transparent 70%)"
      />
      <YStack position="relative" width="100%" maxW={1152} mx="auto" gap={48}>
        <YStack items="center" gap={20} maxW={720} mx="auto" $platform-web={{ textAlign: 'center' }}>
          <Display>How can we help?</Display>
          <Lede>Sales, support, press or anything else: reach the right people here.</Lede>
        </YStack>

        {/* 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)">
              Sales
            </Text>
            <Title>Bring Hanzo to your company.</Title>
            <Text render="p" fontSize="$3" lineHeight="1.5rem" color="var(--muted-foreground)">
              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}>
                See Enterprise
                <ArrowRight width={14} height={14} aria-hidden />
              </More>
              <More href={INTRO} target="_blank" rel="noopener noreferrer" minH={44}>
                <Calendar width={14} height={14} aria-hidden />
                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">
                {title}
              </Text>
              <Text render="p" fontSize="$3" lineHeight="1.5rem" color="var(--muted-foreground)" grow={1}>
                {body}
              </Text>
              <More href={href} self="flex-start" minH={44}>
                {label}
                <ArrowRight width={14} height={14} aria-hidden />
              </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">
                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">
              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>
    </YStack>
  )
}