hanzo.ai/components/referrals/ReferralFaq.tsx

'use client'

import React from 'react'
import { Box, Disclosure, Text, View, YStack } from '@hanzo/ui'
import { useI18n } from '@hanzo/i18n/react'

export function ReferralFaq() {
  const { t } = useI18n()

  const faqItems = [
    {
      q: t('How do payouts work (Cash vs. Credits)?'),
      a: t(
        'Bronze ($25) and Silver ($100) tier rewards are issued as Hanzo API and compute credits directly to your developer account. For the Gold tier ($500), creators can choose between $500 in Hanzo compute credits or a direct cash/crypto payout (via USDC, bank wire, or ACH).',
      ),
    },
    {
      q: t('What are the consistent qualification thresholds?'),
      a: (
        <YStack gap={12} pt={4}>
          <Text fontSize="$2" color="var(--muted-foreground)">
            {t('You can qualify for each tier through either active developer signups OR verified public content engagement:')}
          </Text>
          <View
            display="grid"
            gap={8}
            gridTemplateColumns="repeat(4, minmax(0, 1fr))"
            p={12}
            rounded={8}
            bg="var(--secondary)"
            borderWidth={1}
            borderColor="var(--border)"
          >
            <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--foreground)">{t('Tier')}</Text>
            <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--foreground)">{t('Referrals')}</Text>
            <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--foreground)">{t('Social Engagement')}</Text>
            <Text fontFamily="$mono" fontSize="$1" fontWeight="700" color="var(--foreground)">{t('Reward')}</Text>

            <Text fontSize="$2" fontWeight="600" color="var(--foreground)">{t('Bronze')}</Text>
            <Text fontSize="$2" color="var(--muted-foreground)">{t('1–5 active')}</Text>
            <Text fontSize="$2" color="var(--muted-foreground)">{t('10+ likes / 100+ views')}</Text>
            <Text fontSize="$2" color="var(--foreground)">{t('$25 Credits + 1 Mo Pro')}</Text>

            <Text fontSize="$2" fontWeight="600" color="var(--foreground)">{t('Silver')}</Text>
            <Text fontSize="$2" color="var(--muted-foreground)">{t('6–25 active')}</Text>
            <Text fontSize="$2" color="var(--muted-foreground)">{t('100+ likes / 1,000+ views')}</Text>
            <Text fontSize="$2" color="var(--foreground)">{t('$100 Credits + 3 Mo Pro + 25% Rev Share')}</Text>

            <Text fontSize="$2" fontWeight="600" color="var(--foreground)">{t('Gold')}</Text>
            <Text fontSize="$2" color="var(--muted-foreground)">{t('26+ active')}</Text>
            <Text fontSize="$2" color="var(--muted-foreground)">{t('1,000+ likes / 10,000+ views')}</Text>
            <Text fontSize="$2" color="var(--foreground)">{t('$500 Reward + 1 Yr Enterprise + 40% Rev Share')}</Text>
          </View>
        </YStack>
      ),
    },
    {
      q: t('How is the 25% and 40% recurring revenue share calculated?'),
      a: t(
        'The 25% (Silver) and 40% (Gold) recurring affiliate revenue share is calculated against the net API and GPU compute spend of referred organizations. Commissions are audited and paid monthly, and are earned in addition to your 10% token kickback.',
      ),
    },
    {
      q: t('How do 10% lifetime token kickbacks work?'),
      a: t(
        'Whenever a developer who signed up through your link calls the Hanzo API, runs autonomous coding sessions in Hanzo Dev, or uses Zen reasoning models, 10% of all tokens they consume are automatically credited back to your balance for life. Credits are calculated continuously and do not expire.',
      ),
    },
    {
      q: t('How does the Free Pro access reward work?'),
      a: t(
        'For every referred developer who upgrades to any qualifying paid plan, you receive 1 full free week of Hanzo Pro. Free weeks stack additively without limit, meaning 4 upgraded referrals grant an entire free month.',
      ),
    },
    {
      q: t('What are the rules for research and benchmark submissions?'),
      a: t(
        'We value honest, reproducible technical evaluations. Posts claiming model benchmarks or performance metrics should provide clear methodology, reproducible code or harness setups, and unbiased comparisons. We do not approve predetermined claims or exaggerated hype without evidence.',
      ),
    },
  ]

  return (
    <YStack gap={24} width="100%" py={16} id="rewards-comparison">
      <YStack gap={8} items="center" style={{ textAlign: 'center' }}>
        <Text
          render="h3"
          fontWeight="600"
          color="var(--foreground)"
          style={{ textAlign: 'center', letterSpacing: '-0.02em' }}
          $platform-web={{ fontSize: 'clamp(24px, 2.6vw, 32px)' }}
        >
          {t('Frequently Asked Questions & Program Rules')}
        </Text>
        <Text fontSize="$3" color="var(--muted-foreground)" style={{ textAlign: 'center' }}>
          {t('Clear, transparent terms for referrals, payouts, and creator rewards.')}
        </Text>
      </YStack>

      <YStack width="100%" maxW={800} mx="auto" gap={12}>
        {faqItems.map((item, idx) => (
          <Disclosure key={idx} summary={item.q}>
            <Box py={8}>
              {typeof item.a === 'string' ? (
                <Text fontSize="$3" lineHeight={22} color="var(--muted-foreground)">
                  {item.a}
                </Text>
              ) : (
                item.a
              )}
            </Box>
          </Disclosure>
        ))}
      </YStack>
    </YStack>
  )
}

export default ReferralFaq