hanzo.ai/components/payments/CallToAction.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { FileText, BookOpen, MessageSquare, ExternalLink } from "lucide-react";
import { Band, Disc, FADE_UP, Head } from '@/components/marketing/band'
import { Body, Heading, Tile } from './kit'
import { Box, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { DOCS } from '@/components/home/nav-data'
import { Action, Lede, Title } from '@hanzo/ui/marketing'

const DOORS = [
  {
    icon: FileText,
    title: 'API Reference',
    body: 'Detailed documentation on all Hanzo Payments APIs and integration options.',
    action: 'View API Docs',
    href: `${DOCS}/docs/openapi`,
    delay: 0,
  },
  {
    icon: BookOpen,
    title: 'Hanzo App Marketplace',
    body: 'Explore hundreds of pre-built integrations and apps for Hanzo Payments.',
    action: 'Browse Apps',
    href: '/integrations',
    delay: 0.1,
  },
  {
    icon: MessageSquare,
    title: 'Checkout Integration',
    body: 'Step-by-step guide to integrating Hanzo Payments checkout into your website or app.',
    action: 'Integration Guide',
    href: `${DOCS}/docs/quickstart`,
    delay: 0.2,
  },
  {
    icon: BookOpen,
    title: 'Case Studies',
    body: 'Read success stories from businesses using Hanzo Payments around the world.',
    action: 'View Case Studies',
    href: '/customers',
    delay: 0.3,
  },
]

/** The closing card's wash, and the fill its primary button wears. */
const PANEL = 'linear-gradient(to right, var(--white-20), var(--white-10))'
const FILL = { backgroundImage: "linear-gradient(to right, var(--pure-white), var(--white-10))", bg: "transparent", color: "var(--pure-black)", borderWidth: 0 } as const

const CallToAction = () => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground={FADE_UP}>
      <Head
        title="Explore Further"
        lede="Discover how Hanzo Payments can transform your business with our comprehensive resources."
      />

      <Grid columns={{ min: 260, max: 4 }} gap={24} mb={64}>
        {DOORS.map((d) => (
          <XStack
            key={d.title}
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: d.delay }} />}
          >
            <Tile flex={1} display="flex" flexDirection="column">
              <Disc>
                <d.icon size={24} />
              </Disc>
              <Heading>{d.title}</Heading>
              <Body mb={24} grow={1}>{d.body}</Body>
              <Action href={d.href} width="100%" justify="center">
                <ExternalLink size={16} />
                <span>{d.action}</span>
              </Action>
            </Tile>
          </XStack>
        ))}
      </Grid>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true }}
        transition={{ duration: 0.5 }}
      >
        <Box
          p="$6"
          rounded="var(--radius-lg)"
          borderWidth={1}
          borderColor="$edge"
          background={PANEL}
          $platform-web={{ textAlign: 'center' }}
        >
          <Title quiet mb={16}>Put one payment through it</Title>
          <Lede mx="auto" mb={32} maxW={768} mt="$3.5">
            Point it at the processor you already use, send a live payment, and add the second
            one when you want to see the difference. Nothing has to move on day one.
          </Lede>
          <XStack flexWrap="wrap" justify="center" gap="$4">
            <Action href="/login" {...FILL}>Try Hanzo</Action>
            <Action href="/contact-sales">Contact Sales</Action>
          </XStack>
        </Box>
      </motion.div>
    </Band>
  );
};

export default CallToAction;