hanzo.ai/components/payments/Integrations.tsx

'use client'

import React, { type ReactNode } from "react";
import { motion } from "@/components/motion";
import { Plug, Code, FileText } from "lucide-react";
import { Band, Disc, FADE, Head, Words } 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, More, Title } from '@hanzo/ui/marketing'

const PARTNERS = ['Salesforce', 'Adobe', 'SAP', 'QuickBooks', 'Shopify', 'WooCommerce', 'Magento', 'WordPress', 'Squarespace', 'NetSuite', 'Xero', 'HubSpot']

const CARDS = [
  {
    icon: Code,
    title: 'Easy to Implement',
    body: 'Quick integration with just a few lines of code, with SDKs for all major programming languages.',
    delay: 0,
  },
  {
    icon: FileText,
    title: 'Comprehensive Documentation',
    body: 'Detailed guides, API reference, and code examples to help you integrate Hanzo Payments quickly.',
    delay: 0.1,
  },
]

/** `sample` is the payment call, highlighted by the server page. */
const Integrations = ({ sample }: { sample: ReactNode }) => {
  return (
    <Band rule={false} pad="$11" measure={1152} ground={FADE}>
      <Head
        title="One API in front of all of them"
        lede={
          <>
            The connectors are the product. Each is a real implementation of one processor&rsquo;s
            API, kept behind a single interface so your side never learns their differences.
          </>
        }
      />

      {/* One column on a phone, five from `$lg` — a fixed `columns={5}` never
          collapses and the code panel runs off the side. */}
      <Box
        display="grid"
        gridTemplateColumns="minmax(0,1fr)"
        gap="$6"
        mb="$10"
        $lg={{ gridTemplateColumns: 'repeat(5, minmax(0,1fr))' }}
      >
        <Box $lg={{ gridColumn: 'span 2' }} minW={0} display="flex">
        <XStack
          render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}
          grow={1}
        >
          <Tile flex={1}>
            <Disc>
              <Plug size={24} />
            </Disc>
            <Title render="h3" quiet mb={16}>Pre-built Integrations</Title>
            <Body mb={24}>
              Hundreds of pre-built integrations with popular services, including:
            </Body>
            <Grid columns={{ min: 92, max: 3 }} gap={12}>
              {PARTNERS.map((name) => (
                <Words key={name} render="div" display="block" py="$2" px="$3" rounded="var(--radius-md)" bg="var(--neutral-800)" fontSize="$2" lineHeight="var(--leading-sm)" align="center" color="color-mix(in oklab, var(--foreground) 80%, transparent)">
                  {name}
                </Words>
              ))}
            </Grid>
            <Body mt={16} fontSize="$2" lineHeight="var(--leading-sm)" align="center">
              And many more via the Hanzo App Marketplace
            </Body>
          </Tile>
        </XStack>
        </Box>

        <Box $lg={{ gridColumn: 'span 3' }} minW={0} display="flex">
        <XStack
          render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }} />}
          grow={1}
        >
          <Tile flex={1} p={0} overflow="hidden">
            <Box p="$5" borderBottomWidth={1} borderColor="var(--neutral-800)">
              <Title render="h3" quiet mb={8}>The processor is not in your code</Title>
              <Body>
                You ask for a payment. Which company took it is an answer, not an argument.
              </Body>
            </Box>
            <Box maxH={300} overflowX="auto" overflowY="auto">
              {sample}
            </Box>
            <XStack p="$4" items="center" borderTopWidth={1} borderColor="var(--neutral-800)">
              <More href={`${DOCS}/docs/openapi`} fontSize="$2" lineHeight="var(--leading-sm)">API Reference</More>
            </XStack>
          </Tile>
        </XStack>
        </Box>
      </Box>

      <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>
        ))}

        <XStack render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }} />}>
          <Tile flex={1} display="flex" flexDirection="column" justify="space-between">
            <div>
              <Heading>Explore Our APIs</Heading>
              <Body mb={16}>
                Get started with quickstart guides, examples, and developer tools.
              </Body>
            </div>
            <Action href={`${DOCS}/docs/openapi`} fill width="100%" justify="center">
              API Reference
            </Action>
          </Tile>
        </XStack>
      </Grid>
    </Band>
  );
};

export default Integrations;