hanzo.ai/components/referrals/HowItWorks.tsx

'use client'

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

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

  const steps = [
    {
      num: '01',
      title: t('Get your link'),
      body: t('Sign in and copy your unique referral URL.'),
    },
    {
      num: '02',
      title: t('Make something worth sharing'),
      body: t('Publish tutorials, memes, benchmarks, or coding demos.'),
    },
    {
      num: '03',
      title: t('Earn as you grow'),
      body: t('Get eligible referral rewards and submit qualifying content for review.'),
    },
  ]

  return (
    <YStack gap={32} width="100%" py={16}>
      {/* Header */}
      <YStack gap={8} items="center" style={{ textAlign: 'center' }}>
        <Text
          render="h2"
          fontWeight="600"
          color="var(--foreground)"
          style={{ textAlign: 'center', letterSpacing: '-0.02em' }}
          $platform-web={{ fontSize: 'clamp(28px, 3.2vw, 42px)' }}
        >
          {t('How it works')}
        </Text>
      </YStack>

      {/* 3 Step Cards */}
      <View
        display="grid"
        gap={20}
        gridTemplateColumns="1fr"
        $md={{ gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }}
      >
        {steps.map((s) => (
          <YStack
            key={s.num}
            p={28}
            rounded={16}
            borderWidth={1}
            borderColor="var(--border)"
            bg="var(--background)"
            gap={14}
            justify="flex-start"
          >
            <Text
              fontFamily="$mono"
              fontSize="$5"
              fontWeight="700"
              color="var(--muted-foreground)"
              style={{ letterSpacing: '-0.02em' }}
            >
              {s.num}
            </Text>
            <Text render="h3" fontSize="$4" fontWeight="600" color="var(--foreground)">
              {s.title}
            </Text>
            <Text fontSize="$2" color="var(--muted-foreground)" style={{ lineHeight: '1.55em' }}>
              {s.body}
            </Text>
          </YStack>
        ))}
      </View>
    </YStack>
  )
}

export default HowItWorks