hanzo.ai/components/payments/UseCases.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { ShoppingCart, Repeat, LayoutGrid, CreditCard } from "lucide-react";
import { Band, Disc, Head, INK, Words } from '@/components/marketing/band'
import { Body, Heading, Tile } from './kit'
import { Box, View, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { DOCS } from '@/components/home/nav-data'
import { Action, Title } from '@hanzo/ui/marketing'

const useCases = [
  {
    icon: ShoppingCart,
    title: "Selling in several countries",
    points: ['Local methods', 'Currency routing', 'One checkout', 'Rules per country'],
    description: "You sell in more than one country and each one wants a different payment method. Add the connector, write the rule, leave the checkout alone."
  },
  {
    icon: Repeat,
    title: "Recovering declines",
    points: ['Retry on a second processor', 'Decline reasons', 'Renewal recovery', 'Rules per code'],
    description: "Renewals fail for reasons that have nothing to do with the customer. Retrying through a second processor turns some of those failures back into payments."
  },
  {
    icon: LayoutGrid,
    title: "Leaving a processor",
    points: ['Move a percentage first', 'No checkout rewrite', 'The same API', 'Roll back at once'],
    description: "The reason nobody switches is the rewrite. When the integration is here, moving is a routing change, and you can move a percentage first."
  },
  {
    icon: CreditCard,
    title: "Comparing two of them",
    points: ['Approval rates side by side', 'Split by percentage', 'One traffic, two routes', 'Cost per authorization'],
    description: "Run both and read the approval rates side by side. The argument about which processor is better becomes a measurement."
  }
];

/** The closing card's wash — neutral falling to a lit edge. */
const PANEL = 'linear-gradient(to right, color-mix(in oklab, var(--neutral-900) 50%, transparent), var(--white-10))'

const UseCases = () => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground={INK}>
      <Head
        title="When a switch earns its place"
        lede="One processor and one country does not need one. These four do."
      />

      <Grid columns={{ min: 340, max: 2 }} gap={32}>
        {useCases.map((useCase, index) => (
          <XStack
            key={useCase.title}
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.1 }} />}
          >
            <Tile flex={1}>
              <Disc>
                <useCase.icon size={24} />
              </Disc>
              <Heading>{useCase.title}</Heading>
              <Body mb={16}>{useCase.description}</Body>

              <Box mt="$5" pt="$5" borderTopWidth={1} borderColor="var(--neutral-800)">
                <Heading render="h4" fontSize="$4" lineHeight="var(--leading-lg)" fontWeight="500">
                  Key Features
                </Heading>
                <Grid columns={2} gap={12}>
                  {useCase.points.map((point) => (
                    <XStack key={point} items="center" gap="$2">
                      <Box width={8} height={8} rounded="var(--radius-full)" bg="var(--primary)" />
                      <Words fontSize="$2" lineHeight="var(--leading-sm)" color="var(--muted-foreground)">
                        {point}
                      </Words>
                    </XStack>
                  ))}
                </Grid>
              </Box>
            </Tile>
          </XStack>
        ))}
      </Grid>

      <View
        render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}
        display="block"
        mt={64}
      >
        <Box
          p="$6"
          rounded="var(--radius-lg)"
          borderWidth={1}
          borderColor="var(--neutral-800)"
          background={PANEL}
          $platform-web={{ textAlign: 'center' }}
        >
          <Title render="h3" quiet mb={16}>Start Quickly, Scale Instantly</Title>
          <Body mx="auto" mb={24} maxW={672} color="color-mix(in oklab, var(--foreground) 80%, transparent)">
            No-code solutions available, with setup completed in minutes. Scalable from startup to enterprise-level with consistent reliability.
          </Body>
          <XStack flexWrap="wrap" justify="center" gap="$4">
            <Action href="/login" fill>Try Hanzo</Action>
            <Action href={DOCS}>View Documentation</Action>
          </XStack>
        </Box>
      </View>
    </Band>
  );
};

export default UseCases;