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

'use client'

import { ArrowRight } from 'lucide-react'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { Action, Chip, Title } from '@hanzo/ui/marketing'
import { useI18n } from '@hanzo/i18n/react'
import { useIam } from '@hanzo/iam/react'
import { scope } from '@hanzo/app/lib/session'
import { useHydrated } from '@hanzo/app/lib/hydrated'
import { Box } from '@/components/ui'
import { Card, Quiet } from '@/components/beta/card'
import { Rank, Rules } from '@/components/beta/rank'
import { Share } from '@/components/beta/share'
import { useStanding } from '@/components/beta/standing'
import { BOOKING } from '@/components/home/nav-data'

const STEPS = [
  { head: 'Get your link', body: 'One per account, made when you sign in. You can rename it.' },
  { head: 'Share it', body: 'In a post, a message or an email. Every way out carries your link.' },
  { head: 'Climb the board', body: 'A point when an account signs up from it, twenty when that account pays.' },
] as const

/**
 * /referral — the beta's own link and board, on a page of their own: the same
 * link, the same score and the same ranked waitlist the member sees at /beta,
 * read from the same place (`useStanding`). Nothing is said here that the cloud
 * does not keep.
 */
export default function Referral() {
  const { t } = useI18n()
  const hydrated = useHydrated()
  const { user, isAuthenticated } = useIam()
  const signed = hydrated && Boolean(isAuthenticated && scope().Authorization)
  const s = useStanding(signed)
  const email = String(user?.email || '')
  const handle = s.code ? `@${s.code}` : email ? `@${email.split('@')[0]}` : t('you')

  return (
    <Box minH="100vh" pt={72} pb={96} px="var(--page-gutter)">
      <YStack data-motion="rise" gap={16} width="100%" maxW={960} mx="auto" data-slot="referral">
        <Card gap={20}>
          <XStack items="flex-start" justify="space-between" flexWrap="wrap" gap={16}>
            <YStack gap={4} flex={1} minW={0} flexBasis={280}>
              <Title render="h1">{t('Invite builders. Climb the board.')}</Title>
              <Text fontSize="$3" color="var(--muted-foreground)">
                {t('Every account that signs up from your link adds a point. One that pays adds twenty.')}
              </Text>
            </YStack>
            {signed ? (
              <XStack gap={8} flexWrap="wrap">
                <Chip px={14} py={8}>
                  {s.total} {t('pts')}
                </Chip>
                <Chip px={14} py={8}>
                  {s.place > 0 ? `#${s.place}` : '—'}
                  {s.of > 0 ? ` / ${s.of.toLocaleString()}` : ''}
                </Chip>
                <Chip px={14} py={8}>
                  {t('{n} referred', { n: s.referred })}
                </Chip>
              </XStack>
            ) : null}
          </XStack>
          {hydrated && !signed ? (
            <XStack gap={10} flexWrap="wrap">
              <Action href={`/signup?next=${encodeURIComponent('/referral')}`} fill>
                {t('Create account')}
                <ArrowRight size={16} aria-hidden data-i18n-mirror />
              </Action>
              <Action href={`/login?next=${encodeURIComponent('/referral')}`}>{t('Sign in')}</Action>
            </XStack>
          ) : null}
        </Card>

        {hydrated && !signed ? (
          <>
            <Card gap={16} data-slot="referral-how">
              <Title quiet>{t('How it works')}</Title>
              <View display="grid" gap={12} gridTemplateColumns="repeat(1, minmax(0, 1fr))" $md={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}>
                {STEPS.map((x, i) => (
                  <YStack key={x.head} gap={4}>
                    <Text fontFamily="$mono" fontSize="$2" color="var(--muted-foreground)">
                      {`0${i + 1}`}
                    </Text>
                    <Text fontSize="$4" fontWeight="600" color="var(--foreground)">
                      {t(x.head)}
                    </Text>
                    <Text fontSize="$3" color="var(--muted-foreground)">
                      {t(x.body)}
                    </Text>
                  </YStack>
                ))}
              </View>
            </Card>
            <Card gap={16} data-slot="referral-scores">
              <Title quiet>{t('What scores')}</Title>
              <Rules />
            </Card>
          </>
        ) : null}
        {signed && s.link ? <Share link={s.link} code={s.code} program="beta" rename={s.rename} asked={s.asked} onward={false} /> : null}
        {signed ? <Rank s={s} handle={handle} /> : null}

        <XStack gap={20} flexWrap="wrap">
          <Quiet href="/beta">{t('The beta')}</Quiet>
          <Quiet href={BOOKING} target="_blank" rel="noopener noreferrer">
            {t('Book a call')}
          </Quiet>
        </XStack>
      </YStack>
    </Box>
  )
}