hanzo.ai/components/payments/CheckoutExperience.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { Globe, Smartphone, Paintbrush } from "lucide-react";
import { Band, Disc, Head, INK, Words } from '@/components/marketing/band'
import { Body, Bullet, Chip, Heading, Tile } from './kit'
import { Box, XStack, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Title } from '@hanzo/ui/marketing'

const METHODS = ['Visa', 'Mastercard', 'Amex', 'PayPal', 'Apple Pay', 'Google Pay', 'iDEAL', 'Bancontact', 'SOFORT', '+190 more']

const CARDS = [
  {
    icon: Globe,
    title: 'Global Reach',
    body: 'Regional processors are connectors like any other, so entering a market is a routing rule rather than a new integration.',
    delay: 0,
  },
  {
    icon: Smartphone,
    title: 'Mobile Optimized',
    body: 'Responsive checkout flows designed for high conversion on all devices and screen sizes.',
    delay: 0.1,
  },
  {
    icon: Paintbrush,
    title: 'Fully Customizable',
    body: 'Customize every aspect of the checkout experience to match your brand identity.',
    delay: 0.2,
  },
]

/** A blank field in the checkout mock — a shape, not a control. */
const FIELD = { height: 40, rounded: 4, bg: 'var(--neutral-800)' } as const

const CheckoutExperience = () => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground={INK}>
      <Head
        title="Customizable Checkout Experiences"
        lede="Create beautiful, high-converting checkout flows that drive revenue growth and customer satisfaction."
      />

      <Grid columns={{ min: 340, max: 2 }} gap={32} mb={64}>
        <XStack render={<motion.div initial={{ opacity: 0, x: -20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}>
          <Tile flex={1} p={0} overflow="hidden">
            <Box p="$5">
              <Title render="h3" quiet mb={16}>Global Payment Methods</Title>
              <YStack render="ul" gap="$3" mb="$5">
                <Bullet>Cards, wallets, bank debits, buy-now-pay-later and crypto</Bullet>
                <Bullet>Local methods handled by whichever processor supports them best</Bullet>
                <Bullet>The method someone expects to see, in the country they are in</Bullet>
              </YStack>

              <XStack flexWrap="wrap" gap="$2" mt="$4">
                {METHODS.map((method) => (
                  <Chip key={method}>{method}</Chip>
                ))}
              </XStack>
            </Box>
          </Tile>
        </XStack>

        <XStack render={<motion.div initial={{ opacity: 0, x: 20 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}>
          <Tile flex={1} p={0} overflow="hidden" display="flex" flexDirection="column" justify="space-between">
            <Box p="$5">
              <Title render="h3" quiet mb={16}>Checkout Interface</Title>
              <Body mb={24}>
                Fully customizable checkout UI that matches your brand and maximizes conversions.
              </Body>

              <Box
                mb="$4"
                rounded="var(--radius-lg)"
                borderWidth={1}
                borderColor="var(--neutral-700)"
                bg="var(--neutral-900)"
                p="$4"
              >
                <Box height={32} width={128} mb="$3" rounded={4} bg="var(--neutral-800)" />
                <Grid columns={2} gap={12} mb={12}>
                  <Box {...FIELD} />
                  <Box {...FIELD} />
                </Grid>
                <Box {...FIELD} mb="$3" />
                <Box height={40} rounded={4} bg="var(--primary)" />
              </Box>

              <Words render="div" mt="$2" fontSize="$2" lineHeight="var(--leading-sm)" color="var(--muted-foreground)" align="center">
                Customizable checkout flow
              </Words>
            </Box>
          </Tile>
        </XStack>
      </Grid>

      <Grid columns={{ min: 300, max: 3 }} gap={24}>
        {CARDS.map((c) => (
          <XStack
            key={c.title}
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: c.delay }} />}
          >
            <Tile flex={1}>
              <Disc>
                <c.icon size={24} />
              </Disc>
              <Heading>{c.title}</Heading>
              <Body>{c.body}</Body>
            </Tile>
          </XStack>
        ))}
      </Grid>
    </Band>
  );
};

export default CheckoutExperience;