hanzo.ai/components/home/ForgeBetaBanner.tsx

'use client'

import React from 'react'
import Link from 'next/link'
import { ArrowRight, GitBranch, GitPullRequest, ShieldCheck, Zap, Layers, RefreshCw } from 'lucide-react'
import { Text, View, XStack, YStack } from '@hanzo/ui'
import { Action, More } from '@hanzo/ui/marketing'
import { useI18n } from '@hanzo/i18n/react'

export default function ForgeBetaBanner() {
  const { t } = useI18n()

  const features = [
    {
      icon: GitBranch,
      title: 'Host or Mirror Natively',
      desc: 'Full sovereign Git forge. Host your canonical codebase or mirror any external GitHub/GitLab repo automatically.',
    },
    {
      icon: Zap,
      title: 'Fast-Forward Hanzo CD',
      desc: 'Native continuous delivery engine deploying production clusters in <48s with zero sync drift loops.',
    },
    {
      icon: Layers,
      title: 'Unified Work Tracker',
      desc: 'Canonical milestones, Kanban boards, and issue tracking with deep Jira ADF and GitHub sync.',
    },
    {
      icon: ShieldCheck,
      title: 'Native Agent Context',
      desc: 'First-class API integration into Hanzo Dev and Chat for autonomous multi-file repairs and PR generation.',
    },
  ]

  return (
    <YStack
      width="100%"
      my={32}
      p={24}
      $md={{ p: 32 }}
      rounded={16}
      borderWidth={1}
      borderColor="var(--border)"
      bg="$panel"
      $platform-web={{
        borderRadius: '16px',
        backgroundImage: 'linear-gradient(170deg, rgba(20,24,28,0.9), rgba(10,12,14,0.96))',
        boxShadow: '0 24px 48px -18px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.08)',
      }}
      gap={24}
    >
      <XStack justify="space-between" items="flex-start" flexWrap="wrap" gap={16}>
        <YStack gap={6} maxW={680}>
          <XStack items="center" gap={8}>
            <View
              px={8}
              py={3}
              rounded={4}
              bg="rgba(57, 189, 125, 0.15)"
              borderWidth={1}
              borderColor="rgba(57, 189, 125, 0.35)"
              $platform-web={{ borderRadius: '4px' }}
            >
              <Text fontFamily="$mono" fontSize={10} fontWeight="700" color="#39bd7d" letterSpacing={0.8}>
                PUBLIC BETA · FORGE.HANZO.AI
              </Text>
            </View>
            <Text fontFamily="$mono" fontSize={11} color="var(--muted-foreground)">
              Sovereign AI-Native Source Code
            </Text>
          </XStack>
          <Text fontSize="$7" lineHeight="$7" fontWeight="600" color="var(--foreground)" letterSpacing={-0.4}>
            {t('Announcing Hanzo Forge')}
          </Text>
          <Text fontSize="$3" lineHeight="$3" color="var(--muted-foreground)">
            {t(
              'Continuous integration, delivery, and work tracking unified in one sovereign developer platform. Replace legacy SaaS, connect your GitHub mirrors, and feed your codebase directly into autonomous coding agents.',
            )}
          </Text>
        </YStack>

        <XStack items="center" gap={12} flexWrap="wrap">
          <Action href="https://forge.hanzo.ai" fill target="_blank" rel="noopener noreferrer">
            {t('Explore Hanzo Forge')}
            <ArrowRight width={15} height={15} />
          </Action>
          <More href="https://forge.hanzo.ai/repo/migrate" target="_blank" rel="noopener noreferrer">
            <XStack items="center" gap={6}>
              <RefreshCw width={13} height={13} />
              <Text fontSize="$2" fontWeight="500" color="var(--foreground)">
                {t('Connect & Mirror Repos')}
              </Text>
            </XStack>
          </More>
        </XStack>
      </XStack>

      <View
        display="grid"
        width="100%"
        gap={12}
        gridTemplateColumns="minmax(0, 1fr)"
        $sm={{ gridTemplateColumns: 'repeat(2, minmax(0, 1fr))' }}
        $lg={{ gridTemplateColumns: 'repeat(4, minmax(0, 1fr))', gap: 16 }}
      >
        {features.map((f) => {
          const Icon = f.icon
          return (
            <YStack
              key={f.title}
              p={18}
              rounded={12}
              borderWidth={1}
              borderColor="var(--border)"
              bg="rgba(255, 255, 255, 0.02)"
              gap={8}
              $platform-web={{ borderRadius: '12px' }}
            >
              <XStack items="center" gap={8}>
                <Icon width={16} height={16} color="#39bd7d" />
                <Text fontSize="$3" fontWeight="600" color="var(--foreground)">
                  {t(f.title)}
                </Text>
              </XStack>
              <Text fontSize={12} lineHeight={16} color="var(--muted-foreground)">
                {t(f.desc)}
              </Text>
            </YStack>
          )
        })}
      </View>
    </YStack>
  )
}