hanzo.ai/components/referrals/ReferralHero.tsx

'use client'

import React from 'react'
import { ArrowRight, Zap, Gift, Trophy } from 'lucide-react'
import { Box, Text, View, XStack, YStack } from '@hanzo/ui'
import { Action } from '@hanzo/ui/marketing'
import { useI18n } from '@hanzo/i18n/react'

interface ReferralHeroProps {
  isAuthenticated?: boolean
  referralLink?: string
  onGetLinkClick?: () => void
}

export function ReferralHero({
  isAuthenticated = false,
  referralLink: _referralLink,
  onGetLinkClick,
}: ReferralHeroProps) {
  const { t } = useI18n()

  return (
    <YStack gap={40} items="center" style={{ textAlign: 'center' }} py={24} $sm={{ py: 36 }}>
      {/* Eyebrow Breadcrumb / Tag */}
      <XStack
        items="center"
        gap={10}
        px={14}
        py={6}
        rounded={999}
        borderWidth={1}
        borderColor="var(--border)"
        bg="var(--secondary)"
      >
        <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--muted-foreground)">
          HANZO AI
        </Text>
        <Text fontFamily="$mono" fontSize="$1" color="var(--border)">
          /
        </Text>
        <Text fontFamily="$mono" fontSize="$1" fontWeight="600" color="var(--foreground)">
          CREATOR PROGRAM
        </Text>
        <Box width={1} height={12} bg="var(--border)" mx={2} />
        <XStack items="center" gap={6}>
          <Box width={6} height={6} rounded={999} bg="#22c55e" />
          <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="#22c55e">
            OPEN TO CREATORS
          </Text>
        </XStack>
      </XStack>

      {/* Main Headline & Supporting Sentence */}
      <YStack gap={16} items="center" maxW={840}>
        <Text
          render="h1"
          fontWeight="600"
          color="var(--foreground)"
          style={{ textAlign: 'center', letterSpacing: '-0.03em', lineHeight: '1.15em' }}
          $platform-web={{ fontSize: 'clamp(36px, 5.2vw, 64px)' }}
        >
          {t('Build with AI. Create content. Get rewarded.')}
        </Text>
        <Text
          fontSize="$4"
          color="var(--muted-foreground)"
          maxW={640}
          style={{ textAlign: 'center', lineHeight: '1.6em' }}
          $platform-web={{ fontSize: 'clamp(16px, 1.8vw, 20px)' }}
        >
          {t('Share Hanzo with the developer community. Earn referral rewards, free access, and creator bonuses for content that gets people building.')}
        </Text>
      </YStack>

      {/* 3 Main Benefits immediately visible */}
      <View
        display="grid"
        gap={16}
        width="100%"
        maxW={960}
        gridTemplateColumns="1fr"
        $sm={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
      >
        <YStack
          p={22}
          rounded={14}
          borderWidth={1}
          borderColor="var(--border)"
          bg="var(--background)"
          gap={8}
          items="flex-start"
          style={{ textAlign: 'left' }}
        >
          <XStack items="center" justify="center" width={32} height={32} rounded={8} bg="#ffd70018">
            <Zap size={18} color="#ffd700" aria-hidden />
          </XStack>
          <Text fontSize="$3" fontWeight="600" color="var(--foreground)">
            {t('10% lifetime token kickback')}
          </Text>
          <Text fontSize="$2" color="var(--muted-foreground)" style={{ lineHeight: '1.45em' }}>
            {t('Earn from eligible usage by your referrals.')}
          </Text>
        </YStack>

        <YStack
          p={22}
          rounded={14}
          borderWidth={1}
          borderColor="var(--border)"
          bg="var(--background)"
          gap={8}
          items="flex-start"
          style={{ textAlign: 'left' }}
        >
          <XStack items="center" justify="center" width={32} height={32} rounded={8} bg="#38bdf818">
            <Gift size={18} color="#38bdf8" aria-hidden />
          </XStack>
          <Text fontSize="$3" fontWeight="600" color="var(--foreground)">
            {t('Free Pro access')}
          </Text>
          <Text fontSize="$2" color="var(--muted-foreground)" style={{ lineHeight: '1.45em' }}>
            {t('Earn a free week for each qualifying paid upgrade.')}
          </Text>
        </YStack>

        <YStack
          p={22}
          rounded={14}
          borderWidth={1}
          borderColor="var(--border)"
          bg="var(--background)"
          gap={8}
          items="flex-start"
          style={{ textAlign: 'left' }}
        >
          <XStack items="center" justify="center" width={32} height={32} rounded={8} bg="#a855f718">
            <Trophy size={18} color="#a855f7" aria-hidden />
          </XStack>
          <Text fontSize="$3" fontWeight="600" color="var(--foreground)">
            {t('Up to $500 in creator rewards')}
          </Text>
          <Text fontSize="$2" color="var(--muted-foreground)" style={{ lineHeight: '1.45em' }}>
            {t('Unlock higher rewards as your content or referrals grow.')}
          </Text>
        </YStack>
      </View>

      {/* Single CTA & Sign In Subtext */}
      <YStack gap={12} items="center">
        {isAuthenticated ? (
          <Action
            render="button"
            type="button"
            fill
            onClick={onGetLinkClick}
          >
            {t('View Your Creator Link & Stats')}
            <ArrowRight size={16} aria-hidden />
          </Action>
        ) : (
          <>
            <Action
              render="a"
              href="/signup?next=/referral"
              fill
            >
              {t('Get Your Referral Link')}
              <ArrowRight size={16} aria-hidden />
            </Action>

            <XStack items="center" gap={6} pt={4}>
              <Text fontSize="$2" color="var(--muted-foreground)">
                {t('Already a member?')}
              </Text>
              <a href="/login?next=/referral" style={{ textDecoration: 'none' }}>
                <Text
                  fontSize="$2"
                  fontWeight="600"
                  color="var(--foreground)"
                  style={{ textDecoration: 'underline' }}
                >
                  {t('Sign in to access your creator dashboard.')}
                </Text>
              </a>
            </XStack>
          </>
        )}
      </YStack>
    </YStack>
  )
}